Response title
This is preview!
Toggle/Select 3 Div's location within another div, maybe using position absolute or insertAfter
in Using jQuery UI
•
10 years ago
I have a album Page, with 4 images per page, images are displayed in a container div. This container has 3 DIV's, top one is NAME of image DIV, next ones is IMAGE DIV and the 3rd one is DESC DIV
I wanna be able to Toggle/Select the Location of the NAME or DESC to be either be above or below images for all 4 images
I like example one better, but have not been able to get it to work with multiple containers
EXAMPLE ONE
this example does not use absolute position but i can only get it to work if I remove one of the Containers
http://jsfiddle.net/rudyten/ffGZk/3/
EXAMPLE TWO
on this example I use absolute position, But the image size can change thus breaking this
http://jsfiddle.net/rudyten/usYrG/
I wanna be able to Toggle/Select the Location of the NAME or DESC to be either be above or below images for all 4 images
I like example one better, but have not been able to get it to work with multiple containers
EXAMPLE ONE
this example does not use absolute position but i can only get it to work if I remove one of the Containers
http://jsfiddle.net/rudyten/ffGZk/3/
- $('.btn1').click(function () {
var loc = "AB";
setLoc(loc);
});
$('.btn2').click(function () {
var loc = "BA";
setLoc(loc);
});
$('.btn3').click(function () {
var loc = "AA";
setLoc(loc);
});
$('.btn4').click(function () {
var loc = "BB";
setLoc(loc);
});
function setLoc(loc) {
if (loc == "AB") {
$(".image").insertAfter(".name");
$(".desc").insertAfter(".image");
}
if (loc == "BA") {
$(".image").insertAfter(".desc");
$(".name").insertAfter(".image");
}
if (loc == "AA") {
$(".desc").insertAfter(".name");
$(".image").insertAfter(".desc");
}
if (loc == "BB") {
$(".name").insertAfter(".image");
$(".desc").insertAfter(".name");
}
}
EXAMPLE TWO
on this example I use absolute position, But the image size can change thus breaking this
http://jsfiddle.net/rudyten/usYrG/
- $('.btn1').click(function () {
var loc = "AB";
setLoc(loc);
});
$('.btn2').click(function () {
var loc = "BA";
setLoc(loc);
});
$('.btn3').click(function () {
var loc = "AA";
setLoc(loc);
});
$('.btn4').click(function () {
var loc = "BB";
setLoc(loc);
});
function setLoc(loc) {
if (loc == "AB") {
$('.name').addClass('top').removeClass('bot mid botimg topimg');
$('.image').addClass('mid').removeClass('top bot botimg topimg');
$('.desc').addClass('bot').removeClass('top mid botimg topimg');
};
if (loc == "BA") {
$('.desc').addClass('top').removeClass('bot mid botimg topimg');
$('.image').addClass('mid').removeClass('top bot botimg topimg');
$('.name').addClass('bot').removeClass('top mid botimg topimg');
};
if (loc == "AA") {
$('.name').addClass('top').removeClass('bot mid botimg topimg');
$('.desc').addClass('mid').removeClass('top bot botimg topimg');
$('.image').addClass('botimg').removeClass('top mid topimg');
};
if (loc == "BB") {
$('.image').addClass('top').removeClass('bot mid botimg');
$('.name').addClass('topimg').removeClass('top bot botimg');
$('.desc').addClass('bot').removeClass('top mid botimg');
};
}
$('.btn1btn1').click(function () {
$('.desc').addClass('bot').removeClass('top');
$('.name').addClass('top').removeClass('bot');
});
1