FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

JavaScript (Menu)

   Frihost Forum Index -> Scripting -> Php and MySQL
 


alskmaster
This is a simple menu, but that you can improve how much to quizer and still it can aidicionar classrooms of the CSS so that it is with the face of its site.


It is enough to place in head:


Code:
<script language="JavaScript1.2">

//link for menu 1
var menu1=new Array()
menu1[0]='<a href=Test00.htm>Menu item caption00</a><br>'
menu1[1]='<a href=Test01.htm>Menu item caption01 here</a><br>'
menu1[2]='<a href=Test02.htm>Menu item caption02</a><br>'
//link for menu 2
var menu2=new Array()
menu2[0]='<a href=Test10.htm>Menu item caption10</a><br>'
menu2[1]='<a href=Test11.htm>Menu item caption11</a><br>'
menu2[2]='<a href=Test12.htm>Menu item caption12</a><br>'
//link for menu 3
var menu3=new Array()
menu3[0]='<a href=Test20.htm>Menu item caption20</a><br>'
menu3[1]='<a href=Test21.htm>Menu item caption21</a><br>'
menu3[2]='<a href=Test22.htm>Menu item caption22</a><br>'
//link for menu 4
var menu4=new Array()
menu4[0]='<a href=Test30.htm>Menu item caption30</a><br>'
menu4[1]='<a href=Test31.htm>Menu item caption31</a><br>'
menu4[2]='<a href=Test32.htm>Menu item caption32</a><br>'
//link for menu 5
var menu5=new Array()
menu5[0]='<a href=Test40.htm>Menu item caption40</a><br>'
menu5[1]='<a href=Test41.htm>Menu item caption41</a><br>'
menu5[2]='<a href=Test42.htm>Menu item caption42</a><br>'

</script>

<style>
//dont use this only proffesional
<!--
.iewrap1{
position:relative;
height:30px;
}
.iewrap2{
position:absolute;
}
#dropmenu0, #dropmenu1, #dropmenu2, #dropmenu3, #dropmenu4{
visibility:hide;
z-index:100;
}
-->
</style>

</head>



And in the Body to place the amount of menu that to desire:




Code:
<script language="JavaScript1.2">
//reusable/////////////////////////////
var zindex=100
function dropit2(whichone){
if (window.themenu&&themenu.id!=whichone.id)
themenu.style.visibility="hidden"
themenu=whichone
if (document.all){
themenu.style.left=document.body.scrollLeft+event.clientX-event.offsetX
themenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+18
if (themenu.style.visibility=="hidden"){
themenu.style.visibility="visible"
themenu.style.zIndex=zindex++
}
else{
hidemenu()
}
}
}

function dropit(e,whichone){
if (window.themenu&&themenu.id!=eval(whichone).id)
themenu.visibility="hide"
themenu=eval(whichone)
if (themenu.visibility=="hide")
themenu.visibility="show"
else
themenu.visibility="hide"
themenu.zIndex++
themenu.left=e.pageX-e.layerX
themenu.top=e.pageY-e.layerY+19
return false
}

function hidemenu(whichone){
if (window.themenu)
themenu.style.visibility="hidden"
}

function hidemenu2(){
themenu.visibility="hide"
}

if (document.all)
document.body.onclick=hidemenu

//reusable/////////////////////////////
</script>
<!-----------change here your color en yout link for menu here----------->
<!----------Menu 1 starts here---------->

<ilayer height=35px>
<layer visibility=show>
<span class=iewrap1>
<span class=iewrap2 onClick="dropit2(dropmenu0);event.cancelBubble=true;return false"><font face=Verdana><b><a href="alternate.htm" onClick="if(document.layers) return dropit(event, 'document.dropmenu0')">Click here</a></b></font>
</span>
</span>
</layer>
</ilayer><br>
<!----------Menu 1 ends here---------->


<!----------Menu 2 starts here---------->

