could any one check my jquery code [duplicate]

Question

Possible Duplicate:
is there a way to write this shorter

I have a great request for my more experienced colleagues, I wrote example code which acts on svg objects, this is not all code, just piece of it. I'm sure I could do it shorter and faster, if someone could check my code and write tips how it could be more optimized.

HTML

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title></title>
    <meta name="description" content="">
    <meta name="author" content="">

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <link rel="stylesheet" href="css/style.css">

    <script src="js/libs/modernizr-2.0.min.js"></script>
    <script src="js/libs/respond.min.js"></script>
</head>
<body>

<svg version="1.1" id="pietra_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="628px" height="274px" viewBox="0 0 628 274" enable-background="new 0 0 628 274" xml:space="preserve">

        <g id="p5">  
            <polygon id="b" points="23.666,131.667 62.333,109 62.333,105 234.333,0 407,102 407,108.334 
                419,114.667 419.333,131.334 411.333,131.334 400.666,126 247.333,50 127.553,106.612 64.667,136.334 51,133 24.166,147.167 "/>
            <polygon id="a" points="400.333,130 400.333,146.667 427.666,160.5 467,158.834 
                529.666,189.834 529.666,196.501 544.666,196.501 583.333,216.167 586.333,216.167 621,233.167 627.666,233.167 627.666,225.5 
                592.25,204.5 583,198.5 553,181.584 528.5,174 528.75,169.75 469.25,133.25 419.25,138.75 "/>
        </g>
        <g id="p1_4">   
        <polygon id="p4" points="0.5,157.75 24.166,147.167 51,133 64.667,136.334 247.333,50 
            411.333,131.334 422.169,137.324 529.666,189.834 529.666,196.501 544.666,196.501 583.333,216.167 586.333,216.167 621,233.167 
            621,238.75 600,229.5 594.5,229.25 419.333,160.5 239.25,89.75 179.5,112.75 174.75,111 71.75,153 45.75,151.5 0.5,173.125 "/>
        <polygon id="p3" points="0.5,173.125 45.75,151.5 71.75,153 174.75,111 179.5,112.75 239.25,89.75 
            594.5,229.25 600,229.5 621,238.75 621,249.5 600,242.75 594.25,243.25 255,143.25 72,184 41.25,187.5 0.5,202.5 "/>
        <polygon id="p2" points="0.5,202.5 41.25,187.5 72,184 255,143.25 594.25,243.25 600,242.75 621,249.5 
            621,263.25 600.5,258.5 594.5,258.25 254.75,192 73,218.75 42.25,220.75 0.5,231.5 "/>
        <polygon id="p1" points="0.5,231.5 42.25,220.75 73,218.75 254.75,192 594.5,258.25 600.5,258.5 621,263.25 
            621,274 254.75,241.5 42.5,255.75 0.5,263.25 "/>
        </g>

</svg>
            </div>

            <div id="okno_p1" class="okno">
            <h3>Piętro I</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.</p>    
            </div>

            <div id="okno_p2" class="okno">
            <h3>Piętro II</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.</p>    
            </div>

            <div id="okno_p3" class="okno">
            <h3>Piętro III</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.</p>    
            </div>

            <div id="okno_p4" class="okno">
            <h3>Piętro IV</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.</p>    
            </div>

            <div id="okno_p5" class="okno">
            <h3>Piętro V</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.</p>    
            </div>

            <div id="apla_p1" class="apla">
            <div class="close"></div>
            <h4>piętro i : wybierz lokal</h4>
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="827px"
     height="391px" id="pietro_1" viewBox="0 0 827 391" enable-background="new 0 0 827 391" xml:space="preserve">
<a xlink:href="pdf/p1b7.pdf">
    <g id="p1b7">
        <path opacity="0.5" fill="#F9EDA1" d="M72.333,119l60.333,7v1.667H139v24h-35.667L102.667,157c0,0-5.333,0.333-5.333,5.333
            S97,177.667,97,177.667H61.333C61.333,177.667,63.333,158.333,72.333,119z"/>
    </g>
</a>
<a xlink:href="pdf/p1b8.pdf">
    <g id="p1b8">
        <path opacity="0.5" fill="#F9EDA1" d="M139,151.667v26h-33.333V163c0,0,0,0-3-6c0.462-3.692,0.667-5.333,0.667-5.333H139z"/>
    </g>
</a>
<a xlink:href="pdf/p1b9.pdf">   
    <g id="p1b9">
        <polygon opacity="0.5" fill="#F9EDA1" points="105.667,177.667 105.667,212.667 132.667,212.667 132.667,202.5 139,202.5 
            139,182.833 133.333,182.833 133.333,177.667     "/>
    </g>
</a>
<a xlink:href="pdf/p1b6.pdf">
    <g id="p1b6">
        <polygon opacity="0.5" fill="#F9EDA1" points="97,177.667 97,212.667 64,212.667 64,207.667 72,177.667    "/>
    </g>
