Home.... | log in.... | Pub my question! | Sign-up....

Java-index >> Enterprise & Remote Computing >> Web Tier APIs

popup menu in jsp

hi frens i m trying to make popup menus in my project. how can i display a butoon which generates a popup menu while mouse clicks or moves mouse over it.plz send me code to create a popup menu.thanx in advance

[237 byte] By [shi_sana] at [2007-10-2 15:43:03]

«« AVK Test Suite
»» how to call a servlet in a Session Bean

# 1

< frens i m trying to make popup menus in my project. how can i display a butoon which generates a popup menu while mouse clicks or moves mouse over it.

> plz send me code to create a popup menu.

Search the web for [url=http://www.googleityoumoron.com/]Javascript popup menu[/url]

andiha at 2007-7-13 15:32:06 >

top of Java-index,Enterprise & Remote Computing,Web Tier APIs...

# 2

Hi i've got u an exellent site for ur requirement,think u'll find ur need fixed." http://inspire.server101.com/js/code/" try this link.bye.

vj2093a at 2007-7-13 15:32:06 >

# 3

Hi,u can download the popup menu builder from the lo=ink below. http://www.sofotex.com/JavaScript-PopUpMenu-Builder-download_L22144.html.

vj2093a at 2007-7-13 15:32:06 >

# 4

hiithanx very much for ur replybut i can't afford the registration. can u plz try to tell mehow can i get simple html or javascript code to design popup menus.plz i m trying but not getting the perfact oneregards

shi_sana at 2007-7-13 15:32:06 >

# 5

Hi,

i'm sorry i dont have a code for the menu popup ,but i think i can help u with an calander popup similar to ur need .

here's the code:

HTML PAGE

<html>

<TITLE>Add Course</TITLE>

<BODY>

<b><center>Data Time Popup</center></b>

<tr>

<td><b>Start date</b> (MM-DD-YYYY)</td>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</BODY>

</html>

JAVA SCRIPT FOR THIS SAME HTML :

var winCal;

var dtToday=new Date();

var Cal;

var docCal;

var MonthName=["January", "February", "March", "April", "May", "June","July",

"August", "September", "October", "November", "December"];

var WeekDayName=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];

var exDateTime;//Existing Date and Time

//Configurable parameters

var cnTop="200";//top coordinate of calendar window.

var cnLeft="500";//left coordinate of calendar window

var WindowTitle ="DateTime Picker";//Date Time Picker title.

var WeekChar=2;//number of character for week day. if 2 then Mo,Tu,We. if 3 then Mon,Tue,Wed.

var CellWidth=20;//Width of day cell.

var DateSeparator="-";//Date Separator, you can change it to "/" if you want.

var TimeMode=24;//default TimeMode value. 12 or 24

var ShowLongMonth=true;//Show long month name in Calendar header. example: "January".

var ShowMonthYear=true;//Show Month and Year in Calendar header.

var MonthYearColor="#cc0033";//Font Color of Month and Year in Calendar header.

var WeekHeadColor="#0099CC";//Background Color in Week header.

var SundayColor="#6699FF";//Background color of Sunday.

var SaturdayColor="#CCCCFF";//Background color of Saturday.

var WeekDayColor="white";//Background color of weekdays.

var FontColor="blue";//color of font in Calendar day cell.

var TodayColor="red";//Background color of today.

var SelDateColor="#FFFF99";//Backgrond color of selected date in textbox.

var YrSelColor="#cc0033";//color of font of Year selector.

var ThemeBg="";//Background image of Calendar window.

//end Configurable parameters

//end Global variable

function NewCal(pCtrl,pFormat,pShowTime,pTimeMode)

