JavaScript - Javascript Stops Working Once File Is Moved
Hey everyone,
I have a page where I call two external javascript files, and they work perfectly when I have all the files on my desktop. But once I transferred all the files into a folder, the scripts stop working. What's going on?! EDIT: Nevermind. I just forgot to relocate my jquery file! Similar TutorialsMy website is all up and running and I decided to put a new image viewing script on, I already had a revolving image script showing all my previous work before but the latest script has totally stopped the previous from working. You can view what I mean at www.actioncomputing.co.uk I am using 2 scripts both available on Dynamic Drive they are Lightbox image viewer 2.03a Ultimate Fade-in slideshow (v2.1) If anyone can tell me why this is I would be extremely gratefull. I'm trying to create a navigation bar with four elements. If the element is currently selected it will have a "red" background image, if it is one of the other 3, it will have a "black" background image. my four tabs are 'timetable, homework, notifications and sport' I tried making 8 functions like the 2 below Code: function setTimeRed() { document.getElementById("time").style.ClassName = 'timetable_r'; } function setTimeBlack() { document.getElementById("time").style.ClassName = 'time_r'; } And then four blocks like this: Code: function changeTimeButton() { var timePath = new String(); timePath = document.getElementById("timetable").style.backgroundImage; if(timePath == "url(assets/img/tabs/time_black.png)" || timePath == "") { setTimeRed(); setHomeBlack(); setNotiBlack(); setSportBlack(); } else { } } finally, my html has this: Code: <div id="tabbar"> <ul id="tabs"> <a href"#" onclick="changeTimeButton()"> <li id="timetable" class="time_b"> <p>Timetable</p> </li> </a> <a href"#" onclick="changeHomeButton()"> <li id="homework" class="home_b"> <p>Homework</p> </li> </a> <a href"#" onclick="changeNotiButton()"> <li id="notifications" class="noti_b"> <p>Notifications</p> </li> </a> <a href"#" onclick="changeSportButton()"> <li id="sport" class="sport_b"> <p>Sport</p> </li> </a> </ul> </div> It works once then does nothing. Why, and how would I go about fixing this?? Please help! I have a clock that works onbodyload, however using the below function on the same page, stops my clock even coming up, any help would be great. Code: <script language="JavaScript"> var HAS_EXPIRED = 'Time has Expired!'; var IS_NONE = 'None'; function secondCountdown(s){ if(s){ var timeleft = document.getElementById('timeleft').innerHTML; if((timeleft == HAS_EXPIRED) || (timeleft == IS_NONE)) return false; timeleft = timeleft.replace('<font>', ''); timeleft = timeleft.replace('</font>', ''); var time = timeleft.split(":"); var secs = time[2] * 1; var mins = time[1] * 1; var hrs = time[0] * 1; secs += (mins * 60) + (hrs * 3600); secs -= 1; if(secs <= 0){ document.getElementById('timeleft').innerHTML = HAS_EXPIRED; return false; } else { hrs = Math.floor(secs/3600); secs -= (hrs * 3600); mins = Math.floor(secs/60); secs -= (mins * 60); if(hrs < 10) hrs = '0' + hrs; if(mins < 10) mins = '0' + mins; if(secs < 10) secs = '0' + secs; document.getElementById('timeleft').innerHTML = hrs + ':' + mins + ':' + secs; } } setTimeout('secondCountdown(true)',1000); } bootloaderAdd('secondCountdown()'); bootloaderOn(); </script> Hey guys, so I'm trying to make a single function that will check to make sure the e-mails in both fields match AND to make sure the e-mail is in proper format. Strangely, with both if statements included the form will return no messages at all. If I comment out the if statement checking for proper format, the if statement to check for matching e-mail works just fine. I want this all to be in one function because I'm wanting it to be executed onSubmit with the form. Let me know what you guys think, any help is greatly appreciated: Code: <html> <head> <script type="text/javascript"> function verifyEmail() { var x = document.forms["emailForm"]["enterEmail"].value; var y = document.forms["emailForm"]["confirmation"].value; var atpos = x.indexOf("@"); var dotpos = x.lastIndexOf("."); if (x != y) { var msg = "The email addresses entered do not match, please enter matching email addresses"; document.getElementById("error").innerHTML = msg; return false; } if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 > = x.length) { var msg = "Improper e-mail format"; document.getElementById("error").innerHTML = msg; return false; } else { return; } } </script> </head> <body> <form name="emailForm" onsubmit="return verifyEmail();" method="post"> E-Mail Address: <input type="text" name="enterEmail"> Confirm E-Mail Address: <input type="text" name="confirmation"> <input type="submit" value="Submit"> <span id="error"></span> </form> </body> </html> I have a simple function to display an image when called, but if I try to rewrite the function to take the image as an argument, it stops working. I've looked at other function examples on the web but can't figure out what I am missing. Can anyone help? works: Code: <html> <script language="JavaScript"> var ImagePlusSign = '<img src="plus.jpg" name="slide" width="65" height="50"/>'; function FlashImagesThenWait() { document.getElementById("first").innerHTML = ImagePlusSign } setTimeout(FlashImagesThenWait, 1500); </script> <body>Hello. <div id="first"> </div> </body> </html> does NOT work : Code: <html> <script language="JavaScript"> var ImagePlusSign = '<img src="plus.jpg" name="slide" width="65" height="50"/>'; function FlashImagesThenWait(z) { document.getElementById("first").innerHTML = z } setTimeout(FlashImagesThenWait(ImagePlusSign), 1500); </script> <body>Hello. <div id="first"> </div> </body> </html> im trying to onclick function on the button but in firebug it will say, function not defined, i even tried to do it with a internal script, but still it will not work. please help Code: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="s/i.js"> </script> </head> <body> <button id="fihkhjsdk" onclick="ff();"> dsfh </button> <php code...> </body> </html> I have a script that works until I add the clearInterval command, and I am not sure what I have done wrong. The code is: Code: <script type="text/javascript"> function loadChatTalkRefresh(File,ID,Msg){ var xmlhttp; if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { try{ xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById(ID).innerHTML=xmlhttp.responseText; empress = setInterval(function(){loadChatTalkRefresh(File,ID,Msg)},3000); willow = clearInterval(empress,210000); } } var params=Msg; xmlhttp.open("POST",File,true); xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache"); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.setRequestHeader("Content-length", params.length); xmlhttp.setRequestHeader("Connection", "close"); xmlhttp.send(params); } </script> ok so Code: document.write("Goodbye!"); works but I put ^ that inside a function Code: function SayHello () ( document.write("Goodbye!"); ) and it stops working? I know the function call works because when I place some code to display an image in SayHello function, it displays the image. All -- I have a JavaScript config file called gameSetting.js which contains a bunch of variables which configures a particular game. I also have a shared JavaScript library which uses the variables in gameSetting.js, which I include like so: <script type="text/javascript" src="gameSetting.js" ></script> <script type="text/javascript" src="gameLibrary.js" ></script> In gameSetting.js I have: $(document).ready(function() { // call some functions / classes in gameLibrary.js } in Firefox, Safari, and Chrome, this works fine. However, in IE, when it's parsing gameSetting.js, it complains that the functions that live in gameLibrary.js aren't defined. When it gets to parsing gameLibrary.js, the variables in gameSetting.js are reported as not being defined. I've tried dynamically bootstrapping the gameLibrary file using this function in document.ready for dynamic load... $.getScript("gameLibrary.js"); However, the same problem still happens in IE, where when it parses the files individually it's not taking into context the file/variables that came before, so it's not an out of load order problem. My options a 1) collapsing all the functions in gameLibrary.js and variables in gameSetting.js into one file. However, this is not practical because this is dealing with literally hundreds of games, and having a gameLibrary.js in ONE location for ONE update is what makes most logical sense. 2) figure out a way to get this to work where variables in file1 are accessible to file2 in IE (as it seems they are in other browsers). jQuery seems to be able to have multiple plugins that all refer to the based jQuery-1.3.2.js, so I know there is a way to get this to work. Help appreciated. Nero I hope I have this post in the right place! Any help would be very much appreciated... I have a feature on my website that allows users to choose the website background (using alternate css sheets) and then uses an externally linked javascript file to store the background choice as a cookie so it is consistent throughout the website. This works perfectly locally (i.e. when previewing my website on my computer) but now it is uploaded to my host it doesn't appear to be working. (with the same browser) My javascript is he http://www. b r p - e n v .com/javascript/backgroundchange.js (with no spaces) The website that the javascript file is linked to is http://www. b r p - e n v .com (with no spaces) In the head I have: <script type="text/javascript" src="../javascript/backgroundchange.js"></script> ...then I have: <body onload="set_style_from_cookie()"> ...and for users to choose which background: <form> <input type="image" src="../images/white-background-thumb.jpg" onclick="switch_style('bg1');return false;" name="theme" value="White" id="bg1"> etc... </form> My problem is: The background reverts back to the default when moving to a different page. This would indicate that the background choice is not being saved in cookies. But this works locally! I have tried putting the javascript directly onto each page but I still had the same problem. I hope someone can help, I will be so grateful if I can get this to work. Many thanks indeed! I can get this code to take two separate sections of a file which are not beside each other and write them into another file. It always comes up as a single full line of the code instead of the sections I want. The code includes the student number first name last name and three results of assignments. I want the code to write the student number and three results of all the students into a file and then work out the average of the student results. Can you help? Code: try{ while (in.hasNextLine()) { String line = in.nextLine(); out.println( line); int i=0; if(!Character.isDigit(line.charAt(i))) { i++; } studentStringNumber = line.substring(0, i); String stringResult = line.substring(i); studentStringNumber = studentStringNumber.trim(); stringResults = stringResults.trim(); double stringResultsValue = Double.parseDouble(stringResults.trim()); stringResults = in.nextLine(); studentStringNumber = in.nextLine(); studentNumber = Integer.parseInt(studentStringNumber); if(in.hasNextInt()) { int value = in.nextInt(); } results = Double.parseDouble(stringResults); if(in.hasNextDouble()) { double value = in.nextDouble(); } Scanner lineScanner = new Scanner(line); studentStringNumber = lineScanner.next(); while(!lineScanner.hasNextDouble()) { studentStringNumber = studentStringNumber+ " " +lineScanner.next(); } stringResultsValue = lineScanner.nextDouble(); } } hereis the html file and javascripton click of this button a html ***************************** <table class=matcolor id=topnav cellspacing=0 cellpadding=0 width=550 border=0 bgcolor="#FFCCCC"> <tbody> <tr align=middle> <td id=menu1 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Desk Top Publishing </font></div> </td> <td width=1 bgcolor=#ff9900 class="mat"></td> <td id=menu2 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Transcription</font></div> </td> <td width=1 bgcolor=#ff9900 class="mat"></td> <td id=menu3 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Accounts Processing </font></div> </td> </tr> </tbody> </table> ***************************************** <script language=JavaScript> ix = document.getElementById('tblmenu1').getBoundingClientRect(); new ypSlideOutMenu("menu1", "right",ix.left + ix.right ,ix.bottom + 10); </script> **any thing i have to alter to work in firefox please help Does anyone know how to accomplish this? I got the html file to show but none of the text in the file will show.
Hi i am using javascript for the first time and i have a problem .I have 2 files html and javascript file in seperate but i donot know how to make them work .the code is down below .Thanks in advance for help. HTML <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <meta name="description" content="Instagram API - usage" /> <meta charset=utf-8 /> <title></title> </head> <body> <input id="lat_input" type="number" value="60.221374"/> <input id="lng_input" type="number" value="24.805391"/> <button id="search_location">Search</button><br/> <button id="get_popular">Get popular</button> <div id="images"></div> </body> </html> Javascript file // API DOCUMENTATION: // Instagram Developer Documentation var clientId = 'e7538f47e197479d8d32a63ae3ae4cd2'; $('#search_location').click(function () { getMediaByLocation($('#lat_input').val(), $('#lng_input').val()); }); $('#get_popular').click(function () { getPopularImages(); }); function getMediaByLocation(lat, lng) { var o = { lat: lat, lng: lng, client_id: clientId }; $.getJSON('https://api.instagram.com/v1/media/search?callback=?', o, function (response) { processImages(response.data); }); } function getPopularImages() { var o = { client_id: clientId }; $.getJSON('https://api.instagram.com/v1/media/popular?callback=?', o, function (response) { processImages(response.data); }); } function processImages(array) { $('#images').empty(); $.each(array, function (index, element) { var fs = $('<fieldset>').appendTo('#images'); $('<img>').attr('src', element.images.low_resolution.url).appendTo(fs); if (element.caption) { $('<pre>').text(element.caption.text).appendTo(fs); } $.each(element.comments.data, function (index, comment) { $('<pre>').text('Comment from ' + comment.from.full_name + ': ' + comment.text).appendTo(fs); }); }); } Is there a way to bounce my image scroller back to the left using object.watch() or something?! at the moment, it reaches the end and stops here is my code from www.dyn-web.com Code: /************************************************************************* This code is from Dynamic Web Coding at www.dyn-web.com Copyright 2001-4 by Sharon Paine See Terms of Use at www.dyn-web.com/bus/terms.html regarding conditions under which you may use this code. This notice must be retained in the code as is! *************************************************************************/ /* dw_hoverscroll.js version date: June 2004 mouseover scrolling for dw_scrollObj (in dw_scrollObj.js) */ dw_scrollObj.stopScroll = function(wnId) { if ( dw_scrollObjs[wnId] ) dw_scrollObjs[wnId].endScroll(); } // increase speed onmousedown of scroll links dw_scrollObj.doubleSpeed = function(wnId) { if ( dw_scrollObjs[wnId] ) dw_scrollObjs[wnId].speed *= 2; } dw_scrollObj.resetSpeed = function(wnId) { if ( dw_scrollObjs[wnId] ) dw_scrollObjs[wnId].speed /= 2; } // algorithms for time-based scrolling and scrolling onmouseover at any angle adapted from youngpup.net dw_scrollObj.initScroll = function(wnId, deg, sp) { if ( dw_scrollObjs[wnId] ) { var cosine, sine; if (typeof deg == "string") { switch (deg) { case "up" : deg = 90; break; case "down" : deg = 270; break; case "left" : deg = 180; break; case "right" : deg = 0; break; default: alert("Direction of scroll in mouseover scroll links should be 'up', 'down', 'left', 'right' or number: 0 to 360."); } } deg = deg % 360; if (deg % 90 == 0) { cosine = (deg == 0)? -1: (deg == 180)? 1: 0; sine = (deg == 90)? 1: (deg == 270)? -1: 0; } else { var angle = deg * Math.PI/180; cosine = -Math.cos(angle); sine = Math.sin(angle); } dw_scrollObjs[wnId].fx = cosine / ( Math.abs(cosine) + Math.abs(sine) ); dw_scrollObjs[wnId].fy = sine / ( Math.abs(cosine) + Math.abs(sine) ); dw_scrollObjs[wnId].endX = (deg == 90 || deg == 270)? dw_scrollObjs[wnId].x: (deg < 90 || deg > 270)? -dw_scrollObjs[wnId].maxX: 0; dw_scrollObjs[wnId].endY = (deg == 0 || deg == 180)? dw_scrollObjs[wnId].y: (deg < 180)? 0: -dw_scrollObjs[wnId].maxY; dw_scrollObjs[wnId].startScroll(sp); } } // speed (optional) to override default speed (set in dw_scrollObj.speed) dw_scrollObj.prototype.startScroll = function(speed) { if (!this.ready) return; if (this.timerId) clearInterval(this.timerId); this.speed = speed || dw_scrollObj.speed; this.lyr = document.getElementById(this.lyrId); this.lastTime = ( new Date() ).getTime(); this.on_scroll_start(); this.timerId = setInterval(this.animString + ".scroll()", 10); } dw_scrollObj.prototype.scroll = function() { var now = ( new Date() ).getTime(); var d = (now - this.lastTime)/1000 * this.speed; if (d > 0) { var x = this.x + this.fx * d; var y = this.y + this.fy * d; if (this.fx == 0 || this.fy == 0) { // for horizontal or vertical scrolling if ( ( this.fx == -1 && x > -this.maxX ) || ( this.fx == 1 && x < 0 ) || ( this.fy == -1 && y > -this.maxY ) || ( this.fy == 1 && y < 0 ) ) { this.lastTime = now; this.shiftTo(this.lyr, x, y); this.on_scroll(x, y); } else { clearInterval(this.timerId); this.timerId = 0; this.shiftTo(this.lyr, this.endX, this.endY); this.on_scroll_end(this.endX, this.endY); } } else { // for scrolling at an angle (stop when reach end on one axis) if ( ( this.fx < 0 && x >= -this.maxX && this.fy < 0 && y >= -this.maxY ) || ( this.fx > 0 && x <= 0 && this.fy > 0 && y <= 0 ) || ( this.fx < 0 && x >= -this.maxX && this.fy > 0 && y <= 0 ) || ( this.fx > 0 && x <= 0 && this.fy < 0 && y >= -this.maxY ) ) { this.lastTime = now; this.shiftTo(this.lyr, x, y); this.on_scroll(x, y); } else { clearInterval(this.timerId); this.timerId = 0; this.on_scroll_end(this.x, this.y); } } } } dw_scrollObj.prototype.endScroll = function() { if (!this.ready) return; if (this.timerId) clearInterval(this.timerId); this.timerId = 0; this.lyr = null; } dw_scrollObj.prototype.on_scroll = function() {} dw_scrollObj.prototype.on_scroll_start = function() {} dw_scrollObj.prototype.on_scroll_end = function() {} This <div> layer positioned always at bottom left of the screen on scrolling (and calling some code from labpixies) works well in non-ie browsers, but in ie it requires the omission of the doctype declaration. Why? Is it possible to fix it so that it works with the doctype in ie? Code: <!doctype html> <html lang="en"> <head> <title></title> </head> <body> <div id="master" style="position: absolute; left: -120px; top: 11px; width: 350px; height: 0px"> <div id="menu" style="position: absolute; left: 117px; top: 12px"> <table border="0" width="18" cellspacing="0" cellpadding="0"> <tr> <td width="100%"> <a href="javascript:expand();" onfocus="this.blur()"> <img name="menutop" border="0" src="images/translate.gif" width="23" height="152"></a></td> </tr> </table> </div> <div id="screen" style="position: absolute; left: -138px; top: 12px; "> <table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0px; padding:0px; border:1px solid #000000;"> <tr> <td style="padding-left:0px; height:0px; line-height:15px; background-color:#000000;"> <a href="http://www.labpixies.com" style="font-family: Arial,Verdana; font-size:12px; font-weight:bold; text-align:left; text-decoration:none; color:#ffffff;"> Gadget by LabPixies.com</a></td> </tr> <tr> <td> <iframe allowtransparency="true" align="top" scrolling="no" width="256" height="135" frameborder="0" src="http://cdn.labpixies.com/campaigns/babylon/babylon.html" target="_self"> </iframe></td> </tr> </table> </div> </div> <script type="text/javascript"> var sidemenu = document.getElementById('master'); function FixY() { screenWidth = screen.width; if (screenWidth == 1024) { var yside = 390; } else if (screenWidth == 1152) { var yside = 400; } else if (screenWidth == 1280) { var yside = 400; } else { var yside = 450; } if(document.body.scrollTop != "undefined") sidemenu.style.top = document.body.scrollTop+yside+'px'; else sidemenu.style.top = window.pageYOffset+yside+'px'; } setInterval("FixY()",100); </script> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </body> </html> Hi, I have the following code snippet: test.html ====== <script language="javascript" type="text/javascript"> var testVariable = "test"; </script> <script language="javascript" type="text/javascript" src="test.js"> </script> test.js ===== var testVariable = window.top.testVariable; In firefox, I'm able to access testvariable defined within test.html in test.js. But in chrome, test.js couldnot get the window.top.testVariable field defined in test.html. Can any one please let me know how i can make it work in chrome?. Am i missing something here?. http://rs-downfall.com/scripts/graph/players.php I have this page.. If you view the source there is more data in the dataset than is being displayed on the graph.. Anyone know what the problem is? Hey guys just using a simple Notepad++ to make a HTML page I've been trying to get a video working but its not turning out exactly well. I get an empty video page that won't load my video file. I downloaded JW Player and uploaded the javascript and player.swf to my folder. Then the following codes. Please Teach ME ! ----------------------------------------------------------- <html> <head> <script type="text/javascript" src="jwplayer.js"></script> </head> <body> <div id="container">Loading the player ...</div> <script type="text/javascript"> jwplayer("container").setup({ flashplayer: "player.swf", file: "Flyff Introduction.flv", height: 270, width: 480 }); </script> </body> </html> Here is a .js file to hack ie6,but it doesn't work when i put it out of the .html file.It can woking only in the .html file. It's fine in the .html file. Below: Code: <html> <head> <script type="text/javascript"> sfHover =function() { 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(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); </script> </head> <body> ...... ...... </body> </html> It's not working if external .js file.below: Code: <script type="text/javascript" src="suckerfish.js"></script> note:I haven't added the <script type="text/javascript">...<script> code to the .js file. any help will be good. |