Learn VBA & Macros in 1 Week!

JavaScript - Javascript Show Hide Divs Onchange Select Menu

Full Excel VBA Course - Beginner to Expert

Javascript Show Hide Divs Onchange Select Menu	View Content

Trying to get the divs to switch style properties when selected form select menu. Any help would be great!

Code:

<script type="text/javascript">
function showstuff(element){
        if(document.getElementById(element).style.display = 'block')
                  {
                        document.getElementById(have).style.visibility="block";
                        document.getElementById(look).style.visibility="none";
                  }
        else if(document.getElementById(element).style.visibility = 'block')
                  {
                        document.getElementById(look).style.visibility="block";
                        document.getElementById(have).style.visibility="none";
                  }
}
</script>

<select name="type" onchange="showstuff(this.value);">
          <option value="look">Look</option>
          <option value="have">Have</option>
</select>
<div id="have" style="display:block;">Have</div>
<div id="look" style="display:none;">Look</div>

Full Excel VBA Course - Beginner to Expert

Show/hide Divs Using Select

Similar Tutorials

View Content

Hi guys,

another day, another problem I have a select:

Code:

<label for="tiers">Number of tiers</label>
<select name="tiers" id="tiers" onchange="showtiers()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

So depending what the user will choose, I want to show below divs:

Code:

                    	<div class="tier" id="tier_1" style="display:block">
                    	<label for="tier1">Tier 1</label>
                        <select name="item" id="tier1" onchange="recalculate(this)">
                        <option value="0">Please choose1</option>
                        </select>
                        </div>
                        
                        <div class="tier" id="tier_2" style="display:none">
                        <label for="tier2">Tier 2</label>
                        <select name="item" id="tier2" onchange="recalculate(this)">
                        <option value="0">Please choose2</option>
                        </select>
                        </div>
                        
                        <div class="tier" id="tier_3" style="display:none">
                        <label for="tier3">Tier 3</label>
                        <select name="item" id="tier3" onchange="recalculate(this)">
                        <option value="0">Please choose3</option>
                        </select>
                        </div>
                        
                        <div class="tier" id="tier_4" style="display:none">
                        <label for="tier4">Tier 4</label>
                        <select name="item" id="tier4" onchange="recalculate(this)">
                        <option value="0">Please choose4</option>
                        </select>
                        </div>

As you can see, on page load you can only see select/div nr 1, three others are hidden. How can I make that happen? I'm trying with below code placed in the head:

Code:

function showtiers() {
var dropdownIndex = document.getElementById('tiers').selectedIndex;
var dropdownValue = document.getElementById('tiers')[dropdownIndex].value;
									
if (dropdownValue == 2) { 
									
document.getElementById(tier_2).style.display = 'block';
document.getElementById(tier_3).style.display = 'none';
document.getElementById(tier_4).style.display = 'none';
										
}
									
if (dropdownValue == 3) { 
									
document.getElementById(tier_2).style.display = 'block';
document.getElementById(tier_3).style.display = 'block';
document.getElementById(tier_4).style.display = 'none';
									
}
									
if (dropdownValue == 4) { 
									
document.getElementById(tier_2).style.display = 'block';
document.getElementById(tier_3).style.display = 'block';
document.getElementById(tier_4).style.display = 'block';
									
      }
}

If someone could point out what am I doing wrong I'd really appreciate it.

Javascript Hide/show Divs Onclick

Similar Tutorials

View Content

I have a page where it has anchors going to different parts of the page and i have a list of links at the top to go to each anchor. when you click on the links to each part of the page it shows the "back to top, next, back" buttons. I have 7 different links, so i need to have this happen 7 times, I only want the "back to top, next, and back" buttons to be shown when the user clicks on the link to that specific anchor, or the next/back button to that anchor from another one. I have been doing this with the div hide/show javascript however it makes me have to change sooo much information to do this.. There has got to be an easier way.. It would take me forever to finish doing this to all of them, i need a better way to achieve this. There's too much code that its confusing.

this is my current javascript:

