Fading in divs with this awesome div swap script.

**samzo** · 02-18-2011, 10:14 PM

First of all, huge thank you to jscheuer1 for this super good script that has helped me out enormously with my website:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>SEO Detail click Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* {
background-color:white;
}
#triggers {
float:left;
border:1px solid #ccc;
}
#triggers div {
cursor:pointer;
}
#zero {
display:none;
color:red;
}
#first {
color:blue;
}
#second {
color:green;
}
#third {
color:#a52a2a;
}
</style>
<script type="text/javascript">
if(document.getElementById)
document.write('<style type="text/css">.detail {float:left;display:none;}#zero {display:block;}<\/style>');
function reveal(det){
if(!document.getElementById) return;
if (!document.getElementsByClassName){
document.getElementsByClassName = function(cn){
cn = cn.replace(/ +/g, ' ').split(' ');
var ar = [], testname = function(n){
for (var re, i = cn.length - 1; i > -1; --i){
re = new RegExp('(^|\W)' + cn[i] + '(\W|$)');
if(!re.test(n)) return false;
}
return true;
}
for(var d = document.all || document.getElementsByTagName('*'), i = 0; i < d.length; ++i)
if(testname(d[i].className))
ar[ar.length] = d[i];
return ar;
};
document.getElementsByClassName.spoof = true;
}
for (var d = document.getElementsByClassName('detail'), i = d.length - 1; i > -1; --i)
d[i].style.display = 'none';
document.getElementById(det).style.display = 'block';
if (document.getElementsByClassName.spoof)
document.getElementsByClassName.spoof = document.getElementsByClassName = null;
}
</script>
</head>
<body>
<div id="triggers">
<div onclick="reveal('first');">
1st Trigger
</div>
<div onclick="reveal('second');">
2nd Trigger
</div>
<div onclick="reveal('third');">
3rd Trigger
</div>
</div>
<div class="detail" id="zero">
This would be what people would see at page load.
</div>
<div class="detail" id="first">
This would be what people would see for the first clicked content.
</div>
<div class="detail" id="second">
This would be what people would see for the second clicked content.
</div>
<div class="detail" id="third">
This would be what people would see for the third clicked content.
</div>
</body>
</html>

The original thread is here.

I learned tons from using this, and have kept it bookmarked for future use.

Anyways, someone in the same thread asked about how to fade divs in and out using this script, and someone else gave a short description that was not help much. Could you (or someone) modify your script to achieve this effect? Thanks so much!

**jscheuer1** · 03-06-2011, 06:11 PM

I think that would be Nile and I think he was referring to using jQuery for the fading action as it varies by browser, and jQuery takes that into account. I'm only too happy to work in jQuery. I prefer it:

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>

Notes:

It's still SEO freindly, try it without javascript enabled, all the contents of the detail divisions are seen.
The order in which the triggers appear determines which details division they activate. The first trigger activates the first detail (0, 'default'). The second activates the second (1, 'first'), etc.
The id's are arbitrary and used only for styling. If all details are to have the same style, the id's may be skipped.
You can have as many triggers on the page as you like, even using multiple triggers divisions, but the activation will still be in the order as described above.
The details division can be anywhere on the page. Ones that you want grouped together can be in their own details division. Since it's a class, it can be repeated for other details divisions in other places. The order in which the detail divisions appear in the page's source code still corresponds to the order of the triggers.

**jason@fernandes** · 03-16-2011, 10:00 PM

jscheuer1

I used your code to created div swaps. Everything works great, except for in Safari. It seems to not even read the jquery script. None of the div tags are going into a hidden state and they all display.

I am new to jquery and trying to teach myself, but i'm stuck and any help would be greatly appreciated.

Thanks in advanced.

**jscheuer1** · 03-17-2011, 03:44 AM

Good catch! My Safari has been balky lately, so I just assumed that if it worked in Chrome . . .

Anyways, and I've made this addition in my previous post, Safari needs the appended style section to include the closing style tag:

Code:

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

**jason@fernandes** · 03-17-2011, 04:18 PM

Thanks John, your a life saver. I like the pace of the fade you have on this, very smooth.

**jscheuer1** · 03-17-2011, 09:57 PM

If you're interested in playing with it, the pace of the fade, it's controlled here:

Code:

		function reveal(det){
			if(det.css('display') === 'block'){return;}
			$('.details div').stop(true, true).not(det).fadeOut('slow');
			det.fadeIn('slow', fixIEfade);
		}

'slow' is defined as 600 milliseconds. 'fast' is 200. You can use an actual number - say 1000, for a longer transition. If you do use a number, skip the quotes, ex:

