2
\$\begingroup\$

I am currently working on my YR9 (I'm 14) IST web development project and I want to know some tricks for optimizing my website.

I know that I shouldn't have the same CSS rules in the style tag on every page (something I will fix), but my JavaScript seems to have a slow response on the "gallery" page.

http://htmlforschool.netau.net

<!DOCTYPE html>
<html id="0">
    <head>
        <link rel="icon" href="favicon.png">
        <meta charset="UTF-8">
        <title>Home | Graphic Ape Designs</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">
        </script>
       <style>
            body {
                font-family: sans-serif;
                background-color: #81bac1;
            }
            #main {
                margin-left: 220px;
            }
            #main h1 {
                text-align: center;
               
            }
            .sidebar {
                text-align: center;
                border: 2px solid #d7f2ec;
                width: 200px;
                height: 95.68vh;
                float: left;
                padding: 3px;
                position:fixed;
                top: 3;
                left: 8;
                background-color:#6caca2;
                opacity: 0.8;
            }
            .sidebar a {
                position:relative;
                color: lightgrey;
                background-color: #5e7274;
                text-decoration: none;
                font-weight: bold;
                display: block;
                margin: 0 auto;
                margin-top: 8px;
                width: 90%;
                border: 3px solid #a3d2d8;
                padding: 5px 0px 5px 0px;
                opacity: 0.8;
            }
            .sidebar a:hover {
                top: 2px;
            }
            #footer {
                background-color: #5e7274;
                color: lightgrey;
                text-align: center;
                padding: 5px;
                font-family: monospace;
                border: 2px solid #a3d2d8;
                clear:both;
                max-height: 70px;
                margin-bottom: 5px;
            }
           #subhead {
               color: #7b6d6d;
               font-size: 20px;
               font-style: italic;
               font-weight: 100;
           }
           #display {
               width:300px;
               margin: 0 auto;
               display: block;
           }
           .imagelist {
               padding: 15px 15px 0px 15px;
               border: 2px solid black;
                width: 90%;
                margin-left: auto; 
                margin-right: auto;
                 text-align: justify;
                -ms-text-justify: distribute-all-lines;
                text-justify: distribute-all-lines;
            }
            .imagelist img {
                opacity: 0.8;
                border: 2px solid black;
                background-color: #70abb2;
                padding: 5px;
                height: 200px;
                display: inline-block;
            }
            .stretch {
                width: 100%;
                display: inline-block;
                font-size: 0;
                line-height: 0
            }
        </style>
    </head>
    <body>
        <div class="sidebar">
            <h3>Navigation</h3>
            <a href="home.html">Home</a>
            <a href="order.html">Order</a>
            <a href="Contact.html">Contact</a>
            <a href="#">Gallery</a>
        </div>
        <div id="main">
            <h1>Graphic Ape Designs<br><span id="subhead"> Gallery</span></h1>
            <img id="display" src="1.png">
            <div class="imagelist">
                <img src="1.png">
                <img src="2.png">
                <img src="3.png">
                <span class="stretch"></span>
            </div>
            <input value="Next >" type="button" onclick="gal2()">
            <!-- Footer Begin -->
            <br><br>
            <div id="footer">
                <p>&copy; COPYRIGHT 2016 "graphicapedesigns.biz"</p>
            </div>
        </div>
        <script>
            $(".sidebar").mouseleave(function(){
               $(this).fadeTo(200, 0.8); 
            });
             $(".sidebar").mouseenter(function(){
               $(this).fadeTo(300, 1); 
            });
            $(".sidebar a").mouseleave(function(){
               $(this).fadeTo(200, 0.8); 
            });
             $(".sidebar a").mouseenter(function(){
               $(this).fadeTo(200, 1); 
            });
            $(".imagelist img").mouseleave(function(){
               $(this).fadeTo(200, 0.8); 
            });
             $(".imagelist img").mouseenter(function(){
               $(this).fadeTo(200, 1); 
            });
            $(".imagelist img").mouseenter(function(){
                $("#display").attr('src', $(this).attr('src'));
            });
            
            function gal2(){
                var amount = $(".imagelist > img").length;
                var current = parseInt($("#display").attr('src').replace('.png', ''));
                var next = current + 1;
                if (current < amount) {
                    $("#display").attr('src', next+".png");
                } else {
                    $("#display").attr('src', "1.png");
                };
            };
        </script>
        
    </body>
