User Name Password Register
DaniWeb IT Discussion Community
Home
Forums
Tutorials
Code Snippets
Blogs
Link Directory
All
•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 455,985 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,789 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Join our community!
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 1366 | Replies: 9
Reply
•
•
Join Date: Jul 2006
Posts: 9
Reputation: fredjahed is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
fredjahed fredjahed is offline Offline
Newbie Poster

HELP needed on javascript menus PLEASE...

  #1  
Dec 2nd, 2007
Hi All,
When trying to change the bcackgroundImage of element useing javascript method style.backgroundImage="url(blue_link.gif) no errors found but the script can't find the image so what is the correct way to use the address of the image?


Thanks very much in advance,
Fred
AddThis Social Bookmark Button
Reply With Quote  
•
•
Join Date: Dec 2007
Location: Russia
Posts: 11
Reputation: adorosh is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 1
adorosh adorosh is offline Offline
Newbie Poster

Re: HELP needed on javascript menus PLEASE...

  #2  
Dec 6th, 2007
You just need to specify correct way. Keep in mind that when you try to specify such url (without any path) the script will try to find the image in current folder.
In other case, if you have <base ... /> tag into your code - browser will try to find the image with specified name under folder specified in <base ... > tag.
There are one more case, if you use RewriteRules feature. If so - write it here, you'll get additional comments.
Reply With Quote  
•
•
Join Date: Dec 2007
Posts: 75
Reputation: hielo is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 10
hielo hielo is offline Offline
Junior Poster in Training

Re: HELP needed on javascript menus PLEASE...

  #3  
Dec 8th, 2007
Assuming you would like to change the backgroud of:
<p id="para1">Text</p>

You would do so as follows:
document.getElementById('para1').style.backgroundImage='http://www.site.com/Images/yourImage.gif';
Reply With Quote  
•
•
Join Date: Jul 2006
Posts: 9
Reputation: fredjahed is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
fredjahed fredjahed is offline Offline
Newbie Poster

Re: HELP needed on javascript menus PLEASE...

  #4  
Dec 9th, 2007
Thanks for the reply. What I'm trying to appomlish is a horizantal menu with horizantal sub as well like this:
MainMenu
Sub sub subsub

and here is the Java code I'm using:

Help with Code Tags 
var image2=new Image()
image2.src="root/blue_ch.gif"

function show_select()
{
var id_ul=document.getElementById("sub_main_menma");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencal");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menpr");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mensho");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam1");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam2");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_men");
id_ul.style.visibility="visible";
var id_ul=document.getElementById("sub_menu_bg");
//id_ul.style.backgroundColor='#0f498d';
}

function hide_submenu()
{
var id_ul=document.getElementById("sub_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menma");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menpr");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencal");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mensho");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam1");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam2");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_menu_bg");
id_ul.style.backgroundColor='#0f498d';
//var id_ul=document.getElementById("mainurl");
//id_ul.style.backgroundImage="url(blue_link.gif)";
//='url(./blue_ch.gif)';
//var id_ul=document.getElementById("mainurl");
//id_ul.style.backgroundImage="url(blue_link.gif)";


}
function show_sub_menu1()
{
var id_ul=document.getElementById("sub_main_menma");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menpr");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencal");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mensho");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam1");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam2");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_men");
id_ul.style.visibility="visible";

var id_ul=document.getElementById("mainurl");
id_ul.style.backgroundImage="url(blue_ch.gif)";

var id_ul=document.getElementById("sub_menu_bg");
id_ul.style.backgroundColor='#0199DC';



}

function show_sub_menuma()
{
var id_ul=document.getElementById("sub_main_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menpr");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencal");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mensho");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam1");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam2");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menma");
id_ul.style.visibility="visible";

var id_ul=document.getElementById("sub_menu_bg");
id_ul.style.backgroundColor='#0199DC';

}

function show_sub_menupr()
{
var id_ul=document.getElementById("sub_main_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menma");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencal");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mensho");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam1");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam2");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menpr");
id_ul.style.visibility="visible";
var id_ul=document.getElementById("sub_menu_bg");
id_ul.style.backgroundColor='#0199DC';
}
function show_sub_menucal()
{
var id_ul=document.getElementById("sub_main_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menma");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menpr");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mensho");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam1");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam2");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencal");
id_ul.style.visibility="visible";
var id_ul=document.getElementById("sub_menu_bg");
id_ul.style.backgroundColor='#0199DC';
}
function show_sub_menusho()
{
var id_ul=document.getElementById("sub_main_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menma");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menpr");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencal");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam1");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam2");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mensho");
id_ul.style.visibility="visible";
var id_ul=document.getElementById("sub_menu_bg");
id_ul.style.backgroundColor='#0199DC';
}

