Go Back  HTML Forums - Free Webmaster Forums and Help Forums > WEBSITE DEVELOPMENT > Client Side Scripting
User Name:
Password:
 

Reply
Thread Tools   Display Modes
  View First Unread
 
Old 04-09-2006, 06:06 PM
  #1
ITL
Warrior (Level 8)
 
ITL's Avatar
 
Join Date: Sep 2004
Location: England
Posts: 79
iTrader: (0)
ITL is on a distinguished road
Change DIV content from link

Hello!

I'm attempting to make an "info box" system, where a DIV has a few hyperlinks next to it in a vertical menu format. Making this won't be a problem - but, I need each hyperlink to change the contents of the DIV.

Thanks for any help.
ITL is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 04-09-2006, 06:36 PM
  #2
_Aerospace_Eng_
The CSS Master (somewhat)
 
Join Date: Dec 2004
Location: In a galaxy far far away...
Posts: 11,146
iTrader: (0)
_Aerospace_Eng_ has disabled reputation
This should help http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm
they use onmouseover but you can use onclick instead.
__________________

76 invites left. PM me for a Gmail invite along with email addy.
Why we won't help you .::. Web Developer's Handbook .::. Why Tables for Layout is Stupid?
_Aerospace_Eng_ is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 04-09-2006, 06:39 PM
  #3
ITL
Warrior (Level 8)
 
ITL's Avatar
 
Join Date: Sep 2004
Location: England
Posts: 79
iTrader: (0)
ITL is on a distinguished road
Hmmmm.....that's not really what I'm after - and it's a bit complicated for my needs. Thanks anyway.
ITL is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 04-09-2006, 06:43 PM
  #4
_Aerospace_Eng_
The CSS Master (somewhat)
 
Join Date: Dec 2004
Location: In a galaxy far far away...
Posts: 11,146
iTrader: (0)
_Aerospace_Eng_ has disabled reputation
It changes the div contents like you wanted. Its not vertical but you said that making it wouldn't be a problem. Same script
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

#tablist{
padding: 3px 0;
margin:0;
font: bold 12px Verdana;
}

#tablist li{
list-style: none;
margin: 0;
width:150px;
}

#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
display:block;
}

#tablist li a:link, #tablist li a:visited{
color: #FFF;
}

#tablist li a.current{
background: lightyellow;
}

#tabcontentcontainer{
width: 400px;
/* Insert Optional Height definition here to give all the content a unified height */
padding: 5px;
border: 1px solid black;
}

.tabcontent{
display:none;
}

a.tab {
background:black;
}

a.tab:active{
background:red;
}
</style>

<script type="text/javascript">

