CODEWITHSUNDEEP
jquery
user1379378
user1379378

Reputation: 59

bring div to front when clicking on link

this is what i have now: http://jsfiddle.net/LQ4JT/833/

when you move to coloured divs around a bit you can see there are 4 links, i want each link to bring one of the divs to the foreground.

how can i do this?

$(document).ready(function() {
var a = 3;
$('#box1,#box2,#box3,#box4').draggable({
start: function(event, ui) { $(this).css("z-index", a++); }
});
$('#dragZone div').click(function() {
$(this).addClass('top').removeClass('bottom');
$(this).siblings().removeClass('top').addClass('bottom');
$(this).css("z-index", a++);
});
);

Upvotes: 1

Views: 4352

Answers (3)

Richie
Richie

Reputation: 19

Here is a jQuery function to "bringToFront".

jQuery.fn.extend({
    bringToFont: function (selector) {
        var max = Math.max.apply(null, $(this).siblings(selector).map(function () {
            return $(this).zIndex();
        }));
        $(this).zIndex(++max);
        return this;
    }
});

Here is an example, this code will move "#someDiv" to the top of the z-index stack.

$('#someDiv').mouseenter(function(){
    $(this).bringToFont();
});

Upvotes: 0

Paritosh
Paritosh

Reputation: 11570

Here is the updated fiddle: http://jsfiddle.net/LQ4JT/835/

$('.link').click(function(){
    var x = $(this).attr('val');
    console.log(x); 
    $('#box'+x).css('z-index',a++);    
});

Added class="link" & val='1' attributes to <a>

Upvotes: 1

Tim Wasson
Tim Wasson

Reputation: 3656

I managed to get it working here: http://jsfiddle.net/LQ4JT/834/

Here's the code I used:

$("a").click(function() {
    $(".top").removeClass("top").addClass("bottom");
    var box = $(this).attr("href");
    //alert(box);
    $(box).addClass("top");
    $(box).css("z-index", a++);
});

Upvotes: 2

Related Questions