Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Popup Close 1

Status
Not open for further replies.
JavaUser123

JavaUser123

Technical User
Apr 22, 2007
8
GB
I Have A Floating Menu That Uses JavaScript To Operate. I Would Like An Option To Hide And Show This Menu
This Is The Html And Javascript Code I Am Using:
<html>
<head> <title> Cool Computer Pranks </title> <script> alert("Welcome!"); alert("Drive Your Friends Insane!"); alert("With Nerdy Pranks - Like These Boxes!"); </script>
<style>

.move

{

width:100%;

background-color:#99CCFF;

border-bottom:1px solid blue;

font-size:14px;

font-family:vardana;

font-color:"#33CCAA";

text-align:center;

}

.info

{

width:100%;

background-color:#99CCFF;

border-top:1px solid blue;

font-size:13px;

font-family:vardana;

font-color:"#33CCAA";

}

.panel

{

width:150;

position:absolute;

border:1px solid blue;

left:350;

top:200;

font-size:13px;

font-family:vardana;

}

.panel a:visited{color:blue;}

.panel a{text-decoration:none;color:blue}

.panel a:hover{text-decoration:none;}



#panel a.visited{

text-decoration:none;

}

.menu

{

width:100%;

background-color:lightyellow;

font-size:13px;

font-family:vardana;

}

</style>



<SCRIPT LANGUAGE="JavaScript">



N = (document.all) ? 0 : 1;

var ob;

var over = false;



function MD(e) {

if (over)

{

if (N) {

ob = document.getElementById("panel");

X=e.layerX;

Y=e.layerY;

return false;

}

else {

ob = document.getElementById("panel");

ob = ob.style;

X=event.offsetX;

Y=event.offsetY;





}

}

}



function MM(e) {

if (ob) {

if (N) {

ob.style.top = e.pageY-Y;

ob.style.left = e.pageX-X;



}

else {

ob.pixelLeft = event.clientX-X + document.body.scrollLeft;

ob.pixelTop = event.clientY-Y + document.body.scrollTop;

return false;

}

}

}



function MU() {

ob = null;

}



if (N) {

document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);

}



document.onmousedown = MD;

document.onmousemove = MM;

document.onmouseup = MU;



</script>
<!---END OF DRAG MENU-->
</head>
<body>
<!---DRAG MENU, NO EDIT-->
<div id="panel" class="panel" >

<script language="JavaScript">

function getArray(id)

{

var splitarray = link[id].split("|");

return splitarray;

}



function info(i,obj,col)

{



sublink = getArray(i);

infobar = document.getElementById("infob");

infobar.innerHTML = "<img src='pointer2.gif'> "+sublink[2];

obj.style.backgroundColor=col;

}



function endi(obj,col)

{

obj.style.backgroundColor=col;

infobar = document.getElementById("infob");

infobar.innerHTML = "<img src='pointer2.gif'> <br>";

}



var link = new Array();

link[0] = ". HOME|1.html |Visit my homepage";

link[1] = ". JavaScipts| JavaScripts";

link[2] = ". My links| |Visit my links";

link[3] = ". HOME| |Visit my homepage";

link[4] = ". JavaScript | JavaScripts";

link[5] = ". My links| |Visit my links";



document.write("<div class='move' onmouseover='over=true;' onmouseout='over=false;' style='cursor:move'><font color=red><b>Nerdy Tricks Floating Menu</b></font></div><div class='menu'><br></div>");

for(i=0;i<link.length;i++)

{

sublink = getArray(i);

document.write("<a href='"+sublink[1]+"'><div class='menu' onmouseover=\"info("+i+",this,'gold')\" onmouseout=\"endi(this,'lightyellow')\" style='cursor:hand'> "+ sublink[0] +"</div></a>");

}

document.write("<div class='menu'><br></div><div class='info' id='infob' name='infob'><img src='pointer2.gif'> <br></div>");

</script>

</div>
<!---END OF DRAG MENU-->
<table bgcolor=#336699 height=100% width=100% border=1>
<tr height=100> <td width=150> <center> <img src="1.1.wmf" height=95 width=95> </center> </td> <td> <center> <font size=6 color=#FFFFFF> Welcome To Nerdy Tricks! </font> <br> <font size=4 color=#FFFFFF> Drive Your Friends Insane!! </font> </center> </td> </tr>
<tr height> <td width=150> <center> <font size=6 color=#FFFFFF> Menu </font> <br> <br> <font size=4 color=#FFFFFF> Is Floating </font> </center> </td> <td> a </td> </tr>
</table>

P.S. I Am Not Great On This Stuff-simple explanation please
 
Sort by date Sort by votes
Clicking on the word "Menu" will make the menu appear and disappear:

Code: 
<html>
 <head> <title> Cool Computer Pranks </title> <script> alert("Welcome!"); alert("Drive Your Friends Insane!"); alert("With Nerdy Pranks - Like These Boxes!"); </script>
<style>

.move

{

 width:100%;

 background-color:#99CCFF;

 border-bottom:1px solid blue;

 font-size:14px;

 font-family:vardana;

 font-color:"#33CCAA";

 text-align:center;

}

.info

{

 width:100%;

 background-color:#99CCFF;

 border-top:1px solid blue;

 font-size:13px;

 font-family:vardana;

 font-color:"#33CCAA";

}

.panel