var ie = (document.all) ? true : false;
function hideID(objID){
var element = (ie) ? document.all(objID) : document.getElementById(objID);
element.style.display="none"
}
function showID(objID){
var element = (ie) ? document.all(objID) : document.getElementById(objID);
element.style.display="block"
}

And this is just one of the links:

<li><a onclick="showID('1939top'); showID('1939next');hideID('1940top'); hideID('1941top'); hideID('1942top'); hideID('1943top'); hideID('1944top'); hideID('1945top');" href="#1939">1939</a></li>

And this is one of the back to top/next button codes:

<a href="#1940"><span id="1939next" class="next-back" onclick="hideID('1939next'); hideID('1939top')"><div class="arrow-down"></div></span></span></a>
<a href="#top"><span id="1939top" class="timeline-b2top" onclick="hideID('1939top')">Top</span></a><a name="1939" id="1939"></a>

This code has always been a huge problem for me, not only does it take forever to change the effects and all, but it is VERY messy and I really need some help on how to code it lol. Thanks so much.

Changing Javascript To Hide/show Menu Sub Lists

Similar Tutorials

View Content

Hello everyone,

I am trying to figure a solution to this CSS/JavaScript navigation menu. I have a couple of different classes set out for each level of the menu, which there are 4 levels max. The first level has a class for it called 'pMenuMain'. The second and third have names 'pMenu2' and 'pMenu3'. The 4th level is found by its <a> tags, because all of those are links.

This is the JavaScript I need to change somehow:

Code:

<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout    = 1000;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{  jsddm_canceltimer();
   jsddm_close();
   ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $('.pMenu2').hover(jsddm_open, jsddm_timer)
   $('.pMenu > li > ul').hover(jsddm_open, jsddm_timer)});

document.onclick = jsddm_close;
</script>

Now this is the CSS style sheet:

Code:

/********************/
/*PERSONAL NAV MENU**/
/********************/
.pWrapper {
    padding-bottom:53%;
    padding-left:21%;
}

.pMenu {
    margin:0;
    padding:0;
    list-style:none;
}

/*IE 6 & 7 need inline block feature*/
ul.pMenu ul li{
    width:100%;
    display:inline-block;
}
ul.pMenu ul ul li{
    width:100%;
    display:inline-block;
}
ul.pMenu ul ul ul li{
    width:100%;
    display:inline-block;
}

/*begin main list attributes*/
ul.pMenu > li:hover{
    background:#F00;
    border:.33em ridge #C90;
    color:#FF0;
}

ul.pMenu > li{
    float:left;
    list-style:none;
	margin-right:1%;
	display:block;
    color:#FFF;
    background:#900;
    border:.33em ridge #C30;
    text-decoration:none;
}

.pMenuMain{
    text-shadow:1px 1px 1px #000;
    white-space:nowrap;
    padding-top:.7em;
    padding-bottom:.7em;
	text-align:center;
}

/*first sub-list*/
ul.pMenu li li{
	margin-right:0;
}

ul.pMenu ul {
    margin:0;
    padding:0;
    position:absolute;
    visibility:hidden;
}

.pMenu2{
	background:#CCC;
	border:.25em outset #999;
	width:10em;
	font-size:12px;
	padding-top:.5em;
	padding-bottom:.5em;
	padding-right:2em;
	padding-left:.5em;
	text-decoration:none;
    text-shadow:1px 1px 1px #000;
    color:#000;
    position:relative;
	text-align:left;
	top:.33em;
	visibility:hidden;
}

.pMenu2:hover{
    background:#999;
    border:.25em inset #666;
    text-decoration:blink;
}

/*second sub-list*/
ul.pMenu ul ul{
    margin:0;
    padding:0;
    position:absolute;
    visibility:hidden;
    display:none;
}

.pMenu3{
	background:#999;
	border:.25em outset #666;
	width:13em;
	font-size:11px;
	padding-top:.35em;
	padding-bottom:.35em;
	padding-right:2em;
	padding-left:.5em;
	text-decoration:none;
    text-shadow:1px 1px 1px #000;
    color:#000;
    position:relative;
	text-align:left;
	top:.33em;
	visibility:hidden;
}
ul.pMenu ul ul li {
    float:none;
    display:inline;
}

