?
Solved

div tag visibility - changing content in text box

Posted on 2005-03-24
5
Medium Priority
?
362 Views
Last Modified: 2006-11-17
Hello

I have a very simple website created from div tags.  I have a menu on the left and the content section on the right.  I want to simply have the links on the left when clicked change the contents of the div section to the right.  I know that a javascript function needs to be employed but my knowledge is limited in that area.  Please provide the appropriate script for this action.  I will be addding further links and more content so keep that in mind.

Here is the code...

<html>
<head>

<style type="text/css">

body {

scrollbar-arrow-color: FFFFFF;
scrollbar-base-color: 990000;
scrollbar-dark-shadow-color: 990000;
scrollbar-track-color: 990000;
scrollbar-face-color: 990000;
scrollbar-shadow-color: FFFFFF;
scrollbar-highlight-color: FFFFFF;
scrollbar-3d-light-color: 990000;

}


#maintable {

border: 1px solid #990000;
position: relative;
width: 736px;
height: 400px;


}


#table1 {

border-top: 0px;
border-bottom: 0px;
border-left: 0px;
border-right: 1px solid #990000;
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 400px;
padding: 5px;

}


#poem1 {

position: absolute;
top: 0px;
left: 200px;
width: 536px;
height: 400px;
padding: 5px;
overflow: auto;
text-align: left;
font-size: 11px;


}

#poem2 {

position: absolute;
top: 0px;
left: 200px;
width: 536px;
height: 400px;
padding: 5px;
overflow: auto;
text-align: left;
font-size: 11px;


}


#poem3 {

position: absolute;
top: 0px;
left: 200px;
width: 536px;
height: 400px;
padding: 5px;
overflow: auto;
text-align: left;
font-size: 11px;


}

</style>

</head>



<body>

<div align=center>
<div id="maintable">

<div id="table1">

<p align="left">
<a href="#">poem 1</a>
<br>
poem 2
<br>
poem 3
</p>

</div>

<div id="poem1">
<pre>
lovely annie with silky soft white skin
dark penetrating eyes, dark flowing hair

young annie so full of life
we ran through the forest together holding hands

deep ravine, brush and rocks
trampled on bugs, exploring holes and niches
your dog close behind

lighting fires on stones
smell of fresh moss and lichen, branches burn
you smiling, me smiling back

sharing moments in the forest
dark haired girl, fine soft annie
first kiss felt sweet

intimate innocence, imagining and searching
stepping into the unknown together
adventure, heart pounding
levity in light headedness and love

running through the woods with you
feeling the wind against our skin
the branches and leaves tickling our exposed shins

i see your hair flowing, giggling
dark haired girl you look back at me smiling

i pass you and i look back
but you are gone, heart drops, forest fades, i am alone

and you were alone that night
drip drop, flood over your life, drip drop
like the scarification of giant rocks

scars unhealed, opened, slashed and burned
the forest of our youth destroyed

smiling face, annie with dark eyes, dark hair and soft skin
too soft for the world, the forest was only temporary sanctuary

secret places, soft escapes
solitude for two in our own little world was freedom for us

our parents calling our names
like a call to reality we reluctantly obeyed
broken from our forest revelry

drowning in sorrow gasping for air
not having the strength to fight against the flood

dreams of forests runs through my mind and the girl annie
dark eyes and dark flowing hair wild, free
we were, and still are, there
</pre>

</div>

<div id="poem2">

<pre>
too little too late
like helping hands
after a disaster
i fade away
everything that comes
comes after
but i must embark
upon this mission
giving life and love
and fighting scornful
attrition
with mutiny in our
relationships
we keep feelings
from exploding
by burying deep within
our treasure chests
the pirates lonesome
journey
</pre>

</div>

<div id="poem3">

POEM 3

</div>



</div>
</center>

</body>




</html>
0
Comment
Question by:dialektkid
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
5 Comments
 
LVL 25

Accepted Solution

by:
archrajan earned 1000 total points
ID: 13621743
<html>
<head>

<style type="text/css">

body {

scrollbar-arrow-color: FFFFFF;
scrollbar-base-color: 990000;
scrollbar-dark-shadow-color: 990000;
scrollbar-track-color: 990000;
scrollbar-face-color: 990000;
scrollbar-shadow-color: FFFFFF;
scrollbar-highlight-color: FFFFFF;
scrollbar-3d-light-color: 990000;

}


