Log in

View Full Version : DIV swap onclick?


rebecca
07-29-2008, 06:04 PM
Hi,
I'm not that great with explaining, but here it goes:
I'm about to re-make my graphics site on acornrack. With acornrack, you can use variables in the Admin CP. The variables that i'm focused on are the ones that correspond with the user profile. Now, what i want exactly is a DIV swap onclick.

DIV
link 1|link 2|link 3

in which the info that goes along with link 1 will show up in the DIV, then when another link is clicked, the info that goes along with that link will take info from link 1's place.

I've tried TONS of codes and there's always some kind of error. Basically, most of the codes I've used don't seem to accept formatting in each individual section at all, not even font color or size.

I would post a link, but it wouldn't really help since the site is blank. If you understand remotely where I'm coming from, your help would be appreciated.

Thanks in advance :]
jscheuer1
07-29-2008, 06:29 PM
Something like this:


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

?
rebecca
07-29-2008, 06:39 PM
exactly like that
thank you so much :D
rebecca
07-29-2008, 09:11 PM
dumb questions:
Is there any way i can display the DIVs in a horizontal row?
Right now they're displaying in a vertical column. And also, is there a way for there to be a second row of links?
Nile
07-29-2008, 09:21 PM
<!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;
float: left;
padding-right: 5px;
padding-left: 5px;
padding-top: 2px;
padding-bottom: 2px;
border-right: 1px solid brown;
border-left: 1px solid brown;
}
#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>

That should do it.
Change the highlighted to change the color of the border.
rebecca
07-29-2008, 09:26 PM
that did it ^^
imnaclass
08-18-2008, 03:05 PM
Hello, is there a way to fade in and out when the divs swap?
mburt
08-18-2008, 03:25 PM
Simple way, is with jQuery. A javascript plug-in.


$("#divobject").fadeIn("fast");
$("#divobject").fadeOut("slow");

http://www.jquery.com/
chalkywhiteface
09-07-2008, 02:45 PM
Hi there,

I am quite new to jscript so any help would be great.

All this has been really useful but i was wondering if you could highlight the active trigger when it has been clicked. So if detail number 3 was displaying, the trigger that activated it would be highlighted.

Would/could this be done using a '.selected' class maybe?

Thanks in advance.

Ben
BLiZZaRD
09-07-2008, 02:53 PM
Please start a new thread for your question. hijacking another's thread is confusing and frowned upon.
chalkywhiteface
09-07-2008, 03:30 PM
Oops, new thread started (http://www.dynamicdrive.com/forums/showthread.php?p=160557#post160557).
Razvuden
04-01-2009, 05:47 PM
I'm looking to use this code; however when I use flash content in the div I can't get it to work. Will flash work in the div to swap onclick?

Thanks!
jscheuer1
04-01-2009, 06:09 PM
I'm looking to use this code; however when I use flash content in the div I can't get it to work. Will flash work in the div to swap onclick?

Thanks!

Generally not. Flash uses the browser's plugin and often continues playing regardless of what a script like this does.

Also, this is an old thread. Please start a new one.