<ilayer height=35px>
<layer visibility=show>
<span class=iewrap1>
<span class=iewrap2 onClick="dropit2(dropmenu1);event.cancelBubble=true;return false"><font face=Verdana><b><a href="alternate.htm" onClick="if(document.layers) return dropit(event, 'document.dropmenu1')">Click here</a></b></font>
</span>
</span>
</layer>
</ilayer><br>
<!----------Menu 2 ends here---------->


<!----------Menu 3 starts here---------->

<ilayer height=35px>
<layer visibility=show>
<span class=iewrap1>
<span class=iewrap2 onClick="dropit2(dropmenu2);event.cancelBubble=true;return false"><font face=Verdana><b><a href="alternate.htm" onClick="if(document.layers) return dropit(event, 'document.dropmenu2')">Click here</a></b></font>
</span>
</span>
</layer>
</ilayer><br>
<!----------Menu 3 ends here---------->


<!----------Menu 4 starts here---------->

<ilayer height=35px>
<layer visibility=show>
<span class=iewrap1>
<span class=iewrap2 onClick="dropit2(dropmenu3);event.cancelBubble=true;return false"><font face=Verdana><b><a href="alternate.htm" onClick="if(document.layers) return dropit(event, 'document.dropmenu3')">Click here</a></b></font>
</span>
</span>
</layer>
</ilayer><br>
<!----------Menu 4 ends here---------->


<!----------Menu 5 starts here---------->

<ilayer height=35px>
<layer visibility=show>
<span class=iewrap1>
<span class=iewrap2 onClick="dropit2(dropmenu4);event.cancelBubble=true;return false"><font face=Verdana><b><a href="alternate.htm" onClick="if(document.layers) return dropit(event, 'document.dropmenu4')">Click here</a></b></font>
</span>
</span>
</layer>
</ilayer><br>
<!----------Menu 5 ends here---------->


