CODEWITHSUNDEEP
jqueryclickhover
Scriptamateur
Scriptamateur

Reputation: 11

jQuery: Click image to show div below as a box

What I have: I have three icons floating next to each-other. When I hover one of the icons a fixed sized box appear below the icon. Inside the box there are links.

What I want: I want the box to stay open after I click on the icon and/or mouseout. I want the box to close whenever I click on the icon again or when I click another icon (that in turn open a new box, for that icon in question).

I need help with: I need help with adjusting/change the script I am currently using for the hover effect. Anyone?

jQuery

$(document).ready(function() {
    $("#fb-icon").hover( function() {
        $("#fb-icon-content").css('display','block');
    }, function() {
        $("#fb-icon-content").hide();
    });
});

UPDATE After several hours of testing I found that this script created what I needed:

$('#expand-facebook').click(function() {
$('#facebook-expanded').toggle('slow', function() {
}); });

Upvotes: 0

Views: 3430

Answers (2)

czerasz
czerasz

Reputation: 14260

Try this: http://jsfiddle.net/8T8sA/

HTML:

<ul>
    <li class="ico"></li>
    <li class="ico"></li>
    <li class="ico"></li>
</ul>

<div id="fb-icon-content">some content</div>

CSS:

ul {
    list-style:none;
}
.ico {
    margin-left:50px;
    width:32px; height:32px;
    float:left;
    border:1px solid red;
}

#fb-icon-content {
    position:fixed;
    border:1px solid red;
    display:none;
}

JS:

var shown = false;

$(".ico").hover( function() {
    if ( shown === false ) {
        var that = $(this),
            offset = that.offset(),
            tooltipElement = $("#fb-icon-content");

        tooltipElement.css({
            top: offset.top + that.height() + 10,
            left: offset.left + that.width()/2 - tooltipElement.width()/2
        }).show();
    }
}, function() {
    if ( shown === false ) {   
        $("#fb-icon-content").hide();
    }
}).bind('click', function() {
    var tooltipElement = $("#fb-icon-content"),
        that = $(this);

    if ( shown === that.index() ) {
        tooltipElement.hide();
        shown = false;
    } else {
        shown = $(this).index();

        var that = $(this),
            offset = that.offset(),
            tooltipElement = $("#fb-icon-content");

        tooltipElement.css({
            top: offset.top + that.height() + 10,
            left: offset.left + that.width()/2 - tooltipElement.width()/2
        }).show();
    }
});

Upvotes: 1

oazabir
oazabir

Reputation: 1609

I assume the problem you are having is when you move out of the icon to the menu, the menu goes away because the "unhover" event gets fired on #fb-icon?

You might want to do this:

$(document).ready(function() { 
    // to show when clicked
    $("#fb-icon").click( function() { 
        // hide the previously opened content
        if (window.lastContent != null )
            window.lastContent.css('display','none'); 

        window.lastContent = $("#fb-icon-content");
        window.lastContent.css('display','block'); 
    });
    // show the icon content when hover on the icon
    $("#fb-icon").hover( function() { 
        window.lastContent = $("#fb-icon-content");
        window.lastContent.css('display','block'); 
    }); 
});

However, it looks like you have only one #fb-icon-content. Shouldn't you have one per icon?

Upvotes: 0

Related Questions