JavaScript - Javascript Double Refresh Issue In Ie
I'm finishing up an e-commerce website, and I can't quite figure out why the shopping cart feature is acting all screwy in Internet Explorer. It works fine in Firefox, but in IE, when you add a product to the cart it doesn't display the little pop-up notification, and when you click on the "my cart" at the top right the product quantities are incorrect about 70% of the time. For some reason IE keeps doubling the quantities; I think one of the scripts may be double refreshing the page I just can't figure out where.
If anyone has any suggestions they would be much appreciated. The site I'm referring to is he www.tcatvs.com Thanks y'all! Also I'm using the jquery framework for much of the site. Similar TutorialsHello, I'm trying to achieve what seems pretty simple, I have achieved both aspects successfully by themselves but together I have not I am trying to submit a form data via post, then I'm also trying to redirect I have got the window.location working I have the database writing working however I can't seem to get them to work sequentially I think the reason is that the post action redirects to itself, then the initial setinterval request is gone I try to do the sequential action this way Code: <a href=# onclick="document.forms['frm'].submit();redirect();">Submit</a> So, either the data posts and I'm stuck at the same page, or it redirects and the data doesn't post What am I missing? I read that to have multiple functions by one click, you separate them with a semi-colon as I have done I think as I mentioned that the key is the post to PHP_SELF which "nullifies" the redirect request eg. it never existed So what do I do? Also I'm not after the time interval, I was just trying to find a way for a user to be notified "Hey you're going to be redirected" by an alert (which I had this pop up working as well) then when they press okay, they are redirected. Ideally the user enters data, data is stored, pop-up, hit okay, redirect Thanks for any help Hi, I'm Sam and I'm new to this forum. I have a few question about double combo box. Before I get down on details I have to confess that my knowledge about javascript is almost zer0 so if you're posting any answer please elaborate. I've found this code somewhere online and I'd like to make some changes to this code. I've searched everywhere but couldn't find any answer yet. As you can see in this code, the javascript function can open a page in iframe once the user clicks on "Go". I'd like to know how to add links to the options in the first box so that it can open an iframe by itself, plus loads the next box , so when the user selects an option from the first box, the first box opens a page in iframe then loads the options for the second box. There should be two iframes side by side, the first iframe to open a page for the first box once the user selects the options in the box and the second ifram opens a page for second box once the user clicks on the "go". I just don't know how to add links to the options in the first box. Here's the code: Code: <html> <head> </head> <body> <form name="doublecombo"> <p><select name="example" size="1" onChange="redirect(this.options.selectedIndex)"> <option>Technology Sites</option> <option>News Sites</option> <option>Search Engines</option> </select> <select name="stage2" size="1"> <option value="http://cssdrive.com">CSS Drive</option> <option value="http://www.news.com">News.com</option> <option value="http://www.wired.com">Wired News</option> </select> <input type="button" name="test" value="Go!" onClick="go()"> </p> <script> <!-- /* Double Combo Script Credit By JavaScript Kit (www.javascriptkit.com) Over 200+ free JavaScripts here! */ var groups=document.doublecombo.example.options.length var group=new Array(groups) for (i=0; i<groups; i++) group[i]=new Array() group[0][0]=new Option("CSS Drive","http://cssdrive.com") group[0][1]=new Option("News.com","http://www.news.com") group[0][2]=new Option("Wired News","http://www.wired.com") group[1][0]=new Option("CNN","http://www.cnn.com") group[1][1]=new Option("ABC News","http://www.abcnews.com") group[2][0]=new Option("Hotbot","http://www.hotbot.com") group[2][1]=new Option("Infoseek","http://www.infoseek.com") group[2][2]=new Option("Excite","http://www.excite.com") group[2][3]=new Option("Lycos","http://www.lycos.com") var temp=document.doublecombo.stage2 function redirect(x){ for (m=temp.options.length-1;m>0;m--) temp.options[m]=null for (i=0;i<group[x].length;i++){ temp.options[i]=new Option(group[x][i].text,group[x][i].value) } temp.options[0].selected=true } function go(){ document.getElementById("search").src=temp.options[temp.selectedIndex].value } //--> </script> </form> <iframe id="search" name="photos_frame" src="my_photo_page_needs_to_load_into_this_frame.htm" width=800 height=400 marginwidth=0 border=1 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no></iframe> </body> </html> I am working on my personal portfolio site, and am using a code that will make each portfolio piece appear in a new div when the name of the piece is clicked on. The problem is, JS does not seem to recognize double digits. I am not familiar with JS at all, I just got comfortable with CSS/HTML a few weeks ago! I am in over my head. It would really, really help if someone could show me how to change the code so that I could make about 15 to 20 divs instead of 9. Here is the code: Code: <script language="JavaScript"> numdivs=9 IE5=NN4=NN6=false if(document.all)IE5=true else if(document.layers)NN4=true else if(document.getElementById)NN6=true function init() { showDiv(0) } function showDiv( which ) { for(i=0;i<numdivs;i++) { if(NN4) eval("document.div"+i+".visibility='hidden'") if(IE5) eval("document.all.div"+i+".style.visibility='hidden'") if(NN6) eval("document.getElementById('div"+i+"').style.visibility='hidden'") } if(NN4) eval("document.div"+which+".visibility='visible'") if(IE5) eval("document.all.div"+which+".style.visibility='visible'") if(NN6) eval("document.getElementById('div"+which+"').style.visibility='visible'") } </script> Thank you for taking the time to read this! Hopefully someone can help. This is driving me nuts I need to replace all instances of "zz" with 'Z'. I can easily replace other strings such as a = a.replace(/mickeymouse/, "Z"); but a = a.replace(/zz/, "Z"); doesn't work. Must be a double characer thing? Hi all, I have a question (probably simple, as I'm a novice) for you. I'm finishing a tumblr theme in which I have my menu stick to the top of the window as I scroll down, and unstick when I scroll back up. It's working fine, except that if I scroll down and then refresh the page, the menu goes back to the middle of the page. Hard to explain, but you can see for yourself on my test page. Is there any way to make the menu stay on top through a refresh? My complete code is included below (apologies for its ugliness). Thanks in advance. Jon Code: <html> <head> <title>{Title}</title> <link rel="shortcut icon" href="{Favicon}"> <link rel="alternate" type="application/rss+xml" href="{RSS}"> {block:Description} <meta name="description" content="{MetaDescription}" /> {/block:Description} <meta name="color:Highlight" content="#ff0" /> <meta name="if:Show Portrait" content="0"/> <meta name="if:Show RSS Link" content="0"/> <meta name="if:Small Permalink" content="0"/> <meta name="font:Title" content="Futura"/> <meta name="font:Body" content="Courier New"/> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript"> $(window).scroll(function(e){ $el = $('.fixed'); if ($(this).scrollTop() > 320 && $el.css('position') != 'fixed'){ $('.fixed').css({'position': 'fixed', 'top': '0px'}); } if ($(this).scrollTop() < 320 && $el.css('position') == 'fixed'){ $('.fixed').css({'position': 'relative', 'top': ''}); } }); </script> <style type="text/css"> body { background: #fff; margin-left: auto; margin-right: auto; width: 600px; font: 13px {font:Body}; color: #000; } body a { color: #000; } body a:hover { background-color: {color:Highlight}; text-decoration:none; } #desc { font-size: 12px; } .fixed { background-color: #fff; position:fixed; top: 310; width:100%; z-index:100; } #footer { text-align: center; font-size: 11px; color: #ccc; padding-top: 20px; padding-bottom: 20px; } #footer a { color: #ccc; } #header { {block:IfNotShowPortrait} top: 140px; {/block:IfNotShowPortrait} {block:IfShowPortrait} top: 100px; {/block:IfShowPortrait} text-align: center; position: relative; } #menu { width: 600px; border-bottom: 1px dashed; background: #fff; font-size: 11px; text-align: center; position: absolute; } #menu a { text-decoration: none; } #newer { float: right; margin-left: -60px; } #notes { color: #ccc; {block:IfNotSmallPermalink} border-bottom: 1px dashed; margin-bottom: 30px; {/block:IfNotSmallPermalink} {block:IfSmallPermalink} margin-top: 20px; margin-bottom: 45px; text-align: center; {/block:IfSmallPermalink} font-size: 11px; } #notes a { color: #ccc; {block:IfSmallPermalink} text-decoration: none; {/block:IfSmallPermalink} } #notes a:hover, #footer a:hover { color: #000; } #notes_page { margin-top: 30px; } #notes_page ol { list-style: none; padding: 0px; margin: 0px; width: 600px; } #notes_page li { padding: 2px; background-color: #fff; margin-top: 2px; } #older { float: left; margin-right: -60px; } #photo, #video { text-align: center; } #photo img { max-width: 600px; } #post_container { {block:IfNotShowPortrait} margin-top: 340px; {/block:IfNotShowPortrait} {block:IfShowPortrait} margin-top: 260px; {/block:IfShowPortrait} } #quote { font-size: 18px; } #title a { font: 36px {font:Title}; font-style: italic; letter-spacing: 10px; text-decoration: none; } {CustomCSS} </style> </head> <body> <div class="fixed"><p><div id="menu"> <div id="older"> {block:NextPage} <a href="{NextPage}">← Older</a> {/block:NextPage} </div> <a href="/">Home</a> / <a href="/archive">Archive</a> {block:IfShowRSSLink} / <a href="{RSS}">RSS</a> {/block:IfShowRSSLink} {block:HasPages} {block:Pages} / <a href="{URL}">{Label}</a>{/block:Pages} {/block:HasPages} {block:AskEnabled} / <a href="/ask">Ask</a>{/block:AskEnabled} {block:SubmissionsEnabled} / <a href="/submit">Submit</a>{/block:SubmissionsEnabled} <div id="newer"> {block:PreviousPage} <a href="{PreviousPage}">Newer →</a> {/block:PreviousPage} </div><p> </div></div> <div id="header"> {block:IfShowPortrait}<img src={PortraitURL-64}>{/block:IfShowPortrait}<p> <div id="title"><a href="/">{Title}</a></div><br> {block:Description}<div id="desc">{description}</div>{/block:Description}<p> </div><p> <div id="post_container"> {block:Posts} {block:Text} {block:Title}<a href="{Permalink}">{Title}</a>{/block:Title} {Body} {/block:Text} {block:Photo} <div id="photo">{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>{LinkCloseTag}</div> {block:Caption}{Caption}{/block:Caption} {/block:Photo} {block:Photoset} {Photoset-500} <div id="caption">{block:Caption}{Caption}{/block:Caption}</div> {/block:Photoset} {block:Quote} <div id="quote">"{Quote}"</div><p> {block:Source} ~ {Source}{/block:Source} {/block:Quote} {block:Link} <a href="{URL}" class="link" {Target}>{Name}</a> {block:Description}{Description}{/block:Description} {/block:Link} {block:Chat} {block:Title}<h3><a href="{Permalink}">{Title}</a></h3>{/block:Title} <ul class="chat"> {block:Lines} <li class="{Alt} user_{UserNumber}"> {block:Label} <span class="label">{Label}</span> {/block:Label} {Line} </li> {/block:Lines} </ul> {/block:Chat} {block:Video} <div id="video">{Video-500}</div> {block:Caption}{Caption}{/block:Caption} {/block:Video} {block:Audio} {AudioPlayerBlack} {block:Caption}{Caption}{/block:Caption} {/block:Audio} {block:Answer} <h3>{Asker} asked: {Question}</h3> {Answer} {/block:Answer} <div id="notes"> {block:IfSmallPermalink}<a href="{Permalink}">↵</a>{/block:IfSmallPermalink} {block:IfNotSmallPermalink} <p><br> {block:Date}<a href={Permalink}>{DayOfMonth} {ShortMonth} {Year}</a>{/block:Date}{/block:IfShowDate} {block:RebloggedFrom} / Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom} {block:HasTags} / {block:Tags}<a href={TagUrl}>{Tag}</a> {/block:Tags}{/block:HasTags} {/block:IfNotSmallPermalink} </div> {/block:Posts}</div> {block:PermalinkPage} <div id="notes_page"> {block:PostNotes} {PostNotes} {/block:PostNotes} </div> {/block:PermalinkPage} <div id="footer"> Theme by <a href="http://toxicjungle.co">Jon</a>. </div> </p> </body> </html> Hello, my name is Paula an I am making a website where I have an image changing on my homepage each time it is reloaded. I found a code that lets me do this. This is the script: <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin // Set up the image files to be used. var theImages = new Array() // do not change this // To add more image files, continue with the // pattern below, adding to the array. theImages[0] = '1.gif' theImages[1] = '2.gif' theImages[2] = '3.gif' theImages[3] = '4.gif' var j = 0 var p = theImages.length; var preBuffer = new Array() for (i = 0; i < p; i++){ preBuffer[i] = new Image() preBuffer[i].src = theImages[i] } var whichImage = Math.round(Math.random()*(p-1)); function showImage(){ document.write('<img src="'+theImages[whichImage]+'">'); } </script> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin showImage(); // End --> </script> It worked fine, with four images. The thing is I wanted to put up to 16 in it. So I tried ad up to 16 numbers with images but as soon as I put more than four, it would not work. Finally what I did was to copy four times the same numbers and then it worked (0-3 , four times)... so then I had many images shown randomly but the problem now is that the random is very uneven among the images. Meaning, I get variation among very few, and many time repeating one. This is what my script looks like now: <SCRIPT LANGUAGE="JavaScript"> <!-- Begin // Set up the image files to be used. var theImages = new Array() // do not change this // To add more image files, continue with the // pattern below, adding to the array. theImages[0]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Alacenaconcajadegalletes-pgWShadow3.jpg' theImages[1]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/AltarinGasStation-pgSH.jpg' theImages[2]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/AltaroftheDeadwithEmbroideredTablecloth-pgSH.jpg' theImages[3]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Altarsobreparedverde-pgSH.jpg' theImages[0]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/BricksandClotheslineSH-pg.jpg' theImages[1]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Cocinaamarilla-pgSH.jpg' theImages[2]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/LatadeTecateconenchufes-pgSH.jpg' theImages[3]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/LedgewithTecates-wcSH.jpg' theImages[0]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Mesaamarilla-pgSH-pg.jpg' theImages[1]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/MosaicwithPhotographofVictorianInterior-pgSH.jpg' theImages[2]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Paredrojaconjualas-pg.jpg' theImages[3]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/red_cupboardSH.jpg' theImages[0]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/RoomwithLandscapeofBurgundy-pgSH.jpg' theImages[1]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Cocinaamarilla-pgSH.jpg' theImages[2]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/YellowandRedPorch-wcSH.jpg' theImages[3]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/LedgewithTecates-wcSH.jpg' var j = 0 var p = theImages.length; var preBuffer = new Array() for (i = 0; i < p; i++){ preBuffer[i] = new Image() preBuffer[i].src = theImages[i] } var whichImage = Math.round(Math.random()*(p-1)); function showImage(){ document.write('<img src="'+theImages[whichImage]+'">'); } // End --> </script> So my question is: How can I manage with this script to have all my images showing up equally when they change in refresh? I don not mind if they are not random, I also tried to remove the random property but could not manage either. Any ideas? Thank you so much, I really appreciate your help. Paula FF, Safari, Opera all execute this javascript code to refresh the page properly, but in IE version 8.0.6001.18904 the page doesn't seem to refresh on click of orange_refresh button. I have checked out a different version of IE8, don't recall exact version, but it did seem to work fine in that one, whatever version it was probably the latest now that I think of it. Check out code below any sug.'s could be helpful, though its probably a bug.. Code: <a href="javascript:document.location.reload();" onmouseover="window.status='Refresh'; return true" onmouseout="window.status='Page Refreshed'"><img src="image/orange_refresh.png" width="30" height="30" border="0" /></a> when I upload a new javascript file to the server and refresh the webpage, the webpage behaves as if the old script is on the server, this happens with IE and firefox, even if I shut the programs down and restart them, can anyone help? I am sorry if this is a stupid question. I have never really used javascript before. I found some code online that I tried to piece together so I might not even be going about this the right way. I want the background to take up 100% and resize with the browser. That works fine. I also want the text "welcome to the ahi life" stick to the bottom left hand corner and the enter button to stick to the bottom right. I would like these to resize with the browser as well. It all kind of works, except the first time you load the page the text and the button are much smaller than I would like them to be. If you refresh the page everything is correct. The url is http://www.ahiapparel.com/landing.html Code: <style> * { margin: 0; padding: 0; } #bg { position: fixed; top: 0; left: 0; } .bgwidth { width: 100%; } .bgheight { height: 100%; } #page-wrap { position:absolute; bottom:0; left:20px; width: 700px; margin: 50px auto;} #welcometext { position: fixed; bottom: 20px; left: 25px; } .welcometextwidth { width: 7%; } .welcometextheight { height: 7%; } #entertext { position: fixed; bottom: 20px; right: 25px; } .entertextwidth { width: 7%; } .entertextheight { height: 7%; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(function funct1() { var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() { if ( (theWindow.width() / theWindow.height()) < aspectRatio ) { $bg .removeClass() .addClass('bgheight'); } else { $bg .removeClass() .addClass('bgwidth'); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); }); $(function funct2() { var theWindow = $(window), $welcometext = $("#welcometext"), aspectRatio = $welcometext.width() / $welcometext.height(); function resizewelcometext() { if ( (theWindow.width() / theWindow.height()) < aspectRatio ) { $welcometext .removeClass() .addClass('welcometextheight'); } else { $welcometext .removeClass() .addClass('welcometextwidth'); } } theWindow.resize(function() { resizewelcometext(); }).trigger("resize"); }); $(function funct3() { var theWindow = $(window), $entertext = $("#entertext"), aspectRatio = $entertext.width() / $entertext.height(); function resizeentertext() { if ( (theWindow.width() / theWindow.height()) < aspectRatio ) { $entertext .removeClass() .addClass('entertextheight'); } else { $entertext .removeClass() .addClass('entertextwidth'); } } theWindow.resize(function() { resizeentertext(); }).trigger("resize"); }); </script> My best guess is that either the functions or some of the variables are conflicting somehow, but I have tried just about everything to fix it. Any help would be much appreciated. Thanks! Hello Friends In my jsp,Struts project i am using the javascript calendar control for selecting the date and by using function calcage() i am calculating the age of the user but problem occurs when the page refreshes OR when user updated the other values such as name ,contact no. Then the value of the age is set as 0 in the textfield as 0 So can you please tell me why this problem occurs And please give me solution Thanks i'm working with a city select option, a hotel select option & an iframe. the hotel select option is populated depending on the chosen city which then updates the iframe src. this is all working fine. the trouble im having is that when the page is refreshed, normal f5 way, the hotel option changes whereas the city option & the iframe src remains the same?? this problem does not occur on a force refresh via control + f5 as then both select options & iframe src revert to their original state. I don't want the city option to change upon a normal page refresh. how do I go about this? below are the city, hotel select options & iframe Code: <form name="hotelslist" id="hotelslist"> <select id="cities" name="cities" onChange="hotel_list(hotelslist.cities.selectedIndex);loadHotel();"> <option value="Baddeck">Baddeck</option> <option value="Banff">Banff</option> </select> <select id="hotelnames" name="hotelnames" onChange="loadHotel();"> <option value="Inverary Resort, Baddeck">Inverary Resort, Baddeck</option> </select> </form> <iframe name="hotelframe" id="hotelframe" src="http://www.google.com" scrolling="no" width="660" height="1000" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0"> <p>Your browser does not support iframes.</p> </iframe> below is my javascript functions Code: function loadHotel() { var destURL = document.hotelslist.hotelnames.options[document.hotelslist.hotelnames.selectedIndex].value; window.frames["hotelframe"].location = destURL; } var i; function hotel_list(i){ var hotelslist = document.getElementById("hotelslist"); hotelslist.hotelnames.options.length=0; switch(i) { case 0: //Baddeck hotelslist.hotelnames.options[0] =new Option('Inverary Resort, Baddeck','http://www.test0.com'); break; case 1: //Banff hotelslist.hotelnames.options[0] =new Option('Banff Caribou Lodge & Spa','http://www.test1.com'); hotelslist.hotelnames.options[1] =new Option('Banff Ptarmigan Inn','http://www.test2.com'); hotelslist.hotelnames.options[2] =new Option('Banff Rocky Mountain Resort','http://www.test3.com'); hotelslist.hotelnames.options[3] =new Option('The Rimrock Resort','http://www.test4.com'); hotelslist.hotelnames.options[4] =new Option('Fairmont Banff Springs','http://www.test5.com/'); break; } } can some one please advise on a cross browser solution? thanks in advance. Omar. I have a php file lets say file1.php, that printing a variable, its dynamic numbers output that already always increasing, like private message numbers that coming or others : PHP Code: <?php echo $variable ?> i want to put that variable output, in another files page title, lets say file2.php or file3.html, in the front of the another files page titles, and auto refresh every x seconds, maybe like this : Quote: (1) - another text in the page title after x seconds, get a private message Quote: (2) - another text in the page title after another x seconds, get another private message Quote: (3) - another text in the page title or its ok if just like this, only the variable, without the another text in the page title Quote: (1) please share your knowledge to make it, maybe using javascript, jquery or others Hi, I have the below code: Code: <script type="text/javascript"> function loadQuickMessageCheck(File,ID){ var xmlhttp; if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById(ID).innerHTML=xmlhttp.responseText; eucalyptus = setInterval(function(){loadQuickMessageCheck(File,ID)},20000); } } xmlhttp.open("POST",File,true); xmlhttp.send(); } </script> But I am overloading the server and crashing it. I've googled the issue and have found people with similar problems who talk about the need to cancel the last refresh request before they send the next refresh. I even found this nice piece of code which worked for someone else. Quote: try{window.clearTimeout(tRefresh)} catch(err) {} tRefresh = setInterval(setContext, varInterval*60*1000); } I am not sure if this is the solution that I am looking for but if it is all my attempts at applying this code has been a bit of a disaster. I have a big issue. I am doing this: I have a menu and when you click tje linsk it loads content using jquery post into a div. It alway loads javascript with it. But I find when they click another menu item it loads a different section into the div along with different javascript. But the dom is still keeping the old javascript. After about 40 clicks the site wants to stop working. How can I resolve this? Thanks Hey everyone, I've got this slight problem with my code in javascript and I cant solve it to save my life and I don't really want to mess more things around incase it makes it worse. For some reason, when I click "get age" it just doesnt run, but the if statements seem to be running, any help would be appreciated Code: <script type = "text/javascript"> function dIM(Y, M) { with (new Date(Y, M, 1, 12)) { setDate(0); return getDate(); } } function dateDifference(birthdate1, birthdate2) { var year1 = birthdate1.getFullYear(), month1 = birthdate1.getMonth(), day1 = birthdate1.getDate(), year2 = birthdate2.getFullYear(), month2 = birthdate2.getMonth(), day2 = birthdate2.getDate(); if (day1 < day2){ month1--; day1 += dIM (year2, month2);day }; if (month1 < month2) { year1--; month1 += 12; } return [year1 - year2, month1 - month2, day1 - day2]; } function ageCalculator() { var day = document.age.inputdate.value; var month = (document.age.inputmonth.value - 1); var year = document.age.inputyear.value; var now = new Date(); thisday = now.getDate(); thismonth = now.getMonth(); thisyear = now.getFullYear(); var first = new Date(thisyear, thismonth - 1, thisday); var second = new Date(year, month - 1, day); var yourage; var datediff; if (day == "" || month == "" || year == "") { alert ("Please fill in all of the boxes before getting your age"); } else if ((day != parseInt(day)) || (month != parseInt(month)) || (year != parseInt(year))) { alert ("Please only enter digits in the day, month or year boxes"); return false; } datediff = dateDifference(first,second); if ((thismonth < month) || (thismonth == month & thisday<=day)) {thisyear--;} yourage = thisyear-year; var next = parseInt(year)+datediff[0]+1; var difference = Date.UTC(next, month, day, 0, 0, 0) - Date.UTC(thisyear, thismonth, thisday, 0, 0, 0); var daysleft = difference/1000/60/60/24; document.age.daysremaining.value = daysleft+" days left for your next birthday"; document.age.ageoutput.value = yourage; } function clear(form){ form.Result.value = ""; } </script> <center> <p> <form name = age> <p>Day of birth <input type="text" id="inputdate" size="2"><br/> Month of birth <input type="text" id="inputmonth" size="2"><br/> Year of birth <input type="text" id="inputyear" size="4" ><br/> <input name="button" type="button" id="button2" onClick="ageCalculator()" value = "Get Age"/> <input type="reset" name="Reset" id="button" value="Reset" /> </p> <p> You are <input type = "text" name = "ageoutput" size = "4" value = "0"> years old <input type = "text" name = "daysremaining" value = "0" /> </p> </form> hi, i am trying to get some javascript working on a website i am making. the javascript changes the background image behind a photo. this simulates a user selecting a different frame from the drop down list http://jimpicot.com/shop/index.php?m...&products_id=3 below is the link to another forum it have been using to get most of the website working. http://www.zen-cart.com/forum/showthread.php?t=173765 Hi I am trying to build an application which has 6 small input fields and one numeric key pad. Initially the focus should be on the first inputfield and after entering the number from the numeric key pad, it should shift the focus to third input field and the user should be able to enter the number from the numeric key pad and then shift the focus to fifth input field and user should be able to enter the number in fifth through the key pad. I have achieved till gaining the focus on the first input field and i could enter the number through the key pad and i was able to shift the focus to third input field but however whatever i enter the number is getting changed in first and third input field. the code i wrote is below Code: <html> <head> <script type="text/javascript"> function displaymessage(val) { document.getElementById('first').value = val; alert(document.getElementById('first').value); if(document.getElementById('first').value!=null) { alert("yes"); document.getElementById('third').focus(); document.getElementById('third').value = val; } } </script> </head> <body onload="document.getElementById('first').focus();"> Enter your pin: <input type="text" id="first" size="1" maxlength="1"></> <input type="text" id="second" size="1" maxlength="1" /> <input type="text" id="third" size="1" maxlength="1" /> <input type="text" id="fourth" size="1" maxlength="1" /> <input type="text" id="five" size="1" maxlength="1" /> <input type="text" name="six" size="1" maxlength="1" /> <table border="1"> <tr> <td width="30px" align="center"><input type="button" value="1" onclick="displaymessage(1)"/> </td> <td width="30px" align="center"><input type="button" value="2" onclick="displaymessage(2)"/> </td> <td width="30px" align="center"><input type="button" value="3" onclick="displaymessage(3)"/> </td> </tr> <tr> <td width="30px" align="center"><input type="button" value="4" onclick="displaymessage(4)"/> </td> <td width="30px" align="center"><input type="button" value="5" onclick="displaymessage(5)"/> </td> <td width="30px" align="center"><input type="button" value="6" onclick="displaymessage(6)"/> </td> </tr> <tr> <td width="30px" align="center"><input type="button" value="7" onclick="displaymessage(7)"/> </td> <td width="30px" align="center"><input type="button" value="8" onclick="displaymessage(8)"/> </td> <td width="30px" align="center"><input type="button" value="9" onclick="displaymessage(9)"/> </td> </tr> </tr> <tr> <td width="30px" align="center"><input type="button" value="0" onclick="displaymessage(0)"/> </td> <td width="30px" align="center"><input type="button" value="Reset"/> </td> </tr> </table> </body> </html> I know thats because I am filling the val variable again in the third input field and that is the reason it is getting changed in first and third. However I am not aware of what other best methods we could use on this. Pleasee helpp.. Hi All, I am using a script that hides / shows a cell row depending on whether a form checkbox has been ticked. The HTML, CSS and JS code is below: CSS & HTML (simplified and normally in head / body tags etc.): Code: #lastRow { display: none;} <table> <tr> <td>Events Xtra:</td> <td><input class="text" type="Checkbox" name="upcoming" id="upcoming" value="checked"></em></td> </tr> <tr id="lastRow"> <td>Xtra Description:</td> <td><textarea name="event_description" cols="60" rows="5" id="event_description"></textarea></td> </tr> </table> JS: Code: function showHideRow(obj){ oLastRow.style.display = (obj.checked)? 'block' : 'none'; } window.onload=function(){ var oChkBox = document.getElementById('upcoming'); oLastRow = document.getElementById('lastRow'); oChkBox.onclick=function(){showHideRow(this);} showHideRow(oChkBox); } Now, the above works absolutely perfectly in Internet Explorer - when the checkbox is ticked, it displays the bottom row exactly as I want it to - i.e. as the next row in the table. However, in Chrome, Safari and Firefox it seems to display the whole row as a cell on it's own so distorting the entire table structure. I suspect it is something to do with the use of the id="lastRow", but I am not sure. The strange thing is that the HTML source is of course the same for both. Can anyone shed any light here? For convenience I have uploaded two images: IE (working fine): Firefox (distorting across page) Regards, Neil I am very new to coding, I am currently working on this design as my very first: http://img822.imageshack.us/img822/6533/unled1pd.jpg. I am currently working on the Image slider which is on the left side next to the login bar and headlines. I don't know where to start with this. If someone could walk me through or help me in anyway i would greatly appreciate it. Here is my current project LIVE: http://visionarycreativegrp.com/Demos/ForSale%20RED/# Happy Star Wars Day! Hopefully someone is strong in the force and can help. I have a HTML form and I need to get the user to select one of 350 options. I have broken down the options into "Major Group", "Sub-Major Group", "Minor Group" and "Unit" I'm looking to create 4 dynamically changing drop down lists to point the user to their final choice. All 350 options are in one database table with the following headings: [Major Group][Major Group Title][SubMajor Group][SubMajor Group Title][Minor Group][Minor Group Title][Unit][Unit Title] The 'groups' are numeric, and the title's alphanumeric. I have used the MySQL database to achieve this as it makes it easier to update the 350 options in the future should I need to. As far as the tutorial over at W3Schools.com has advised I need to use the following process: HTML Form - <Select> onclick run Javascript function Javascript function connects to server via PHP PHP runs query on the MySQL database and returns results Javascript then populates the 2nd drop down. and so on through to the final drop down. There are never more than 9 options in each drop down. Please can someone help me set this up. I have been using the code examples from W3Schools.com to put the following together. I use the alerts to check it's progress. It seems to be getting stuck when checking that the "if (xmlhttp.readystate==4)" line. Using Safari's built in Debug console the error I get back is that the php file cannot be found and there is a "500 Internal Server Error" - although I think (read as: assume) this is because the "if (xmlhttp.readystate==4)" isn't working. Any help would be much appreciated. Code: function selectMajor(str) { // an alert box to show that both a value has passed and it is the right type alert(SOC_Major.value); // enable the next drop down - SOC_SubMajor document.getElementById('SOC_SubMajor').disabled=false; // clear the next select box? document.Add_Vacancy.SOC_SubMajor.options.length=0 // POST to the php script // AJAX goes here if (str=="") { document.getElementById('SOC_SubMajor').innerHTML=" "; alert("str is empty"); return; } if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, opera, Safari xmlhttp=new XMLHttpRequest(); alert("new XMLHttpRequest created"); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject('Microsoft.XMLHTTP'); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readystate==4) { alert("xmlhttp.readystate = 4"); if(xmlhttp.status==200) { alert("xmlhttp.status = 200") document.getElementById('SOC_SubMajor').innerHTML=xmlhttp.responseText; } else { alert("There was a problem while using XMLHTTP:\n"); } } } xmlhttp.open("POST","scripts/SOCSubMajorSelect.php?q="+str,true); xmlhttp.send(); } |