change object style onClick

downtroden · 12-14-2004, 08:00 AM

did a search and didn't find anything, so I'll ask a question.

I've got some tabs, these tabs show and hide the visibility of divs(info) beneath them. I was showing and hiding the 'info' divs via a if/else statement with url variable in coldfusion, but i was reloading the page each time to show the different divs... not cool. So I find myself a neat little javascript that changes the visibility of the 'info' divs and I'm happy... for a minute.

I then realize that the tab styles aren't changing like they were before when I was using coldfusion to reload the page (it was changing the styles for me). What I'm wanting/wondering is if anyone can provide me with a trick/script that will change the styles on the fly like it does with the visibility script. I've already got a onClick event on these tab links, you can have more than one, right? (not javascript fluent).

Any help is most appreciated, if you need to see the code I'm using let me know.

insitedev · 12-15-2004, 11:24 AM

Seeing the code would help us get a better understanding of what you are trying to do, but I think I have an idea.

if you have the onClick on the tab pointing to a javascript function, then inside that function, put in the following:

Code:

document.all['div_id'].style.visibility = 'visible';
document.all['other_div_id'].style.visibility = 'hidden';
document.all['other_div_id'].style.visibility = 'hidden';

you have to account for all of the div id's when doing it this way, so you might need to pass another variable into the javascript function for the div_id, in which case you will use something like this:

Code:

// assuming that div_id is the id of the div you want visible

document.all['div1_id'].style.visibility = (div_id == 'div1_id') ? 'visible' : 'hidden';
document.all['div2_id'].style.visibility = (div_id == 'div2_id') ? 'visible' : 'hidden';

// add as many as you need to account for all divs

Here is some quick code that I typed up to illustrate what I mean - hopefully it helps out.

Code:

<html>
<head>
<script language="javascript">
<!--

function change_visibility(div_id)
{
	document.all['div1'].style.visibility = (div_id == 'div1') ? 'visible' : 'hidden';
	document.all['div2'].style.visibility = (div_id == 'div2') ? 'visible': 'hidden';
}

//-->
</script>
</head>
<body onLoad="change_visibility('none');">

<div onClick="change_visibility('div1');" style="cursor:hand; width:100px; background-color:#eeeeee; border:1px solid black;" align="center">Show me div1</div><br>
<div onClick="change_visibility('div2');" style="cursor:hand; width:100px; background-color:#eeeeee; border:1px solid black;" align="center">Show me div2</div>
<br>
<hr>
<br>
<div id="div1">text to display for div1</div>
<div id="div2">text to display for div2</div>

</body>
</html>

I am by no means a Javascript expert, so it may not work on every browser.

downtroden · 12-15-2004, 12:45 PM

okay... my bad... I'm poor at communication. I've got the divs covered when it comes to showing and hiding them, what i'm trying to do is change the style of the individual <li> elements.

CURRENT CODE:
PAGE:

Code:

<div id="tab_header">
  <ul>
    <li id="tab_current"><a href="#" id="tab_current" onClick="show_div('specifications'); return false;">SPECIFICATIONS</a></li>
    <li id=" "><a href="#" id=" " onClick="show_div('dimensions'); return false;">DIMENSIONS</a></li>
    <li id=" "><a href="#" id=" " onClick="show_div('literature'); return false;">LITERATURE</a></li>
  </ul>
</div>

javascript:

Code:

<script type="text/javascript">
function show_div(div_id) {
	//hide all the divs
	document.getElementById('specifications').style.display = 'none';
	document.getElementById('dimensions').style.display = 'none';
	document.getElementById('literature').style.display = 'none';
	
	//show the requested div
	document.getElementById(div_id).style.display = 'block';
	}
</script>

I'll let you imagine that there is 3 div items below the list 'tabs'. So, my conundrum is that the divs are acting properly, showing and hiding themselves as told... but now I don't know how to get the tabs to update when clicked... the styles are set up... it's just a matter of getting javascript to tell them to change.

So, I'm guessing that what it boils down to, is if I can change the id portion on list elements or the id on the link portion.

insitedev · 12-15-2004, 01:06 PM

What are you trying to make the tabs do? You can put in more references to elements in the javascript function:

document.getElementByID('the_li_element').style.ba ckground = '#ff0000';