#maintable {

border: 1px solid #990000;
position: relative;
width: 736px;
height: 400px;


}


#table1 {

border-top: 0px;
border-bottom: 0px;
border-left: 0px;
border-right: 1px solid #990000;
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 400px;
padding: 5px;

}


#poem1 {

position: absolute;
top: 0px;
left: 200px;
width: 536px;
height: 400px;
padding: 5px;
overflow: auto;
text-align: left;
font-size: 11px;


}

#poem2 {

position: absolute;
top: 0px;
left: 200px;
width: 536px;
height: 400px;
padding: 5px;
overflow: auto;
text-align: left;
font-size: 11px;


}


#poem3 {

position: absolute;
top: 0px;
left: 200px;
width: 536px;
height: 400px;
padding: 5px;
overflow: auto;
text-align: left;
font-size: 11px;


}

</style>
<script>
function dothis(obj)
{
var divs = document.getElementsByTagName('div')
for(i =0; i <divs.length; i++)
{
if(divs[i].id != obj && divs[i].id.indexOf('poem')!= "-1")
divs[i].style.display = "none";
else
divs[i].style.display = "";
}
}
</script>
</head>



<body>

<div align=center>
<div id="maintable">

<div id="table1">

<p align="left">
<a href="#" onclick = "dothis('poem1');return false;">poem 1</a>
<br>
<a href="#" onclick = "dothis('poem2');return false;">poem 2</a>
<br>
poem 3
</p>

</div>

<div id="poem1">
<pre>
lovely annie with silky soft white skin
dark penetrating eyes, dark flowing hair

young annie so full of life
we ran through the forest together holding hands

deep ravine, brush and rocks
trampled on bugs, exploring holes and niches
your dog close behind

lighting fires on stones
smell of fresh moss and lichen, branches burn
you smiling, me smiling back

sharing moments in the forest
dark haired girl, fine soft annie
first kiss felt sweet

intimate innocence, imagining and searching
stepping into the unknown together
adventure, heart pounding
levity in light headedness and love

running through the woods with you
feeling the wind against our skin
the branches and leaves tickling our exposed shins

i see your hair flowing, giggling
dark haired girl you look back at me smiling

i pass you and i look back
but you are gone, heart drops, forest fades, i am alone

and you were alone that night
drip drop, flood over your life, drip drop
like the scarification of giant rocks

scars unhealed, opened, slashed and burned
the forest of our youth destroyed

smiling face, annie with dark eyes, dark hair and soft skin
too soft for the world, the forest was only temporary sanctuary

secret places, soft escapes
solitude for two in our own little world was freedom for us

our parents calling our names
like a call to reality we reluctantly obeyed
broken from our forest revelry

drowning in sorrow gasping for air
not having the strength to fight against the flood

dreams of forests runs through my mind and the girl annie
dark eyes and dark flowing hair wild, free
we were, and still are, there
</pre>

</div>

<div id="poem2">

<pre>
too little too late
like helping hands
after a disaster
i fade away
everything that comes
comes after
but i must embark
upon this mission
giving life and love
and fighting scornful
attrition
with mutiny in our
relationships
we keep feelings
from exploding
by burying deep within
our treasure chests
the pirates lonesome
journey
</pre>

</div>

<div id="poem3">

POEM 3

</div>



</div>
</center>

</body>




</html>
0
 
LVL 15

Expert Comment

by:justinbillig
ID: 13621758

<html>
<head>

<script>

      function ShowDiv( objLink )
      {
            // Variables
            var intIndex = 0;
            var aobjDivs = document.getElementById( "idMySpan" ).getElementsByTagName( "div" );
            var strID = objLink.innerText.replace( " ", "" );
            

            // Loop throuugh the divs
            for( intIndex = 0; intIndex < aobjDivs.length; intIndex++ )
            {
                  // Hide all divs
                  aobjDivs[ intIndex ].style.display = "none";
            }

            // SHow the selected poem
            document.getElementById( strID ).style.display = "block";
      }

</script>

<style type="text/css">

