HTML - Hide/show Forms/div's Using Drop Down Menu.

I have been trying to piece something together with a traditional DHTML show hide, but i cannot get it to work properly, so i trashed it.

What I'm trying to do seems very simple. I have 2 videos I want to have on 1 page. I don't want to stack them, I just want to give the user a text link choice on which to choose. So the page would load with a generic looking video player. Which would switch out once you picked a video.

HTML Code:

<strong>Select: </strong><a href="#">video 1</a> | <a href="#">video 2</a> 
<div id="generic">generic page</div>
<div id="video1">vid1</div>
<div id="video2">vid2</div>

I kinda got it to work in an earlier version, but it wasn't perfect. It would end up showing video1 properly, but when you clicked on video 2 it would show both. It wouldn't hide video 1.

any help would be much apprecaited.

hi all,

i am having some issues with the show/hide div commands, i was hoping someone could help me out. below is the code i am using such that depending on what image you click on, a different div is shown. this works fine, but i would also like to change more than one div located in a different table cell - not sure if this is clearly explained, hopefully the code will be more concise -

javascript -
Code:

<script type="text/javascript">
<!--
function layerchange(szDivID, iState) 
{
    if(document.layers)	   
    {
       document.layers[szDivID].visibility = iState ? "show" : "hide";
    }
    else if(document.getElementById)	  
    {
        var obj = document.getElementById(szDivID);
        obj.style.visibility = iState ? "visible" : "hidden";
    }
    else if(document.all)	
    {
        document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
    }   
}
</script>

body html
HTML Code:

<div id="text">
    <table width="775" height="215" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="258" valign="top">
        <div class="layer_change">
                
                <input type="image" src="images/text/sml/small_1.gif" onclick=	 "layerchange('div_one',1);layerchange('div_two',0);layerchange('div_three',0); return false;" value="Hamper 1" />
          <input type="image" src="images/text/sml/medium_1.gif" onclick="layerchange('div_one',0);layerchange('div_two',1);layerchange('div_three',0); return false;" value="Hamper 2" />
          <input type="image" src="images/text/sml/large_1.gif" onclick="layerchange('div_one',0);layerchange('div_two',0);layerchange('div_three',1); return false;" value="Hamper 3" />
          </div>

            <div id="div_one" class="one">
                Small Hamper Contents
            </div>
            
            <div id="div_two" class="two">
                Medium Hamper Contents
            </div>

            <div id="div_three" class="three">
                Large Hamper Contents
            </div>
        </td>
        <td width="516"><table width="516" height="215" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="258" height="190" style="vertical-align:top">
            <div id="div_one" class="one">
                Small Hamper Contents
            </div>
            
            <div id="div_two" class="two">
                Medium Hamper Contents
            </div>

            <div id="div_three" class="three">
                Large Hamper Contents
            </div>
            </td>
            <td width="258" height="190" style="vertical-align:top">
            <div id="div_one" class="one">
                Small Hamper Contents
            </div>
            
            <div id="div_two" class="two">
                Medium Hamper Contents
            </div>

            <div id="div_three" class="three">
                Large Hamper Contents
            </div>
            </td>
          </tr>
          <tr>
            <td><div align="center"><a href="images/structure/nifty_hampers_logo.gif" rel="lightbox" title="Birthday Hamper">Click here to enlarge</a></div></td>
            <td>&nbsp;</td>
          </tr>
        </table></td>
      </tr>
    </table>
  </div>

any ideas....?

can you show and hide layers with text? I know that you can use the behavior function on images to use it, but i just can't figure out how i can do it with text

For example: have a layer in a HTML (hidden), when i put my mouse over a text "testing", it shows that layer, and vice-versa on mouse out.

I've got a very slow server which was making the screen->new screen time very slow, so to prevent there being agonising white inbetweeney screens, i put the meta-tags in:
meta http-equiv='Page-Enter' content='blendTrans(Duration=0)'
meta http-equiv='Page-Exit' content='blendTrans(Duration=0)
which does the trick..but, as I am also showing, hiding elements thru script I am also seeing these elements come and go, which is confusing.
Any ideas?

I found a way to show/hide text-tables-content (divs) in my page using a link,
but unfortunately, when I hit that link, the page reloads to the top again, so if it is too long, I have to scroll down again and again...

Can I reload page at the scrolling place I was before, or is there a better way to hide/show divs with mouseClick on link or picture?



I use this in head tag:

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

var state = 'none';