/***********************************************
* Tab Content script-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]

////////Stop editting////////////////

function cascadedstyle(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(csspropertyNS)
}
}

var previoustab=""

function expandcontent(cid, aobject){
var links=document.getElementsByTagName("a");
for(i=0;i<links.length;i++) {
if(links[i].className=="tab") {
   links[i].style.backgroundColor="#000";
 }
}
     aobject.style.backgroundColor="#F00";
if (document.getElementById){
highlighttab(aobject)
detectSourceindex(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
if (aobject.blur)
aobject.blur()
return false
}
else
return true
}

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
//for (i=0; i<tabobjlinks.length; i++)
//tabobjlinks[i].style.backgroundColor=initTabcolor
//var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
//aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor
}

function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}

function detectSourceindex(aobject){
for (i=0; i<tabobjlinks.length; i++){
if (aobject==tabobjlinks[i]){
tabsourceindex=i //source index of tab bar relative to other tabs
break
}
}
}

function do_onload(){
var cookiename=(typeof persisttype!="undefined" && persisttype=="sitewide")? "tabcontent" : window.location.pathname
var cookiecheck=window.get_cookie && get_cookie(cookiename).indexOf("|")!=-1
collecttablinks()
initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color")
initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color")
if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
var cookieparse=get_cookie(cookiename).split("|")
var whichtab=cookieparse[0]
var tabcontentid=cookieparse[1]
expandcontent(tabcontentid, tabobjlinks[whichtab])
}
else
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload


</script>
</head>

<body>
<ul id="tablist">
<li><a class="tab" href="http://www.dynamicdrive.com" onclick="return expandcontent('sc1', this)">Dynamic Drive</a></li>
<li><a class="tab" href="new.htm" onclick="return expandcontent('sc2', this)">What's New</a></li>
<li><a class="tab" href="hot.htm" onclick="return expandcontent('sc3', this)">What's Hot</a></li>
<li><a class="tab" href="search.htm" onclick="return expandcontent('sc4', this)">Search</a></li>
</ul>

<div id="tabcontentcontainer">

<div id="sc1" class="tabcontent">
Visit Dynamic Drive for free, award winning DHTML scripts for your site:<br />
</div>

<div id="sc2" class="tabcontent">
Visit our <a href="http://www.dynamicdrive.com/new.htm">What's New</a> section to see recently added scripts to our archive.</div>

<div id="sc3" class="tabcontent">
Visit our <a href="http://www.dynamicdrive.com/hot.htm">Hot</a> section for a list of DD scripts that are popular to the visitors.</div>

<div id="sc4" class="tabcontent">
<form action="http://www.google.com/search" method="get" onsubmit="this.q.value='site:www.dynamicdrive.com '+this.qfront.value">
<p>Search Dynamic Drive:<br />
<input name="q" type="hidden" />
<input name="qfront" type="text" style="width: 180px" /> <input type="submit" value="Search" /></p>
</form>
</div>
</div>
</body>
</html>
modified using onclick, you can't expect things to be easy. Just try the script before you say its not what you need.
__________________

76 invites left. PM me for a Gmail invite along with email addy.
Why we won't help you .::. Web Developer's Handbook .::. Why Tables for Layout is Stupid?
_Aerospace_Eng_ is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 04-09-2006, 07:18 PM
  #5
ITL
Warrior (Level 8)
 
ITL's Avatar
 
Join Date: Sep 2004
Location: England
Posts: 79
iTrader: (0)
ITL is on a distinguished road
I'm having trouble figuring out what all of the ID's are - for me, the CSS is far too complicated for what it does.
ITL is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 04-09-2006, 10:24 PM
  #6
_Aerospace_Eng_
The CSS Master (somewhat)
 
Join Date: Dec 2004
Location: In a galaxy far far away...
Posts: 11,146
iTrader: (0)
_Aerospace_Eng_ has disabled reputation
Its really just styling the links. The ids are there for the JS to know what content to change/hide. Again you can't expect things to be easy. I think its pretty simple, then again I've doing this for a while now. Maybe this is what you are looking for. http://www.dynamicdrive.com/dynamici...jaxcontent.htm
but if you couldn't understand the first one then you might not understand this one either.
__________________

76 invites left. PM me for a Gmail invite along with email addy.
Why we won't help you .::. Web Developer's Handbook .::. Why Tables for Layout is Stupid?
_Aerospace_Eng_ is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 04-11-2006, 09:02 AM
  #7
ITL
Warrior (Level 8)
 
ITL's Avatar
 
Join Date: Sep 2004
Location: England
Posts: 79
iTrader: (0)
ITL is on a distinguished road
Thanks, but I found a small code that does the trick nicely - here's a demo of what I've done so far:

[click]

I could still do with a little help, though. Clicking on a link button not only swaps the DIVs, but also toggles a DIV off and on. (click on a link twice, and you'll see what I mean). The toggling isn't needed, just the DIV swapping.
ITL is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 04-11-2006, 10:03 AM
  #8
Bill Posters
Catapulted
 
Join Date: May 2003
Posts: 610
iTrader: (0)
Bill Posters is on a distinguished road
e.g.
Code:
	function switchContent(obj) {

		obj = (!obj) ? 'sub1' : obj;

		var contentDivs = document.getElementById('container').getElementsByTagName('div');
		for (i=0; i<contentDivs.length; i++) {
			if (contentDivs[i].id && contentDivs[i].id.indexOf('sub') != -1) {
				contentDivs[i].className = 'hide';
			}
		}
		document.getElementById(obj).className = '';
	
	}
Code:
<div id="container">

	<div id="sub1">content 1</div>
	<div id="sub2" class="hide">content 2</div>
	<div id="sub3" class="hide">content 3</div>

	<div id="navigation">
		<a href="#" class="mininav" onclick="switchContent('sub1'); return false;">link 1</a>
		<a href="#" class="mininav" onclick="switchContent('sub2'); return false;">link 2</a>
		<a href="#" class="mininav" onclick="switchContent('sub3'); return false;">link 3</a>
	</div>

</div>
Try to bear in mind what happens to user without CSS and/or javascript.
You might consider using the link hrefs (navigation div) for urls with query string which can then be utilised by some PHP in the head for includes.
That way, everyone gets to see the content and those with CSS and js get to see it exactly how you want them to see it.
Bill Posters is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 04-11-2006, 10:14 AM
  #9
ITL
Warrior (Level 8)
 
ITL's Avatar
 
Join Date: Sep 2004
Location: England
Posts: 79
iTrader: (0)
ITL is on a distinguished road
Nope, I won't be doing it that way - I intend to use this code on a remotely hosted forum which already has CSS and Javscript codes added.

All I need is for the "toggling" of DIVs to not happen.
ITL is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 04-11-2006, 11:43 AM
  #10
Bill Posters
Catapulted
 
Join Date: May 2003
Posts: 610
iTrader: (0)
Bill Posters is on a distinguished road
Quote:
Originally Posted by ITL
Nope, I won't be doing it that way - I intend to use this code on a remotely hosted forum which already has CSS and Javscript codes added.

All I need is for the "toggling" of DIVs to not happen.
Won't be doing it what way?
Won't be using the js I posted or won't be using a non-js fallback?
Bill Posters is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 04-11-2006, 11:49 AM
  #11
ITL
Warrior (Level 8)
 
ITL's Avatar
 
Join Date: Sep 2004
Location: England
Posts: 79
iTrader: (0)
ITL is on a distinguished road
I won't be using a non-js fallback. Thanks for the advice, though.

I tried your code, but it didn't work right - it displayed all 3 DIVs at the same time.
ITL is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 04-11-2006, 11:58 AM
  #12
Bill Posters
Catapulted
 
Join Date: May 2003
Posts: 610
iTrader: (0)
Bill Posters is on a distinguished road
Sorry, I forgot to mention that you need to add the following rule to your stylesheet.

css
Code:
.hide {
	display: none;
}
Bill Posters is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 04-11-2006, 12:06 PM
  #13
ITL
Warrior (Level 8)
 
ITL's Avatar
 
Join Date: Sep 2004
Location: England
Posts: 79
iTrader: (0)
ITL is on a distinguished road
Excellent - works a treat. Thank you!
ITL is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 04-13-2006, 08:55 AM
  #14
ITL
Warrior (Level 8)
 
ITL's Avatar
 
Join Date: Sep 2004
Location: England
Posts: 79
iTrader: (0)
ITL is on a distinguished road
One more thing....

Is it possible to have this code remember (using cookies) which DIV is the active one? As it is now, the code resets to the default DIV being open when the page is refreshed.
ITL is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 04-13-2006, 10:36 AM
  #15
Bill Posters
Catapulted
 
Join Date: May 2003
Posts: 610
iTrader: (0)
Bill Posters is on a distinguished road
Code:
window.onload = function() {

	if (!document.getElementById('sub1')) return;
	checkCookie();

}

function switchContent(obj) {

	obj = (!obj) ? 'sub1' : obj;

	var contentDivs = document.getElementById('container').getElementsByTagName('div');
	for (var i=0, contentDiv; contentDiv=contentDivs[i]; i++) {
		if (contentDiv.id && contentDiv.id.indexOf('sub') != -1) {
			contentDiv.className = 'hide';
		}
	}
	document.getElementById(obj).className = '';
	createCookie('whichContent',obj,365)
	
}

function checkCookie() {

	(readCookie('whichContent')) ? switchContent(readCookie('whichContent')) : switchContent('sub1');

}

function createCookie(name,value,days) {

	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";

}

function readCookie(name) {

	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0, c; c=ca[i]; i++) {
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;

}
Bill Posters is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Reply
KEEP TABS
SPONSORS
 
Boxedart

 
 


 
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
  
 
 
 



 
  POSTING RULES
 
 
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Thread Tools
Display Modes

Forum Jump

 

All times are GMT -5. The time now is 08:51 PM.

   

Mascot team created by Drawshop.com | Web Hosting

Powered by vBulletin® Version 3.6.7
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.

Server Monitoring by ENIACmonitor 0.01
HTMLforums.com © Big Resources, Inc. Web Design by BoxedArt.com
vRewrite 1.5 beta SEOed URLs completed by Tech Help Forum and Chalo Na.