ansaurus

Question

JavaScript - onmouseover modify previous element css height

Answer 1

A:

For a start, for accessibility reasons you might want to use onFocus and onBlur, to take into account the fact that someone might not be using the mouse.

I don't know what JS you're using, but I'd nudge you toward JQuery. Docs on focus here.

Chris Cox 2010-10-16 02:22:35

Sounds like a good plan… But this is a visual trick, so I'm not worried about that too much.

Dakota 2010-10-16 20:28:06

Answer 2

+1 A:

There are several javascript libraries that will make this an easy process. One of the options is jQuery and jQuery-UI (two seperate parts).

Something like this (updated after re-reading question):

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"&gt;&lt;/script&gt;
<style type="text/css">
.big {height:250px;}
</style>
<script type="text/javascript">
    $(document).ready(function(){
        $('div.preview').each(function(){
            var curDiv = $(this);
            curDiv.hover(function(){curDiv.nextAll($('div.detail:first')).removeClass('big',1000);
            curDiv.addClass('big',1000);
            },function(){});
       });
        $('div.detail').each(function(){
            var curDiv = $(this);
            curDiv.hover(function(){curDiv.prevAll($('div.preview:first')).removeClass('big',1000);
            curDiv.addClass('big',1000);
            },function(){});
       });
    });
    </script>
    </head>
<body>
<div id="container">
<div class="preview big" style="background-color:red;width:50px;">&nbsp;</div><br>
<div class="detail" style="background-color:blue;width:50px;">&nbsp;</div>
</div>
</body>
</html>

Documentation:
jQuery hover, nextAll, prevAll
jQuery-UI addClass, removeClass

Explanation:
Once the document loads the script looks for divs with those classes and attached an OnHover handler. Inside the enter portion we are putting our add and remove classes - in this case we have one class that is the bigger size. We then use jquery to traverse the DOM to the next div with the class of detail and we add the big class to it. At the same time we remove the big class from our current div.

In add/remove classes is a duration in milliseconds option that gives the nifty look automatically.

In the detail part we do the exact same, but we traverse backwards to find the first preview div.

This works smoothly on Chrome, but on IE7 its slow - mainly because of IEs javascript engine.

WSkid 2010-10-16 02:42:33

I get what's going on there, but it's way sketchy in Safari5. If you navigate to http://memeshirtz.com/shop/ I've got it working with purely CSS, but only for hover over the top div. CSS's lack of an inverse of the + operator is killing me. BTW, I'm not worried about IE7 support too much. if it works, great; if not, too bad.

Dakota 2010-10-16 20:27:46

Answer 3

A:

Okay, thanks to WSkid, I've got a solution working. Took only minor modifications. Final JavaScript:

<script type="text/javascript">
    $(document).ready(function(){
        $('div.preview').each(function(){
            var curDiv = $(this);
            curDiv.hover(function(){
                curDiv.nextAll($('div.detail:first')).addClass('short');
                curDiv.addClass('expand');
            },function(){
                curDiv.nextAll($('div.detail:first')).removeClass('short');
                curDiv.removeClass('expand');
            });
       });
        $('div.detail').each(function(){
            var curDiv = $(this);
            curDiv.hover(function(){
                curDiv.prevAll($('div.preview:first')).addClass('short');
                curDiv.addClass('expand');
            },function(){
                curDiv.prevAll($('div.preview:first')).removeClass('short');
                curDiv.removeClass('expand');
            });
       });
    });
</script>

Final CSS:

div.preview, div.detail {
    height: 205px;
}

div.expand {
    height: 248px;
}

div.short {
    height: 8px;
}

Dakota 2010-10-16 21:12:05

ansaurus

tags:

views:

answers:

JavaScript - onmouseover modify previous element css height

related questions