function showhide(layer_ref) {

if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //is IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
//-->
</script>





Also, my body looks like this...:

<body>
some text <br>
some text <br>
some text <br>
some text <br>
some text <br>
some text <br>
some text <br>
some text <br>
some text <br>
some text <br>
some text <br>
some text <br>
some text <br>
some text <br>
some text <br>
some text <br>
some text <br>
some text <br>
some text <br>
some text <br>
some text <br>
some text <br>
some text <br>
some text <br>
some text <br>
some text <br>
some text <br>
some text <br>
some text <br>

<p><a href="#" onclick="showhide('div1');">Show/hide me</a></p>
<div id="div1" style="display: none;">This is the content</div>

<p><a href="#" onclick="showhide('div2');">Show/hide me</a></p>
<div id="div2" style="display: none;">


<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

This is the content 222222</div>

<p><a href="#" onclick="showhide('div3');">Show/hide me</a></p>
<div id="div3" style="display: none;">

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
<td>row 1, cell 4</td>
<td>row 1, cell 5</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 3</td>
<td>row 1, cell 4</td>
<td>row 1, cell 5</td>
</tr>
</table>
This is the content</div>
</body>

Hey there!

I'm kinda new here, but I really need some help.

I'm trying to show/hide the Swedish translation to our lyrics on our band WP page. It can be viewed here. I'm using a table with separate <td>'s for every individual lyric and every individual translation. The translations are in <div>'s. This is included in the header:
<script type="text/javascript"><!--

function showhide(el){

el=document.getElementById(el);
el.style.display=(el.style.display=="block")?"none":"block";

}

//--></script> And this is the code for my little Swedish flag you click to make the translation DIVs visible. The names within '' are the different lyric DIVs.
<p>Show/hide translation: <a href="#" onclick="showhide('armourswe');showhide('seamsswe');showhide('breathswe');showhide('cornersswe');sho whide('cunningswe');showhide('whiteswe');showhide('graniteswe');showhide('liliesswe');showhide('beac hesswe');showhide('pebblesswe');showhide('rockswe');showhide('ruinsswe');showhide('sarabandeswe');sh owhide('unknownswe');return false;"><img src="http://www.alpha60.net/wordpress/images/swedish.jpg" alt="Show/hide Swedish translation" /></a></p> Why does IE move the left column down when the translations are visible? It works fine in Firefox. I'm not a HTML king and tried a long time to get this far, so I'd really love some help!

Address: http://www.alpha60.net/lyrics

/Leo from Sweden

It works correctly, but did I do it correctly to add color?

I want the show/hide to be blue and the text to be red.

<html>

<head>
<style type="text/css">

a.showandhide{
color: rgb(0,0,255);
}

body{
color: rgb(255,0,0);
}
</style>
<title>Test hide thing from TIF T&C</title>
</head>

<body>

<script type="text/javascript">
function showhide(id) {
if(document.getElementById(id).style.display == 'none') {
document.getElementById(id).style.display = 'block';
}
else {
document.getElementById(id).style.display = 'none'
}
}
</script>
<a href="javascript:void(0)" onclick="showhide('box')" class="showandhide">Show / Hide</a>
<div id="box" style="display:none;">
Blah blah blah blah blah blah
</div>

</body>
</html>

I've been making a website for a car enthusiast and I need to be able to show different pictures of cars when the thumbnail is clicked.

I'm using layers to to this. When I click on a thumbnail it shows the car and hides what was previously there.

The problem I have is that when I add a new thumbnail, I have to go through all the other thumbs and set them to hide it onClick. This is getting really manotinous now that I have over 30 thumbs.

I looked at the Dramweaver help file and it does state that : (You can change the visibility of multiple layers with a single behavior.) But it doesnt actually tell you how!!

Anybody help me out??

Leroy

hi everyone !
I've an indented file text (directory to text, see example below ) that i need to convert in the fastest way possible to html with hide/show feature .. how can I manage this ?
the list is very long and gets updated -- I i wouldnt want to do that manually .. any clue ?

ex

ARTIST1
CD1
1-song1
2-song2
CD2
1-song1
ARTIST2
CD3
1-song1
2-song2
CD4
1-song1

should become

ARTIST1
ARTIST2


and if u click on ARTIST1 u get

ARTIST1
CD1
CD2
ARTIST2

one more click on CD will show the tracks ..

any idea ?
thanks!F

Hi,

I need to move the hide content link from the bottom up to the top. It needs to replace the show category. Example: show category is clicked hide category is then displayed. When hide category is clicked show category is displayed.

Also I can't seem to make the 1 2 3 4 buttons highlight when active. When you click on a number it slides along to that number but doesn't highlight what number you are on

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>test</title>
        



        <style type="text/css" media="screen">
        /* CSS Reset */
            * {
                margin: 0;
                padding: 0;
                border: 0;
                outline: 0;
            }
        
            body {
                font-family: Arial, Helvetica, sans-serif;
                background-color: #FFFFFF;
                color:#FF0000;
            }
a:link {
    color: #999999;
    text-decoration: none;
    font-size:14px;
}
a:visited {
    color: #999999;
    text-decoration: none;
    font-size:14px;
}
a:hover {
    color: #FF0000;
    letter-spacing: 3px;
        text-decoration: none;
        font-size:14px;

}
a:active {
    color: #FF0000;
    font-size:14px;

}

            
            

    #wrapper{
    position:relative;
    width:730px;
    height:600px;
    margin:0px auto;
    }

    #images{
    width:730px;
    height:552px;
    overflow:hidden;
    float:right;
    position: absolute;
    top: 48px;
    }
            


    #textbox{
    position: absolute;
    width:205px;
    height:40px;
    background-color: #FFFFFF;
    top: 68px;
    left: 20px;
    z-index: 2;
    padding: 10px;
    border-bottom: 2px solid red;

    }
    
    #logo {
    position: absolute;
    width: 101px;
    position: absolute;
    left: 634px;
    top: 19px;
    padding: opx;
    margin: 0px;
    z-index: 2;
} 

   .more {
    display: none;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    border-bottom: 2px solid red;
    padding-left: 8px;
    padding-right: 8px;
    margin-left: -10px;
    width: 209px;

}

       a.mo hover {

        text-decoration: none;}
        
   a.showLink, a.hideLink {
      text-decoration: none;
          font-size: xx-small;
      color: #36f;
      padding-left: 8px;
    /***  background: transparent url(down.gif) no-repeat left;***/ }
   a.hideLink {
   /***   background: transparent url(up.gif) no-repeat left;***/ }


            

            
        .drop1 {
    font-size: 12px;
    font-weight: bold;
}
        .drop2 {
    color: #666666;
    font-size: smaller;
}
        #apDiv1 {
    position:absolute;
    left:0px;
    top:px;
    width:141px;
    height:21px;
    z-index:1;
}
        </style>
                <script language="javascript" type="text/javascript">