function show_sub_menucam1()
{
var id_ul=document.getElementById("sub_main_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menma");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menpr");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencal");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mensho");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam2");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam1");
id_ul.style.visibility="visible";
var id_ul=document.getElementById("sub_menu_bg");
id_ul.style.backgroundColor='#0199DC';
}

function show_sub_menucam2()
{
var id_ul=document.getElementById("sub_main_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_men");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menma");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_menpr");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencal");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mensho");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam1");
id_ul.style.visibility="hidden";
var id_ul=document.getElementById("sub_main_mencam2");
id_ul.style.visibility="visible";
var id_ul=document.getElementById("sub_menu_bg");
id_ul.style.backgroundColor='#0199DC';

}

and this is not working proplerly for some reason...

Thanks in advance.

Fred
Reply With Quote  
•
•
Join Date: Dec 2007
Posts: 75
Reputation: hielo is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 10
hielo hielo is offline Offline
Junior Poster in Training

Re: HELP needed on javascript menus PLEASE...

  #5  
Dec 9th, 2007
The simplest way to solve your problem is to create "generic" CSS classes and define the desired properties to the classes instead. That way you do not need to do modify the element via:
elementRef.style.property='value';

Instead you would just say
elementRef.className='className';
Reply With Quote  
•
•
Join Date: Dec 2007
Posts: 75
Reputation: hielo is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 10
hielo hielo is offline Offline
Junior Poster in Training

Re: HELP needed on javascript menus PLEASE...

  #6  
Dec 9th, 2007
Perhaps this will make things more clear:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css"><!--
Help with Code Tags
CSS Syntax (Toggle Plain Text) 
  1. 	.show{visibility:visible;display:'';background-color:#ffff00;background-image:url('/Images/background.gif');}
  2. 	.hide{visibility:hidden;display:none}
--></style>
<script type="text/javascript"><!--
Help with Code Tags
JAVASCRIPT Syntax (Toggle Plain Text) 
  1.  
  2.                  function activate(elemId)
  3. 	 {
  4. 	 	var elem = document.getElementById(elemId);
  5. 		if(elem)
  6. 		{
  7. 			elem.className = String(elem.className).replace(/\bhide\b/g,"");
  8. 			elem.className = String(elem.className).replace(/  +/g," ");
  9. 			elem.className += " show";
  10. 		}
  11. 		else
  12. 		{
  13. 			alert( "Error at activate("+elemId + "): element does not exist.");
  14. 		}
  15. 	 }
  16. 	 function deactivate(elemId)
  17. 	 {
  18. 	 	var elem = document.getElementById(elemId);
  19. 		if(elem)
  20. 		{
  21. 			elem.className = String(elem.className).replace(/\bshow\b/g,"");
  22. 			elem.className = String(elem.className).replace(/  +/g," ");
  23. 			elem.className += " hide";
  24. 		}
  25. 		else
  26. 		{
  27. 			alert( "Error at deactivate("+elemId + "): element does not exist.");
  28. 		}
  29. 	 }
//--></script>
</head>
<body>
<ul id="menu">
<li>a</li>
<li onmouseover="activate('submenu')" onmouseout="deactivate('submenu')">b
<ul id="submenu" class="hide">
<li>b1</li>
<li>b2</li>
</ul>
</li>
<li>c</li>
</ul>
</body>
</html>
Last edited by hielo : Dec 9th, 2007 at 2:23 pm. Reason: Typo
Reply With Quote  
•
•
Join Date: Dec 2007
Posts: 75
Reputation: hielo is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 10
hielo hielo is offline Offline
Junior Poster in Training

Re: HELP needed on javascript menus PLEASE...

  #7  
Dec 9th, 2007
The problem you are encountering are because on every function you have:
var id_ul=document.getElementById("sub_menu_bg");

but on your HTML code you do not have any element with that id. To clarify, something similar to this should exist somewhere:
<ul id="sub_menu_bg">...</ul>

It does not have to be a <ul> element. See if the code below works for you.

Help with Code Tags 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

</head>
<body>
<script type="text/javascript"><!--
var image2=new Image()
image2.src="root/blue_ch.gif"

function show_select()
{
	var id_ul=document.getElementById("sub_main_menma");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_men");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mencal");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_menpr");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mensho");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mencam1");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mencam2");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_men");
	id_ul.style.visibility="visible";
	id_ul.style.display="";
	id_ul.style.backgroundColor='#0f498d';