The above would change the background of the list item (assuming the id on it is 'the_li_element'). The function doesn't have to only call one id or one type of element.

downtroden · 12-15-2004, 01:38 PM

trying to get the font color to change and also the background image to change. i've seen font color as a supported element to change, is background image one?

insitedev · 12-15-2004, 01:48 PM

try document.GetElementByID('element').style.backgroun d='url(images/bg.gif)';

I think it might work, if not, try the full URL to the background.

the font color is style.color='#xxxxxx'; where the x's are the hex code for the color you want.

imaginemn · 12-15-2004, 02:39 PM

You could try the following concept. If I took more time to optimize I am sure the code could be condensed but this works.

==========================================

<script language="JavaScript" type="text/javascript">

</script>

<table width="200" height="100" cellpadding="0" cellspacing="0" border="1">
<tr>
<td id="menu1">
<div align="center"><font face="arial" size=2"><B><a href="#" onclick="cc1()" id="txt1">MENU 1</a></B></font></div>
</td>
<td id="menu2">
<div align="center"><font face="arial" size=2"><B><a href="#" onclick="cc2()" id="txt2">MENU 2</a></B></font></div>
</td>
</tr>
</table>

==========================================

Demo located at http://www.imaginemn.com/temp/menu.htm

imaginemn

downtroden · 12-15-2004, 06:25 PM

Attached is a visual of what I'm wanting. What I guess I have in my mind is actually changing the id value so when you click on link 1, 2 and 3 go to the recessed style and click on 2, 1 and 3 get changed to the recessed value.

I'm beginning to think that I'm overestimating the power of javascript and that it can't actually change html code on the fly...

I don't understand how the visibility of div tags can get changed though?

in case this helps... here are the CSS styles

Code:

#tab_header {
	font-family: Arial, Helvetica, sans-serif;
	float: left;
	width: 100%;
	background:url("images/tabbar_back.gif") left top;
	background-repeat: repeat-x;
	font-size: 10px;
	line-height: normal;
	}

#tab_header ul {
	margin: 0px;
	padding: 19px 10px 0;
	list-style:none;
	}
	
#tab_header li {
	float: left;
	margin: 0px;
	padding: 0 0 0 9px;
	}

#tab_header a:link, #tab_header a:visited {
	float: left;
	display: block;
	height: 20px;
	background:url("images/tab_l_off.gif") left top;
	background-repeat: no-repeat;
	padding: 5px 15px 4px 12px;
	text-decoration: none;
	color: #777777
	}

#tab_header a:hover {
	float: left;
	display: block;
	height: 20px;
	background:url("images/tab_l_off.gif") left top;
	background-repeat: no-repeat;
	padding: 5px 15px 4px 12px;
	text-decoration: none;
	color: #000000
	}

#tab_header li {
	float: left;
	background:url("images/tab_r_off.gif") right top;
	background-repeat: no-repeat;
	}

#tab_header, #tab_current {
	background-image:url("images/tab_r_on.gif");
	color: #000000
	}

#tab_header, #tab_current a:link {
	background-image:url("images/tab_l_on.gif");
	padding-bottom: 5px;
	color: #000000
	}

#tab_header, #tab_current a:visited {
	background-image:url("images/tab_l_on.gif");
	padding-bottom: 5px;
	color: #000000
	}

downtroden · 12-15-2004, 06:26 PM

and just for furthur reference... this is how the tabs are made
http://www.alistapart.com/articles/slidingdoors/

insitedev · 12-15-2004, 07:21 PM

Ok, here's some code that will do that, however it is really cumbersome to work with. I'm sure that someone else can make this easier to work with, but, this will get the job done (for 4 buttons).

Code:

