swap div and children with fade
hi all,
my first post on here, hoping i can get answer to my question
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/s...ad.php?t=60928
using this code:
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!!!!!PHP 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>
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!
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!
CSS Codes
Reply With Quote
Bookmarks