PDA

View Full Version : Changing DIVs and Change Text Style Simultaneously

BLarche
11-11-2005, 02:25 PM
I have the following site:

http://www.emp-corp.com/EMPWebsite/html/products/advanced/thermal_mgmt/electric_water_pump.asp

Near the bottom, I am attempting to change the content "product features." That table is stored in a DIV named "features". I also have 2 other hidden DIVs named "benefits" and "applications". I am attempting to show or hide the DIV depending on what the user selects.

Also, depending on which DIV is chosen, I want to change the style of the link that the DIV is associated with. For instance, if "Vehicle Applications" is selected, I want to either remove the link, or at least change the class to the larger blue class that "Product Features" currently uses.

Can anyone give me any input on doing this?
BLarche
11-11-2005, 03:11 PM
Any thoughts on this?
BLarche
11-11-2005, 03:43 PM
I know somebody has a solution to my question. I checked google but could not find anything related to what I am looking for. I would greatly appreciate any feedback you all may have.
BLarche
11-11-2005, 04:40 PM
Did I not state my question clearly? Do the experts not know what I am talking about? Why is there zero feedback? I need to get this situated before the end of the day.
Nischumacher
11-11-2005, 04:42 PM
this might help...

function show(id){
document.getElementById('div1').style.display='none';
document.getElementById('div2').style.display='none';
document.getElementById('div3').style.display='none';
document.getElementById(id).style.display='block';
}
...
<a href="#" onclick="show('div1')">Product Features</a>
<a href="#" onclick="show('div2')">Engine System Benefits</a>
<a href="#" onclick="show('div3')">Vehicle Applications</a>
...
<div id="div1" name="div1" style="display:visible">
Details of Product Features... blah... blah... blah...
</div>
...
<div id="div2" style="display:none">
Details of Engine System Benefits... blah... blah... blah...
</div>
...
<div id="div3" style="display:none">
Details of Vehicle Applications... blah... blah... blah...
</div>
...
BLarche
11-11-2005, 04:47 PM
I want to create a function so I do not have to name each div in the function.

For instance, I want to do a loop that will hide all of the divs at once, and have a showDiv function that will show the div you want. The onClick part (onclick="show('div1')">) will be something like: onclick="showDiv(this.div)" so it is all dynamic.

I created a function that does something similar to this, but I get the following error: 'Object Expected'

function hideAllDiv() {
var divs = document.getElementsByTagName('div');
for (i=0; i < divs.length; i++) {
if (divs[i].id.indexOf('pro_')) {
if (document.getElementById)
divs[i].style.visibility="hidden";
else if (document.layers)
document.layers[divs[i]].display = 'hidden';
else
document.all.hideshow.divs[i].visibility = 'hidden';
}
}
}
}
BLarche
11-11-2005, 04:51 PM
if (divs[i].id.indexOf('pro_')) {

This part I was using the div name of: "pro_features", "pro_benefits", etc.
Nischumacher
11-11-2005, 05:02 PM
make the changes in red...

for (i=0; i < divs.length-1; i++) {

if (document.getElementById(divs[i]))

...style.visibility="none";
BLarche
11-11-2005, 05:10 PM
function hideAllDiv() {
var divs = document.getElementsByTagName('div');
for (i=0; i < divs.length - 1; i++) {
if (divs[i].id.indexOf('pro_')) {
if (document.getElementById(divs[i]))
divs[i].style.visibility="none";
else if (document.layers)
document.layers[divs[i]].display = 'none';
else
document.all.hideshow.divs[i].visibility = 'none';
}
}
}
}

I am still getting the 'Object expected' error on the following line:

<a href="#" onclick="hideAllDiv(); return false" class="productExtras">Engine System Benefits</a>
vwphillips
11-11-2005, 06:04 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
var Divs=new Array();
var LkAry=new Array();

function Swap(nu,objp,cls){
if (cls){
divs=document.getElementById(objp).getElementsByTagName('DIV');
for (zxc0=0;zxc0<divs.length;zxc0++){
for (zxc1=0;zxc1<cls.length;zxc1++){
if (divs[zxc0].className==cls[zxc1]){
Divs[Divs.length]=divs[zxc0];
}
}
}
}
for (zxc2=0;zxc2<Divs.length;zxc2++){
Divs[zxc2].style.visibility='hidden';
if (zxc2==nu){
Divs[zxc2].style.visibility='visible';
}
}
}

function SwapDiv(nu,obj,cls){
if (!obj.out){
obj.out=obj.className;
LkAry[LkAry.length]=obj;
}
for (zxc0=0;zxc0<LkAry.length;zxc0++){
LkAry[zxc0].className=obj.out;
}
obj.className=cls;
Swap(nu);
}
//-->
</script>

<style type="text/css">
<!--
.Class1 {
position:absolute;top:0px;left:0px;width:200px;height:200px;background-color:red;
}
.Class2 {
position:absolute;top:0px;left:0px;width:200px;height:200px;background-color:blue;
}

.LkClass1 {
color:red;
}

.LkClass2 {
color:green;
}
-->
</style>
</head>

<body onload="Swap(0,'fred',['Class1','Class2']);" >

<a onclick="SwapDiv(0,this,'LkClass2');" >Link 1</a><br>
<a onclick="SwapDiv(1,this,'LkClass2');" >Link 2</a><br>
<a onclick="SwapDiv(2,this,'LkClass2');" >Link 3</a><br>

<div id="fred" style="position:relative;" >
<div class="Class2" >Div1</div>
<div class="Class1" >Div2</div>
<div class="Class1" >Div3</div>
</div>

</body>

</html>
Pyth007
11-11-2005, 07:26 PM
BLarche: Next time, please be a little more patient when you ask a question... The people on this forum are volunteers. Thus they may answer a question when they get a chance. Like today, I was very busy at work, so I haven't had much of a chance to browse the site like earlier in the week. Furthermore, since this is on the world-wide web, some of the forum members are in different countries than you; they may be asleep right now and not get to your question for several hours. Finally, when you bump your question (esp. within an hour from each other), people may either get annoyed and purposefully ignore you or they may (after seeing several responses) assume that you are being helped and accidentally skip over your message. Remember, you are not entitled to an answer; rather the privilege is yours when your question is answered!

As for your problem with "object expected" error, it sometimes doesn't have anything to do with the line that the error occurred, but rather may happen much earlier. It's sometimes caused by missing a closing bracket / brace. I'd look above where you wrote your hideAllDivs() function to make sure that everything (quotes, parenthesies, brackets, braces, etc.) are closed.

Finally, check out vw's answer... Usually those scripts are pretty good.

Nischumacher: visibility has 'hidden' / 'visible'; display has 'none' / 'block'... the difference between the two is that visibility holds the 'shape' of the div while diplay "removes" the div completely from the viewing-page.
vwphillips
11-11-2005, 08:24 PM
agee with Pyth007 comments plus 'Please' is good.
Nischumacher
11-12-2005, 09:12 AM
Nischumacher: visibility has 'hidden' / 'visible'; display has 'none' / 'block'... the difference between the two is that visibility holds the 'shape' of the div while diplay "removes" the div completely from the viewing-page.
thanks... :thumbsup: