4

I'm using this div fadeTo code from here, which fades one of two divs, depending on hover.

What I'd like to do it add a third option - and a third div called #maindiv - in this way: "If hovering over #maindiv, don't fade either #sidebar or #primarycontainter, but if hovering over #sidebar or #primarycontainter, then fade either of those (depending on hover), but don't fade #maindiv."

How would I do that (with another else statement?) while keeping the existing else statement that keeps IE6 from using any of the code? Thanks....

Edit 2/3/10: Is there a different method of handling this because of the three divs? Is a callback needed, or someway to refresh the function, as the code below results in inconsistent fadeTo action?

$(document).ready(function(){

    if ($.browser.version = jQuery.browser.msie &&
        parseInt(jQuery.browser.version) == 6) {
    } else {

        $("#sidebar").fadeTo('fast', 0.5);
        $("#sidebar").hover(function(){
                $(this).stop().fadeTo('fast', 1);
                $("#primarycontainer").stop().fadeTo('fast', 0.5);
            },function(){
                $(this).stop().fadeTo('fast', 0.5);
                $("#primarycontainer").stop().fadeTo('fast', 1);
            }
        );
    }
});

Edit 2/09/10:

Ed Woodcock's answer below works, with a slight modification (of my choosing) in my comments to his answer.

This is the CSS in question:

<body>

<div id="outerdiv" div style="position: relative;">

<div id="maindiv" div style="position:relative;">Lorem ipsum dolor sit amet.</div>

<div id="content">      

<div id="primary" div style="float: left; margin-right: -20.0em; width: 100%;">
<div id="primarycontainer" div style="margin-right: 16.0em;">

<p>Lorem ipsum dolor sit amet.<p>

</div></div>

<div id="sidebar" div style="float: right; width: 15.0em;">Lorem ipsum dolor sit amet.</div>

</div></div>

</html>
</body>
markratledge
  • 17,322
  • 12
  • 60
  • 106
  • 1
    Where is maindiv? When you say 'fade', I'm not sure if you're talking about fading in or out. Hard to tell what you're talking about without knowing your layout. A scaled down example that includes html and css helps. A stab in the dark would be to have #maindiv have its own hover that fires the fade events for sidebar and primarycontainer, but again, there's just not enough info to work with here. – user113716 Feb 01 '10 at 17:44
  • 1
    You need to learn the difference between hovering in and out and fading in and out. As long as you can't tell the difference people won't be able to help you. – aefxx Feb 06 '10 at 14:41

3 Answers3

5

This should do the trick, it's hardly elegant but it shouldn't be too hard to refine it:

    $(document).ready(function() {

        if ($.browser.version = jQuery.browser.msie &&
    parseInt(jQuery.browser.version) == 6) {
        } else {
            $("#sidebar").fadeTo('fast', 0.5);
            $("#maindiv").hover(function() {
                /// The below line is what I just changed, putting the fadeTo() value
                /// to 0.5 causes the divs to fade out to be translucent.
                $("#primarycontainer,#sidebar").stop().fadeTo('fast', 0.5);
            }, function() {
                $("#sidebar").stop().fadeTo('fast', 0.5);
                $("#primarycontainer").stop().fadeTo('fast', 1);
            });

            $("#sidebar").hover(function() {
                $(this).stop().fadeTo('fast', 1);
                $('#primarycontainer').stop().fadeTo('fast', 0.5);
            }, function() {
                $(this).stop().fadeTo('fast', 0.5);
                $('#primarycontainer').stop().fadeTo('fast', 1);
            });
        }
    });

EDIT

Ok, I get the feeling you've miscommunicated your intentions here:

This code will:

  • Fade #sidebar and #primarycontainer alternately on hover, with the container that is being hovered becoming completely opaque and the div that is not being hovered becoming translucent.
  • Make #sidebar translucent when nothing is being hovered
  • Make both #sidebar and #primarycontainer completely opaque when #maindiv is hovered over

if that is not what you're trying to achieve, then alter the question slightly and I'll sort the code to do what you ask. As for #maindiv doing odd behaviour, it's most likely a quirk in your html or css, the jQuery code is sound.

Ed James
  • 10,385
  • 16
  • 71
  • 103
  • Closer; this alternately fades sidebar and primarycontainer when hovering, but on maindiv hover, it only fades sidebar, and only when hovering outside the bounds of maindiv.... – markratledge Feb 05 '10 at 03:34
  • Thanks for your help. Going back over all this I've discovered my brain must have been preempted by work, a rather cold Montana winter and learning php and mysql at the same time. What I'd like to do is have is #sidebar and #primarycontainer alternately be translucent when the other is hovered, like they do right now. But it would be great to have both of those be translucent when #maindiv is hovered over, not just #sidebar. So that's clearer in my mind. I've added my CSS above. I wonder if the fact that the divs are in different overall containers will matter? – markratledge Feb 08 '10 at 04:11
  • No, that HTML should work fine. I'll just switch the code out so they both go translucent when maindiv is hovered, and make a note of where I did that – Ed James Feb 08 '10 at 09:06
  • Works! Thanks. I'm learning, slowly. I changed the second function to `$("#primarycontainer, #sidebar").stop().fadeTo('fast', 1);` to make both #primarycontainer and #sidebar be translucent on #maindiv hover. – markratledge Feb 10 '10 at 03:45
1
$(document).ready(function(){

    if ($.browser.version = jQuery.browser.msie &&
        parseInt(jQuery.browser.version) == 6) {
    } else {

        // Set up hover behavior for #maindiv
        // When #maindiv is hovered, it will effect both 
        // #primarycontainer & #sidebar

        $("#maindiv").hover(function(){
                $("#primarycontainer,#sidebar").fadeTo('fast', 0.5);
            },function(){
                $("#primarycontainer,#sidebar").fadeTo('fast', 1);
            }
        );

        // Set up hover behaviors for #primarycontainer & #sidebar
        // When either #primarycontainer or #sidebar is hovered
        // it will effect the element which is being hovered

        $("#primarycontainer,#sidebar").hover(function(){
                $(this).fadeTo('fast', 0.5);
            },function(){
                $(this).fadeTo('fast', 1);
            }
        );
    }
});
jessegavin
  • 74,067
  • 28
  • 136
  • 164
  • That's pretty close, but what it does is "bounce" between primarycontainer and sidebar when hovering over primarycontainer and then stop altogether. So I'm guessing that there needs to a callback or refresh to get the function to stay active? – markratledge Feb 01 '10 at 20:02
1

Not very tricky but works (if I well understand your wish) :

$("#maindiv").hover(function(){
          $("#primarycontainer, #sidebar").stop().fadeTo('fast', 1);
        },function(){

          $("#sidebar").bind('mouseover',function(){
            $(this).stop().fadeTo('fast', 1);
            $("#primarycontainer").stop().fadeTo('fast', 0.5);
          });

          $("#primarycontainer").bind('mouseover',function(){
            $(this).stop().fadeTo('fast', 1);
            $("#sidebar").stop().fadeTo('fast', 0.5);
          });
        });
Alysko
  • 327
  • 1
  • 3
  • 11