<html>
<head>
<script language="javascript">
<!--
function changeIt(div_id)
{
	div_id_s = div_id + 1;

	document.all['door1'].src = '/images/left_inactive.gif';
	document.all['door2'].src = '/images/middle_inactive.gif';
	document.all['door3'].src = '/images/middle_inactive.gif';
	document.all['door4'].src = '/images/middle_inactive.gif';
	document.all['door5'].src = '/images/right_inactive.gif';

	document.all['div1'].style.visibility = 'hidden';
	document.all['div2'].style.visibility = 'hidden';
	document.all['div3'].style.visibility = 'hidden';
	document.all['div4'].style.visibility = 'hidden';

	document.all['tab1'].style.color = '#cccccc';
	document.all['tab1'].style.background = 'url(/images/btn_inactive.gif)';
	document.all['tab2'].style.color = '#cccccc';
	document.all['tab2'].style.background = 'url(/images/btn_inactive.gif)';
	document.all['tab3'].style.color = '#cccccc';
	document.all['tab3'].style.background = 'url(/images/btn_inactive.gif)';
	document.all['tab4'].style.color = '#cccccc';
	document.all['tab4'].style.background = 'url(/images/btn_inactive.gif)';

	if (div_id == 1) {
		document.all['door1'].src = '/images/left_active.gif';
		document.all['door2'].src = '/images/middle_active_left.gif';

		document.all['div1'].style.visibility = 'visible';

		document.all['tab1'].style.color = '#000000';
		document.all['tab1'].style.background = 'url(/images/btn_active.gif)';
	} else if (div_id == 4) {
		document.all['door4'].src = '/images/middle_active_right.gif';
		document.all['door5'].src = '/images/right_active.gif';

		document.all['div4'].style.visibility = 'visible';

		document.all['tab4'].style.color = '#000000';
		document.all['tab4'].style.background = 'url(/images/btn_active.gif)';
	} else if (div_id < 4 && div_id > 1) {
		document.all['door' + div_id_s].src = '/images/middle_active_left.gif';
		document.all['door' + div_id].src = '/images/middle_active_right.gif';

		document.all['div' + div_id].style.visibility = 'visible';

		document.all['tab' + div_id].style.color = '#000000';
		document.all['tab' + div_id].style.background = 'url(/images/btn_active.gif)';
	}

}
//-->
</script>
</head>
<body onLoad="changeIt(0)">

<table border="0" cellpadding="0" cellspacing="0">
<tr>
  <td><img src="/images/left_inactive.gif" id="door1"></td>
  <td background="/images/btn_inactive.gif" id="tab1" align="center" onClick="changeIt(1)">Button 1</td>
  <td><img src="/images/middle_inactive.gif" id="door2"></td>
  <td background="/images/btn_inactive.gif" id="tab2" align="center" onClick="changeIt(2)">Button 2</td>
  <td><img src="/images/middle_inactive.gif" id="door3"></td>
  <td background="/images/btn_inactive.gif" id="tab3" align="center" onClick="changeIt(3)">Button 3</td>
  <td><img src="/images/middle_inactive.gif" id="door4"></td>
  <td background="/images/btn_inactive.gif" id="tab4" align="center" onClick="changeIt(4)">Button 4</td>
  <td><img src="/images/left_inactive.gif" id="door5"></td>
</tr>
</table>
<div id="div1">Text for button 1</div>
<div id="div2">Text for button 2</div>
<div id="div3">Text for button 3</div>
<div id="div4">Text for button 4</div>

</body>
</html>

Just a tiny bit of code there. You'll probably want to put that in a .js file and include it.

You can see from the example how to change the src of the images that surround the tab (the "doors" as your reference site likes to call them).

downtroden · 12-16-2004, 06:52 AM

but the 'doors' are a part of the css style, there are not <img> elements in the div... that was the beauty of it in my mind.

Tried out your script and none of the divs hid themselves when the links were clicked.

downtroden · 12-16-2004, 08:16 AM

thanks for the help all... I've decided to use the change property function that's included with dreamweaver. It's not 'pretty' code, but it works. I had to change the tabs into .gif's... alas, I have been defeated by the javascript beast.

imaginemn · 12-16-2004, 08:22 AM

That makes more sense once you posted the images and what you were trying to accomplish. IMO you were trying to fit a square peg in a round one.

With additional time and coding you would have accomplished what you were looking for but the code would have been much bigger and probably not made sense to continue.

Glad you found a solution.

imaginemn

**LazyJim** · 12-16-2004, 10:50 AM

Is each tab an <li> ?

What exactly is not happening that you wish to happen (and when should it happen)?

I'm not completely clear what your aim is but I'm prety sure it can be done simply with your your sliding doors!

downtroden · 12-16-2004, 03:38 PM

yeah, each tab is a <li> element. But I've come to the conclusion that imaginemn brought up that the final code would have been clunky, and hard to read. the macromedia code isn't easy to read, by far... but there is a gui that I can use to alter it.