Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 364
  • Last Modified:

div tag visibility - changing content in text box

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
dialektkid
Asked:
dialektkid
  • 3
1 Solution
 
archrajanCommented:
<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
 
justinbilligCommented:

<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
 
dialektkidAuthor Commented:
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
 
archrajanCommented:
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
 
archrajanCommented:
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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now