</a>
<a xlink:href="pdf/p1b5.pdf">
    <g id="p1b5">
        <polygon opacity="0.5" fill="#F9EDA1" points="64,212.667 57.25,212.667 57.25,249.25 97,249.25 97,212.667    "/>
    </g>
</a>    
<g id="p1k1">
    <rect x="105.667" y="212.667" opacity="0.5" fill="#F9EDA1" width="25.083" height="27.833"/>
</g>
<a xlink:href="pdf/p1b1.pdf">
    <g id="p1b1">
        <polygon opacity="0.5" fill="#F9EDA1" points="130.75,212.667 139,212.667 139,205.25 166,205.25 166,212.667 167.75,212.667 
            167.75,240.5 130.75,240.5   "/>
    </g>
</a>
<a xlink:href="pdf/p1b2.pdf">   
    <g id="p1b2">
        <polygon opacity="0.5" fill="#F9EDA1" points="167.75,212.667 205.25,212.667 205.25,259.75 202.25,259.75 202.25,267.75 
            184.25,267.75 184.25,260.25 167.75,260.25   "/>
    </g>
</a>
<a xlink:href="pdf/p1b4.pdf">   
    <g id="p1b4">
        <polygon opacity="0.5" fill="#F9EDA1" points="57.25,249.25 57.25,286.5 92.25,286.5 92.25,289.5 101.75,289.5 101.75,294.75 
            130.75,294.75 130.75,249.25     "/>
    </g>
</a>
<a xlink:href="pdf/p1b3.pdf">   
    <g id="p1b3">
        <polygon opacity="0.5" fill="#F9EDA1" points="130.75,249.25 167.75,249.25 167.75,279 173,279 173,276 177,276.031 177,279.031 
            181.25,279 181.25,287.875 177,287.875 177,290.25 173,290.25 173,287.813 156,287.813 156,290.25 149.25,290.25 149.25,287.75 
            130.75,287.75   "/>
    </g>
</a>    
</svg>
            </div>
            <div id="apla_p2" class="apla">
            <div class="close"></div>
            <h4>piętro ii : wybierz lokal</h4>
            </div>
            <div id="apla_p3" class="apla">
            <div class="close"></div>
            <h4>piętro iii : wybierz lokal</h4>
            </div>
            <div id="apla_p4" class="apla">
            <div class="close"></div>
            <h4>piętro iv : wybierz lokal</h4>
            </div>
            <div id="apla_p5" class="apla">
            <div class="close"></div>
            <h4>piętro v : wybierz lokal</h4>
            </div>

    </div>

    </div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>

<script src="js/script.js"></script>
<script>
    var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']]; // Change UA-XXXXX-X to be your site's ID
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
    g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
    s.parentNode.insertBefore(g,s)}(document,'script'));
</script>

<!--[if lt IE 7 ]>
    <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script>
    <script>window.attachEvent("onload",function(){CFInstall.check({mode:"overlay"})})</script>
<![endif]-->

</body>
</html>

