JQuery Adventure
My first venture in writing my own jQuery was actually quite painless. After visiting the jQuery website and downloading the script, it was fairly smooth sailing from there. Let me digress onto what led me to using jQuery.
It was a nice quiet day in the land of Denver, Colorado as the rain had finally decided to grace us with its presence. After securing myself a seat at my workstation for one of my clients, I pulled up a “re-designing” program. This said website was developed a long time ago by someone using FrontPage. If you look at the site right now, you’ll be able to see that the website is quite old. The project doesn’t entail me changing any of the design elements, but basically make it look at little more modern and more accessible. I’m accomplishing this by taking all the tables out of the code. This is one of the messiest table schemes I’ve seen.
Needless to say. Removing these tables has greatly simplified the site and made it much easier to edit.
The biggest issue that I had was with the navigation. It is using a JavaScript rollover effect from FrontPage, and while it works, it is highly inefficient. It’s using almost 50 different images, and the navigation doesn’t use any text, so it isn’t optimized for disciplines such as SEO (Search Engine Optimization). I fixed these issues, but it took a little time to figure out how to implement a solution since it was my first venture with jQuery.
This was the button syntax before:
[cc escaped=”true” lang=”html4strict”]
<img border=”0″ id=”img26″ src=”images/Nav%20Buttons/button50.jpg” height=”20″
width=”100″ alt=”Home”
onmouseover=”FP_swapImg(1,0,/*id*/’img26′,/*url*/’images/Nav%20Buttons/button51.jpg’)”
onmouseout=”FP_swapImg(0,0,/*id*/’img26′,/*url*/’images/Nav%20Buttons/button50.jpg’)”
onmousedown=”FP_swapImg(1,0,/*id*/’img26′,/*url*/’images/Nav%20Buttons/button52.jpg’)”
onmouseup=”FP_swapImg(0,0,/*id*/’img26′,/*url*/’images/Nav%20Buttons/button51.jpg’)”
fp-style=”fp-btn: Braided Column 2; fp-justify-horiz: 0; fp-bgcolor: #F4EECC” fp-title=”Home”>
[/cc]
This used a javascript code that is difficult to follow, and makes any editing difficult to do. This also doesn’t allow for the use of text in the navigation!
[cc escaped=”true” lang=”javascript”]
<!–
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
// –>
[/cc]
As you can see, it’s not the easiest code to follow, even if you’re familiar with javascript and how nested for loops work. Not to mention that, but there is a ton of overhead in different images and you have to make sure you keep track of all your different “id” designations because they are statically connected. There is a much easier solution, and using the treehouse member network, I finally gathered the courage to delve into learning a little bit of jQuery. I didn’t realize how easy jQuery was until I went to the site downloaded it, and then wrote my own code. The first thing I did was consolidate the menu into an unordered list.
Here is the list: [cc escaped=”true” lang=”html4strict”]
<nav>
<ul class=”navlist”>
<li class=”menuitem”><a href=”index.htm” class=”navlink”>Home</a></li>
<li class=”menuitem”><a href=”profile.htm” class=”navlink”>Profile</a></li>
<li class=”menuitem”><a href=”areas.htm” class=”navlink”>Practice Areas</a></li>
<li class=”menuitem”><a href=”elder-links.htm” class=”navlink”>Useful Links</a></li>
<li class=”menuitem”><a href=”questions.htm” class=”navlink”>Ask John</a></li>
</ul>
<div style=”clear:both;”></div>
</nav>
[/cc]
Here is the applicable CSS for the buttons:
[cc escaped=”true” lang=”css”]
.navlist{
list-style-type: none;
width: 600px;
margin: 0 auto;
}
.menuitem{
float:left;
width: 80px;
max-width: 100px;
height: 20px;
margin: 5px 5px 5px 5px;
padding-left: 25px;
background: url(../images/Nav%20Buttons/buttonup.jpg) no-repeat;
font-family: Arial, Helvetica, Univers, ‘Zurich BT’, sans-serif;
font-size: .75em;
}
.navlink{
text-decoration: none;
font-family: Arial, Helvetica, Univers, ‘Zurich BT’, sans-serif;
color: black;
font-size: 1em;
}
[/cc]
Instead of having nearly 50 buttons, I did a little bit of Photoshop magic, and created three button backgrounds. Instead of the image being the actual button, it’s just the background of the list item. With this being said, I only had to have 3 images. One image with the up state, one with the down state, and the other with the mouse down state. The text was removed, and is now able to be read by any spiders browsing the site, as well as anyone using a screen reader to access the site. What was that word again? Oh yeah! Web Accessibility!
Now after linking up my jQuery script, I could create my very own jQuery code. Here it is below.
[cc escaped=”true” lang=”javascript”]
$(document).ready(function(){
$(“nav li”).hover(function(){
$(this).css(“background”, “url(images/Nav%20Buttons/buttonhover.jpg) no-repeat”);
},function(){
$(this).css(“background”, “url(images/Nav%20Buttons/buttonup.jpg) no-repeat”);
});
$(“nav li”).mousedown(function(){
$(this).css(“background”, “url(images/Nav%20Buttons/buttondown.jpg) no-repeat”);
});
});
[/cc]
Now the website is so much lighter, and I’m thoroughly enjoying working with this site since I got rid of the table nightmare. Now I just need to get MY company site updated! Anyway, this project is still in the works, so you can see the difference right now.
Let me know what you think in the comments below! You can also follow me here on my blog and get in touch with me on social media! @ElijahGartin @ThunderRockWeb on Twitter and you can click my other social media links on the left hand side of the screen.
Thank you for reading!