body {

scrollbar-arrow-color: FFFFFF;
scrollbar-base-color: 990000;
scrollbar-dark-shadow-color: 990000;
scrollbar-track-color: 990000;
scrollbar-face-color: 990000;
scrollbar-shadow-color: FFFFFF;
scrollbar-highlight-color: FFFFFF;
scrollbar-3d-light-color: 990000;

}


#maintable {

border: 1px solid #990000;
position: relative;
width: 736px;
height: 400px;


}


#table1 {

border-top: 0px;
border-bottom: 0px;
border-left: 0px;
border-right: 1px solid #990000;
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 400px;
padding: 5px;

}


#poem1 {

position: absolute;
top: 0px;
left: 200px;
width: 536px;
height: 400px;
padding: 5px;
overflow: auto;
text-align: left;
font-size: 11px;
display:none;



}

#poem2 {

position: absolute;
top: 0px;
left: 200px;
width: 536px;
height: 400px;
padding: 5px;
overflow: auto;
text-align: left;
font-size: 11px;
display:none;


}


#poem3 {

position: absolute;
top: 0px;
left: 200px;
width: 536px;
height: 400px;
padding: 5px;
overflow: auto;
text-align: left;
font-size: 11px;
display:none;


}



</style>

</head>



<body>

<div align=center>
<div id="maintable">

<div id="table1">

<p align="left">
<a href="#" onclick="ShowDiv( this ); return false;">poem 1</a>
<br>
<a href="#" onclick="ShowDiv( this ); return false;">poem 2</a>
<br>
<a href="#" onclick="ShowDiv( this ); return false;">poem 3</a>

</p>

</div>
<span id="idMySpan">
<div id="poem1">
<pre>
lovely annie with silky soft white skin
dark penetrating eyes, dark flowing hair

young annie so full of life
we ran through the forest together holding hands

deep ravine, brush and rocks
trampled on bugs, exploring holes and niches
your dog close behind

lighting fires on stones
smell of fresh moss and lichen, branches burn
you smiling, me smiling back

sharing moments in the forest
dark haired girl, fine soft annie
first kiss felt sweet

intimate innocence, imagining and searching
stepping into the unknown together
adventure, heart pounding
levity in light headedness and love

running through the woods with you
feeling the wind against our skin
the branches and leaves tickling our exposed shins

i see your hair flowing, giggling
dark haired girl you look back at me smiling

i pass you and i look back
but you are gone, heart drops, forest fades, i am alone

and you were alone that night
drip drop, flood over your life, drip drop
like the scarification of giant rocks

scars unhealed, opened, slashed and burned
the forest of our youth destroyed

smiling face, annie with dark eyes, dark hair and soft skin
too soft for the world, the forest was only temporary sanctuary

secret places, soft escapes
solitude for two in our own little world was freedom for us

our parents calling our names
like a call to reality we reluctantly obeyed
broken from our forest revelry

drowning in sorrow gasping for air
not having the strength to fight against the flood

dreams of forests runs through my mind and the girl annie
dark eyes and dark flowing hair wild, free
we were, and still are, there
</pre>

</div>

<div id="poem2">

<pre>
too little too late
like helping hands
after a disaster
i fade away
everything that comes
comes after
but i must embark
upon this mission
giving life and love
and fighting scornful
attrition
with mutiny in our
relationships
we keep feelings
from exploding
by burying deep within
our treasure chests
the pirates lonesome
journey
</pre>

</div>

<div id="poem3">

POEM 3

</div>

</span

</div>
</center>

</body>




</html>
0
 

Author Comment

by:dialektkid
ID: 13621809
hi archrajan

one issue.  the poems are both visible on load of the page.  how can we make it so that the first poem displays on load while the other poems remain invisible?

thanks

0
 
LVL 25

Expert Comment

by:archrajan
ID: 13621850
just change the display of all other pages except poem 1
by adding

style = "display:none"
to the other poem divs except the poem1 div
0
 
LVL 25

Expert Comment

by:archrajan
ID: 13621860
The easiest way is to add
<script>
dothis('poem1')
</script>
just before the closing body tag
like

<script>
dothis('poem1')
</script>
</body>
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to implement server side field validation and display customized error messages to the client.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question