Code:

		function reveal(det){
			if(det.css('display') === 'block'){return;}
			$('.details div').stop(true, true).not(det).fadeOut(1000);
			det.fadeIn(1000, fixIEfade);
		}

I should also mention that in testing I got the best results using the same speed for both. But feel free to play around with that as well.

**deathbycheese** · 05-01-2011, 06:25 PM

Originally Posted by jscheuer1

The order in which the detail divisions appear in the page's source code still corresponds to the order of the triggers.

Hi John,
Is there a version of this that does NOT correspond to the order of triggers? I have a puzzling situation that I would love to use this code for if I could make it happen.

Here's what I have:
1. A simple side menu onclick to swap divs in another container to display different categories of thumbnails.
- Done. Super easy.

2. HERE'S THE STICKLER
Once one of the above-mentioned thumbnail category divs is visible, I need to click on a thumbnail within that div to swap divs in STILL ANOTHER container (this is to display a div of contents corresponding with each thumbnail).

Your code gets confused because the thumbnail links ARE NOT within the same parent due to their parent divs being hidden until the side menu item is clicked to display one. HOWEVER, the final corresponding content divs ARE all within the same parent.

Can I make your beautiful code work with this situation in any way?

Thanks in advance,
dbc

**jscheuer1** · 05-02-2011, 07:14 AM

It doesn't matter where they are. You can have several trigger divisions and several detail divisions. Unless you are using AJAX to add and/or remove any of them, or are using another script to physically move them around in the DOM, the correspondence will hold. It doesn't matter if they can be seen or not.

Like you can have as many of these as you want, say this is the first:

Code:

<div class="triggers">
<div>
Default
</div>
<div>
1st Trigger
</div>
<div>
2nd Trigger
</div>
<div>
3rd Trigger
</div>
</div>

This could be located elsewhere and be the second:

Code:

<div class="triggers">
<div>
4rth Trigger
</div>
<div>
5th Trigger
</div>
<div>
6th Trigger
</div>
<div>
7th Trigger
</div>
</div>

Then you could have, in yet another place:

Code:

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

And in the same place or yet somewhere else:

Code:

<div class="details">
<div id="fourth">
That amused submarine affably pauses over that ravishing turtle.
</div>
<div id="fifth">
The open boundaries belligerently wobble over their puzzled swine.
</div>
<div id="sixth">
Those moaning students abhorrently surround that admonishing animal.
</div>
<div id="seventh">
Our bittersweet testosterone inconveniently watches our placating turtledoves.
</div>
</div>

If all of the details will be revealed in the same spot on the page, those may be combined:

Code:

<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 id="fourth">
That amused submarine affably pauses over that ravishing turtle.
</div>
<div id="fifth">
The open boundaries belligerently wobble over their puzzled swine.
</div>
<div id="sixth">
Those moaning students abhorrently surround that admonishing animal.
</div>
<div id="seventh">
Our bittersweet testosterone inconveniently watches our placating turtledoves.
</div>
</div>

Again, it doesn't matter where on the page these are, only their order in the source code of the page. the first trigger will always trigger the first detail while hiding all the others, and so on.

So I guess it boils down to - what do you mean by 'swap'? As long as the order of elements in the DOM of the page hasn't changed, there should be no problem.

The script in this thread doesn't change the DOM when it swaps things, does some other script you're using do so?

**deathbycheese** · 05-02-2011, 05:35 PM

Thanks John for your quick response!

Now that you've clarified the issue, I'll review my code once again. It's most likely a user error.

dbc

**deathbycheese** · 05-02-2011, 09:15 PM

Found it!

My details container was as follows:

Code:

<div class="details">

<div id="first">
<p>First</p>
<div><img src=""></div>
<p>That amused submarine affably pauses over that ravishing turtle.</p>
</div>

<div id="second">
<p>Second</p>
<div><img src=""></div>
<p>The open boundaries belligerently wobble over their puzzled swine.</p>
</div>

And so forth.

The code balked at the nested image div within, so I had to change it to span like this:

Code:

<div id="first">
<p>First</p>
<span><img src=""></span>
<p>That amused submarine affably pauses over that ravishing turtle.</p>
</div>

Easy enough once I knew the glitch was on my end!

Thanks a million John. You rock!

dbc

Thread: Fading in divs with this awesome div swap script.

Thread Tools

Search Thread

Fading in divs with this awesome div swap script.

The Following 2 Users Say Thank You to jscheuer1 For This Useful Post:

Happy to help.

Non-order corresponding version?

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions