|
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  , but in Internet explorer the submenu is shifting to 30 pixels to the right when mouse is over the menu  .
I don't know that it is actually shifting or aligning to center ??? 
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
-------------------------------------------------------------------------------------------
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
|
|
|
|
|
Thanks, It works 
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.
|
|
|
|
|
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]
|
|
|
|
|
|
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 !=""){
var ONE_DAY = 1000 * 60 * 60 * 24;
str1=new Array(6);
str2=new Array(6);
str1 = EnterDateInDDMMYY(window.formSugam.txtfromdate.value);
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;
}
}
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,
|
|
|
|
|
|
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);
|
|
|
|
|
What html elements are Tab1, Tab2 and Tab3? Div, span, p, ?? You should perhaps read about element display, http://www.webdesignfromscratch.com/html-css/css-block-and-inline/[^]
I can't tell from the code provided what exactly you are trying to accomplish but it seems better handled on the client-side with out a post just to have the button call function1.
You should also look into JQuery[^]
I know the language. I've read a book. - _Madmatt
|
|
|
|
|
Do you want to validate only those validation they are available only on first tab or selected tab using javascript?
sunaSaRa Imdadhusen
+91 99095 44184
+91 02767 284464
|
|
|
|
|
Isn't that a question and should have a Question or General icon?
..Go Green..
|
|
|
|
|
I guess this could be considered a tip as well as a possible question.
I've found that if I have a table with the first row having a colspan value, i.e. header for the table, then deleting the last remaining row below the colspan row deletes the colspan row too.
Check it out - paste the following into an .html, add a few rows, then delete a few rows.
<html>
<head><title>JS Dynamic Table Test</title>
<script language="JavaScript">
<!--
function AddRow() {
var a_misctext = ["Gary","Mary","Larry","Harry","June","Marge","Lisa","Tina","Rika","Susan"];
tbl = document.getElementById('DataArea');
lastrow = tbl.rows.length;
workrow = tbl.insertRow(lastrow);
workrow.insertCell(0);
workrow.cells[0].innerHTML = "<nobr>"+a_misctext[Math.floor(Math.random()*10.0)]+"</nobr>";
workrow.insertCell(1);
workrow.cells[1].innerHTML = "<input type=\"button\" value=\"x\" onClick=\"PopRow(this.parentNode.parentNode.rowIndex);\">";
return false;
}
function PopRow(x) {
document.getElementById('DataArea').deleteRow(x);
}
</script>
</head>
<body>
<form>
<table id=DataArea cellpadding=4 cellspacing=0 border=0>
<tbody>
<tr><td colspan="2">My Stuff <input type="button" value=" Add " onClick="AddRow();"></td></tr>
</tbody>
</table>
</form>
</body>
</html>
I "fixed" it by turning the colspan row into 2 separate columns:
<br />
<tr><td>My Stuff</td><td><input type="button" value=" Add " onClick="AddRow();"></td></tr><br />
Any idea why the table would collapse when deleting the last row?
|
|
|
|
|
var row=x.parentNode.parentNode
row.parentNode.removeChild(row)
PopRow(this)
|
|
|
|
|
yup, that worked!
looks like I have a lot to learn... Thanks for teaching...
|
|
|
|
|
Hi,
I have Two tables in my page
Table 1 having list for checkbox with name CHK1
Table 2 also having list of checkbox with same name CHK1
using javascript i want to get the checkboxs form table 1.
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
![Rose | [Rose]](https://www.codeproject.com/script/Forums/Images/rose.gif)