{

Cal=new Calendar(dtToday);

if ((pShowTime!=null) && (pShowTime))

{

Cal.ShowTime=true;

if ((pTimeMode!=null) &&((pTimeMode=='12')||(pTimeMode=='24')))

{

TimeMode=pTimeMode;

}

if (pCtrl!=null)

Cal.Ctrl=pCtrl;

if (pFormat!=null)

Cal.Format=pFormat.toUpperCase();

exDateTime=document.getElementById(pCtrl).value;

if (exDateTime!="")//Parse Date String

{

var Sp1;//Index of Date Separator 1

var Sp2;//Index of Date Separator 2

var tSp1;//Index of Time Separator 1

var tSp1;//Index of Time Separator 2

var strMonth;

var strDate;

var strYear;

var intMonth;

var YearPattern;

var strHour;

var strMinute;

var strSecond;

//parse month

Sp1=exDateTime.indexOf(DateSeparator,0)

Sp2=exDateTime.indexOf(DateSeparator,(parseInt(Sp1)+1));

if ((Cal.Format.toUpperCase()=="DDMMYYYY") || (Cal.Format.toUpperCase()=="DDMMMYYYY"))

{

strMonth=exDateTime.substring(Sp1+1,Sp2);

strDate=exDateTime.substring(0,Sp1);

}

else if ((Cal.Format.toUpperCase()=="MMDDYYYY") || (Cal.Format.toUpperCase()=="MMMDDYYYY"))

{

strMonth=exDateTime.substring(0,Sp1);

strDate=exDateTime.substring(Sp1+1,Sp2);

}

if (isNaN(strMonth))

intMonth=Cal.GetMonthIndex(strMonth);

else

intMonth=parseInt(strMonth,10)-1;

if ((parseInt(intMonth,10)>=0) && (parseInt(intMonth,10)<12))

Cal.Month=intMonth;

//end parse month

//parse Date

if ((parseInt(strDate,10)<=Cal.GetMonDays()) && (parseInt(strDate,10)>=1))

Cal.Date=strDate;

//end parse Date

//parse year

strYear=exDateTime.substring(Sp2+1,Sp2+5);

YearPattern=/^\d{4}$/;

if (YearPattern.test(strYear))

Cal.Year=parseInt(strYear,10);

//end parse year

//parse time

if (Cal.ShowTime==true)

{

tSp1=exDateTime.indexOf(":",0)

tSp2=exDateTime.indexOf(":",(parseInt(tSp1)+1));

strHour=exDateTime.substring(tSp1,(tSp1)-2);

Cal.SetHour(strHour);

strMinute=exDateTime.substring(tSp1+1,tSp2);

Cal.SetMinute(strMinute);

strSecond=exDateTime.substring(tSp2+1,tSp2+3);

Cal.SetSecond(strSecond);

}

winCal=window.open("","DateTimePicker","toolbar=0,status=0,menubar=0,fullscreen=no,width=195,height=245,resizable=0,top="+cnTop+",left="+cnLeft);

docCal=winCal.document;

RenderCal();

}

function RenderCal()

{

var vCalHeader;

var vCalData;

var vCalTime;

var i;

var j;

var SelectStr;

var vDayCount=0;

var vFirstDay;

docCal.open();

docCal.writeln("<html><head><title>"+WindowTitle+"</title>");

docCal.writeln("<script>var winMain=window.opener;</script>");

docCal.writeln("</head><body background='"+ThemeBg+"' link="+FontColor+" vlink="+FontColor+"><form name='Calendar'>");

vCalHeader="<table border=1 cellpadding=1 cellspacing=1 width='100%' align=\"center\" valign=\"top\">\n";

//Month Selector

vCalHeader+="<tr>\n<td colspan='7'><table border=0 width='100%' cellpadding=0 cellspacing=0><tr><td align='left'>\n";

vCalHeader+="<select name=\"MonthSelector\" onChange=\"javascript:winMain.Cal.SwitchMth(this.selectedIndex);winMain.RenderCal();\">\n";

for (i=0;i<12;i++)

{

if (i==Cal.Month)

SelectStr="Selected";

else

SelectStr="";

vCalHeader+="<option "+SelectStr+" value >"+MonthName[i]+"\n";

}

vCalHeader+="</select></td>";

//Year selector

vCalHeader+="\n<td align='right'><a href=\"javascript:winMain.Cal.DecYear();winMain.RenderCal()\"><b><font color=\""+YrSelColor+"\"><</font></b></a><font face=\"Verdana\" color=\""+YrSelColor+"\" size=2><b> "+Cal.Year+" </b></font><a href=\"javascript:winMain.Cal.IncYear();winMain.RenderCal()\"><b><font color=\""+YrSelColor+"\">></font></b></a></td></tr></table></td>\n";

vCalHeader+="</tr>";

//Calendar header shows Month and Year

if (ShowMonthYear)

vCalHeader+="<tr><td colspan='7'><font face='Verdana' size='2' align='center' color='"+MonthYearColor+"'><b>"+Cal.GetMonthName(ShowLongMonth)+" "+Cal.Year+"</b></font></td></tr>\n";

//Week day header

vCalHeader+="<tr bgcolor="+WeekHeadColor+">";

for (i=0;i<7;i++)

{

vCalHeader+="<td align='center'><font face='Verdana' size='2'>"+WeekDayName[i].substr(0,WeekChar)+"</font></td>";

}

vCalHeader+="</tr>";

docCal.write(vCalHeader);

//Calendar detail

CalDate=new Date(Cal.Year,Cal.Month);

CalDate.setDate(1);

vFirstDay=CalDate.getDay();

vCalData="<tr>";

for (i=0;i<vFirstDay;i++)

{

vCalData=vCalData+GenCell();

vDayCount=vDayCount+1;

}

for (j=1;j<=Cal.GetMonDays();j++)

{

var strCell;

vDayCount=vDayCount+1;

if ((j==dtToday.getDate())&&(Cal.Month==dtToday.getMonth())&&(Cal.Year==dtToday.getFullYear()))

strCell=GenCell(j,true,TodayColor);//Highlight today's date

else

{

if (j==Cal.Date)

{

strCell=GenCell(j,true,SelDateColor);

}

else

{

if (vDayCount%7==0)

strCell=GenCell(j,false,SaturdayColor);

else if ((vDayCount+6)%7==0)

strCell=GenCell(j,false,SundayColor);

else

strCell=GenCell(j,null,WeekDayColor);

}

vCalData=vCalData+strCell;

if((vDayCount%7==0)&&(j<Cal.GetMonDays()))

{

vCalData=vCalData+"</tr>\n<tr>";

}

docCal.writeln(vCalData);

//Time picker

if (Cal.ShowTime)

{

var showHour;

showHour=Cal.getShowHour();

vCalTime="<tr>\n<td colspan='7' align='center'>";

vCalTime+="<input type='text' name='hour' maxlength=2 size=1 style=\"WIDTH: 22px\" value="+showHour+" onchange=\"javascript:winMain.Cal.SetHour(this.value)\">";

vCalTime+=" : ";

vCalTime+="<input type='text' name='minute' maxlength=2 size=1 style=\"WIDTH: 22px\" value="+Cal.Minutes+" onchange=\"javascript:winMain.Cal.SetMinute(this.value)\">";

vCalTime+=" : ";

vCalTime+="<input type='text' name='second' maxlength=2 size=1 style=\"WIDTH: 22px\" value="+Cal.Seconds+" onchange=\"javascript:winMain.Cal.SetSecond(this.value)\">";

if (TimeMode==12)

{

var SelectAm =(parseInt(Cal.Hours,10)<12)? "Selected":"";

var SelectPm =(parseInt(Cal.Hours,10)>=12)? "Selected":"";

vCalTime+="<select name=\"ampm\" onchange=\"javascript:winMain.Cal.SetAmPm(this.options[this.selectedIndex].value);\">";

vCalTime+="<option "+SelectAm+" value=\"AM\">AM</option>";

vCalTime+="<option "+SelectPm+" value=\"PM\">PM<option>";

vCalTime+="</select>";

}

vCalTime+="\n</td>\n</tr>";

docCal.write(vCalTime);

}

//end time picker

docCal.writeln("\n</table>");

docCal.writeln("</form></body></html>");

docCal.close();

}

function GenCell(pValue,pHighLight,pColor)//Generate table cell with value

{

var PValue;

var PCellStr;

var vColor;

var vHLstr1;//HighLight string

var vHlstr2;

var vTimeStr;

if (pValue==null)

PValue="";

else

PValue=pValue;

if (pColor!=null)

vColor="bgcolor=\""+pColor+"\"";

else

vColor="";

if ((pHighLight!=null)&&(pHighLight))

{vHLstr1="color='red'><b>";vHLstr2="</b>";}

else

{vHLstr1=">";vHLstr2="";}

if (Cal.ShowTime)

{

vTimeStr="winMain.document.getElementById('"+Cal.Ctrl+"').value+=' '+"+"winMain.Cal.getShowHour()"+"+':'+"+"winMain.Cal.Minutes"+"+':'+"+"winMain.Cal.Seconds";

if (TimeMode==12)

vTimeStr+="+' '+winMain.Cal.AMorPM";

}

else

vTimeStr="";

PCellStr="<td "+vColor+" width="+CellWidth+" align='center'><font face='verdana' size='2'"+vHLstr1+"><a href=\"javascript:winMain.document.getElementById('"+Cal.Ctrl+"').value='"+Cal.FormatDate(PValue)+"';"+vTimeStr+";window.close();\">"+PValue+"</a>"+vHLstr2+"</font></td>";

return PCellStr;

}

function Calendar(pDate,pCtrl)

{

//Properties

this.Date=pDate.getDate();//selected date

this.Month=pDate.getMonth();//selected month number

this.Year=pDate.getFullYear();//selected year in 4 digits

this.Hours=pDate.getHours();

if (pDate.getMinutes()<10)

this.Minutes="0"+pDate.getMinutes();

else

this.Minutes=pDate.getMinutes();

if (pDate.getSeconds()<10)

this.Seconds="0"+pDate.getSeconds();

else

this.Seconds=pDate.getSeconds();

this.MyWindow=winCal;

this.Ctrl=pCtrl;

this.Format="ddMMyyyy";

this.Separator=DateSeparator;

this.ShowTime=false;

if (pDate.getHours()<12)

this.AMorPM="AM";

else

this.AMorPM="PM";

}

function GetMonthIndex(shortMonthName)

{

for (i=0;i<12;i++)

{

if (MonthName[i].substring(0,3).toUpperCase()==shortMonthName.toUpperCase())

{return i;}

}

Calendar.prototype.GetMonthIndex=GetMonthIndex;

function IncYear()

{Cal.Year++;}

Calendar.prototype.IncYear=IncYear;

function DecYear()

{Cal.Year--;}

Calendar.prototype.DecYear=DecYear;

function SwitchMth(intMth)

{Cal.Month=intMth;}

Calendar.prototype.SwitchMth=SwitchMth;

function SetHour(intHour)

{

var MaxHour;

var MinHour;

if (TimeMode==24)

{MaxHour=23;MinHour=0}

else if (TimeMode==12)

{MaxHour=12;MinHour=1}

else

alert("TimeMode can only be 12 or 24");

var HourExp=new RegExp("^\\d\\d$");

if (HourExp.test(intHour) && (parseInt(intHour,10)<=MaxHour) && (parseInt(intHour,10)>=MinHour))

{

if ((TimeMode==12) && (Cal.AMorPM=="PM"))

{

if (parseInt(intHour,10)==12)

Cal.Hours=12;

else

Cal.Hours=parseInt(intHour,10)+12;

}

else if ((TimeMode==12) && (Cal.AMorPM=="AM"))

{

if (intHour==12)

intHour-=12;

Cal.Hours=parseInt(intHour,10);

}

else if (TimeMode==24)

Cal.Hours=parseInt(intHour,10);

}

Calendar.prototype.SetHour=SetHour;

function SetMinute(intMin)

{

var MinExp=new RegExp("^\\d\\d$");

if (MinExp.test(intMin) && (intMin<60))

Cal.Minutes=intMin;

}

Calendar.prototype.SetMinute=SetMinute;

function SetSecond(intSec)

{

var SecExp=new RegExp("^\\d\\d$");

if (SecExp.test(intSec) && (intSec<60))

Cal.Seconds=intSec;

}

Calendar.prototype.SetSecond=SetSecond;

function SetAmPm(pvalue)

{

this.AMorPM=pvalue;

if (pvalue=="PM")

{

this.Hours=(parseInt(this.Hours,10))+12;

if (this.Hours==24)

this.Hours=12;

}

else if (pvalue=="AM")

this.Hours-=12;

}

Calendar.prototype.SetAmPm=SetAmPm;

function getShowHour()

{

var finalHour;

if (TimeMode==12)

{

if (parseInt(this.Hours,10)==0)

{

this.AMorPM="AM";

finalHour=parseInt(this.Hours,10)+12;

}

else if (parseInt(this.Hours,10)==12)

{

this.AMorPM="PM";

finalHour=12;

}

else if (this.Hours>12)

{

this.AMorPM="PM";

if ((this.Hours-12)<10)

finalHour="0"+((parseInt(this.Hours,10))-12);

else

finalHour=parseInt(this.Hours,10)-12;

}

else

{

this.AMorPM="AM";

if (this.Hours<10)

finalHour="0"+parseInt(this.Hours,10);

else

finalHour=this.Hours;

}

else if (TimeMode==24)

{

if (this.Hours<10)

finalHour="0"+parseInt(this.Hours,10);

else

finalHour=this.Hours;

}

return finalHour;

}

Calendar.prototype.getShowHour=getShowHour;

function GetMonthName(IsLong)

{

var Month=MonthName[this.Month];

if (IsLong)

return Month;

else

return Month.substr(0,3);

}

Calendar.prototype.GetMonthName=GetMonthName;

function GetMonDays()//Get number of days in a month

{

var DaysInMonth=[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

if (this.IsLeapYear())

{

DaysInMonth[1]=29;

}

return DaysInMonth[this.Month];

}

Calendar.prototype.GetMonDays=GetMonDays;

function IsLeapYear()

{

if ((this.Year%4)==0)

{

if ((this.Year%100==0) && (this.Year%400)!=0)

{

return false;

}

else

{

return true;

}

else

{

return false;

}

Calendar.prototype.IsLeapYear=IsLeapYear;

function FormatDate(pDate)

{

if (this.Format.toUpperCase()=="DDMMYYYY")

return (pDate+DateSeparator+(this.Month+1)+DateSeparator+this.Year);

else if (this.Format.toUpperCase()=="DDMMMYYYY")

return (pDate+DateSeparator+this.GetMonthName(false)+DateSeparator+this.Year);

else if (this.Format.toUpperCase()=="MMDDYYYY")

return ((this.Month+1)+DateSeparator+pDate+DateSeparator+this.Year);

else if (this.Format.toUpperCase()=="MMMDDYYYY")

return (this.GetMonthName(false)+DateSeparator+pDate+DateSeparator+this.Year);

}

Calendar.prototype.FormatDate=FormatDate;

Try this u'll do the similar for ur needs.

thanks.

vj.

vj2093a at 2007-7-13 15:32:06 >

# 6

- this.myform is your form and does not need to be declared

in function doSomething(),

which is obviosly a javascript function you will have a code like this:

function doSomething(){

window.open("index.jsp);

}

Note you will have to call the reference to your *.js file at the <head></head> section of your html.

henrywaxa at 2007-7-13 15:32:06 >

# 7

frens till now i m not getting any result.

i want to show u what kind of menu i want.

this is link

http://simplythebest.net/scripts/DHTML_scripts/dhtml_script_114a.html

plz try it and if u get desired output plz send the modified code for me

i have worked on that but it was not giving the right one.

plz try it i m waiting

thanx

shi_sana at 2007-7-13 15:32:06 >

# 8

> plz try it and if u get desired output plz send the modified code for me

> have worked on that but it was not giving the right one.

First of all this is a JSP Forum and not a JavaScript / DHTML forum.

> plz try it and if u get desired output plz send the modified code for me

> have worked on that but it was not giving the right one.

Why do you think that anybody here will do your work?

> i m waiting

You can do so but I don't think that this helps.

Read [url=http://www.catb.org/~esr/faqs/smart-questions.html]"How To Ask]Questions The Smart Way".[/url]

Then Post the work you've done with a description of your problems in a JavaScript/DHTML forum.

andi

andiha at 2007-7-13 15:32:06 >

# 9

[nobr]Hi shi_san,

i've got your point,here is a popup generator html page,just see the html page and u'll find the ur needs.

just copy past this code in ur note pad and save it as popup.html and run it in internet explorer.it will generate ur code.

<HTML>

<HEAD>

<TITLE>The JavaScript Source: Code Generators: Popup Window Maker</TITLE>

function generate(form){

page = document.inputForm.page.value;

toolbars = document.inputForm.toolbars.checked;

scrollprops = document.inputForm.scrollit.checked;

locations = document.inputForm.locations.checked;

statusbars = document.inputForm.statusbars.checked;

menubars = document.inputForm.menubars.checked;

resizeable = document.inputForm.resizeable.checked;

width = document.inputForm.width.value;

if (!width) width = screen.width;

height = document.inputForm.height.value;

if (!height) height = screen.height;

howto = document.inputForm.howtoopen.options[document.inputForm.howtoopen.selectedIndex].value;

center = document.inputForm.center.checked;

start = "<";

if(howto == 'body') {

otherOutput = start + "!-- STEP TWO: Paste this onLoad event handler into the BODY tag -->\n\n" + start + "BODY onLoad=\"javascript:popUp('" + page + "')\">";

}

if(howto == 'link') {

otherOutput = start + "!-- STEP TWO: Use the following link to open the new window -->\n\n" + start + "A HREF=\"javascript:popUp('" + page + "')\">Open the Popup Window" + start + "/A>";

}

if(howto == 'button') {

otherOutput = start + "!-- STEP TWO: Use the following button code for the new window -->\n\n" + start + "form>\n" + start + "input type=button value=\"Open the Popup Window\" onClick=\"javascript:popUp('" + page + "')\">\n" + start + "/form>";

}

scriptOutput = start + '!-- TWO STEPS TO INSTALL POPUP WINDOW:\r\n\r\n'

+ '1. Paste the first into the HEAD of your HTML document\r\n'

+ '2. Use the code to open the popup page on your site -->\r\n\r\n'

+ '\r\n\r\n'

+ '<HEAD>\r\n\r\n' + start + 'SCRIPT LANGUAGE="JavaScript">\r\n'

+ '\r\n'

+ '\r\n\r\n'

+ '\r\n'

+ '\r\n\r\n'

+ '<!-- Begin\r\n'

+ 'function pop' + 'Up(URL) {\nday = new Date();\nid = day.getTime();\n';

scriptOutput += "eval(\"page\" + id + \" = window.open(URL, '\" + id + \"', '" +

((toolbars) ? "toolbar=1," : "toolbar=0,") +

((scrollprops) ? "scrollbars=1," : "scrollbars=0,") +

((locations) ? "location=1," : "location=0,") +

((statusbars) ? "statusbar=1," : "statusbar=0,") +

((menubars) ? "menubar=1," : "menubar=0,") +

((resizeable) ? "resizable=1" : "resizable=0") +

((width) ? ",width=" + width : "") +

((height) ? ",height=" + height : "") +

((center) ? ",left = " + ((screen.width - width) / 2) : "") +

((center) ? ",top = " + ((screen.height - height) / 2) : "") +

"');\");\n}\n// End -->\n" + start + "/sc" + "ript>\n";

output = scriptOutput + "\n\n" + otherOutput + '\n\n' + start +'!-- Script Size: 0.73 KB --'+'>';

document.mail.source.value = output;

document.mail.source2.value = output;

uncode();

}

// End -->

</SCRIPT>

</HEAD>

<br>

<tr>

<td>

<tr>

<td colspan=2>This machine will make a script that will pop up and optionally center the popup window for you. Fill in the values below and click Make Code.</td>

</tr>

<tr>

<td width="400">What filename should be opened?</td>

<td><input type=text name=page size=10><br>(filename or http://....)</td>

</tr>

<tr>

<td>Would you like it to have toolbars?</td>

</tr>

<tr>

<td>Would you like the window to have scrollbars?</td>

</tr>

<tr>

<td>Would you like it to have the location bar?</td>

</tr>

<tr>

<td>Would you like it to have a status bar?</td>

</tr>

<tr>

<td>Would you like it to have a menu bar?</td>

</tr>

<tr>

<td>Would you like it to be resizeable?</td>

</tr>

<tr>

<td>How wide would you like it to be?</td>

<td><input type=text name=width size=4> (in pixels)</td>

</tr>

<tr>

<td>How high would you like it to be?</td>

<td><input type=text name=height size=4> (in pixels)</td>

</tr>

<tr>

<td>How should the window be opened?</td>

<option value="button">by a button

<option value="link">by a link

<option value="body">automatically

</select>

</td>

</tr>

<tr>

<td>Should we center the window on screen?</td>

</tr>

<tr>

</tr>

</table>

</td></tr>

</table>

</form>

<!-- Begin

document.write('<input type=text size=25 name=user value="'+email+'" onfocus=\"select()\">');

// End -->

</SCRIPT>

</center>

</td>

</form>

</tr>

</table></center>

</center>

</body></html>

This is an html but u'll get ur script code in this.

vj[/nobr]

vj2093a at 2007-7-13 15:32:06 >

# 10

hi vj

thanxs u very much 4 ur reply. its a gud one

but what i need is a menubar not a popup window.

i have worked on thay & got very few expected results.

i m sending u code

1. code for menu bar

<HTML>

<HEAD>

</script>

</HEAD>

<BODY>

<DIV Id="Bar2" class="Bar" menu="menu2">DELETE</DIV>

<DIV Id="Bar3" class="Bar" menu="menu3">UPDATE</DIV>

<DIV Id="Bar4" class="Bar" menu="menu4">SEARCH</DIV>

<DIV Id="Bar5" class="Bar" menu="menu5">REPORT</DIV>

</DIV>

<div Id="menuItem1_2" class="menuItem" title="vendor" cmd="new_ven.jsp">vendor</div>

<div Id="menuItem1_3" class="menuItem" title="Location" cmd="new_loc.jsp">Location</div>

<div Id="menuItem1_4" class="menuItem" title="employee" cmd="new_emp.jsp">employee</div>

</div>

<div Id="menuItem2_2" class="menuItem" title="vendor" cmd="del_ven.jsp">vendor</div>

<div Id="menuItem2_3" class="menuItem" title="location" cmd="del_loc.jsp">Location</div>

<div Id="menuItem2_4" class="menuItem" title="employee" cmd="del_emp.jsp">Employee</div>

</div>

<div Id="menuItem3_2" class="menuItem" title="vendor" cmd="mod_ven.jsp">vendor</div>

<div Id="menuItem3_3" class="menuItem" title="employee" cmd="mod_emp.jsp">Employee</div>

</div>

<div Id="menuItem4_3" class="menuItem" title="ssn" cmd="ser_ven.jsp">with vendor</div>

</div>

<div Id="menuItem5_2" class="menuItem" title="gatepass" cmd="rep_gp.jsp">By gatepass</div>

</div>

<div Id="menuItem6_1" class="menuItem" title="Today" cmd="rep_day.jsp">Today</div>

<div Id="menuItem6_3" class="menuItem" title="week" cmd="rep_week.jsp">Weekly</div>

<div Id="menuItem6_4" class="menuItem" title="Monthly" cmd="rep_mon.jsp">Monthly</div>

</div>

</BODY>

</HTML>

2. the .js file is

function InitMenu()

{

var bar = menuBar.children

for(var i=0;i < bar.length;i++)

{

var menu=eval(bar[i].menu)

menu.style.visibility = "hidden"

bar[i].onmouseover = new Function("ShowMenu("+bar[i].id+")")

var Items = menu.children

for(var j=0; j<Items.length; j++)

{

var menuItem = eval(Items[j].id)

if(menuItem.menu != null)

{

menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"

//var tmp = eval(menuItem.id+"_Arrow")

// tmp.style.pixelLeft = menu.getBoundingClientRect().Right //- tmp.offsetWidth - 15

FindSubMenu(menuItem.menu)}

if(menuItem.cmd != null)

{

menuItem.onclick = new Function("Do("+menuItem.id+")") }

menuItem.onmouseover = new Function("highlight("+Items[j].id+")")

}

function FindSubMenu(subMenu)

{

var menu=eval(subMenu)

var Items = menu.children

for(var j=0; j<Items.length; j++)

{

menu.style.visibility = "hidden"

var menuItem = eval(Items[j].id)

if(menuItem.menu!= null)

{

menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"

// var tmp = eval(menuItem.id+"_Arrow")

//tmp.style.pixelLeft = 35 //menuItem.getBoundingClientRect().right - tmp.offsetWidth - 15

FindSubMenu(menuItem.menu)

}

if(menuItem.cmd != null)

{

menuItem.onclick = new Function("Do("+menuItem.id+")") }

menuItem.onmouseover = new Function("highlight("+Items[j].id+")")

}

function ShowMenu(obj)

{

HideMenu(menuBar)

var menu = eval(obj.menu)

var bar = eval(obj.id)

bar.className="barOver"

menu.style.visibility = "visible"

menu.style.pixelTop = obj.getBoundingClientRect().top + obj.offsetHeight + Bdy.scrollTop

menu.style.pixelLeft = obj.getBoundingClientRect().left + Bdy.scrollLeft

}

function highlight(obj)

{

var PElement = eval(obj.parentElement.id)

if(PElement.hasChildNodes() == true)

{ var Elements = PElement.children

for(var i=0;i<Elements.length;i++)

{

TE = eval(Elements[i].id)

TE.className = "menuItem"

}

obj.className="ItemMouseOver"

window.defaultStatus = obj.title

ShowSubMenu(obj)

}

function Do(obj)

{

var cmd = eval(obj).cmd

window.navigate(cmd)

}

function HideMenu(obj)

{

if(obj.hasChildNodes()==true)

{

var child = obj.children

for(var j =0;j<child.length;j++)

{

if (child[j].className=="barOver")

{var bar = eval(child[j].id)

bar.className="Bar"}

if(child[j].menu != null)

{

var childMenu = eval(child[j].menu)

if(childMenu.hasChildNodes()==true)

HideMenu(childMenu)

childMenu.style.visibility = "hidden"

}

function ShowSubMenu(obj)

{

PMenu = eval(obj.parentElement.id)

HideMenu(PMenu)

if(obj.menu != null)

{

var menu = eval(obj.menu)

menu.style.visibility = "visible"

menu.style.pixelTop = obj.getBoundingClientRect().top + Bdy.scrollTop

menu.style.pixelLeft = obj.getBoundingClientRect().right + Bdy.scrollLeft

if(menu.getBoundingClientRect().right > window.screen.availWidth )

menu.style.pixelLeft = obj.getBoundingClientRect().left - menu.offsetWidth

}

3. .css file is

BODY

{

}

.menuBar

{

POSITION: relative;

BACKGROUND-COLOR: transparent;

TEXT-ALIGN: center

}

.Bar

{

BORDER-RIGHT: blue 1px outset;

BORDER-TOP: blue 1px outset;

FLOAT: left;

BORDER-LEFT: blue 1px outset;

WIDTH: 100px;

CURSOR: hand;

TEXT-INDENT: 5px;

BORDER-BOTTOM: blue 1px outset;

POSITION: relative;

BACKGROUND-COLOR: deepskyblue;

TEXT-ALIGN: center

}

.menu

{

BORDER-RIGHT: buttonhighlight thin outset;

BORDER-TOP: buttonhighlight thin outset;

VISIBILITY: hidden;

BORDER-LEFT: buttonhighlight thin outset;

WIDTH: 150px;

LINE-HEIGHT: 140%;

BORDER-BOTTOM: buttonhighlight thin outset;

POSITION: absolute;

BACKGROUND-COLOR: deepskyblue

}

.menuItem

{

PADDING-RIGHT: 15px;

PADDING-LEFT: 10px;

WIDTH: 100%;

CURSOR: hand;

LINE-HEIGHT: 20px;

BORDER-BOTTOM: white 1px solid

}

.ItemMouseOver

{

PADDING-RIGHT: 15px;

PADDING-LEFT: 10px;

WIDTH: 100%;

CURSOR: hand;

COLOR: highlighttext;

LINE-HEIGHT: 20px;

BORDER-BOTTOM: white 1px solid;

BACKGROUND-COLOR: highlight

}

.ItemMouseOut

{

WIDTH: 100%

}

.Arrow

{

FLOAT: right;

FONT-FAMILY: Webdings;

POSITION: absolute;

TEXT-ALIGN: left

}

.barOver

{

BORDER-RIGHT: blue 1px ridge;

BORDER-TOP: blue 1px ridge;

FLOAT: left;

BORDER-LEFT: blue 1px ridge;

WIDTH: 100px;

CURSOR: hand;

TEXT-INDENT: 5px;

BORDER-BOTTOM: blue 1px ridge;

POSITION: relative;

BACKGROUND-COLOR: deepskyblue;

TEXT-ALIGN: center

}

vj, what i want that this menubar should vertical but its working

horizontally . i know this is a java forum but if u can help me i'll

thankful.

i want menubar should be left align & look like a menu on website.

if u can help me i'll greatful

bye

regards

shi_sana at 2007-7-13 15:32:06 >

Enterprise & Remote Computing

Web Tier APIs

Java programming resources: FAQs, tutorials, compiler and browser download sites, documentation, books lists, IDEs, etc.

popup menu in jsp

Enterprise & Remote Computing New Topic

Enterprise & Remote Computing Hot Topic

Enterprise & Remote Computing

All Classified