ul.pMenu ul ul li a {
    width:auto;
    background:#999;
    border:.15em outset #666;
    text-shadow:1px 1px 1px #000;
    color:#FFF;
}

ul.pMenu ul ul a:hover {
    background:#999;
    border:.15em inset #666;
    text-decoration:blink;
}

/*third sub-list*/
ul.pMenu ul ul ul {
    margin:0;
    padding:0;
    position:absolute;
    visibility:hidden;
}

ul.pMenu ul ul ul li {
    float:none;
    display:inline;
}

ul.pMenu ul ul li a {
    width:auto;
    background:#999;
    border:1% outset #666;
    text-shadow:1px 1px 1px #000;
    color:#FFF;
}

ul.pMenu ul ul li a:hover {
    background:#999;
    border:1% inset #666;
    text-decoration:blink;
}
/******************/
/*End Personal Nav*/
/*****************/

This is how it's set up in HTML:

Code:

<!-- begin Personal navigation menu -->
<div class="pWrapper">
	<ul class="pMenu">
		<li style="width:10%;"><div class="pMenuMain">health</div>
    		<ul style="left:18em;">
        		<li><div class="pMenu2">weight loss</div>
            		<ul>
               		  <li><div class="pMenu3">fitness</div>
                			<ul>
                       		  <li><a href="#">under construction</a></li>
                        	</ul>
                    	</li>
                    	<li><div class="pMenu3">dieting</div>
                    		<ul>
                       		  <li><a href="#">under construction</a></li>
                        	</ul>
                    	</li>
            		</ul>
            	</li>   
            	<li><div class="pMenu2">skin care</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
        	</ul>
    	</li>
	</ul>

	<ul class="pMenu">
		<li style="width:14%;"><div class="pMenuMain">insurance</div>
    		<ul>
        		<li><div class="pMenu2">property insurance</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">auto insurance</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">health insurance</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">annuities</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
       	   </ul>
   	   </li>
	</ul>

	<ul class="pMenu">
		<li style="width:11.3%;"><div class="pMenuMain">general</div>
    		<ul>
        		<li><div class="pMenu2">electronics</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">style &amp; fashion</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">food/dining</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
            	<li><div class="pMenu2">cars/auto</div>
            		<ul>
               		  <li><a href="#">under construction</a></li>
                	</ul>
            	</li>
       		</ul>
   	    </li>
	</ul>
                   
	<ul class="pMenu">
		<li style="width:10%;"><div class="pMenuMain">dating</div>
    		<ul>
        		<li><a href="#">RealMatureSingles</a></li>
            	<li><a href="#">SeniorPeopleMeet</a></li>
        	</ul>
    	</li>
	</ul>

	<ul class="pMenu">
		<li style="width:13.8%;"><div class="pMenuMain">education</div>
    		<ul>
        		<li><div class="pMenu2"><a href="#">under construction</a></div></li>
        	</ul>
    	</li>
	</ul>                    	
</div>
	<!-- end Personal navigation menu-->

I know that I will receive critique for the HTML I created for this. The reason I am going this route is that a drop down menu with a list full of <a href="#"> can be clicked, resetting the menu. This is a flaw in functionality.

Show Hide Divide Onchange Of Input

Similar Tutorials

View Content

This code works to show divide with id "it" when select option "it" is chosen and it shows divide "de" when option "de" is chosen.

Problem: it will not show the nested divides inside the "it" and "de" divides. It only shows the <p></p> tags. Does someone know how I can get it to show the divides inside the main divide as well?

Thanks in advance for your help.

Head
Code:

function showstuff(divID)
{
   els = document.getElementById( 'mydiv' ).getElementsByTagName( 'div' );

   for (var i = 0; i < els.length; i++)
   {
     els[i].style.visibility="hidden";
     els[i].style.display="none";
   }

   if( divID )
   {
     document.getElementById(divID).style.visibility="visible";
     document.getElementById(divID).style.display="block";
   }

   if( window.event )
     window.event.returnValue = false;

   return false;
}
window.onload=function()
		{
			showstuff('');
		}

Body
Code:

