JavaScript - Unobtrusive Fixed Div - All Browsers
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 Similar TutorialsHi all, I have this code: Code: <input type="hidden" value="update_cart" name="ca"> <input type="hidden" value="2" name="numcart"> <input type="submit" name="submit" value="Update Cart" class="inpSubmit"> I'd like to replace this: Code: <input type="submit" name="submit" value="Update Cart" class="inpSubmit"> with this: Code: <button>blabla<button> How can I do? I know something about unobtrusive javascript but I don't know how to do it. Thank you very much Hi, Does anyone know how to make the cycle function in jquery unobtrusive? I've got the following code and when I disable javascript, I get a nasty long list of images Jquery code: $(document).ready(function() { $('.homepage-slideshow').cycle({ fx: 'fade', befo onAfter, pause: 1, timeout: 0, pager: '#nav' }); }); function onAfter() { var cycle_href = this.href; var brokenstring = this.title.split(" :: "); var cycle_title = brokenstring[0]; var cycle_descr = brokenstring[1]; $('#output').html('<a href="'+cycle_href+'">'+cycle_title+'</a>'); $('#output-descr').html(cycle_descr); } Html code: <div class="homepage-slideshow"> <a href="http://url.com/" title="Info goes here."><img src="<?=SITE_URL?>/images/image1.jpg" alt="Click here for more on ..." ></a> <a href="http://url2.com/" title="Info goes here."><img src="<?=SITE_URL?>/images/image2.jpg" alt="Click here for more on ..." ></a> </div> <div class="homepage-pagination" id="nav" >Click the links to start the Google Tour: </div> <div class="homepage-metadata"> <p id="output-descr"></p> <h3 id="output"></h3> </div> I am trying to remove all Javascript code from my HTML doc and put into external .js file(s). I have event triggers that I would like to move to an external file, but I am not sure how. Below is an example. [CODE] <a href="residential.html" class="textdeco" > <img class="img-menu" id="res" src="images/buttons/btn_res_mouse_out.jpg" alt="Residential" onmouseover="FP_swapImg(1,0,/*id*/'res',/*url*/'images/buttons/btn_res_mouse_over.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'res',/*url*/'images/buttons/btn_res_mouse_out.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'res',/*url*/'images/buttons/btn_res_mouse_down.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'res',/*url*/'images/buttons/btn_res_mouse_up.jpg')" /> [CODE] The reason I want to do this is that this code is repeated in all pages and I want to reduce potential maintenance issues. Any help will be appreciated. So i've written abit of code myself in order to do this: I will have multiple video tags on my website, each of the video tag's will have to be able to play/pause seperatly, so technically speaking only 1 video should be playing at a time, when the user 'onmouseout' it should pause and when the user's gos to another video that other video should start playing. If he move's the cursor out of the video it should stop... The problem is now, i have video A & B. When i go 'onmouseover' video B, video A starts playing. This is how i started coding: 1 . 2 functions for playing/pausing a video tag 2 . Check how many <video> tags are on the page (after load) 3 . Add Event "mouseout" + function to each <video> tag And the actual code: Javascript: Code: /*** FUNCTIONS OM DE MOUSEOVER & OUT TE DOEN WERKEN ***/ function speelFilmpje(){ document.getElementById("filmpke").play(); } function stopFilmpje(){ document.getElementById("filmpke").pause(); } window.onload = function(){ /*** FUNCTION DIE ONMOUSEOVER & OUT FUNCTIE AAN 'VIDEO' TAGS TOEVOEGT ***/ var video = document.getElementsByTagName('video'); var videotags = video.length; //console.log(videotags); for(i=0; i<videotags;i++){ video[i].addEventListener("mouseover", speelFilmpje,false); video[i].addEventListener("mouseout", stopFilmpje,false); }//einde van de functie } HTML: Code: <div id="right_column"> <div id="preview1"> <video width="197" height="81" id="filmpke"> <source src="unknown.ogg" type="video/ogg"> <source src="unknown.mp4" type="video/mp4"> </video> <a href="#">Unknown (2010)</a> </div> <div id="preview1"> <video width="197" height="81" id="filmpke"> <source src="unknown.ogg" type="video/ogg"> <source src="unknown.mp4" type="video/mp4"> </video> <a href="#">Unknown (2010)</a> </div> </div> Any thoughts or information is welcome. I've stumbled upon my own wall of "Lack of knowledge" -_- without outside extensions, how does one debug javascript events on a webpage that primarily relies on unobtrusive JS events? for instance, i have a website i log into that has a "submit" button. the button itself only has this code: Code: <input type="image" class="png" tabindex="5" value="Go" src="login.png"> obviously, the only way that it can submit the form is to use javascript. and it's obviously unobtrusive in this case. consider the fact that it isn't my webpage, and i don't want to try to put random breakpoints everywhere blindly. any help!? 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 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 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! 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? 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! 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 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> 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 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. 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]) } 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.
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. 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? 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. |