PDA

View Full Version : Javascript and CSS

ladyBug
09-29-2005, 07:47 PM
hi all:

wondering if you could help.... i've created a 3 column webpage in css with a menu on the left and text content in the middle. these are nested in div tags.

javascript question: is there a way to script the links so that they open in the middle text section - sort of like frames, but not? so that everytime you click a link the text changes in the middle section?

i know a bit about css but i know zip about javascript. i don't even know what you would call this, although i've seen it on several sites and it would really work for me if i could get javascript to work with the css ive already created.

thanks ahead for any help. :D
strykerblade
09-29-2005, 08:40 PM
Hi.
Saw your post and it sounds like something I use myself. Please pay special attention to the array in the head section. If you add more links to your document, add more variables in the head area. Separate them by using the commas. If you don't need as many links on your page, make sure to take the unused variables out!


<head>

<script type="text/javascript">

<!-- Begin

var subs_array = new Array("sub0","sub1","sub2","sub3");// Put the id's of your hidden divs in this array

function displaySubs(the_sub){

if (document.getElementById(the_sub).style.display==""){

document.getElementById(the_sub).style.display = "none";return

}

for (i=0;i<subs_array.length;i++){

var my_sub = document.getElementById(subs_array[i]);

my_sub.style.display = "none";

}

document.getElementById(the_sub).style.display = "";

}

// End -->

</script>


</head>



<body>


<!--Begin Left Column Info -->
<!--These links will all show up. These <a href> tags can be used however you want. -->
<div>
<br>

<p><a href="javascript:void(0)" onClick="displaySubs('sub0')" onFocus="if(this.blur)this.blur()";>

Whatever you want. Obviously this is the first link on left.</a></p>


<p><a href="javascript:void(0)" onClick="displaySubs('sub1')" onFocus="if(this.blur)this.blur()";>

<strong>Topic #2</strong> </a> </p>


<p><a href="javascript:void(0)" onClick="displaySubs('sub2')" onFocus="if(this.blur)this.blur()";>

<strong>Topic #3</strong> </a> </p>


<p><a href="javascript:void(0)" onClick="displaySubs('sub3')" onFocus="if(this.blur)this.blur()";>

<strong>Topic #4</strong> </a> </p>


</div>

<!--End Left Column Info -->






<!-- Begin Middle Column Info -->
<!-- These div's go in the area you designated as your middle content area. Each individual <div> will show up as you click the corresponding <a href> in the code above.-->

<div id="sub0">
<h1>Whatever you want</h1>
Put anything here.
</div>


<div id="sub1">
<h1>Topic #2</h1>

</div>


<div id="sub2">
<h1>Topic #3</h1>

</div>


<div id="sub3">
<h1>Topic #4</h1>

</div>

<!-- End Middle column info -->

I hope this helps you. Good luck!
ladyBug
09-29-2005, 10:59 PM
thanks for your help. :p just a few questions if that's ok.

1 - what part of the code hides the div?

2 - is there a way to do the same thing but loading an entire page instead? my concern is i may end up with many pages of information and i was hoping a link on the left could load the page in the middle div. in essence it would work more like a frame, that is loading an external html or text file. additional links and files may be added later if needed, and hopefully the pages could keep the css formatting.

is this a doable thing or beyond the scope of what javascript and css can do together? :confused:
strykerblade
09-30-2005, 06:21 PM
Well, let me get this straight.
You want to click a link in your left <div> area.
This link in turn loads an entirely new page
worth of content in your middle <div> area.

All of this and you want the loaded page information
to keep the main page's css style?

I was looking into doing that very thing myself.

Let me get back to you when I have something.