Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hide/Unhide divs with Hover?

    So I'm making a calendar for my site, and each day has its own specific div (that is hidden) with events, etc, for that day. On mousing over the calendar cell, I'd like for it to unhide this div, and on mousing out re-hide it. The problem (inconvenience) is, I'd have to put onMouseOver and onMouseOut attributes on each day's span. I was wondering if there might be a way to do this from hover or something else I could do without making my code ugly with all that mess. The URL's http://combustiblepancreas.net/test.html if you wanna see.

    P.S. I know hovers don't work right in I.E., I haven't implemented a fix for it yet. Right now I'm just designing for firefox, later i'll fix it for I.E.

  • #2
    Regular Coder PremiumBlend's Avatar
    Join Date
    Apr 2006
    Location
    Marion, Iowa
    Posts
    201
    Thanks
    0
    Thanked 13 Times in 13 Posts
    If I were to go about this I would use JavaScript because I wouldn't want to mess with the IE hover fix. There is a nice function of the DOM called getElementsByName().

    I would use that, then a script to loop through all of those elements adding an 'onmousever' and 'onmouseout' event to the object. That way your HTML code doesn't require a typed definition of each event. Check out these links:

    http://www.quirksmode.org/js/events_tradmod.html
    http://brainjar.com/dhtml/events/
    My Website: DumpsterDoggy

  • #3
    New Coder
    Join Date
    May 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thank ye kindly for that

  • #4
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    well here's the bug fix for IE rollover which I have used extensively.

    Code:
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    
    sfHover = function() {
    	var sfEls = document.getElementById("mainnav").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    //--><!]]></script>
    The if you used hover to move the item rather than make it appear and disappear, would that help out a bit? So dy default the 'flyout' would be, left : 999px; and on hover, positioned relatively. The it would work even if JS was disabled.

    hth

    bazz


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •