jQuery Slide and Pairing a Div’s Hover With a Div’s Slide

So this could be filed under “I did it because I can” (which is a really good mantra in science…) and am not sure I’ll use it but it is useful in the concept.

LIVE EXAMPLE HERE

The idea is to set the hover on one div to show/hide another div WITHOUT having to use some kind of id/name trick (as in setting the id to “divHide1”) and to have it be completely self setting in the .ready method. Why would this be at all useful? Say you want to roll through a list of things and generate the divs, but want to defer the jQuery until the page has loaded. And you don’t want to have to resort to:

    <div id="someDiv<%= someId %>"></div>

like structure where you parse some identifier from the id property. Mostly because you have no idea how many someDiv1s there could be on the page. It could be a highly reused name (someDiv) and that could lead to a mess.

Also the reason ‘cuz. If you have any more questions of why after that answer, well you’re just being annoying.

Anywho, here’s the actual html for structure.

   <div class="mainDiv">
      <div class="showDiv" id="oneTop">
        Kaneda?
      </div>
      <div class="slideDiv" id="one">
        What do you see?!
      </div>
    </div>
    <div class="clear"></div>

Now I get that this isn’t off a foreach, but it doesn’t take much to figure out that it’s easily made into a loop if you just loop it over and over. Why? Because first there are no ids or names so that you can’t have two of the same name and also because that chunk is self contained.

So what is going on there? Simple, you have a parent container that holds a div to hold and a div to hover over and the other that will be shown/hidden.

Here’s the styles involved just incase you care:

    <style type="text/css">
        .clear
        {
        	clear:both;
        }

        .leftDiv
        {
        	float:left;
        }

        .mainDiv
        {
        	margin:5px;
        	height:200px;
        }

        .rightDiv
        {
        	float:left;
        }

        .showDiv
        {
        	float:left;
        	margin-right:5px;
        	height:200px;
        	background-color:Silver;
        }

        .slideDiv
        {
        	background-color:Teal;
        	height:200px;
        	position:absolute;
        	float:left;
        	z-index:100;
        }
    </style>

That doesn’t entirely matter, but it does to show the div “sliding” over another div. Kind of a little somethin’ somethin’ I threw in at no extra cost. Now for the jQuery:

First the method for setting the mouse over and out events for the show div, we turn to .hover:

    function setHover(currentSlideDiv, currentStableDiv)
    {
      currentStableDiv.hover
      (
        //first parameter is the method for showing the div on mouse over
        function()
        {
          if (currentSlideDiv.is(":hidden"))
          {
            currentSlideDiv.show("slide", { direction: "left" }, 100);
          }
        },
        //second parameter is the method for hiding the div on mouse out
        function()
        {
          if (currentSlideDiv.is(":visible"))
          {
            currentSlideDiv.hide("slide", { direction: "left" }, 100);
          }
        }
      );
    };

Now for the method that actually uses these:

    //This is used to take in one of the main divs and set all the
    //show and slide divs within.
    function setChildrenDivs(mainDiv)
    {
      //get all the show and slide dvis within the main div
      var mainChildrenStableDiv = jQuery(mainDiv).children(".showDiv");
      var mainChildrenSlide = jQuery(mainDiv).children(".slideDiv");

      //loop through the list of show divs
      for (var loopCounter = 0; loopCounter < mainChildrenStableDiv.length; loopCounter++)
      {
        //Get the show div and it's corresponding slide div using the
        //two lists and the current counter.
        var currentStableDiv = jQuery(mainChildrenStableDiv[loopCounter]);
        var currentSlideDiv = jQuery(mainChildrenSlide[loopCounter]);

         //This is to make sure the slide is where it should be.
         //to the right of the show div.
         var containerPosition = jQuery(currentStableDiv).position();
         jQuery(currentSlideDiv).css({ left: containerPosition.left + currentStableDiv.width() });
        //Set the mouse over and the mouse out on the show div
        setHover(currentSlideDiv, currentStableDiv);
      }
    }

Now the final touch, the .ready method:

    jQuery(document).ready
    (
      function()
      {
        //hide all the slide divs
        jQuery(".slideDiv").hide();

        //find all the parent divs
        var mainDivs = jQuery(".mainDiv");

        //set the children
        for (var loopCounter = 0; loopCounter < mainDivs.length; loopCounter++)
        {
          setChildrenDivs(mainDivs[loopCounter]);
        }
      }
    );

And boom, now you have multiple show/hide (Slide in this instance). Now if I could just find a use for it…

Oh yeah and you’ll need jQuery 1.3.2 and jQuery ui 1.7.2 to use this. At least those are the versions I know this works with.

Update: Due to popular demand… one person… Source can be found here.