JavaScript - Help! Hide Menu Not Visible.

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

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.

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

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';
}

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!

I have a form that was created in Adobe Professional. I have hidden the toolbars on initial view of the form, however, the people using the form have discovered how to un-hide them. Is there any Java Script that I can add to the document that will disable certain menu commands (i.e. "Attach to E-mail")?

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.

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>

Hello,

I am having the problem that a javascript code runs from the start (Since I open the page). My page works by divs and not web pages so they change by the div visibility.

This is the code for the divs:

Code:

    function toggleVisibility(selectedTab) {

         // Get a list of your content divs
         var content = document.getElementsByClassName('content');

         // Loop through, hiding non-selected divs, and showing selected div
         for(var i=0; i<content.length; i++) {
              if(content[i].id == selectedTab) {
                    content[i].style.display = 'block';
              } else {
                    content[i].style.display = 'none';
              }
         }

    }

So each DIV has a function to make it visible by posting: "toggleVisibility(div);" I am trying to run a javascript code inside this function so that when a certain div becomes available the javascript code autoruns but whenever I post the javascript code inside the function it ignoresthat and runs since the web page loads.

My example code would be:

Code:

function div(){

	toggleVisibility('div2');
	"RUN JAVASCRIPT CODE HERE"
  }

Please help





Reply With Quote




01-22-2015, 09:42 AM #2
felgall View Profile View Forum Posts Visit Homepage

Master Coder Join Date Sep 2005 Location Sydney, Australia Posts 6,745 Thanks 0 Thanked 666 Times in 655 Posts

Stick the code to run when a div becomes visible in a separate function. If the code is different for different divs then create separate functions.

Let's assume that the function containing the code to run when div2 is visible is called func2. Let's also add func1 for when div1 is visible so you can see how it works for different functions for different divs. We'll also assume div3 can use the same function as div1 so you can see how functions can be shared

We then amend the toggle function slightly as follows:

Code:

function toggleVisibility(selectedTab, func) {

         // Get a list of your content divs
         var content = document.getElementsByClassName('content');

         // Loop through, hiding non-selected divs, and showing selected div
         for(var i=0; i<content.length; i++) {
              if(content[i].id == selectedTab) {
                    content[i].style.display = 'block';
                    func(selectedTab);
              } else {
                    content[i].style.display = 'none';
              }
         }

    }

Your code to call the toggle now gets changed to:

Code:

function func1(selectedTab) {
"RUN JAVASCRIPT CODE FOR WHEN selectedTab IS MADE VISIBLE HERE"
}

function func2() {
"RUN JAVASCRIPT CODE FOR WHEN div2 IS MADE VISIBLE HERE"
}

function div(){

	toggleVisibility('div2', func2);


toggleVisibility('div1', func1);

toggleVisibility('div3', func1);
	
  }

Say I have a gallery of 16 images and I have a menu for the gallery to sort the images by Most Viewed, Most Recent, Highest Rating, A-Z, Z-A..

if I were to click 1 of the menu links it will change the order of the images but is it possible to actually show the images MOVING into their new places?

Looking for a jquery solution if possible.. if not still open to anythin that would work

I have seveal flash quizzes set up for my history class.
On the main page right now is just a link to quiz #1. After finishing quiz #1, I want a cookie set that is proof of a finished test. I will then redirect back to the main page that will now show a link to quiz #2. And so on after each quiz.... Any help would be greatly, greatly appreciated.


I want 10 divs that have their visibility set to none. Then based on a cookie I would like to have 1 at at time become visible.

Hi,

After much searching and head-scratching (JS is not my forte!), I adapted some code to do what I want - well, almost! So here I am back again. I need to have three divs on a page, with each separate div changing onClick. Below is the code so far.
Two problems:
1) when I open it in a browser window both divs show, then the one disappears when I click on the second div leaving only the numbers. How can I change it so that both divs remain open?

2) Instead of the numbers [1], [2], etc. to change the divs, I'd like to have to just click on one single 'click here for more' to display the next div then return to the first after the last one. Can this be integrated or is it too late?

Thank you!


Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>

	<head>
		<title>Switching Divs</title>
		
		<style>
		
#one {width: 500px; height: 100 px; border: 1px solid red; }
#two {width: 500px; height: 100px; border: 1px solid blue; }
#three {width: 500px; height: 100px; border: 1px solid purple; }
#four {width: 500px; height: 100px; border: 1px solid green; }

#five {width: 500px; height: 100 px; border: 1px solid red; }
#six {width: 500px; height: 100px; border: 1px solid blue; }
#seven {width: 500px; height: 100px; border: 1px solid purple; }
#eight {width: 500px; height: 100px; border: 1px solid green; }

#propertyfrance {float: left; color: #666666; font-family: tahoma arial, verdana, sans-serif; font-size: 11px; }

.propertytext {float: left; clear: right; width: 300px; height: 100px; border: 1px solid #000; }

.propertyphoto {float: left; width 200px; height: 100px; border: 1px solid #cceeff; text-align: center; }

#image-switch #one {
padding:0px;
}
#image-switch #two, #image-switch #three, #image-switch #four {
display:none;
}

#image-switch #five {
padding: 0px; }
#image-switch #six, #image-switch #seven, #image-switch #eight {
display:none;
}

</style>

<script type="text/javascript">
function switch1(div) {
if (document.getElementById('one')) {
var option=['one','two','three','four', 'five', 'six', 'seven', 'eight'];
for(var i=0; i<option.length; i++) 
{ obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div)? "block" : "none"; }
}
}

</script>

	</head>
	
	
	<body>

<h4>Switching divs (javascript)</h4>

<div id="image-switch">

<br>OnClick
<br>

<div id="one">
<div class="propertytext">We'll get some text in here for property 1</div>
<div class="propertyphoto"><img src="property1.jpg" height="100" width="180" alt="Property 1"></div>
</div>

<div id="two">
<div class="propertytext">We'll get some text in here for property 2</div>
<div class="propertyphoto"><img src="property2.jpg" height="100" width="180" alt="Property 2"></div>
</div>

<div id="three">
<div class="propertytext">We'll get some text in here for property 3</div>
<div class="propertyphoto"><img src="property3.jpg" height="100" width="180" alt="Property 3"></div>
</div>


<div id="four">
<div class="propertytext">We'll get some text in here for property 4</div>
<div class="propertyphoto"><img src="property4.jpg" height="100" width="180" alt="Property 4"></div>
</div>

<br>
<a onClick="switch1('one');"> [1]</a> 
<a onClick="switch1('two');"> [2]</a>
<a onClick="switch1('three');"> [3]</a>
<a onClick="switch1('four');">  [4]</a>
<br><br>

<div id="five">
<div class="propertytext">We'll get some text in here for property 5</div>
<div class="propertyphoto"><img src="property5.jpg" height="100" width="180" alt="Property 5"></div>
</div>

<div id="six">
<div class="propertytext">We'll get some text in here for property 6</div>
<div class="propertyphoto"><img src="property6.jpg" height="100" width="180" alt="Property 6"></div>
</div>

<div id="seven">
<div class="propertytext">We'll get some text in here for property 7</div>
<div class="propertyphoto"><img src="property7.jpg" height="100" width="180" alt="Property 7"></div>
</div>

<div id="eight">
<div class="propertytext">We'll get some text in here for property 8</div>
<div class="propertyphoto"><img src="property6.jpg" height="100" width="180" alt="Property 8"></div>
</div>

<br>
<a onClick="switch1('five');"> [5] </a>
<a onClick="switch1('six');"> [6] </a>
<a onClick="switch1('seven');"> [7] </a>
<a onClick="switch1('eight');"> [8] </a>

</div>

	</body>
</html>

Hello guys,

The following excerpt is part of a very huge project(in terms of code involved). Pardon me if it lacks a bit of context. But I assume I have posted adequate information for understanding the problem.

Code:

var sztitlebar_specific= "<table cellpadding='0px' cellspacing='0px' width='100%'><tr>" +"<td class='tiletitle'>" 
"<img src='../images/alert.gif' onclick='toggleAlerts(\"#ID#\")' alt='Toggle Alerts' title='Toggle Alerts' style='cursor: hand'>" + 
"<input type='checkbox' name='pricesonlycb' onclick='parent.applyFilterPricesOnly(\"#ID#\",pricesonlycb.checked,mypricesonlycb.checked,\"#NAME#\")'>" + 
"<input type='checkbox' name='mypricesonlycb' onclick='parent.applyFilterPricesOnly(\"#ID#\",pricesonlycb.checked,mypricesonlycb.checked,\"#NAME#\")'>" +
"<td class='tiletitle' style='text-align: center'>#NAME#</td>" + 
 </tr></table>";

The onclick event fires without any trouble, and the following function is called.
Code:

function applyFilterPricesOnly(filterid, pricesonly, mypricesonly,filtername){
alert("applyFilterPricesOnly called: filterid =" + filterid + "filtername =" + filtername + "mypricesonly =" + mypricesonly + " pricesonly=" + pricesonly);
}

But when I alert the status of the checkboxes they show up as "undefined". As you can see, the first piece of code defines a titlebar with a button and a couple of checkboxes and the name of the titlebar. And it is these checkboxes that remain undefined even though I can see them and check and uncheck them. But the name of the titlebar gets passed to the function correctly when the onclick event fires and it gets alerted. Where am I going wrong?