JQUERY

    // hover on svg polygon
    $('#pietra_svg #p1_4 polygon').hover(function() {
      $(this).css('fill-opacity','0.5');
    },
    function () {
      $(this).css('fill-opacity','0');
    });

    $('#pietra_svg #p5 polygon').hover(function() {
      $('#a, #b').css('fill-opacity','0.5');
    },
    function () {
      $('#a, #b').css('fill-opacity','0');
    });




    // hover on svg polygon showing div with window - 5 floors - 5 difrent divs with window
    $('#pietra_svg #p1_4 polygon#p1').hover(function() {
      $('#okno_p1').stop(true, true).css("display", "block");
    },
    function () {
      $('#okno_p1').stop(true, true).css("display", "none");
    });

    $('#pietra_svg #p1_4 polygon#p2').hover(function() {
      $('#okno_p2').stop(true, true).css("display", "block");
    },
    function () {
      $('#okno_p2').stop(true, true).css("display", "none");
    });

    $('#pietra_svg #p1_4 polygon#p3').hover(function() {
      $('#okno_p3').stop(true, true).css("display", "block");
    },
    function () {
      $('#okno_p3').stop(true, true).css("display", "none");
    });

    $('#pietra_svg #p1_4 polygon#p4').hover(function() {
      $('#okno_p4').stop(true, true).css("display", "block");
    },
    function () {
      $('#okno_p4').stop(true, true).css("display", "none");
    });

    $('#pietra_svg #p5 polygon#a, #pietra_svg #p5 polygon#b').hover(function() {
      $('#okno_p5').stop(true, true).css("display", "block");
    },
    function () {
      $('#okno_p5').stop(true, true).css("display", "none");
    });



    //showing div with big window with svg objects - 5 floors - 5 divs        
    $('#pietra_svg #p1_4 polygon#p1').click(function() {
      $('#apla_p1').fadeIn("slow");
      return false;
    });
    $('#pietra_svg #p1_4 polygon#p2').click(function() {
      $('#apla_p2').fadeIn("slow");
      return false;
    });
    $('#pietra_svg #p1_4 polygon#p3').click(function() {
      $('#apla_p3').fadeIn("slow");
      return false;
    });
    $('#pietra_svg #p1_4 polygon#p4').click(function() {
      $('#apla_p4').fadeIn("slow");
      return false;
    });
    $('#pietra_svg #p5 polygon#a').click(function() {
      $('#apla_p5').fadeIn("slow");
      return false;
    });
    $('#pietra_svg #p5 polygon#b').click(function() {
      $('#apla_p5').fadeIn("slow");
      return false;
    });
    $('.close').click(function() {
      $('.apla').fadeOut("slow");
      return false;
    });



    // hover on svg polygons in big div window
    $('#p1b7').hover(function() {
      $('.apla h4').stop(true, true).text("piętro i : mieszkanie nr. 7, 4 pokoje");
    },
    function () {
      $('.apla h4').stop(true, true).text("piętro i : wybierz lokal");
    });

    $('#p1b8').hover(function() {
      $('.apla h4').stop(true, true).text("piętro i : mieszkanie nr. 8, 1 pokoje");
    },
    function () {
      $('.apla h4').stop(true, true).text("piętro i : wybierz lokal");
    });

    $('#p1b9').hover(function() {
      $('.apla h4').stop(true, true).text("piętro i : mieszkanie nr. 9, 2 pokoje");
    },
    function () {
      $('.apla h4').stop(true, true).text("piętro i : wybierz lokal");
    });

    $('#p1b6').hover(function() {
      $('.apla h4').stop(true, true).text("piętro i : mieszkanie nr. 6, 2 pokoje");
    },
    function () {
      $('.apla h4').stop(true, true).text("piętro i : wybierz lokal");
    });

    $('#p1b5').hover(function() {
      $('.apla h4').stop(true, true).text("piętro i : mieszkanie nr. 5, 2 pokoje");
    },
    function () {
      $('.apla h4').stop(true, true).text("piętro i : wybierz lokal");
    });

    $('#p1k1').hover(function() {
      $('.apla h4').stop(true, true).text("piętro i : klatka schodowa");
    },
    function () {
      $('.apla h4').stop(true, true).text("piętro i : wybierz lokal");
    });

    $('#p1b1').hover(function() {
      $('.apla h4').stop(true, true).text("piętro i : mieszkanie nr. 1, 2 pokoje");
    },
    function () {
      $('.apla h4').stop(true, true).text("piętro i : wybierz lokal");
    });

    $('#p1b2').hover(function() {
      $('.apla h4').stop(true, true).text("piętro i : mieszkanie nr. 2, 3 pokoje");
    },
    function () {
      $('.apla h4').stop(true, true).text("piętro i : wybierz lokal");
    });

    $('#p1b4').hover(function() {
      $('.apla h4').stop(true, true).text("piętro i : mieszkanie nr. 4, 4 pokoje");
    },
    function () {
      $('.apla h4').stop(true, true).text("piętro i : wybierz lokal");
    });

    $('#p1b3').hover(function() {
      $('.apla h4').stop(true, true).text("piętro i : mieszkanie nr. 3, 2 pokoje");
    },
    function () {
      $('.apla h4').stop(true, true).text("piętro i : wybierz lokal");
    });

possible duplicate of is there a way to write this shorter or how can i write this shorter
Asking questions is fine gidzoir, but you have to show some effort in actually understanding the answers and applying them. As James pointed out above, you have asked two very similar questions already, and the answers are almost identical. This leads me to believe you just want someone to refactor this for you without actually trying it yourself.

kht · Answer 1 · 2011-11-08 05:01:52Z

You should probably start by trying not to repeat similar functionality.

A function to initialize the hover event could be created

function hoverObject(element)  {
    // do stuff here that is common to all your hover events
}

You can then call the function repeatedly by looping over a defined range; say p1 to p5.

for (i=0;i<=5;i++) {
    hoverObject('p'+i);
}

asked	1 year ago
viewed	93 times
active	1 year ago

could any one check my jquery code [duplicate]

marked as duplicate by James Khoury, Quentin Pradet, Larry Battle, Danny Kirchmeier, mseancole Oct 17 '12 at 15:37

1 Answer

Not the answer you're looking for? Browse other questions tagged jquery optimization or ask your own question.

Community Bulletin

Linked

could any one check my jquery code [duplicate]

marked as duplicate by James Khoury, Quentin Pradet, Larry Battle, Danny Kirchmeier, mseancole Oct 17 '12 at 15:37

1 Answer

Not the answer you're looking for? Browse other questions tagged jquery optimization or ask your own question.

Community Bulletin

Linked

Related