</html>

\$\endgroup\$
0
2
\$\begingroup\$

Queued jquery animations

When you quickly swipe your mouse back and forth over your navigation links, you'll notice that they continue flashing after you've stopped the swiping. This is because the jquery animations are getting queued up from each mouse enter event. To prevent this you could add a call to .stop() to each of your animations:

$(".sidebar").mouseleave(function(){
  $(this).stop().fadeTo(200, 0.8); 
});
$(".sidebar").mouseenter(function(){
  $(this).stop().fadeTo(300, 1); 
});
// and so on ...

Another thing you could to do fix this is to use...

CSS3 Animations

I'm not experiencing the slow response you mentioned, but jquery animations can be slower than other animation options. Try using CSS3 animations to see if that fixes your slow response:

/* CSS3 Animation */
.greydout {
  -webkit-opacity: 0.50;
  -moz-opacity: 0.50;
  opacity: 0.70;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.greydout:hover {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}


/* Your CSS */
body {
  font-family: sans-serif;
  background-color: #81bac1;
}

#main {
  margin-left: 220px;
}

#main h1 {
  text-align: center;
}

.sidebar {
  text-align: center;
  border: 2px solid #d7f2ec;
  width: 200px;
  height: 95.68vh;
  float: left;
  padding: 3px;
  position: fixed;
  top: 3;
  left: 8;
  background-color: #6caca2;
  /* note that opacity was removed to eliminate possible conflict */
}

.sidebar a {
  position: relative;
  color: lightgrey;
  background-color: #5e7274;
  text-decoration: none;
  font-weight: bold;
  display: block;
  margin: 0 auto;
  margin-top: 8px;
  width: 90%;
  border: 3px solid #a3d2d8;
  padding: 5px 0px 5px 0px;
  /* note that opacity was removed to eliminate possible conflict */
}

.sidebar a:hover {
  top: 2px;
}

#footer {
  background-color: #5e7274;
  color: lightgrey;
  text-align: center;
  padding: 5px;
  font-family: monospace;
  border: 2px solid #a3d2d8;
  clear: both;
  max-height: 70px;
  margin-bottom: 5px;
}

#subhead {
  color: #7b6d6d;
  font-size: 20px;
  font-style: italic;
  font-weight: 100;
}

#display {
  width: 300px;
  margin: 0 auto;
  display: block;
}

.imagelist {
  padding: 15px 15px 0px 15px;
  border: 2px solid black;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

.imagelist img {
  /* note that opacity was removed to eliminate possible conflict */
  border: 2px solid black;
  background-color: #70abb2;
  padding: 5px;
  height: 200px;
  display: inline-block;
}

.stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0
}
<div class="sidebar greydout">
  <h3>Navigation</h3>
  <a class="greydout" href="home.html">Home</a>
  <a class="greydout" href="order.html">Order</a>
  <a class="greydout" href="Contact.html">Contact</a>
  <a class="greydout" href="#">Gallery</a>
</div>
<div id="main">
  <h1>Graphic Ape Designs<br><span id="subhead"> Gallery</span></h1>
  <!-- Footer Begin -->
  <br>
  <br>
  <div id="footer">
    <p>&copy; COPYRIGHT 2016 "graphicapedesigns.biz"</p>
  </div>
</div>

There are a few things you need to pay attention to here. First, these animations replace your jquery's fadeTo mouse enter events, so you can eliminate that code. Second, to make something fade in, you just add the gredout class to the desired HTML elements. Third, you may run into css conflicts if other classes set their own opacity; to prevent the conflict, remove that attribute or consider using !important or some other form of specificity.

There are several benefits to using this technique instead. Now your javascript code doesn't need to concern itself with basic animation of HTML elements, which is more of a styling effect. All the code for the animations is in the CSS, and you can easily add the animation class to other elements in your HTML without being concerned if they've been removed or renamed.

However there are a few downsides as well. You'll have less control over differences between your elements since they all adhere to one class. You can overcome this by adding more animation classes.

Good luck with your project!

\$\endgroup\$
1
  • \$\begingroup\$ Thanks, I didn't know about animation with CSS3 but I'll look into it. Thanks for the tips, it helped a whole bunch. \$\endgroup\$ May 25 '16 at 22:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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