|
JavaScript - Windows Menu Script Problem Page Jumping On Ie Browsers
This is my test page: http://www.thesacstudio.com/ccid_web...ndex_copy.html
Am using Dynamic Drive's smooth menu javascript When viewed on a PC using IR the menu makes the page "jump" i am a Mac guy and at my limit of what to do. thanks for any assistance Similar TutorialsI have a div which toggles visible, ie, it disappears when you click "close" with Code: <a href='#' onclick="toggle_visibility('div1'); toggle_visibility('div2'); return false;" >Close </a>
which calls this: Code: function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
The problem I have is that when I click that button, the page jumps down to center on exactly where I clicked. This is really unwanted, I was wondering if anyone could help? Thanks for your time. Hello all, I have a slight problem with a web page I have coded. I have created an image gallery, which uses a series of thumbnail images, displayed at the bottom of the page, with a space for a larger image in the centre of the page. When you click on the thumbnail images, a larger version of the thumbnail is displayed on the centre of the web page. Only thing is that each time you click the thumbnail, the web page scrolls up to the top, and hence you have to scroll back down again, to be able to click on the next thumbnail image. Is there a reason for this jumping page, and if so, how can I resolve it? The code I have used is as follows; <script> function showImage(imageName){ document.largePicture.src = imageName; } function thumb_description(description){ document.getElementById("thumb_desc").innerHTML=(description) } </script> <body> code for large center image: <div class="large_img"><img name="largePicture" src="lm_1.jpg" height="300" width="273" /></div> <br /> <p id="thumb_desc" class="name_desc"></p></td> code for small thumbnail image <a href="#" onclick="showImage('j_rosseau1.jpg');thumb_description('Jacqueline Rosseau Womenswear')"> <img src="j_rosseau1.jpg" height="100" width="108" /> </a> </body> Any tips, suggestions will be very helpful as the last thing I want is to annoy users with a hop-skip page!! Thanks very much in advance. Nonye Is there anyway to stop the page 'jumping to the top' when using a link like the below? Code: <a href="#" onClick="arrangeCards();">blah</a> .. I just want it to stay in the same position on the page & not jump to the top of the page every time a link like that is clicked. Cheers! Hey all, so im working on a piece of jquery/JS which executes (drops down a new div) when you click a link. I have the links setup as <a href="#" id="d0">Execute 1</a> <a href="#" id="d1">Execute 2</a> <a href="#" id="d2">Execute 3</a> And the jscript detects when d0, d1 or d2 is clicked and executes my script. It all works perfectly, however when you click on a link it will jump to the top of the page as a side effect of the a href="#" I assume? Is there anyway to have my same effect work inline (without jumping the page to the top) ? Thank you very much! I am working on a new site wherein i have list of links in colomn. what i want is when i click on a link. that color of the text should change to indicate that the link is selected. I am not talking about roll over effect. even after the mouse is rolls out the color should still remain as it is to show that the link is still selected. how can i do this. How can javascript detect which link is selected. and save it may be in a variable. which changes each time i select a link. what script or logic should i use for this? I am redoing a web site. We added some pop up menus to consolidate the navigation. I created the template in fireworks MX 2004. The pop up menu has no errors in Firefox. I have some problems in IE. When I first uploaded the page it wanted to know I should load blocked content. Keep in mind my IE 8 setting were set on default. Now without me changing IE settings it just does not load the pop up menus. Can anyone help me with making the code more compatible with IE. I would rather not have it ask me if I want to load blocked content. I also want the menus to pop up when visitors wave over them with the mouse. Here is the domain for the site. Kitchen Remodels Chino Kitchen & Bathroom Remodeling Senior Baths Wave your mouse over some of the blue buttons. The kitchens, cabinets, bathrooms and home improvement buttons should have a pop up when waving the mouse over them. Here is the code in the page. Code: <script language="JavaScript1.2" src="jss/menu.js"></script> <script language="JavaScript1.2" src="jss/mm_menu.js"></script> </head> <body> <script language="JavaScript1.2">mmLoadMenus();</script> Here is the java script code. Code: // JavaScript Document
<!--
function mmLoadMenus() {
if (window.mm_menu_0725085737_0) return;
window.mm_menu_0725085737_0 = new Menu("root",205,20,"Verdana, Arial, Helvetica, sans-serif",14,"#000000","#ffffff","#cccccc","#0099cc","left","middle",3,0,1000,-5,7,true,true,true,0,true,true);
mm_menu_0725085737_0.addMenuItem("Kitchen Remodeling","location='kitchen-remodeling.php'");
mm_menu_0725085737_0.addMenuItem("Budget Kitchen Remodeling","location='budget-kitchen-remodeling.php'");
mm_menu_0725085737_0.hideOnMouseOut=true;
mm_menu_0725085737_0.menuBorder=1;
mm_menu_0725085737_0.menuLiteBgColor='#ffffff';
mm_menu_0725085737_0.menuBorderBgColor='#0098a3';
mm_menu_0725085737_0.bgColor='#ffffff';
window.mm_menu_0725090038_1 = new Menu("root",145,20,"Verdana, Arial, Helvetica, sans-serif",14,"#000000","#ffffff","#cccccc","#0099cc","left","middle",3,0,1000,-5,7,true,true,true,0,true,true);
mm_menu_0725090038_1.addMenuItem("Kitchen Cabinets","location='kitchen-cabinets.php'");
mm_menu_0725090038_1.addMenuItem("Cabinet Refinishing","location='cabinet-refinishing.php'");
mm_menu_0725090038_1.addMenuItem("Cabinet Refacing","location='cabinet-refacing.php'");
mm_menu_0725090038_1.hideOnMouseOut=true;
mm_menu_0725090038_1.menuBorder=1;
mm_menu_0725090038_1.menuLiteBgColor='#ffffff';
mm_menu_0725090038_1.menuBorderBgColor='#0098a3';
mm_menu_0725090038_1.bgColor='#ffffff';
window.mm_menu_0725090215_2 = new Menu("root",167,20,"Verdana, Arial, Helvetica, sans-serif",14,"#000000","#ffffff","#cccccc","#0099cc","left","middle",3,0,1000,-5,7,true,true,true,0,true,true);
mm_menu_0725090215_2.addMenuItem("Bathroom Remodeling","location='bath-remodeling.php'");
mm_menu_0725090215_2.addMenuItem("Walk in Tubs","location='walk-in-tubs.php'");
mm_menu_0725090215_2.hideOnMouseOut=true;
mm_menu_0725090215_2.menuBorder=1;
mm_menu_0725090215_2.menuLiteBgColor='#ffffff';
mm_menu_0725090215_2.menuBorderBgColor='#0098a3';
mm_menu_0725090215_2.bgColor='#ffffff';
window.mm_menu_0725090242_3 = new Menu("root",161,20,"Verdana, Arial, Helvetica, sans-serif",14,"#000000","#ffffff","#cccccc","#0099cc","left","middle",3,0,1000,-5,7,true,true,true,0,true,true);
mm_menu_0725090242_3.addMenuItem("Home Improvement","location='home-improvement.php'");
mm_menu_0725090242_3.addMenuItem("Window Replacement","location='window-replacement.php'");
mm_menu_0725090242_3.addMenuItem("Furniture Refinishing","location='furniture-refinishing.php'");
mm_menu_0725090242_3.addMenuItem("General Contractor","location='about.php'");
mm_menu_0725090242_3.hideOnMouseOut=true;
mm_menu_0725090242_3.menuBorder=1;
mm_menu_0725090242_3.menuLiteBgColor='#ffffff';
mm_menu_0725090242_3.menuBorderBgColor='#0098a3';
mm_menu_0725090242_3.bgColor='#ffffff';
mm_menu_0725090242_3.writeMenus();
} // mmLoadMenus()
//-->
Hello, I have two simle part of code : 1. Create menu with 5 buttons - when I move mouse to button script will switch the button - this is from Dreamweaver standard code. Head part: <script type="text/javascript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_nbGroup(event, grpName) { //v6.0 var i,img,nbArr,args=MM_nbGroup.arguments; if (event == "init" && args.length > 2) { if ((img = MM_findObj(args[2])) != null && !img.MM_init) { img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src; if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array(); nbArr[nbArr.length] = img; for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) { if (!img.MM_up) img.MM_up = img.src; img.src = img.MM_dn = args[i+1]; nbArr[nbArr.length] = img; } } } else if (event == "over") { document.MM_nbOver = nbArr = new Array(); for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) { if (!img.MM_up) img.MM_up = img.src; img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up); nbArr[nbArr.length] = img; } } else if (event == "out" ) { for (i=0; i < document.MM_nbOver.length; i++) { img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; } } else if (event == "down") { nbArr = document[grpName]; if (nbArr) for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; } document[grpName] = nbArr = new Array(); for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) { if (!img.MM_up) img.MM_up = img.src; img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up; nbArr[nbArr.length] = img; } } } //--> </script> and body part (my menu) <table border="0" cellpadding="0" cellspacing="0"> <tr> <td><a href="javascript:;" rel="nofollow" target="_top" onclick="MM_nbGroup('down','group1','Strona_glowna','images/strona_glowna_off.png',1)" onmouseover="MM_nbGroup('over','Strona_glowna','images/strona_glowna_on.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/strona_glowna_off.png" alt="" name="Strona_glowna" width="160" height="105" border="0" id="Strona_glowna" onload=""/></a> </td> <td><a href="javascript:;" rel="nofollow" target="_top" onclick="MM_nbGroup('down','group1','Onas','images/onas_off.png',1)" onmouseover="MM_nbGroup('over','Onas','images/onas_on.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/onas_off.png" alt="" name="Onas" width="114" height="105" border="0" id="Onas" onload="" /></a></td> <td><a href="javascript:;" rel="nofollow" target="_top" onclick="MM_nbGroup('down','group1','Menu','images/menu_off.png',1)" onmouseover="MM_nbGroup('over','Menu','images/menu_on.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/menu_off.png" alt="" name="Menu" width="112" height="105" border="0" id="Menu" onload="" /></a></td> <td><a href="javascript:;" rel="nofollow" target="_top" onclick="MM_nbGroup('down','group1','Galeria','images/galeria_off.png',1)" onmouseover="MM_nbGroup('over','Galeria','images/galeria_on.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/galeria_off.png" alt="" name="Galeria" width="119" height="105" border="0" id="Galeria" onload="" /></a></td> <td><a href="javascript:;" rel="nofollow" target="_top" onclick="MM_nbGroup('down','group1','Kontakt','images/kontakt_off.png',1)" onmouseover="MM_nbGroup('over','Kontakt','images/kontakt_on.png','',1)" onmouseout="MM_nbGroup('out')"><img src="images/kontakt_off.png" alt="" name="Kontakt" width="119" height="105" border="0" id="Kontakt" onload="" /></a></td> </tr> </table> I need to use area map on buttons: for example : <map name="map"> <area shape="poly" coords="19,99,140,48,114,27,17,68" href="/kursy2/html/" alt="Test" title="Test"> </map> I know that I need to add "usemap" part to img... like : <img src="images/kontakt_off.png" alt="" name="Kontakt" width="119" height="105" border="0" id="Kontakt" onload="" usemap="#map"/> And here is my problem. I need to modify javascript that everytime when i move my mouse pointer to my map area the button will be change....because now button is switch eveytime when I move mouse to every point on button ... Could you help me ??? Thank you a lot... Hi everyone I know this has probably been asked a million times before but I have been searching the net for hours and have not found a solution so I am hoping one of you clever people will be able to help me. PLEASE!! I am using this snow fall script http://www.dynamicdrive.com/dynamicindex3/rain.htm It works perfectly in IE but not in Firefox or Safari. I'd like it to work in all or most browsers if thats possible. Unfortunately, I am still learning so don't understand all the technical speak as yet so if someone can help in simple terms I'd be ever so grateful Thank you so much to anyone who can help me out! Not sure if I'm in the right category, apologies if I am not.. I have a small flash/javascript streaming mp3 player on my site that works fine in Chrome and Safari, but doesn't show up at all in Firefox, IE, or Opera. the site is he www.thehordeandtheharem.com/index2.html the player is in the top left corner. I don't even know where to begin troubleshooting this as I didn't write the player myself, but copied it from another site. If anyone could shed any light on this for me I would be very grateful, thanks! i have this code included within a .php file on my website. I realised that my %age rules defining the width of my website page dont really work once i get to wider sizes so i want to use a fixed width page design using css code (only once wide enough) to achieve this. Please have a look at my code and tell me what im doing wrong i cant find anything wrong with my js. If js is anything like python i may need to change the output from a string to an integer or something along those lines. I can easily just doc.write the width but i cant get it to compare properly Code: <script type="text/javascript">
if (document.body.clientWidth > 1280)
{document.write('<link href="wdestyle.css" rel="stylesheet" type="text/css" />')};
else
{document.write('<link href="nrostyle.css" rel="stylesheet" type="text/css" />')};
</script>
I have home page with session close button and 10 child window link and i am opening all child window.All child windows should close after clicking on session close button. Code bellow <html> <script type="text/javascript"> openWins = []; curWin = 0; function openWin(page) { openWins[curWin++] = window.open(page,'_blank'); } function closeAll() { for(var i=0; i<openWins.length; i++) if (openWins[i] && !openWins[i].closed) openWins[i].close(); } window.onunload = closeAll; </script> <body > <input type="button" onClick="openWin('http://www.google.com');" value="Open PopUps"> <input type="button" onClick="closeAll('http://www.google.com');" value="Close PopUps"> </body> </html> Hello. I am opening a new small window through javascript. Here is the code: Code: <script type="text/javascript">
function openwindow(id) {
var left = (screen.width/2)-350;
var top = (screen.height/2)-240;
var mywindow = window.open(" map.asp ?location="+id,"mywindow","menubar=0,resizable=0,width=700,height=400,left="+left+",top="+top+"");}
</script>
But on the same page I have another link for a new window which is essentially the same code: Code: <script type="text/javascript">
function openwindow(id) {
var left = (screen.width/2)-350;
var top = (screen.height/2)-240;
var mywindow = window.open(" pofull.asp ?poid="+id,"mywindow","menubar=0,resizable=0,width=700,height=400,left="+left+",top="+top+"");}
</script>
As you can see in the red text, one link should open map.asp and the other should open pofull.asp... but they BOTH open in pofull. So I have tried to change the function name for one of them but then it doesnt work at all. I am quite confused here. I have tried everything to separate the two scripts but nothing has worked. Can someone help? thanks for your time - I am more of a hacker than a coder. I have a webpage with a setinterval script I put together which reloads another page's php content into an iframe on the page. It works fine in IE, but doesnt work in FF or Chrome. (I dont want to use a refresh meta though that seems to work in IE & Chrome but not FF.) Here's the script snippet I wrote: Code: <script>
window.setInterval("reloadIFrame();", 5000);
function reloadIFrame() {
document.frames["chat"].location.reload();
}
</script>
<iframe id="chat" src="../chat/buffer.php" width="100%" height="200"></iframe>
on the page's first load, all the info is there in the iframe, but except for IE, updates do not show (the reloads dont seem to occur). I have a javascript that precedes this script containing a setTimeout, but never had issues with it. I can post the entire page code, if needed... thanks again. HWL Hi, I have a JS that can run on IE but cannot on FireFox and Safari. The script like this: Code: function DeleteClick()
{
var frmSWO = document.getElementById("form");
var answer = confirm("Do you really want to delete?")
if (answer != 0)
{
frmSWO.action = "/domsWeb/controller/manageWorkOrder/DeleteJobOrImage.do";
frmSWO.method = "post";
this.form.fireEvent('onsubmit');
frmSWO.submit();
}
}
So after I change the script, it now can work on Safari and Firefox but cannot on IE. The script is below: Code: function DeleteClick()
{
var frmSWO = document.getElementById("form");
var answer = confirm("Do you really want to delete?")
if (answer != 0)
{
frmSWO.action = "/domsWeb/controller/manageWorkOrder/DeleteJobOrImage.do";
frmSWO.method = "post";
if(frmSWO.fireEvent) {
frmSWO.fireEvent('onsubmit'); //'this.form' might be not clear enough
}
else {
frmSWO.submit(); //fireEvent may not be neccessary since submit() is also called
}
}
}
This is really troublesome! Please help me to amend the script for it to be able to work on all 3 browsers. Appreciate any help. Hi Everyone, I have the following problem that I have been trying to figure out for a few hours now and am hoping someone can give me a help out. I am opening a popup - this popup is solely to take an image url and as such has one field. On this 1st popup I have a 'button' which when clicked launches a 2nd popup window containing a file browser. The user selects the file by double clicking on the image they want, the url is passed back to the 1st popup, poulating the field and the 2nd popup is closed. Work perfectly in FF etc.. but in IE7 and IE8 it will not work. I am using the following function, linked to the button in the 1st popup, to open the 2nd popup window pass across the name of the field and the window object to the 2nd window. Code: function popupTwoInit(file_path, field_name, win) {
var w = window.open(file_path, null, 'toolbar=yes,menubar=yes,width=900,height=600');
w.fileFileField = field_name;
w.fileFileWin = win;
}
Where w is holding the window object created by the window.open, field_name is the name of the field on the popup that I wish to pass back a value to and win is the window object of the 1st popup. I am using this function as the callback to poulate the field in the 1st dialog after an image in the 2nd dialog has been selected: Code: filebrowser_callback(url) {
window.fileFileWin.document.forms[0].elements[window.fileFileField].value = url;
window.fileFileWin.focus();
window.close();
}
So this function accesses the passed through window object and field name from the window.open function, populates the field, gives the 1st popup focus and closes the 2nd popup. I thought about using opener in the 2nd popup to access the window object and field in the 1st popup but opener seems to refer to the main page in the browser - perhaps because I am using 2 popups OR I have got that wrong. Like I say works perfectly in FF but IE is always undefined for both 'window.fileFileWin' & 'window.fileFileField' which seems to suggest that the object is not interpreted by IE in the first function? I am a PHP developer with limited Javascript knowledge so any help would be great. Thanks very much. Hi, I have a .js file for creating a menus..in that i have a menu called 'reserved', i just want to remove the name from the menu i want the menu size should be the same as earlier.. what i need to do? Friends, i have a problem... I hope all pf you can solve my problem... It's all about Mega Menu JQuery. I already download the script in this javascriptkit.com And the problem is... I can't set the alignment of mega menu drop down because in this script to set the left alignment is using var menu left where this script is using calculation of windows width and mega menu size. in the example on javacriptkit.com using only one menu, how if in this case there is more than one menu? for example i already upload the picture to describe the problem. Picture 1 is i have put mega menu script and it's look good and fine. And then in the second menu where is the porblem begin. Picture 2 mega menu sliding on the left If i put the script in the third and more menu, the mega menu drop down sliding more left. It should be center. I' already found the problem script in .js but i'm still find the solutions... Pleas help me... my project is www.restomart.com ( already online ) and i want make a mega menu like www.surlatable.com ( online ) Pleas once again.HELP me .... Thanks so much... Hello, I'm attempting to use the sfhover script to make my multilevel menu work in Internet Explorer 6. It does not seem to be having any effect. Sorry, I do not have experience with Javascript...I just found this solution online. Here's the code I'm using: Code: // JavaScript Document
//sfHover couresty of http://www.htmldog.com (http://www.htmldog.com/articles/suckerfish/dropdowns/)
sfHover = function() {
if(document.getElementById("nav")){
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhoverb"), "");
}
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
And the CSS for my menu is: Code: .button {
background:url(http://www.wdi-whq.com/images/page-elements/btn.gif) no-repeat;
border:none;
color:#CFF;
display:block;
font:13pt Verdana, Arial, sans-serif;
padding:11px 0;
text-align:center;
text-decoration:none;
height:48px;
width:176px;
}
.button:hover {
background:url(http://www.wdi-whq.com/images/page-elements/btn-over.gif) no-repeat;
color:#FFF;
display:block;
}
.button:active {
background:url(http://www.wdi-whq.com/images/page-elements/btn-click.gif) no-repeat;
color:#069;
display:block;
}
#sidebar1 {
float:left;
width:250px;
padding:10px 25px 0 25px;
position:relative;
z-index:2;
}
div#nav {
height:28px;
width:250px;
background:url(http://www.wdi-whq.com/images/page-elements/menu/menu-top.gif) top no-repeat;
margin:0;
padding-top:28px;
}
div#navbody {
background:url(http://www.wdi-whq.com/images/page-elements/menu/menu-bg.gif) repeat-y;
}
div#navbottom {
height:28px;
background:url(http://www.wdi-whq.com/images/page-elements/menu/menu-btm.gif) bottom no-repeat;
}
ul#navlist {
width:250px;
list-style-type:none;
padding:0;
margin:0;
}
ul#navlist a {
width:200px;
font:bold 11pt Verdana, Arial, sans-serif;
color:#FFF;
height:35px;
text-decoration:none;
padding:6px 0 0 50px;
display:block !important;
}
ul#navlist a:hover {
background:url(http://www.wdi-whq.com/images/page-elements/menu/btn-hilight.gif) left;
}
ul#navlist li {
height:35px;
background:url(http://www.wdi-whq.com/images/page-elements/menu/btn-normal.gif) bottom repeat-x;
position:relative;
}
ul#navlist ul {
list-style-type:none;
margin-left:250px;
padding:0px;
position:absolute;
top:0px;
visibility:hidden;
width:250px;
}
ul#navlist ul > li {
background:url(http://www.wdi-whq.com/images/page-elements/menu/btn-submenu.gif) bottom no-repeat;
}
ul#navlist li ul li a:hover {
background:url(http://www.wdi-whq.com/images/page-elements/menu/btn-submenu-hilight.gif) bottom no-repeat;
height:28px;
}
ul#navlist li:hover > ul {
visibility:visible;
}
|
|||||||