{

 width:150;

 position:absolute;

 border:1px solid blue;

 left:350;

 top:200;

 font-size:13px;

 font-family:vardana;

 visibility:visible;

}

.panel a:visited{color:blue;}

.panel a{text-decoration:none;color:blue}

.panel a:hover{text-decoration:none;}



#panel a.visited{

text-decoration:none;

}

.menu

{

 width:100%;

 background-color:lightyellow;

 font-size:13px;

 font-family:vardana;

}

</style>



<SCRIPT LANGUAGE="JavaScript">



N = (document.all) ? 0 : 1;

var ob;

var over = false;



function MD(e) {

if (over)

{

if (N) {

ob = document.getElementById("panel");

X=e.layerX;

Y=e.layerY;

return false;

}

else {

ob = document.getElementById("panel");

ob = ob.style;

X=event.offsetX;

Y=event.offsetY;





}

}

}



function MM(e) {

if (ob) {

if (N) {

ob.style.top = e.pageY-Y;

ob.style.left = e.pageX-X;



}

else {

ob.pixelLeft = event.clientX-X + document.body.scrollLeft;

ob.pixelTop = event.clientY-Y + document.body.scrollTop;

return false;

      }

   }

}



function MU() {

ob = null;

}



if (N) {

document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);

}



document.onmousedown = MD;

document.onmousemove = MM;

document.onmouseup = MU;



</script>
<!---END OF DRAG MENU-->
</head>
 <body>
<!---DRAG MENU, NO EDIT-->
<div id="panel"  class="panel" >

<script language="JavaScript">

function ShowHideMenu(){

if(document.getElementById('panel').style.visibility==''){
	document.getElementById('panel').style.visibility='visible';
}
	if(document.getElementById('panel').style.visibility=='visible'){
		document.getElementById('panel').style.visibility='hidden';
	}
	else
	{
		document.getElementById('panel').style.visibility='visible';
	}
}

function getArray(id)

{

  var splitarray = link[id].split("|");

  return splitarray;

}



function info(i,obj,col)

{



 sublink = getArray(i);

 infobar = document.getElementById("infob");

 infobar.innerHTML = "<img src='pointer2.gif'>  "+sublink[2];

 obj.style.backgroundColor=col;

}



function endi(obj,col)

{

 obj.style.backgroundColor=col;

 infobar = document.getElementById("infob");

 infobar.innerHTML = "<img src='pointer2.gif'> <br>";

}



var link = new Array();

link[0] = ". HOME|1.html |Visit my homepage";

link[1] = ". JavaScipts|[URL unfurl="true"]http://www.javascripts.com|Free[/URL] JavaScripts";

link[2] = ". My links|[URL unfurl="true"]http://www.webdeveloper.com[/URL] |Visit my links";

link[3] = ". HOME|[URL unfurl="true"]http://javascriptsource.com[/URL] |Visit my homepage";

link[4] = ". JavaScript |[URL unfurl="true"]http://www.javascript.com|Free[/URL] JavaScripts";

link[5] = ". My links|[URL unfurl="true"]http://www.webdeveloper.com[/URL] |Visit my links";



  document.write("<div class='move' onmouseover='over=true;' onmouseout='over=false;' style='cursor:move'><font color=red><b>Nerdy Tricks Floating Menu</b></font></div><div class='menu'><br></div>");

for(i=0;i<link.length;i++)

{

  sublink = getArray(i);

  document.write("<a href='"+sublink[1]+"'><div class='menu' onmouseover=\"info("+i+",this,'gold')\" onmouseout=\"endi(this,'lightyellow')\" style='cursor:hand'>  "+ sublink[0] +"</div></a>");

}

  document.write("<div class='menu'><br></div><div class='info' id='infob' name='infob'><img src='pointer2.gif'> <br></div></div>");

</script>

</div>
<!---END OF DRAG MENU-->
  <table bgcolor=#336699 height=100% width=100% border=1>
   <tr height=100> <td width=150> <center> <img src="1.1.wmf" height=95 width=95> </center> </td> <td> <center> <font size=6 color=#FFFFFF> Welcome To Nerdy Tricks! </font> <br> <font size=4 color=#FFFFFF> Drive Your Friends Insane!! </font> </center> </td> </tr>
   <tr height> <td width=150> <center> <font size=6 color=#FFFFFF><a href="#" onclick="ShowHideMenu();"> Menu </a></font> <br> <br> <font size=4 color=#FFFFFF> Is Floating </font></center> </td> <td> a </td> </tr>
  </table>

Cheers

Nick
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bach1
  • Locked
  • Question
How to get value from popup window to parent window by clicking from database selection?
Replies
2
Views
165
Offera
Offera
Diego Donate
  • Locked
  • Question
How to close JQuery context menu in HTML/js code
Replies
1
Views
247
Diego Donate
Diego Donate
buckeyeleaf1979
  • Locked
  • Question
need help trying to get another page to display in popup
Replies
0
Views
101
buckeyeleaf1979
buckeyeleaf1979
zoldos
  • Locked
  • Question
how do I make first Javascript drop down (show div) close when second div is opened?
Replies
2
Views
72
vacunita
vacunita
zoldos
  • Locked
  • Question
how do I auto-refresh a hidden JS popup so the page does not need to re-load to display the updates?
Replies
15
Views
255
zoldos
zoldos

Part and Inventory Search

Sponsor

Back
Top