//	var id_ul=document.getElementById("sub_menu_bg");
	//id_ul.style.backgroundColor='#0f498d';
}

function hide_submenu()
{
	var id_ul=document.getElementById("sub_men");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_men");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_menma");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_menpr");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mencal");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mensho");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mencam1");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mencam2");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
//	var id_ul=document.getElementById("sub_menu_bg");
//	id_ul.style.backgroundColor='#0f498d';



	//var id_ul=document.getElementById("mainurl");
	//id_ul.style.backgroundImage="url(blue_link.gif)";
	//='url(./blue_ch.gif)';
	//var id_ul=document.getElementById("mainurl");
	//id_ul.style.backgroundImage="url(blue_link.gif)";
}

function show_sub_menu1()
{
	var id_ul=document.getElementById("sub_main_menma");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_men");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_menpr");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mencal");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mensho");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mencam1");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mencam2");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";

	var id_ul=document.getElementById("sub_main_men");
	id_ul.style.visibility="visible";
	id_ul.style.display="";
	var id_ul=document.getElementById("mainurl");
	id_ul.style.backgroundImage="url(blue_ch.gif)";
//	var id_ul=document.getElementById("sub_menu_bg");
//	id_ul.style.backgroundColor='#0199DC';
}

function show_sub_menuma()
{
	var id_ul=document.getElementById("sub_main_men");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_men");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_menpr");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mencal");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mensho");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mencam1");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mencam2");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";

	var id_ul=document.getElementById("sub_main_menma");
	id_ul.style.visibility="visible";
	id_ul.style.display="";
	
//	var id_ul=document.getElementById("sub_menu_bg");
//	id_ul.style.backgroundColor='#0199DC';
}

function show_sub_menupr()
{
	var id_ul=document.getElementById("sub_main_men");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_men");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_menma");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mencal");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mensho");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mencam1");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mencam2");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";

	var id_ul=document.getElementById("sub_main_menpr");
	id_ul.style.visibility="visible";
	id_ul.style.display="";
//	var id_ul=document.getElementById("sub_menu_bg");
//	id_ul.style.backgroundColor='#0199DC';
}
function show_sub_menucal()
{
	var id_ul=document.getElementById("sub_main_men");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_men");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_menma");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_menpr");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mensho");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mencam1");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mencam2");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";

	var id_ul=document.getElementById("sub_main_mencal");
	id_ul.style.visibility="visible";
//	var id_ul=document.getElementById("sub_menu_bg");
//	id_ul.style.backgroundColor='#0199DC';
}
function show_sub_menusho()
{
	var id_ul=document.getElementById("sub_main_men");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_men");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_menma");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_menpr");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mencal");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mencam1");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mencam2");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";

	var id_ul=document.getElementById("sub_main_mensho");
	id_ul.style.visibility="visible";
	id_ul.style.display="";
//	var id_ul=document.getElementById("sub_menu_bg");
//	id_ul.style.backgroundColor='#0199DC';
}

function show_sub_menucam1()
{
	var id_ul=document.getElementById("sub_main_men");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_men");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_menma");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_menpr");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mencal");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mensho");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mencam2");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";

	var id_ul=document.getElementById("sub_main_mencam1");
	id_ul.style.visibility="visible";
	id_ul.style.display="";
//	var id_ul=document.getElementById("sub_menu_bg");
//	id_ul.style.backgroundColor='#0199DC';
}

function show_sub_menucam2()
{
	var id_ul=document.getElementById("sub_main_men");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_men");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_menma");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_menpr");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mencal");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mensho");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";
	var id_ul=document.getElementById("sub_main_mencam1");
	id_ul.style.visibility="hidden";
	id_ul.style.display="none";

	var id_ul=document.getElementById("sub_main_mencam2");
	id_ul.style.visibility="visible";
	id_ul.style.display="";
//	var id_ul=document.getElementById("sub_menu_bg");
//	id_ul.style.backgroundColor='#0199DC';

}

//--></script>


<ul align="center">
							<li    onmouseover="show_sub_menu1();" onmouseout="hide_submenu();">
              <a  id="mainurl"  href="http://something.com/" target="_blank">Home</a>
               
               <ul id="sub_main_men"  onmouseover="show_sub_menu1();" onmouseout="hide_submenu();">
                   <li><a href="http://something.com/">home</a></li>
							     <li><a href="http://something.com/">home</a></li>
							     <li><a href="http://something.com/">home</a></li>
							     <li><a href="http://something.com/">home</a></li>
							     <li><a href="http://something.com/">home</a></li>
							     <li><a href="http://something.com/">home</a></li>

							  </ul>




              </li>
              
              <li onmouseover="show_select();" onmouseout="hide_submenu();">
                <a href="http://something.com/" target="_blank">Select Activity</a>
                
                 <ul id="sub_men" onmouseout="hide_submenu();" onmouseover="show_select();">
                   <li><a href="http://something.com/">Tennis</a></li>
							     <li><a href="http://something.com/">Cricket</a></li>
							     <li><a href="http://something.com/">Hiking</a></li>
							     <li><a href="http://something.com/">Softball</a></li>
							     <li><a href="http://cycling.eyoplay.com/">Cycling</a></li>
							     <li><a href="http://something.com/">Bowling</a></li>
							     <li><a href="http://something.com/">Pool</a></li>
							     <li><a href="http://www.eyoplay.com/" class="hover">Home</a></li>
							     <li><a href="http://something.com/">Soccer</a></li>
							     <li><a href="http://something.com/">Baseball</a></li>
							     <li><a href="http://something.com/">Basketball</a></li>
							     <li><a href="http://something.com/">Golf</a></li>
							     <li><a href="http://something.com/">Volleyball</a></li>
							     <li><a href="http://something.com/">Hockey</a></li>
							     <li><a href="http://something.com/">Football</a></li>
							  </ul>
							  
              </li>
              
              <li onmouseover="show_sub_menuma();" onmouseout="hide_submenu();" ><a href='http://www.something.com/index.php?page=mailbox&section=inbox'>Mailbox</a>
                
                <ul id="sub_main_menma"   onmouseout="hide_submenu();" onmouseover="show_sub_menuma();" >  
                   <li><a href="http://something.com/">Mailbox</a></li>
							     <li><a href="http://something.com/">Mailbox</a></li>
							     <li><a href="http://something.com/">Mailbox</a></li>
							     <li><a href="http://something.com/">Mailbox</a></li>
							     <li><a href="http://something.com/">Mailbox</a></li>
							     <li><a href="http://something.com/">Bowling</a></li>
							  </ul>
              
              </li>
              <li onmouseover="show_sub_menupr();" onmouseout="hide_submenu();"  ><a href="http://www.something.com/profiles/">My Profile</a>
              <ul id="sub_main_menpr"   onmouseout="hide_submenu();" onmouseover="show_sub_menupr();">  
                   <li><a href="http://tennis.eyoplay.com/">Profile</a></li>
							     <li><a href="http://something.com/">Profile</a></li>
							     <li><a href="http://something.com/">Profile</a></li>
							     <li><a href="http://something.com/">Profile</a></li>
							     <li><a href="http://something.com/">Profile</a></li>
							     <li><a href="http://something.com/">Profile</a></li>
							  </ul>
              </li>
              <li onmouseover="show_sub_menucal();" onmouseout="hide_submenu();" ><a href="http://www.something.com/index.php?page=calendar">My Calendar</a>
                <ul id="sub_main_mencal"   onmouseout="hide_submenu();" onmouseover="show_sub_menucal();">  
                   <li><a href="http://something.com/">Calendar</a></li>
							     <li><a href="http://something.com/">Calendar</a></li>
							     <li><a href="http://something.com/">Calendar</a></li>
							     <li><a href="http://something.com/">Calendar</a></li>
							     <li><a href="http://something.com/">Calendar</a></li>
							     <li><a href="http://something.com/">Calendar</a></li>
							  </ul>
              </li>
              <li onmouseover="show_sub_menusho();" onmouseout="hide_submenu();"><a href="http://shop.com/" target="_blank">Shopping</a>
                <ul id="sub_main_mensho"   onmouseout="hide_submenu();" onmouseover="show_sub_menusho();">  
                   <li><a href="http://tennis.com/">Shopping</a></li>
							     <li><a href="http://cricket.com/">Shopping</a></li>
							     <li><a href="http://hiking.com/">Shopping</a></li>
							     <li><a href="http://softball.com/">Shopping</a></li>
							     <li><a href="http://cycling.com/">Shopping</a></li>
							     <li><a href="http://bowling.com/">Shopping</a></li>
							  </ul>
              </li>
              <li onmouseover="show_sub_menucam1();" onmouseout="hide_submenu();"><a href="http://fields.com/" target="_blank">Camps</a>
                 <ul id="sub_main_mencam1" onmouseover="show_sub_menucam1();"  onmouseout="hide_submenu();">  
                   <li><a href="http://tennis.com/">Camps</a></li>
							     <li><a href="http://cricket.com/">Camps</a></li>
							     <li><a href="http://hiking.com/">Camps</a></li>
							     <li><a href="http://softball.com/">Camps</a></li>
							     <li><a href="http://cycling.com/">Camps</a></li>
							     <li><a href="http://bowling.com/">Camps</a></li>
							  </ul>
              </li>
							<li onmouseover="show_sub_menucam2();" onmouseout="hide_submenu();"><a href="http://fields.com/" target="_blank">Camps</a>
                 
                 <ul id="sub_main_mencam2" onmouseover="show_sub_menucam2();"  onmouseout="hide_submenu();">  
                   <li><a href="http://tennis.com/">Camp</a></li>
							     <li><a href="http://cricket.com/">Camp</a></li>
							     <li><a href="http://hiking.com/">Camp</a></li>
							     <li><a href="http://softball.com/">Camp</a></li>
							     <li><a href="http://cycling.com/">Camp</a></li>
							     <li><a href="http://bowling.com/">Camp</a></li>
							  </ul>
              
              
              </li>
							
							</ul>