<div id=dropmenu0 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu0.style.padding="4px"
for (i=0;i<menu1.length;i++)
document.write(menu1[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu0.captureEvents(Event.CLICK)
document.dropmenu0.onclick=hidemenu2
}
</script>

<div id=dropmenu1 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu1.style.padding="4px"
for (i=0;i<menu2.length;i++)
document.write(menu2[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu1.captureEvents(Event.CLICK)
document.dropmenu1.onclick=hidemenu2
}
</script>

<div id=dropmenu2 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu2.style.padding="4px"
for (i=0;i<menu3.length;i++)
document.write(menu3[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu2.captureEvents(Event.CLICK)
document.dropmenu2.onclick=hidemenu2
}
</script>

<div id=dropmenu3 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">

<script language="JavaScript1.2">
if (document.all)
dropmenu3.style.padding="4px"
for (i=0;i<menu4.length;i++)
document.write(menu4[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu3.captureEvents(Event.CLICK)
document.dropmenu3.onclick=hidemenu2
}
</script>

<div id=dropmenu4 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">

<script language="JavaScript1.2">
if (document.all)
dropmenu4.style.padding="4px"
for (i=0;i<menu5.length;i++)
document.write(menu5[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu4.captureEvents(Event.CLICK)
document.dropmenu4.onclick=hidemenu2
}
</script>

</body>
alskmaster
HI, would like showing a very easy menu to them of manipulation:

In tags <head></head> you place the formatting of the menu:



Code:
<script>

hex = new Array(8)
set = new Array(4)
set1 = new Array(0,0,0,0,0)
hex[0] = "CCCCCC"
hex[1] = "BBBBBB"
hex[2] = "AAAAAA"
hex[3] = "999999"
hex[4] = "888888"
hex[5] = "777777"
hex[6] = "666666"
hex[7] = "555555"
hex[8] = "444444"

function rollon(n){
if (n==1){set[1]=1}
if (n==2){set[2]=1}
if (n==3){set[3]=1}
if (n==4){set[4]=1}
}

function rolloff(n){
if (n==1){set[1]=0}
if (n==2){set[2]=0}
if (n==3){set[3]=0}
if (n==4){set[4]=0}
}

function color(){
if (set[1]==1){
if (set1[1]==8){} else{set1[1]++ ;item1.style.background = hex[set1[1]] }
} else {
if (set1[1]==0){} else{set1[1]=set1[1]-1 ;item1.style.background = hex[set1[1]] }
}

if (set[2]==1){
if (set1[2]==8){} else{set1[2]++ ;item2.style.background = hex[set1[2]] }
} else {
if (set1[2]==0){} else{set1[2]=set1[2]-1 ;item2.style.background = hex[set1[2]] }
}

if (set[3]==1){
if (set1[3]==8){} else{set1[3]++ ;item3.style.background = hex[set1[3]] }
} else {
if (set1[3]==0){} else{set1[3]=set1[3]-1 ;item3.style.background = hex[set1[3]] }
}

if (set[4]==1){
if (set1[4]==8){} else{set1[4]++ ;item4.style.background = hex[set1[4]] }
} else {
if (set1[4]==0){} else{set1[4]=set1[4]-1 ;item4.style.background = hex[set1[4]] }
}
setTimeout("color()",100)
}

</script>
</head>


And in the place where it desires to place the menu places this table:

Code:


<table border="1" cellpadding="0" cellspacing="0"
bgcolor="cccccc" bordercolor="#000000">
<tr>
<td width="100" id="item1" onmouseover="rollon(1)" onmouseout="rolloff(1)"><p align="center" ><font color="cc0000">Menu</p>
</td>
</tr>
<tr>
<td id="item2" onmouseover="rollon(2)" onmouseout="rolloff(2)"><p align="center"><font color="cc0000">Intro</p>
</td>
</tr>
<tr>
<td id="item3" onmouseover="rollon(3)" onmouseout="rolloff(3)"><p align="center"><font color="cc0000">Topic1</p>
</td>
</tr>
<tr>
<td id="item4" onmouseover="rollon(4)" onmouseout="rolloff(4)"><p align="center"><font color="cc0000">Topic 2</p>
</td>
</tr>
</table>


It is very important not to forget to place inside of tag <body> parameter to call the function.

Ex:

code of head
Code:
</head>

<body onload="color()">
código do body
</body>
Warchild
Hi,

I am new to JavaScript and have coded a little galley script. But need help improving it.
Currently it will just load images in the current folder, assuming they are all numbered 1..2..3..4…..ect. with accompanying thumbnails. The code it put into a HTML file.

Code:

numberpics = 77;
var i = 0;
var temp1;
var temp2;
var tempstring;
var colls = 4;
var remainder;

document.write('<p align="center"> <DIV> ');

do
{
i+=1;
temp1 = "<A HREF=\"" + i + ".jpg" + "\" onClick=\"window.open(\'" + i + ".jpg" + "\', \'review\'); return false\">"
temp2 = "<IMG SRC=" + i + "_tn.jpg> </A>";
tempstring = temp1+temp2;
document.write(tempstring);

remainder = i%colls;

if(remainder==0)
{
document.write(' </DIV></p>');
}

//alert(i);
//alert(remainder);

} while (i < numberpics);


I would like to improve it so it’s a JS file rather than included in the HTML. The JS file will then need to take parameters, or read the appropriate information from a file.
Parameters it will need to take are folder of images and number of images.

I’ll give some points for anyone who can help.

Thanks.
drbrennan
It sounds like what you want to do is convert your code into a function (or several functions, AKA methods). JS is by no means object oriented but at least by sectioning code into methods you'll find a happy medium. Then worry about taking it out of HTML, putting it in its own JS file or files. First, focus on the methods. Hope this helps.

If you're not sure how methods work let me know. If you just want links for good primers or tips on the web I can also help. You can do much more powerful things by using a different language than JS (ie: PHP, JSP etc.) such as reading from an xml file or database. My guess is you're just starting out though, and JS isn't a bad place to begin.
Reply to topic    Frihost Forum Index -> Scripting -> Php and MySQL

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.