Help - Horizontal dropdown menu - JavaScript Discussion Boards

I agree

thatraja |Chennai|India|

Brainbench certifications
Down-votes are like kid's kisses don't reject it Smile | :)

Do what you want quickly because the Doomsday on 2012 Smile | :)

The tool: Eclipse will help you after you install JavaScript model.

THIS[^] tool might be useful, I've used it and it's quite helpful.

Regards,
Hiren.

"We owe a lot to the Indians, who taught us how to count, without which no worthwhile scientific discovery could have been made." - Einstein

Microsoft Dynamics CRM

i want when user click on submit button then a div layer will be generated over the textbox whose height and width will be just the same as textbox and in this way textbox will be blocked for entering something. i want to do it by javascript. in this scenario other textbox will not be blocked.

tbhattacharjee

Sir,

I completely understand your requirement. But I think creating a div above the textbox may not be a good idea.
Insted you can just make that particular textbox disabled. In that way he wont be able to modify thosed etails, and it is really very easy to implement this using Jquery or Javascript.

$('#div_id).attr('disabled', 'true');

And it will be taken care of.

I think you can set the input text-box to disable status to prevent user enter the new text.
please use the like below code:

document.getElementById("YourID").disabled=true;

modified on Friday, November 19, 2010 2:39 AM

You can make text box as disable or readonly.

sunaSaRa Imdadhusen
+91 99095 44184
+91 02767 284464

hello everyone,
i am writing a code for horizontal dropdown menubar
the problem i'm facing is that the menu just works fine in firefox Smile | :)

, but in Internet explorer the submenu is shifting to 30 pixels to the right when mouse is over the menu Frown | :(

.
I don't know that it is actually shifting or aligning to center ??? Confused | :confused:

the background image i m using for menu buttons is 150x35 px in dimension.

Here's my code for all the files:-

home.html
-------------------------------------------------------------------------------------------

<!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">
<head>
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="scripts/menu_script.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div class="Menubar">
<ul>
	<li class="nav_li"><a href="#" class="menu1" id="m1">Item 1</a></li>
    <li class="nav_li"><a href="#" class="menu2" id="m2" onmouseover="showmenu('m2', 'sm2')" onmouseout="hidemenu('m2', 'sm2')">Item 2</a></li>
    	<ul class="submenu2" id="sm2" onmouseover="showmenu('m2', 'sm2')" onmouseout="hidemenu('m2', 'sm2')">
        	<li class="nav_li"><a href="#">Item 2.1</a></li>
            <li class="nav_li"><a href="#">Item 2.2</a></li>
            <li class="nav_li"><a href="#">Item 2.3</a></li>
        </ul>
    <li class="nav_li"><a href="#" class="menu3" id="m3">Item 3</a></li>
    <li class="nav_li"><a href="#" class="menu4" id="m4" onmouseover="showmenu('m4', 'sm4')" onmouseout="hidemenu('m4', 'sm4')">Item 4</a></li>
    	<ul class="submenu4" id="sm4" onmouseover="showmenu('m4', 'sm4')" onmouseout="hidemenu('m4', 'sm4')">
        	<li class="nav_li"><a href="#">Item 4.1</a></li>
            <li class="nav_li"><a href="#">Item 4.2</a></li>
            <li class="nav_li"><a href="#">Item 4.3</a></li>
         </ul>
</ul>
</div>

</body>
</html>

-------------------------------------------------------------------------------------------
menu.css
-------------------------------------------------------------------------------------------

@charset "utf-8";
h1 {
	font-family: "Lucida Console", Monaco, monospace;
	font-size: 10mm;
}
.custom_text {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
}

body,td,th {
	margin:0;
	padding:0;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10pt;
	border: 0;
}
.nav_li
{
	list-style-type:none;
}
.Menubar
{
	display:block;
	background-color:#0FC;
	position:absolute;
	width: 600px;
	height: 35px;
	left: 0px;
	top: 0px;
}
.menu1
{
	position:absolute;
	background-image:url(../images/button_background_normal.jpg);
	left: 0px;
	top: 0px;
	width:150px;
	height:35px;
}
.menu2
{
	position:absolute;
	background-image:url(../images/button_background_normal.jpg);
	left: 150px;
	top: 0px;
	width:150px;
	height:35px;
}
.menu3
{
	position:absolute;
	background-image:url(../images/button_background_normal.jpg);
	left: 300px;
	top: 0px;
	width:150px;
	height:35px;
}

.menu4
{
	position:absolute;
	background-image:url(../images/button_background_normal.jpg);
	left: 450px;
	top: 0px;
	width:150px;
	height:35px;
}
.submenu2
{
	display:none;
	background-image:url(../images/button_background_normal.jpg);
	position:absolute;
	left: 150px;
	top: 35px;
	width:70px;
	padding:0;
}
.submenu4
{
	display:none;
	background-image:url(../images/button_background_normal.jpg);
	background-color:#FF9;
	position:absolute;
	left:450px;
	top:35px;
	width:70px;
	padding:0;
}
a
{
	text-decoration: none;
}

-------------------------------------------------------------------------------------------
menu.js
-------------------------------------------------------------------------------------------

// JavaScript Document
function showmenu(mID, submID)
{
	var obj_m = document.getElementById(mID);
	var obj_sm = document.getElementById(submID);
	obj_m.style.backgroundImage="url(../images/button_background_highlight.jpg)";
	obj_sm.style.display="block";
}
function hidemenu(mID, submID)
{
	var obj_m = document.getElementById(mID);
	var obj_sm = document.getElementById(submID);
	obj_m.style.backgroundImage="url(../images/button_background_normal.jpg)";
	obj_sm.style.display="none";
}

Future Lies in Present.
Manmohan Bishnoi

I think you may need a CSS reset for IE6 to stop the "shifting" when opening the menu.

Try

* {margin:0; padding:0;}

in your CSS

[Greenridge Business Systems]

Thanks, It works Thumbs Up | :thumbsup:

But why the problem was there in IE; was it due to the reason the way IE handles CSS ?

Future Lies in Present.
Manmohan Bishnoi

The problem is always with IE. You'll find that IE will often give you headaches while creating websites.

Greenridge Business Systems[^]

Hi,

Good Day!

I have a string, say '|abc|def|ghi|'.
How can i remove the first pipe character in that string using regular expression?

Thanks,
ewin

I already got the answer.

/^[|]/ - is the right regex that will match the first pipe in a string.
thanks to [gskinner]

/^\|/ is enough.

Hi Friends

Please check this link in IE8: <a href="http://www.freej.ae/freejaetest/ar/FreejEpisodes.aspx">http://www.freej.ae/freejaetest/ar/FreejEpisodes.aspx</a>. If you select first link below page title from right in the above link, You will see a jcarousel in the bottom which is not displaying correctly...But when I see it on my local machine its showing up correctly but online its not showing up correctly. I am puzzled as what might have went wrong as both the local and online versions are same with same codebase and same data. Please help me in resolving th issue. Site is developed in Asp.net.

Thanks

Its throwing some kind of javascript error. You can check error details by clicking the warning icon in the status bar on bottom left side of the page.

Thanks

wajans wrote:
You can check error details by clicking the warning icon in the status bar

No, you can provide the details here.

If you want help with your problem then provide the information, telling us to go search for it will just get you ignored.

I know the language. I've read a book. - _Madmatt

first of all, can't you provide the actual link to the page? Anyway I think it has something to do with the virtual relative path you use to display the jcarroussel. Maybe you can use a base url? This has resolved some major issues for myself.

best of luck

"My personality is not represented by my hometown."

hi i am using a javascript to calculate checkin checkout times of customer by using this script:

function calculate()
            {
                if(window.formSugam.txtunitcost.value!="" && window.formSugam.txtquantity.value !=""){
                    //-----------function for checking date and their validations
                    var ONE_DAY = 1000 * 60 * 60 * 24;
                    str1=new Array(6);
                    str2=new Array(6);
                    str1 = EnterDateInDDMMYY(window.formSugam.txtfromdate.value);
                    // EnterDateInDDMMYY method is to convert date into miliseconds
                    str2 = EnterDateInDDMMYY(window.formSugam.txttodate.value);
                    var date1=new Date(str1[0],str1[1],str1[2],str1[3],str1[4],str1[5]);
                    var date2=new Date(str2[0],str2[1],str2[2],str2[3],str2[4],str2[5]);
                    var datediff=date2-date1;                                        
                    checkFloat(formSugam.txtunitcost)
                    checknumbervalue(formSugam.txtquantity)
                    val2=parseFloat(window.formSugam.txtunitcost.value );
                    val1=parseInt(window.formSugam.txtquantity.value );
                    dateval=parseInt(datediff);
                    val3=parseInt(Math.round(dateval/ONE_DAY));
                    if (val3==0)
                    {window.formSugam.txtbillamount.value=val1*val2;}
                    else{
                    window.formSugam.txtbillamount.value=val1*val2*val3;
                    }
                    //----------------hence it calculates date in round figure
                }

but the problem comes when i calculate a date diff for 31-10-2010 12:39:52PM to 01-11-2010 12:39:52PM

else its working fine so what is the actual problem here in my code is related to month change,

Please visit following link
http://stackoverflow.com/questions/1036742/date-difference-in-javascript-ignoring-time-of-day[^]

Please provide "Vote" Thumbs Up | :thumbsup:

if this would be helpful, and make "Accept Answer" if this would be correct answer. Rose | [Rose]

Thanks,
Imdadhusen

sunaSaRa Imdadhusen
+91 99095 44184
+91 02767 284464

Good Evening,

I am using the following standard script on an Asp.net webpage to open a window.

<script type="text/javascript">
        var pg = "iNewQuery.aspx";
        var title = "New Query Window";
        var props = "left=250,top=250,status=0,scrollbars=0,width=575,height=425"; 
        function NewQuery() {
            window.open(pg,title,props);
        }
    </script>

It works perfectly in Chrome and Firefox but is returning the following error in Internet Explorer:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.5.30729; InfoPath.1; .NET4.0C; .NET4.0E)
Timestamp: Sat, 30 Oct 2010 05:09:02 UTC

Message: Invalid argument.
Line: 61
Char: 13
Code: 0
URI: http://localhost:4743/Simplicity%202011%20Online/Main.aspx

I have no idea what could be wrong. The error is supposed to be on the following line:

function NewQuery() {

It looks too simple to have a problem, but obviously the browser does not like it. I would appreciate finding a correction for the problem. Thank you for your time....Pat

Well, how extraordinary - TIL that... you cannot have spaces in the new window name (in IE)! Replace

var title = "New Query Window";

with

var title = "New_Query_Window";

and it will work in IE.

Go figure...

Good one

sunaSaRa Imdadhusen
+91 99095 44184
+91 02767 284464

Thank you for your help and insight. It is now working correctly, and I am marking your answer as correct accordingly. Best Regards, Pat

I am using javascript to create three tabs with field in the asp.net web application.
while validating the second tab the message is displayed in the label but the selected tab is the first one.
the java script is as follows

function Function1()
{
    document.getElementById('Tab1').style.display = "none";
    document.getElementById('Tab2').style.display = "block";
    document.getElementById('Tab3').style.display = "none";
}

server side code

Button1.Attributes.Add("OnClick", "Javascript:return Function1()");
ScriptManager.RegisterStartupScript(this, this.GetType(), "Function1", "Button1_OnClick", true);