</body>
</html>
Reply With Quote  
•
•
Join Date: Jul 2006
Posts: 9
Reputation: fredjahed is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
fredjahed fredjahed is offline Offline
Newbie Poster

Re: HELP needed on javascript menus PLEASE...

  #8  
Dec 11th, 2007
Hi Hielo,
Thanks very much for tips, but I am dumb-founded.
I pasted above code...and now I've got blank screen.

I don't know what I'm missing now....
oh I know...knowledge
Reply With Quote  
•
•
Join Date: Dec 2007
Posts: 75
Reputation: hielo is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 10
hielo hielo is offline Offline
Junior Poster in Training

Re: HELP needed on javascript menus PLEASE...

  #9  
Dec 11th, 2007
I don't know what you mean by "...I pasted...". The code I supplied was a complete file by itself. Basically you were supposed to save it as a file by itself and see if it does what you want. If so, you to analyze what I did and extract what you need from it (be it code or idea) and apply it to your own page.

I cannot tell why your page is not working because I don't know what your HTML code looks like. CSS only makes sense if you have the HTML structure to look at. That's why I gave you a complete page. You can save what I gave you as hielo.html and and use that as a starting point for a new version of your file. Just add the content incrementally and keep testing the page as you add CSS and/or Javascript to it to make sure that whay you recently added does not break it.

Lastly, the only thing I can think of for which your page is "blank" is because on every one of your javascript functions I saw references to "sub_menu_bg" as in the following:

//var id_ul=document.getElementById("sub_menu_bg");
//id_ul.style.backgroundColor='#0199DC';

but if you notice carefully, I commented them all out. The reason for this is that I could not find any html element with id="sub_menu_bg". Hence, that line was giving errors all over the place. If your file has that id defined somewhere, you need to make the necessary adjustments to activate that element. This "activation" would simply be uncommenting the two relevant commented lines on every function. It's possible that it is hidden by default and hence the reason why your page is blank.
Reply With Quote  
•
•
Join Date: Jan 2007
Posts: 2,604
Reputation: MidiMagic is on a distinguished road 
Rep Power: 7
Solved Threads: 119
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Posting Maven

Re: HELP needed on javascript menus PLEASE...

  #10  
Dec 17th, 2007
An id can be used on only one element in a web page. The second occurrence of the same id causes an error.
Daylight-saving time uses more gasoline
Reply With Quote  
Reply

•
•
•
•

Only community members can participate in forum threads. You must register or log in to contribute.

Register
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

•
•
•
•
Thread Tools Display Modes
Linear Mode Linear Mode

•
•
•
•
ajax asp developer development firefox home html internet javascript microsoft msdn office site software sql vista web
Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum

Advertising Opportunities on DaniWeb
Contact Us - Newsletter Archive - Sitemap - Privacy Statement
All times are GMT -4. The time now is 9:26 am.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC