Feedback on using jquery mouseover to dynamically change divs

Question

Basically, I have a number of icons and I want the content above those icons to change when someone hovers over the icon. My plan at the moment is to use mouseover to add/remove a class that changes the opacity of the div and just have the divs overlap each other with absolute positioning. Because I'm a self-taught developer, I find, looking back, that I usually make things harder on myself than they need to be. :) I figured I would ask some of the communities I'm apart of for their opinion on this setup. Maybe there is a better way I'm totally missing. I need it to be compatible back to IE8.

Edit: I'm using jQuery 1.8.3. Sorry for leaving that out.

Answer 1

Your question was kind of vague. You used the tag 'jquery' so I'm assuming you are using some version of jquery on your site.

I did up a quick jsfiddle for you: http://jsfiddle.net/pMCxP/2/

Instead of using the mouseover event, I have used the hover event.

$(this).hover(function(){
        $("#content div").hide();
        var contentBlock = $(this).attr('class');
        $("#" + contentBlock).show();
    });

In the code, I have given each content block an id, then for the corresponding button/icon I have set it's css class to be the same as the id for the content. Then I can use it to show the block on hover.

I hope that helps you out, or at least points you in the right direction.

Answer 2

Here is a method that allows you to predefine the html and css for each "icon" mouse-over.

Live version: http://jsfiddle.net/gSAjV/2240/

var content1 = '<p>This is some html that will fill the content window</p>';
var content2 = '<p>This is more html that will fill the content window</p>';
var content3 = '<p>This is other html that will fill the content window</p>';
var content4 = '<p>This is even more html that will fill the content window</p>';

$('#icon1').mouseover(function(){
    $('#content').html(content1);
    $('#content').css( "background-color", "red" );
});
$('#icon2').mouseover(function(){
    $('#content').html(content2);
    $('#content').css( "background-color", "orange" );
});
$('#icon3').mouseover(function(){
    $('#content').html(content3);
    $('#content').css( "background-color", "yellow" );
});
$('#icon4').mouseover(function(){
    $('#content').html(content4);
    $('#content').css( "background-color", "green" );
});

This works, but to my knowledge it is far more difficult to add clean transitions when you are changing the div content. If you want to have fades or any other "A"-over-"B" type transitions, then it may be better to have all of your content preloaded on multiple, layered divs as you suggested.

It is also possible to make transitions using only two divs. One div for holding your current content and one that loads the new content on mouseover and once it is loaded, fades (transitions) in.

Answer 3

I would build like this

http://jsfiddle.net/UQPe3/1/

HTML

<div class='container'>
    <div class='slide1'>slide1</div>
    <div class='slide2 hidden'>slide2</div>
    <div class='slide3 hidden'>slide3</div>
    <div class='slide4 hidden'>slide4</div>
</div>

<div class='icon-wrapper'>
    <div class='icons'>
        <button type='button' data-slide='slide1'></button>
        <button type='button' data-slide='slide2'></button>
        <button type='button' data-slide='slide3'></button>
        <button type='button' data-slide='slide4'></button>
    </div>
</div>

CSS

.container div {
    background: #999;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    text-align: center;
    width: 600px;
}

.icon-wrapper {
    text-align: center;
}

.icons {
    display:inline-block;
}

.icons button {
    background-color: #999;
    border: none;
    cursor: pointer;
    height: 60px;
    margin-left: 30px;
    margin-right: 30px;
    width: 60px;
}

.icons button:hover {
    background-color: #333;
}

.hidden {
    display: none;
}

JS

$('.icons button').on(
{
    mouseenter: function()
    {
        $('.container div').addClass('hidden');
        var show_slide = $(this).attr('data-slide');
        $('.' + show_slide).removeClass('hidden');
    }
});