David Slack - Web developer

How good are siblings? I've just got 390 lines of code down to 20! They're very good!!

I've been playing with jQuery for a website I'm doing and I'd had to move one element to another element and fade it in. I had to do this 94 times.

To do this I gave each element an ID and used that to move and fade in on a mouse over to another element. I was going to use vanilla javascript within php and loop all the elements.

Because I had jQuery on the page I desided to use that, but I used it in the same way I'd use vanilla javascript so move and fade each ID. Unfortunatley, this took 390 lines just for the javascript! To do it I did this for each element and I worked fine: 

{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }$("#idElementID-75").hover(function(){$("#idVideoElementID-75").fadeIn(1);},function(){$("#idVideoElementID-75").fadeOut(1);}); $("#idVideoElementID-75").position({my: "left top", at: "right top", of: "#idElementID-75"});{/syntaxhighlighter}

Today, I had a look at changing my script to use siblings in jQuery. I got it down to one script using classes and siblinds to do all the elements in one go like:

{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; } $(document).ready(function() { /** * On every mouse over of every element we check if * it is in correct place (next to its element). If * it's not we move it to the correct place then we * fade it in. * On mouse out we fade it out. */ $("div.clElementContainer a.clElement").hover( function() { if($(this).siblings(".clVideoElement").css('left') == '0px') // If the left is 0 { // Move the element to the correct place $(this).siblings(".clVideoElement").position( { my: "left top", at: "right top", of: $(this) }); } $(this).siblings(".clVideoElement").fadeIn(1); // Fade in the element }, function() { $(this).siblings(".clVideoElement").fadeOut(1); // Fade out the element } ); });{/syntaxhighlighter}