JavaScript - Autoscrolling Div Not Working In Web Browsers?
Hey everyone,
So I just got my DIV named ".center2" to autoscroll. Well, it works when I view it live on Dreamweaver CS5, but when I open it on Safari...nothing. Could anyone help me optimize the code for all web browsers? Thanks! The targeted code is marked in red: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <script type="text/javascript"> function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } 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_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } var defaultStep=1; var step=defaultStep; var timer; function scrollDiv(id,s){ var obj=document.getElementById(id); var iScrollTop = obj.scrollTop; step=s||step; if (iScrollTop == 0){ step=defaultStep; } else if (obj.clientHeight + iScrollTop - obj.scrollHeight==0){ step=-defaultStep; } clearTimeout(timer); obj.scrollTop+=step; timer=setTimeout(function(){ scrollDiv(id); },100) } function stopMe(){ clearTimeout(timer); } function scrollMe(id){ scrollDiv(id) } </script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Aylonetic Sounds [v1.1] | News</title> <style type="text/css"> .center { margin:auto; width:1024px; } .center2 { width:1024px; height:450px; border:none; overflow:scroll; } #apDiv2 { position:relative; width:50px; height:30px; z-index:0; left: 611px; top: 0px; } body { background-color: #000; } </style> </head> <body onload="MM_preloadImages('titlehover.jpg','marketplacehover.jpg','forumshover.jpg','supporthover.jpg','abouthover.jpg','images/title_new_hover_inv.jpg','images/marketplace_new_hover_inv.jpg','images/forums_new5_hover_inv.jpg','images/support_new_hover_inv.jpg','images/about_new_hover_inv.jpg')"> <div class="center"> <table width="1025" border="0"> <tr> <td width="673"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/title_new_hover_inv.jpg',1)"><img src="images/title_new_main_inv.jpg" name="Image7" width="150" height="14" border="0" id="Image7" /></a></td> <td width="46"><img src="images/news_new_hover_inv.jpg" width="58" height="14" /></td> <td width="101"><a href="marketplace.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/marketplace_new_hover_inv.jpg',1)"><img src="images/marketplace_new_main_inv.jpg" name="Image8" width="100" height="14" border="0" id="Image8" /></a></td> <td width="63"><a href="forums.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/forums_new5_hover_inv.jpg',1)"><img src="images/forums_new5_main_inv.jpg" name="Image9" width="65" height="14" border="0" id="Image9" /></a></td> <td width="69"><a href="support.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','images/support_new_hover_inv.jpg',1)"><img src="images/support_new_main_inv.jpg" name="Image10" width="70" height="14" border="0" id="Image10" /></a></td> <td width="47"><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','images/about_new_hover_inv.jpg',1)"><img src="images/about_new_main_inv.jpg" name="Image11" width="58" height="14" border="0" id="Image11" /></a></td> </tr> </table> <table width="1024" border="0"> <tr bgcolor="#FFFFFF"> <td width="507"><img src="images/banner1.jpg" width="507" height="150" border="0" /></td> <td width="507"><img src="images/banner2.jpg" width="507" height="150" /></td> </tr> </table> <body onload="scrollMe('news')"> <div class="center2" id="news"> <table width="1024" border="0"> <tr> <td width="507"><img src="images/newstemplate_l.jpg" width="506" height="100" /></td> <td width="507"><img src="newstemplate_r.jpg" width="506" height="100" /></td> </tr> <tr> <td><img src="images/newstemplate_l.jpg" alt="" width="506" height="100" /></td> <td><img src="newstemplate_r.jpg" alt="" width="506" height="100" /></td> </tr> <tr> <td><img src="images/newstemplate_l.jpg" alt="" width="506" height="100" /></td> <td><img src="newstemplate_r.jpg" alt="" width="506" height="100" /></td> </tr> <tr> <td><img src="images/newstemplate_l.jpg" alt="" width="506" height="100" /></td> <td><img src="newstemplate_r.jpg" alt="" width="506" height="100" /></td> </tr> <tr> <td><img src="images/newstemplate_l.jpg" alt="" width="506" height="100" /></td> <td><img src="newstemplate_r.jpg" alt="" width="506" height="100" /></td> </tr> <tr> <td><img src="images/newstemplate_l.jpg" alt="" width="506" height="100" /></td> <td><img src="newstemplate_r.jpg" alt="" width="506" height="100" /></td> </tr> <tr> <td><img src="images/newstemplate_l.jpg" alt="" width="506" height="100" /></td> <td><img src="newstemplate_r.jpg" alt="" width="506" height="100" /></td> </tr> </table> </div> </div> </body> </html> Similar TutorialsHey everyone, I have some long horizontal images (graphs) which i have got inside a fixed width div with a horizontal scroll so they can be viewed within the main page frame. I have some js code linked to a play button which allows users to 'play' the image (so it will autoscroll along it). The code is: PHP Code: var t; var scrollwidthglob; function scrollDiv(scrollwidth){ clearTimeout(t); scrollwidthglob = scrollwidth; scrollDiv2(scrollwidthglob) } function scrollDiv2(scrollwidth){ scrollwidthglob = scrollwidth; var div = document.getElementById('containerdiv'); if (div.scrollLeft<scrollwidthglob){ div.scrollLeft++; //scroll 1 pixel up t = setTimeout('scrollDiv2(scrollwidthglob)', 10); } else clearTimeout(t); } function stopScroll(){ clearTimeout(t); } This works fine but every now and then (it seems more often on IE) it goes quite slow and jerky, generally it recovers and goes back to normal speed again. This may just be my computer but it seemed unlikely for a task as simple as this, i was just wondering if there was anything wrong with the code that might be causing it? Thanks so much for any help in advance, Dave Hey guys, So I got my autoscrolling javascript working, but I need to make it pause on mouseover. How do I accomplish that with my javascript code? Code: <script type="text/javascript"> var defaultStep=1; var step=defaultStep; var timer; function scrollDiv(id,s){ var obj=document.getElementById(id); var iScrollTop = obj.scrollTop; step=s||step; if (iScrollTop == 0){ step=defaultStep; } else if (obj.clientHeight + iScrollTop - obj.scrollHeight==0){ step=-defaultStep; } clearTimeout(timer); obj.scrollTop+=step; timer=setTimeout(function(){ scrollDiv(id); },100) } function stopMe(){ clearTimeout(timer); } function scrollMe(id){ scrollDiv(id) } </script> Thanks! Hey, everyone: I've been having some trouble with javascript in different browsers. I developed my website using Safari and Chrome on a Mac, only to now realize that some of my javascript will NOT function in FireFox and IE (for both Mac and Windows). I understand that each browser has its quirks, but I'm not aware of anything that would cause my code to act so strangely. The biggest problem seems to be my onload() call in the body tag. I'm definitely an amateur, so forgive me if my work is not professional. Here's the JS in the head: Code: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=8" /> <title>Wave Shark | Compose, Store, and Share Workouts</title> <script type="text/javascript">//<![CDATA[ function toggle(e) { if (e.style.display == "none") { e.style.display = ""; } else { e.style.display = "none"; } } //]]> </script> <script type="text/javascript">//<![CDATA[ var domainroot="#" function Gsitesearch(curobj) { curobj.q.value="site:"+domainroot+" "+curobj.qfront.value } //]]> </script> <link href="cssFiles/style.css" rel="stylesheet" type="text/css" media="screen" /> <link rel="shortcut icon" href="../cssFiles/images/img04.jpg" type="image/x-icon" /> <script src="incFunctions/functions.js" type="text/javascript"> </script> </head> And in the body tag: Code: <body oncontextmenu="return false;" onload="toggle(progress)"> <div id="progress" style="text-align:center;width:100%"><strong style="font-size:14pt;color:#0000DD;font-family:"arial,helvetica,sans-serif">Loading...</strong></div> In addition to that, you can check out: http://waveshark.elementfx.com/incFu...s/functions.js Any and all suggestions are appreciated. Hello Everybody I have recently been tasked with a unique task and for the life of me I can not work out how to do it. Using this website as an example: http://www.coastalcontacts.com/cFaq.html You can see that the FAQ questions open and close as you click on them, leaving the page looking clean for the most part. Now I am writing up a landing page that will be doing something similar, however I would like the page to scroll down as each new question is opened up. Meaning I click on one of the faq questions closer to the bottom of the page and then it scrolls down to show all the new content. This does not need to happen for questions that do not go to the bottom of the page and are fully visible. Any and all ideas would be much appreciated Thank you I' am trying to do a frame by frame animation, lik an animated gif. I am using svg (vector graphics) and IE9 has native support for svg. The code functions in every other browser but IE9 plays the animation once then nothing. If you would like to try and not have svg files you can use whatever gif,jpg or png just put an img-tag where i have embed. Code: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Animation</title> <style type="text/css"> /*One div per image all uses this class*/ .eyesPos { position:absolute; width:80px; height:50px; z-index:1; left: 0px; top: 0px; } #eye_wrapper{/*This is a master div for easy placement of the others*/ position:absolute; width:80px; height:50px; z-index:2; left: 275px; top: 200px; } </style> <script> var eyes=["a","b","c","d"];//Image id in this array var startAnim=setInterval(visaOga,100);//Animation speed function visaOga(){ document.getElementById(eyes.splice(0,1)).style.display="block"; if(eyes.length==0){ document.getElementById("a").style.display="none"; document.getElementById("b").style.display="none"; document.getElementById("c").style.display="none"; dBort = function(){ document.getElementById("d").style.display="none"; eyes=["a","b","c","d"]; } setTimeout(dBort,1500);//So last image is shown 1.5 sec return;//Aborts - dBort -. Sequence can start over if(document.getElementById("d").style.display=="none"){ startAnim;//Strts sequence if last image invisible } } } </script> </head> <body> <!--Images in own div invisible at start--> <div id="eye_wrapper"> <div class="eyesPos" id="a" style= display:none;> <embed src="0.svg" width="80" height="50" /> </div> <div class="eyesPos" id="b" style= display:none;> <embed src="1.svg" width="80" height="50" /> </div> <div class="eyesPos" id="c" style= display:none;> <embed src="2.svg" width="80" height="50" /> </div> <div class="eyesPos" id="d" style= display:none;> <embed src="3.svg" width="80" height="50" /> </div> </div> </body> </html> Any ideas on how I can make this work in IE as well?? It is a code that shows a divide on click and then hides the rest at the same time. live code is also at chryscreations.com/ns/boynames.html Javascript: Code: function showstuff(divID) { els=document.getElementsByName('mydiv') for (var i = 0; i < els.length; i++) { els[i].style.visibility="hidden"; els[i].style.display="none"; } document.getElementById(divID).style.visibility="visible"; document.getElementById(divID).style.display="block"; } HTML Code: <head> <script> window.onload=function() { showstuff(''); } </script> </head> <body> <a href="javascript:showstuff('adivide')">A</a> <a href="javascript:showstuff('bdivide')">B</a> <div name="mydiv" id="adivide"></div> <div name="mydiv" id="bdivide"></div> <body> I feel a little stupid to ask this question but it has always been on my mind. <html> <head> <script type="text/javascript"> { var lastMod = new Date (document.lastModified); document.write ("<p>Document last modified "); document.write ((lastMod.getMonth() +1) + "-" + lastMod.getDate() + "-" + lastMod.getFullYear()); document.write ("<p>"); } </script> </head> </html> when i open in ie or ff it renders 2/25/11 (supposed to be 2/26/11) but when i use it in chrome or an html test is renders correctly. why? Hi, I have an Issue with a Javascript slideshow. If you see link below it is obvious http://scriptdemo.co.uk/davidgray/al...tes/index.html please can you advise? I only get the Issue in Internet Explorer 8 many thanks Joe First off by let me stating that I am not a great web devloper nor am I a good with css / javascript. I am creating this website for a friend of mines company and I have one problem. The problem is that the navigation menu on the right side will not remain fixed how i want it to be. I spoke with many people and they all said that this cannot be done with css considering your layout and because it needs to dodge the headers and the footer. I basically want this div (sidenav on the right) to scroll along the page as users scroll up or down but it can not interfere with the header or footer. Could someone please post an example or if anyone has the time please tell me exactly what code I need to add to get this to work? keep in mind that i do not want the right side navigation to go over the content or out of the wrapper. I want it to stay in the same position in all aspects - left / right / top / bottom. Here is a link to the site http://www.collisionbodyworks.com/Pl...tic/index.html Any help would be greatly appreciated. Thank you in advance 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 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 was wondering if there is a javascript code that works in all browsers and will allow when a person clicks on a certain tab I have that it plays a short beep.
I am having some problems with some JS code that does not work cross browsers Here is my code Code: <html> <head> <link rel="STYLESHEET" type="text/css" href="../../include/css/tab.css"> <script src="../../include/js/tabpane.js" type="text/javascript"></script> </head> <body> <div name="objBody"> <div id="tabpane"> <div> <h2>Contact</h2> <div> <br>THIS IS CONTACTS TEXT </div> </div> <div> <h2>Contact2</h2> <div> <br>THIS IS CONTACTS TEXT2222 </div> </div> </div> </div> <script type="text/javascript"> var tp = new TabPane(document.getElementById("tabpane")); </script> </body> </html> CSS Code: .tab_pane_holder { width: 100%; background-color: #336699; font-family: verdana; font-size: 8pt; border-right: 1px solid black; border-left: 1px solid black; border-top: 1px solid black; } .tab_normal { border-right: 1px solid black; border-left: 1px solid white; border-bottom: 1px solid black; border-top: 1px solid white; padding: 5px; background-color: #5a7edc; text-align: center; /*width: 100px;*/ height: 10px; color: white; } .tab_active { border-right: 1px solid black; border-left: 1px solid black; border-top: 1px solid black; background-color: white; padding: 5px; text-align: center; /*width: 100px;*/ height: 10px; color: black; } .tab_after_active { border-right: 1px solid black; border-left: 0px solid black; border-top: 1px solid white; border-bottom: 1px solid black; background-color: #5a7edc; padding: 5px; text-align: center; /*width: 100px;*/ height: 10px; color: white; } .tab_before_active { border-left: 1px solid white; border-bottom: 1px solid black; background-color: #5a7edc; border-top: 1px solid white; text-align: center; padding: 5px; /*width: 100px;*/ height: 10px; color: white; } JS Code: function TabPane(el) { var tmp = this; this.element = el; this.tabs = new Array(); this.divs = new Array(); this.selected = null; for(var i = 0; i < el.childNodes.length; i++) { this.tabs[i] = this.element.childNodes[i].childNodes[0].innerHTML; } for(var i = 0; i < this.element.childNodes.length; i++) { this.divs[i] = this.element.childNodes[i]; } for(var i = 0; i < this.element.childNodes.length; i++) { this.element.childNodes[i].removeChild(this.element.childNodes[i].childNodes[0]); } this.tabPane = document.createElement("div"); this.element.insertBefore(this.tabPane,this.element.childNodes[0]); this.tabPane.className = "tab_pane_holder"; for(var i = 0; i < this.tabs.length; i++) { var x = this.tabs[i]; this.tabs[i] = document.createElement("span"); this.tabPane.appendChild(this.tabs[i]); this.tabs[i].innerHTML = x; this.tabs[i].className = "tab_normal"; this.tabs[i].style.cursor = "hand"; this.tabs[i].onselectstart = function() { return false; } this.tabs[i].onclick = function() { tmp.showPage(this); } } for(var i = 0; i < this.divs.length; i++) { this.divs[i].style.display = "none"; this.divs[i].style.width = this.element.style.width; this.divs[i].style.height = this.element.style.height; this.divs[i].style.overflow = "auto"; this.divs[i].style.borderRight = "1px solid black"; this.divs[i].style.borderBottom = "1px solid black"; this.divs[i].style.borderLeft = "1px solid black"; } this.showPage = function(el) { var x,y; for(var i = 0; i < this.tabs.length; i++) { if(el == this.tabs[i]) { x = i; } } y = ((x-1) < 0)?0:(x-1); for(var i = 0; i < this.tabs.length; i++) { this.tabs[i].className = "tab_normal"; } this.tabs[y].className = (y == x)?"tab_active":"tab_before_active"; if(this.tabs[y+1]) { this.tabs[y+1].className = (y == x)?"tab_after_active":"tab_active"; } if(this.tabs[y+2]) { this.tabs[y+2].className = (y == x)?this.tabs[y+2].className:"tab_after_active"; } if(x == 0) { this.tabs[x].style.borderLeft = "0px solid black"; } for(var i = 0; i < this.divs.length; i++) { var show = (i == x)?"block":"none"; this.divs[i].style.display = show; } } this.showPage(this.tabs[0]) } 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. I have the following code to display an image (and link if there is one): Code: if (ads[adNumber].href) { tempCode += ('<a href="'+ ads[adNumber].href +'" target=_blank "> \n') tempCode += ('<img src="' + ads[adNumber].src + '" width=' + ads[adNumber].width) tempCode += (' onLoad="setTimeout(\'newAd();\',' + refreshTime + ');"') tempCode += ('\n height=' + ads[adNumber].height + ' border=0 >') tempCode += ('</a>') } else { tempCode += ('<img src="' + ads[adNumber].src + '" width=' + ads[adNumber].width) tempCode += (' onLoad="setTimeout(\'newAd();\',' + refreshTime + ');"') tempCode += ('\n height=' + ads[adNumber].height + ' border=0 >') } return tempCode; This works OK in IE9 but only shows the image if there is no link in IE7 (that is, if (ads[adNumber].href) is not true). Thanks for any help! Hi Guys , This is the urgnt requirement , I want to change the Browsers setting languge through java script ,and according to it , The data wht I enter dhould be change .Thanks In advance Take a look at this - http://s385506566.websitehome.co.uk/ If it is ran in either chrome or safari it acts as it should (the sub menus open below the nav bar) but in IE and Firefox it is very different and a problem (the sub menus open Above! the nav bar) Any Ideas? Hello, I am developing a website using HTML, CSS and JavaScript. Actually, I used Javascript a lot in that website and I am developing it in Internet Explorer Environment but I want to display it on the Firefox or Google Chrome but the problem is some of javascript codes do not work in these browsers. So what Should I do? I think I need to define the javascript for the different browsers, so how can I do that? Good day everyone. I have a challenge with a function that works in Firefox, but not IE, Chrome or Safari. We've been building a site with a mix of Javascript and PHP using Google Maps. Another developer began the project and left a large mess which we're cleaning up. Even though it's under development, it can be viewed at www.recareas.com/demo The challenge we have is this . . . When the site home page, which is a large map, loads, it displays the US with state markers. The user will then select a state, for example, Colorado. The map then zooms in and displays markers for that state. Ultimately we won't be showing markers at the point until the visitor selects an activity from a menu. When the visitor clicks on a location marker, the google call out bubble pops up displaying a list of activities and a More Info button. This more info button when clicked opens a slide out dock on the right side of the screen displaying detailed data about the location selected. The problem we have is that this slide out dock only works in Firefox. It appears that in the other browsers the function that calls the PHP template that builds the right side dock doesn't even load. Can anyone help by giving us some pointers or direction? Here's the function were trying to call from the More Info bubble inside the google map: [code] function locInfo(loc_id) { $.get("includes/z_get_location_details.php", { loc_id: loc_id }, function(data){ $("#infoWindow_location").html(data); $("#r_menu").animate({ width: "500px"}, 200 ); $("#r_menu_left").hide(); $("#r_menu_right").show(); $("#infoWindow").show(); $.getScript("includes/z_get_interests.php?loc_id=" + loc_id); //document.directionsForm.goBtn.disabled=false; }, "html"); } [Icode] Thank you in advance for any help. |