<select size="1" hide_label="0" id="experience" class=" validate['required']" title="" type="select" name="experience" onchange="showstuff(this.value) ;">
<option value="">(Please select)</option>
<option value="it">IT</option>
<option value="de">Design Engineer</option>
<option value="both">BOTH</option>
</select>

<div id="mydiv">

<div id="it">
<p>why dont you show anything else!</p>

<div class="ccms_form_element cfdiv_header" id="_h3_it_disciplines_check_all_that_apply_h3___container_div"><h3>IT Disciplines (Check all that apply)</h3><div class="clear"></div></div>
</div>
<div id="de">

<p>why dont you show anything else! UGH!!</p>
<div class="ccms_form_element cfdiv_header" id="_h3_design_engineer_disciplines_check_all_that_apply_h3___container_div"><h3>Design Engineer Disciplines (Check all that apply)</h3><div class="clear"></div></div>
<p>why dont you show anything else!</p>
</div>
</div>

Help With Jquery Show/hide Divs

Similar Tutorials

View Content

Hello all, I'm still learning java. I have the concept of hide/show down, but want I want to do is when a div is shown, all the other divs are hidden, and when I click on another div to show, the other one hides, etc.

This is my code for jquery show/hide:

Code:

<script type="text/javascript">
 $(document).ready(function(){
 $('#{field_label}').hide();
$('input#show{field_label}').click(function(){
$('#{field_label}').show('fast');
 });

$('input#close{field_label}').click(function(){
$('#{field_label}').hide('fast');
})
});
</script>

What do I need to add so that the previous DIV that was open, auto closes when a NEW DIV is enabled to show.

Much appreciated Coders!

Show/ Hide Divs In A Questionnaire

Similar Tutorials

View Content

I am trying to create a questionnaire that only reveals some of the questions when certain answers to previous questions are given.

i.e. if the answer to question 1 is Yes, then question 2 appears under it. If the answer is No then question 3 appears instead.

At the moment, however, is does nothing. I know the javascript I'm using should work, as I have used it on a website before, but not in this context.
Can anyone see what I'm doing wrong?

The javascript I have writen for this is:

Code:

<script>
function showdiv(name){
var obj = (document.getElementById)? document.getElementById(name) : eval("document.all[name]");
if (obj.style.display=="none"){
obj.style.display="";
}else{
obj.style.display="none";
}
}
</script>

The CSS is:
Code:

#q1 {
}

#q2 {
	display:none;
	margin-top: 10px;	
}

#q3 {
	display:none;
	margin-top: 10px;	
}

and the HTML is:

Code:

    	<div id="main">
    		            
            <div id="q1">
            	<p>This is question 1</p>
                <input type=button value="No" onclick="showdiv('q2');"/>
                <input type=button value="Yes" onclick="showdiv('q3');"/>
            </div>
                        
            <div id="q2">
                <p>This is question 2</p>
                <input type=button value="Yes"/>
                <input type=button value="No"/>
            </div>

            <div id="q3">
                <p>This is question 3</p>
                <input type=button value="Yes"/>
                <input type=button value="No"/>
                <input type=button value="Maybe"/>
            </div>
        </div>

Help - Script To Show & Hide Multiple Divs

Similar Tutorials

View Content

Hi, I am new to javascript so any help would be much appreciated.

I found the following script online to show/hide a login div.

<script language="JavaScript" type="text/javascript">
function login(showhide){
if(showhide == "show"){
document.getElementById('popupbox').style.visibility="visible";
}else if(showhide == "hide"){
document.getElementById('popupbox').style.visibility="hidden";
}
}
</script>

It works really well but I have other div I would also like to show/hide. Is it possible to have a variable in the function that I could pass the name of the div to show/hide.

I have a ul list that I am using for a navigation menu and I would like to be able to click on items in the list to show different div's. I assume this is possible, so could someone please give me an indication of how to do it as I have been trying for a few days now and no joy.

Thanks, James

Show/hide Toggle On Multiple Divs

Similar Tutorials

View Content

How Can I Show / Hide The Content Of Sub Divs Based On Whether The Input Is != Or =

Similar Tutorials

View Content

Hi ya all,
how can I show / hide the content of sub divs based on whether the input is != or =

