PDA

View Full Version : swap div and children with fade



wwfc
10-30-2011, 02:58 PM
hi all,
my first post on here, hoping i can get answer to my question :confused:

i'm trying to work out how to swap div and all associated content of the div when a link is clicked, very similar to what is outlined in http://www.dynamicdrive.com/forums/showthread.php?t=60928

using this code:

<!DOCTYPE html>
<html>
<head>
<title>SEO Detail click Demo w/jQuery Fade Effects</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {
color: #000;
background-color: #fff;
font: normal 95% verdana, arial, sans-serif;
}
.triggers {
float: left;
border: 1px solid #ccc;
padding: 0.5em;
}
.triggers div {
cursor: pointer;
text-decoration: underline;
padding: 0.25em 0;
}
.details {
float: left;
position: relative;
width: 20em;
margin-left: 0.5em;
}
.details div{
border: 1px solid #66e;
padding: 0.5em;
}
#default {
display: block;
background-color: #ddd;
}
#first {
color: blue;
background-color: #ffd;
border-color: gray;
}
#second {
color: green;
background-color: #eff;
border-color: green;
}
#third {
color: #a22;
background-color: #fed;
border-color: red;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
(function($){
$('head').append('<style type="text/css">.details div {position:absolute;left:0;top:0;display:none;}</style>');
$(function(){
function reveal(det){
if(det.css('display') === 'block'){return;}
$('.details div').stop(true, true).not(det).fadeOut('slow');
det.fadeIn('slow', fixIEfade);
}
var $trigs = $('.triggers div').click(function(){
reveal($('.details div').eq($trigs.index(this)));
}), fixIEfade = (function(){/*@cc_on @*//*@if(@_jscript_version >= 5)
if($.browser.version < 8){
return function(){
if(this.style.getAttribute){
this.style.removeAttribute('filter');
}
};
}@end @*/
return function(){return;};
})();
});
})(jQuery);
</script>
</head>
<body>
<div class="triggers">
<div>
Default
</div>
<div>
1st Trigger
</div>
<div>
2nd Trigger
</div>
<div>
3rd Trigger
</div>
</div>
<div class="details">
<div id="default">
This is what people will see at page load.
</div>
<div id="first">
It's SEO freindly, try it without javascript enabled, all the contents of the details divisions are seen.
</div>
<div id="second">
The order in which the triggers appear determines which details division they activate.
</div>
<div id="third">
The id's of the details division are only for styling. They're not required for the script.
</div>
</div>
</body>
</html>

this code is so very close - but i can't work out how to add additional inner div's etc... to the default, first, second, third fading div's? i tried using <span><div> which kind of works but the layout goes a little freaky - and everything ends being relative to the top left of the page as opposed to the top left of the specific div!!!!!

anyone show me how to make this work nicely please? :(

i'm still fairly new to these dark arts - kind of get it but kind of don't!
:eek:

so if i added three or four inner div's to <div id = third> they would all sit in their correct positions when the third trigger is clicked - i also tried swapping the function script on page two of the above thread - but no joy!

wwfc
10-30-2011, 03:20 PM
using the latter script this is what i am getting...
is it the css that is causing this?


<!DOCTYPE html>
<html>
<head>
<title>SEO Detail click Demo w/jQuery Fade Effects</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {
color: #000;
background-color: #fff;
font: normal 95% verdana, arial, sans-serif;
}
.triggers {
float: left;
border: 1px solid #ccc;
padding: 0.5em;
}
.triggers div {
cursor: pointer;
text-decoration: underline;
padding: 0.25em 0;
}
.details {
float: left;
position: relative;
width: 20em;
margin-left: 0.5em;
}
.details div{
border: 1px solid #66e;
padding: 0.5em;
}
.details div div {
border-width: 0;
padding: 0;
position: static;
color: inherit;
background-color: inherit;
display: block;
}
#default {
display: block;
background-color: #ddd;
}
#first {
color: blue;
background-color: #ffd;
border-color: gray;
}
#second {
color: green;
background-color: #eff;
border-color: green;
}
#third {
color: #a22;
background-color: #fed;
border-color: red;
}

#apDiv1 {
position:absolute;
left:9px;
top:249px;
width:203px;
height:101px;
z-index:1;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
(function($){
$('head').append('<style type="text/css">.details div {position:absolute;left:0;top:0;display:none;}</style>');
$(function(){
function reveal(det){
if(det.css('display') === 'block'){return;}
$('.details').children('div').stop(true, true).not(det).fadeOut('slow');
det.fadeIn('slow', fixIEfade);
}
var $trigs = $('.triggers div').click(function(){
reveal($('.details').children('div').eq($trigs.index(this)));
}), fixIEfade = (function(){/*@cc_on @*//*@if(@_jscript_version >= 5)
if($.browser.version < 8){
return function(){
if(this.style.getAttribute){
this.style.removeAttribute('filter');
}
};
}@end @*/
return function(){return;};
})();
});
})(jQuery);
</script>
</head>
<body>
<div class="triggers">
<div>
Default
</div>
<div>
1st Trigger
</div>
<div>
2nd Trigger
</div>
<div>
3rd Trigger
</div>
</div>
<div class="details">
<div id="default">
This is what people will see at page load.
</div>
<div id="first">
It's SEO freindly, try it without javascript enabled, all the contents of the details divisions are seen.
</div>
<div id="second">
The order in which the triggers appear determines which details division they activate.
</div>
<div id="third">
<div id="apDiv1">this sitting underneath the red border not way down the page!</div>
The id's of the details division are only for styling. They're not required for the script. </div>
</div>
</body>
</html>

wwfc
10-30-2011, 05:57 PM
...think i've sussed it now...

drop a div in the relevant panel, make position relative and then place the elements i need into the relative positioned div...

seems to work...