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!
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!