and be able to repeat this.

I tried to hide the sub divs using , onclick if bla bla = '' ;
Code:

document.getElementById('hideme').innerHTML = '';

which works, but once I try to enter a new input, then nothing happens, even if the content of the sub divs is = input

thx

Multiple Drop Downs With Show / Hide Divs

Similar Tutorials

View Content

I am using the following code to show / hide form elements within a div based upon the drop down choice.

Does anyone know how this code can be amended to use multiple drop downs within one form?

Code:

<html>
<head>
<title>Show and Hide</title>

<script>
//*********************************************
// Function that Shows an HTML element
//*********************************************
function showDiv(divID)
{
	var div = document.getElementById(divID);
	div.style.display = ""; //display div
}

//*********************************************
// Function that Hides an HTML element
//*********************************************
function hideDiv(divID)
{
	var div = document.getElementById(divID);
	div.style.display = "none"; // hide
}
//*****************************************************************************
// Function that Hides all the Div elements in the select menu Value
//*****************************************************************************
function hideAllDivs()
{
	//Loop through the seclect menu values and hide all
	var selectMenu = document.getElementById("selectMenu");
	for (var i=0; i<=selectMenu.options.length -1; i++)
	{
		hideDiv(selectMenu.options[i].value);
	}
}
//*********************************************
// Main function that calls others to toggle divs
//*********************************************
function toggle(showID)
{
	hideAllDivs(); // Hide all
	showDiv(showID); // Show the one we asked for

}


</script>
</head>
<body onload="hideAllDivs();">

<select id="selectMenu" onchange="toggle(this.options[this.options.selectedIndex].value)">
<option value="formNumber1"> Show Form 1 </option>
<option value="formNumber2"> Show Form 2 </option>
<option value="formNumber3"> Show Form 3 </option>
<option value="formNumber4"> Show Form 4 </option>

</select>

<div id="formNumber1"> I am Form Number one. Any content within this div will be showed</div>

<div id="formNumber2"> I am Form Number two. Any content within this div will be showed</div>

<div id="formNumber3"> I am Form Number three. Any content within this div will be showed</div>

<div id="formNumber4"> I am Form Number four. Any content within this div will be showed</div>


</body>
</html>

Thanks in advance!

Show/hide Div Based On Select Box Choice

Similar Tutorials

View Content

Ok so I have a select box where the value must be passed via the form. If the users selects choice B or Choice C then I want a specific div to show. If they choose choice A then I want the div to hide or remain hidden. It should be hidden on page load.
Code:

<select name="Event_Type_ID">
    <option value="1">Choice A</option>
    <option value="2">Choice B</option>
    <option value="3">Choice C</option>
</select>

<div id="showme">
 Content to show if EITHER Choice B or C is chosen. Otherwise this div  should be hidden.
</div>

Can anyone lead me in the right direction?
Thanks!

Hide / Show Not Working On Select Tags

Similar Tutorials

View Content

Greetings,

I recently learned that the <option> tags can not use the onclick attribute inside of IE. This works great for firefox, but sadly not a single version of internet explorer supports it (from what I am told via countless Google searches).

I have been modifying my attempit at a solution to use the <select> tag with the attribute onchange. Maybe I am casing this wrong, or not seeing a solution as the below code does not operate in any browser,
and no errors are reported back through firebug or IE.

Excuse my sloopy attempt at {smarty tags} this script is written in a bunch of PHP object->vales and to save space cored the issue down to it's basics.