function showHide(shID) {
   if (document.getElementById(shID)) {
      if (document.getElementById(shID+'-show').style.display != 'none') {
         document.getElementById(shID+'-show').style.display = 'none';
         document.getElementById(shID).style.display = 'block';
      }
      else {
         document.getElementById(shID+'-show').style.display = 'inline';
         document.getElementById(shID).style.display = 'none';
      }
   }
}
</script>

    </head>
    <body>
        

<div id="wrapper">

  <div id= logo><img src="logo2.png" width="101" height="92" /></div>
  <div id="textbox">
    <div><img src="logo_dedon.png" alt=""/>
          <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;"><img src="ShowProduct.jpg" alt="" /></a><br />
<img src="clear.gif" alt="" width="135" height="10" />
      <a href="#image1" id="tab1">1</a>
      <a href="#image2" id="tab1">2</a>
      <a href="#image3" id="tab1">3</a>
      <a href="#image4" id="tab1">4</a>    </div>
    <div id="example" class="more">
    
    
         <p><span class="drop1">BARCELONA</span><br /> 
           <span class="drop2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin non mi in urna hendrerit tincidunt. Maecenas eleifend erat et lacus. Sed tempor. Sed venenatis consequat neque. Sed massa. Donec quis orci sed lacus ullamcorper venenatis. </span></p>
      <p><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;"><img src="HideProduct.jpg" alt="" /></a></p>
    </div>

        
        
  </div>

    <div id="images">
        <div><a name="image1"></a><img src="001.jpg" alt="" title="" /></div>
                <div><a name="image2"></a><img src="002.jpg" alt="" title="" /></div>
                <div><a name="image3"></a><img src="003.jpg" alt="" title="" /></div>
                <div><a name="image4"></a><img src="004.jpg" alt="" title="" /></div>
  </div>
    
</div>

        
            

</body>
</html>

Please can some one help?

many thanks
Joe

Hi there,

I'm experiencing a strange problem in IE with the show-hide layers behavior. I have 4 layers, each with images inside them which are meant to link to other pages. This works fine in Firefox but not so in IE. The odd thing is that when you hover over the images in IE the link appears in the status bar and if you right click and choose "open link" it does work. The site is here www.patons.org/v2/ and its the images at the top that I'm talking about. Any help would be much appreciated.

Thanks,

Alex

Hello -

I am using a Selection/Drop Down box in my form. I use a database to populate the drop down box, which is working fine. A sample bit of the result would look like this:

<option value="1">California>
<option value="2">Nevada>
etc. etc.

This appears to be working just fine - the drop down box is fully populating and displaying as expected.

My form "action" needs to "know" which option was selected, so that it can send the ID value (1,2,3,etc) to the next page and continue executing accordingly.

The only area where I am having trouble is in this line:

<form method="post" action="details.php?id=[[WhatGoesHere??]] ">...

(note that "details.php" is a valid file, works great if I hard code this line with a valid ID #)

I am totally unclear as to what code should go after 'id='

This is easy, right? I just don't know the syntax/code. Do I have to go to Javascript to get the <option value> of the selected item? Doesn't the form have a way to give me this value?

I am ok with PHP, not as good with Javascript, if I have to go there to do this.

thanks,

Wtc

Hi there,
I was wondering if anyone knew of a good resource site, that I could get the code for a single-select form element for countries.

Here comes the tricky bit....

I want to have the drop downs in Italian, Russian, Polish and Spanish with the option value being country code.

Any suggestions????

All help as always is greatly appreciated on this, I will continue my search and if I find an answer I will post it.

Thanks

Greg

Hello,

I have a html page and a drop down menu on top. The drop down menu is for like users. The user has to pick their role and based on that, the page will only show some parts of the content.

So I have the drop down on top (e.g Developer, Editor, etc) and based on what they pick, hide the contents that they're not supposed to see.

Is this possible with HTML? What do I need to do?

My page contains several iframes and each contains a form. In IE (but not in FF), when I submit a form, the action page is shown in a new window. How can I make it so the action page is instead loaded inside the iframe?