On change of the select box, the value="5-28" is sent to javascript showBox to split the number away from the id_trips and only focus on the locations (the number before the '-' .

IF the location matches the switch value then the box should show / hide or value change. The IDs are all correct I just think that there is a ' or a " or something off as I am not a javascript expert.

my SQL return values
<code class="php">
//PHP VARIABLES from QUERY sample loop 1
trip-number = 200
locations = 5
id_trips = 28

</code>

my HTML form loop
<code class="html">

{BEGIN LOOP 'trips'}

<form id="trip{trip-number}" method="post" action="#">

<select id="depid{trip-number}"
name="depId" class="inputed greybig required"
onchange="showBox(this.value, '{trip-number}', 'dep');">
<option value="">Select Time</option>
<option value="{locations}|{id_trip}">{trip-time}</option>
</select>

</form>

{/END LOOP 'trips'}

</code>

my javascript at the bottom of the page before the </body>
<code class="javascript">

<script type="text/javascript">
function showBox(val, trip, arrdep){
var splitVal = val.split("-");
switch (splitVal[0]){
case 1: //Airport
$("#"+arrdep+"dep_win_airport"+trip).show();
case 2: //Port of Miami
$("#"+arrdep+"_win_cruse"+trip).show();
case 4: //Port Canaveral
$("#"+arrdep+"_win_cruse"+trip).show();
case 5: //door drop off
$("#"+arrdep+"_win_door"+trip).show();
case 6: //Door Pick Up

case 7://Airport NO FLIGHT
default:
$("#"+arrdep+"_window"+trip).hide();
$("#"+arrdep+"_info_"+trip).hide();
$("#"+arrdep+"_win_door"+trip).hide();
$("#"+arrdep+"_win_cruse"+trip).hide();
$("#"+arrdep+"_win_airport"+trip).hide();
$("#"+arrdep+"info_"+trip).val("Supply Address");
}; //end switch splitVal
}; //end function showBox
</script>
</code>

On Select Show Multiple Divs?

Similar Tutorials

View Content

Hi

I am trying when a user chooses an airline from dropdown seen here that two additional drop downs appear for departing airport and arrival airport. I have coded it to work when one chooses American Airlines from drop down, but I need different departing and arrival airports to appear for the various a user may choose.

Anyone know how that can be done?

thanks

Javascript Select Boxes, Onchange Event Help

Similar Tutorials

View Content

Hello,

I am working on a CGI/Ajax application to interface with a database. I have the back-end Perl/CGI application working, so now it it is time to design the web interface and respective forms.

So here goes, I am attempting to create dynamic list boxes, but I am unable to pass a value to the 'onChange' event.

Here is my code (this is a proof of concept and highly stripped down):
Code:

<html>
<head>
</head>
<body>
    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

    var array = [ 'name', 'age', 'year'];

    function init(sel_val){
        for (var i = 0; i < array.length; i++){
            document.write(i + " " + array[i] + "<br />");
        }

        for (var i = 0; i< array.length; i++){
            document.product.id_type.options[i] = new Option(i + array[i], i);
        }
    }


    function OnChange(sel_val) {
//         for(i = document.product.id_style.length - 1; i > 0; i--)
//                document.product.id_style.options[i]    = null;
//        document.product.id_style.options[0] = new Option("something else", 15);
          alert("pressed" + " " + sel_val + "<br />");
    }

    </script>


<form name="product">
<select name="id_type" size="5" style="width: 150px;" onChange="OnChange()"></select>

        <select name="id_style" size="5" style="width: 150px;" ></select>
    </form>
    <script>
            init();
    </script>



</body>
</html>

I'm well versed in Perl and Java but I am a JavaScript newbie, so go easy.

I understand that sel_val is not being set, but I'm not sure how it should (or could) be set.

I would like to use a hash instead of integer values for `i`

document.product.id_type.options[i] = new Option(i + array[i], i);

becomes

document.product.id_type.options[i] = new Option(hash[key], key);

Any thoughts, comments, criticisms, jokes are welcome. Thanks in advance for the assist.

Hide Or Show Menu, Will Pay If Necessary

Similar Tutorials

View Content

Hi I'm new to this forum, and i need help with something, i think its easy to make but...
i am making video blogging website and i need someone to make Hide or show menu, for example:
When someone click on:
Season 1 (it should show)
Episode 1
Episode 2
Episode 3... (and when someone click on episode it should show text (usually <iframe... ))

ty in advance and i can share 5$ on paypal if you make it right and easy to use, if I have it post in wrong category just transfer topic pls

Best regards

Problem With Show/hide The Sub Menu

Similar Tutorials

View Content

I make a menu and in one of it's item I want to show a sub menu under it when the user mouse is over it, I use onmouseover and onmouseout for this and I make the visibility of the sub menu hidden and when the mouse become over the item it's visibility become visible.
the problem I faced is that when the mouse become out of the item of the main menu the sub menu disappear and I couldn't click on or over it.

this is my menus:

Code:

<div id="menu" >
<ul id="ul1" >
<li id="li1" ><a href="index.php"> Home </a></li>
<li><a href="" > About </a></li>
<li><a href="" onmouseover="onlist()" onmouseout="outlist()"> Services </a></li>
<li><a href="" >Contact </a></li>
</ul>
</div>
<ul id="ul2" onmouseover="onlist()" onmouseout="outlist()">
<li> serv1 </li>
<li > serv2 </li>
</ul>

the JS code:

Code:

function onlist()
{
document.getElementById('ul2').style.visibility='visible';
}

function outlist()
{
document.getElementById('ul2').style.visibility='hidden';
}

Show / Hide Div Via Onload On Menu

Similar Tutorials

View Content

Hello, at the moment I'm creating a website where on the frontpage (index.php) there is 2 divs that contains first a monitor-image with 3 computer screens, and then a div, that set an overlay over 2 of the screens - the divs like this:

<code>
<div id="monitor_overlay"></div> //Contains the overlay
<div id="lastest"></div> //Contains the screens
</code>

The CSS is:

<css>
#lastest {
position:absolute;
top:121px;
width:960px;
height:397px;
background:url(../images/monitor_bg.png);
z-index:-1;
}

#monitor_overlay {
position:absolute;
top:136px;
margin-left:256px;
width:443px;
height:277px;
background:url(../images/monitor_overlay.png) no-repeat;
z-index:1;
}
</css>

Those screens are needed on the index.php only - other content will be shown on the other sites.

That I need is a javascript that does following:

When loading the site it will automaticly load index.php - aka it shows the divs.

Then when I press on the menu-button "Blog" or "Portfolio" it should hide the divs "monitor_overlay" and "lastest"

but then if I press on "Home" again - I want the divs to be shown - How do I do this?

I have searched for hours, and yeah to be honest, I'm not good at javascript - the only thing I have made once was to replace a background color and image when clicking a link or a menu-button:

onclick="document.body.style.background='#169EF2 URL(\'images/background-darkblue.jpg\') center repeat-y fixed';"

But hiding/showing a div when clicking a menu button is really a big problem for me - the only way I could se it should work should be something like this:

Code:

onclick="document.div.StyleByID('lastest','monitor_overlay').display.hidden;','document.div.StyleByID('anotherdiv').display.visible;"

but it don't works.

Any that can help? it would be so wonderful!

Thank you, best regards,

Lucas Kristensen

Show/hide Menu's Using Tabs

Similar Tutorials

View Content

Hello,
I am currently in a Javascript class and it is completely confusing me. I have a website that I am trying to make the tabs at the top all work. I already did the setTab function but I am not even sure if that is right. I have found lots of other websites that have good advice but they want me to do things way different than the book. Basically they are leaning me away from Javascript. The whole point of the class. Can someone please take a look at these files and see if they can figure this out? I am including the original files as well as what I have so far. The page-1 is most of assignment and the Homework Description is the part that was cut off. Thank you in advance.

Hide/show Menu Error

Similar Tutorials

View Content

Show/hide Dynamic List Menu

Similar Tutorials

View Content

Hi Chaps,

I have a dynamic list menu:
PHP Code:
    <?php $currentCat = '';
    $first = true
    ;?>
    <ul>
        <?php
        do {
        if ($currentCat != $row_rsCategory['catname']) {
        if (!$first) {
        echo "\n</ul>\n</li>\n";
        }
        $currentCat = $row_rsCategory['catname'];
        ?>
            <li><?php echo $row_rsCategory['catname']; ?>
                <ul>
                <?php }?>
                    <li><?php echo $row_rsCategory['galleryname']; ?></li>
                <?php $first = false;
                } while ($row_rsCategory = mysql_fetch_assoc($rsCategory));
                ?>
                </ul>
            </li>
    </ul>

I've tried looking for a show/hide script, to toggle category names/gallery names, but could only find ones that have static menu options, and have failed to edit existing code to fit....any help or guidence would be appreciated!