JavaScript - Linking An External Js File?
relatively new coder here definitely new to js and I can't figure out how to get this script linked into an external file every time I try nothing shows up.
Code: <html> <head> <script language="JavaScript1.1"> <!-- var slideimages=new Array() var slidelinks=new Array() function slideshowimages(){ for (i=0;i<slideshowimages.arguments.length;i++){ slideimages[i]=new Image() slideimages[i].src=slideshowimages.arguments[i] } } function slideshowlinks(){ for (i=0;i<slideshowlinks.arguments.length;i++) slidelinks[i]=slideshowlinks.arguments[i] } function gotoshow(){ if (!window.winslide||winslide.closed) winslide=window.open(slidelinks[whichlink]) else winslide.location=slidelinks[whichlink] winslide.focus() } //--> </script> <title></title> </head> <body> <a href="javascript:gotoshow()"><img src="img1.jpg" name="slide" border=0 width=250 height=250></a> <script> <!-- //configure the paths of the images, plus corresponding target links slideshowimages("img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg") slideshowlinks("#","#","#","#","#") //configure the speed of the slideshow, in miliseconds var slideshowspeed=3000 var whichlink=0 var whichimage=0 function slideit(){ if (!document.images) return document.images.slide.src=slideimages[whichimage].src whichlink=whichimage if (whichimage<slideimages.length-1) whichimage++ else whichimage=0 setTimeout("slideit()",slideshowspeed) } slideit() //--> </script> </body> </html> obviously get rid of html tags and <script></script> tags save it as file.js and then <script type="text/javascript" src="file.js"> </script> do i need to break this up into 2 files or something I can't get it to work Similar TutorialsMy code works if it is in the html code itself, but when I move it to a javascript file and try to bring link it I can't get it to work at all. here is my code: lab8.js function Dice() {var number = window.prompt("How many rolls of the dice do you want?", "33"); var frequencies = new Array(13);; for (var index = 2; index <= 12; index++) { frequencies[index] = 0; } number2 = number; while(number2 > 0) { roll = Math.floor(Math.random() * 6) + 1; roll2 = Math.floor(Math.random() * 6) + 1; finalRoll = roll + roll2; number2--; var rolls = rolls + "\n" + finalRoll; frequencies[finalRoll] = frequencies[finalRoll] + 1; } totalPercent = 0; document.write("<h1>Lab8: JavaScript</h1>") document.write("<table border='1' cellpadding='1' cellspacing='1'><caption>Frequency for " + number + " rolls</caption><tr><th>Value rolled</th><th>Frequency</th><th>Percentage</th></tr>"); for(index = 2; index <13; index++) { percent = Math.round((frequencies[index] / number) * 100); document.write("<tr><th>" + index + "</th><td>" + frequencies[index] + "</td><td>" + percent + "%" + "</td></tr>"); totalPercent = totalPercent + percent; } document.write("<tr><th>Totals</th><th>" + number + "</th><th>" + totalPercent + "%" + "</th></tr><tr><td colspan = '3'>percentages are rounded</td></tr></table>") } and my html file <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <script type="text/javascript" src="lab8.js" > Dice() </script> </body> </html> I originally tried the code without including the Dice() and it not work either. I would really appreciate any help. Hello Guys I'm new to Javascript I think that the way I have worded the title may be incorrect, as I've googled similar phrases without finding anything to help me Anyway onto the issue I have a dropdown menu you can see it he http://heavywoollen.webs.com It's written in html & css, now I've had to put the code for the dropdown onto every page of the site, simply because at the time that was all i knew how to do, so I'm now trying to reduce it by writing it on JS and link the file into the page so the issue/question I have written the menu in JS, but my question is How is it styled? or how is the css file appiled? in the html I use < div id =" navMenu "> </div> and in the css there is # navMenu so I can understand how that works, but I can't figure out how to apply it into javascript, I think simply because I don't know enough about JS to know what the link tag is, if it exists at the moment the JS file simply reads link this Code: //Admin Options - open <ul> document.write("<ul><li><a href=#>Admin</a><ul><li><a href=index.html>Home</a></li><li><a href=history.html>History</a></li></li><li><a href=constitution.html>Constitution</a></li><li><a href=Code of Conduct.html>Code of Conduct</a></li><li><a href=League Meetings.html>League Meetings</a></li><li><a href=Club Contacts.html>Contacts</a></li><li><a href=League Officials.html>League Officials</a> </li><li><a href=League Policy.html>Policy</a> </li><li><a href=Duty of Care.html>Duty of Care</a> </li><li><a href=Helmets.html>Helmets</a> </li><li><a href=Fielding Regulations.html>Fielding Regs</a> </li><li><a href=Fast Bowling.html>Fast Bowling</a> </li><li><a href=Unfair Bowling.html>Unfair Bowling</a> </li><li><a href=Umpires.html>Umpires</a> </li><li><a href=Laws of Cricket.html>Cricket Law</a> </li><li><a href=CRB.html>CRB Check </a> </li></ul></li>"); //Clubs document.write("<li><a href=#>Clubs</a><ul><li><a href=clubs-adwalton.html>Adwalton</a> </li><li><a href=clubs-altofts.html>Altofts</a> </li><li><a href=clubs-azaad.html>Azaad</a> </li> <li><a href=clubs-batley.html>Batley</a> </li><li><a href=clubs-birstall.html>Birstall</a> </li><li><a href=clubs-brighouse.html>Brighouse</a> </li><li><a href=clubs-carlton.html>Carlton</a> </li><li><a href=clubs-cleckheaton.html>Cleckheaton</a> </li><li><a href=clubs-driglington.html>Drighlington</a> </li><li><a href=clubs-eastardsley.html>East Ardsley</a> </li><li><a href=clubs-gildersome.html>Gildersome</a> </li><li><a href=clubs-gomersal.html>Gomersal</a> </li><li><a href=clubs-hangingheaton.html>Hanging Heaton</a> </li><li><a href=clubs-hartsheadmoor.html>Hartshead Moor</a> </li><li><a href=clubs-holmevalleygirls.html>Holme Valley Girls</a> </li><li><a href=clubs-hunsletnelson.html>Hunslet Nelson</a> </li><li><a href=clubs-liversedge.html>Liversedge</a> </li><li><a href=clubs-methley.html>Methley</a> </li><li><a href=clubs-mirfield.html>Mirfield</a> </li><li><a href=clubs-mirfieldpc.html>Mirfield PC</a> </li><li><a href=clubs-moorlands.html>Moorlands</a> </li><li><a href=clubs-morley.html>Morley</a> </li><li><a href=clubs-newfarnley.html>New Farnley</a> </li><li><a href=clubs-ossett.html>Ossett</a> </li><li><a href=clubs-rothwell.html>Rothwell</a> </li><li><a href=clubs-scholes.html>Scholes</a> </li><li><a href=clubs-townville.html>Townville</a> </li><li><a href=clubs-wakestmichs.html>Wake St Michaels</a> </li><li><a href=clubs-wakethornes.html>Wakefield Thornes</a> </li><li><a href=clubs-westbretton.html>West Bretton</a> </li><li><a href=clubs-wrenthorpe.html>Wrenthorpe</a> </li></ul></li>"); //League Tables & Fixtures document.write("<li><a href=>Leagues</a><ul> <li><a href=fixtures.html>Fixtures/Results</a> </li><li><a href=leaguetables.html>Tables</a> </li></ul></li>"); //Representative document.write("<li><a href=#>Representative</a> <ul> <li><a href=lordtav-u11.html>Lord Taverners U11</a> </li><li><a href=lordtav-u15.html>Lord Taverners U15</a> </li><li><a href=coaching.html>Coaching</a> </li><li><a href=teamwear.html>Team Wear</a> </li></ul></li>"); //Links document.write("<li><a href=#>Links</a> <ul><li><a href=http://www.ecb.co.uk/>ECB</a> </li><li><a href=http://www.ecb.co.uk/development/ecb-coaches-association/>ECB CA</a> </li><li><a href=http://www.yorkshirecb.com/>YCB</a> </li><li><a href=http://www.yorkshirecricketboard.org.uk/index.php?option=com_content&view=article&id=103:yorkshire-senior-schools-cricket-association&catid=271:yssca&Itemid=49>YSCA</a> </li><li><a href=http://www.yorkshirewca.co.uk/district.html>YWCA</a> </li><li><a href=http://www.homeoffice.gov.uk/agencies-public-bodies/crb/>CRB</a> </li></ul></li>"); //Photo Gallery - closing </ul> document.write("<li><a href=#>Other</a> <ul><li><a href=#>Photo Galllery</a> </li><li><a href=#>Player Registration</a> </li></ul></li></ul>"); Apologies if that is too much code for a post so there is nothing else on the sheet do I need to use a link tag? How do i get the JS file to relate to the #navMenu of the css file? Thanks Rob I have created my website and i have one page that has a spry menu bar with 15 columns. I also have a javascript file that is an image gallery. i want to add that javascript file to my html/css website. not only that but i need that java script file to open on the appropriate image depending on what titled column i have clicked on. any help would be greatly appreciated!
Hey all, I'm fairly new to JavaScript. I learned PHP and now I'm creating a user registration and login system for an application I'm making and I decided I wanted to give JS a try. I'm trying to make a form validation function that will be called when I press the submit button on the form but I want to use an external js file to store all my custom functions. I have the OnClick event in the button with the call to my function inside of that. But where and how on the page to I reference my external file so that the button can call the function? Thanks guys! Hi, I'm new to JavaScript and I'm having a bit of trouble understanding something that seems relatively simple. When I make changes to CSS in JavaScript using '.style' I'm changing the attribute values of inline CSS. Can I use JavaScript to change the attribute values of rules in an external CSS file? I have no CSS in my html and would like to know if I can grab the values of attributes in an external CSS file using JavaScript. Thank you. Hello everybody, I am currently working on displaying KML-values of ElementTags within my KML File. I already integrated the KML file as an overlay to my Google Map. But how am I able to parse the GGeoXml-object or how am I able to parse external ("http://www.myexample.org/polygons.kml" instead of just "polygons.kml") XML-files? At the moment my code for loading the geoxml file looks like this: Code: function initialize(kmlFile) { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setUIToDefault(); map.setCenter(new GLatLng(53.763325,-2.579041), 9); // ==== Create a KML Overlay ==== if(!(kmlFile==null)){ //check if it doesnt start with "http://" if(!(kmlFile.startsWith("http://"))){ kmlFile = "http://" + kmlFile; $('kmllink').value = kmlFile; } var kml = new GGeoXml(kmlFile); //add Overlay to the googlemaps window map.addOverlay(kml); //$('subject').value = "SUBJECT"; //$('content').value = "CONTENT"; kml.gotoDefaultViewport(map); // Store center and zoom as properties of the object kml var centerKML= kml.getDefaultCenter(); var zoomKML = map.getZoom(); map.panTo(centerKML); map.setZoom(zoomKML); } } } And for parsing local XML-files this code works already: Code: function loadXML() { if (window.XMLHttpRequest) { xhttp=new XMLHttpRequest(); } else // Internet Explorer 5/6 { xhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xhttp.open("GET","test.kml",false); xhttp.send(""); //xmlDoc=xhttp.responseXML; xmlDoc = xhttp.responseXML; var placemark=xmlDoc.getElementsByTagName("Placemark"); alert(placemark[0].getElementsByTagName("name")[0].childNodes[0].nodeValue); ajaxLoader("http://www.zki.dlr.de/mod/ext/fireModis/yesterday_en.kml","Placemark"); } My question: Is there any way to integrate parsing external xml files in any of these two functions? Best regards, TsEMaNN Code: <!-- Add-in device.js files are placed here --> <div id="deviceScript"></div> What I have been doing is clearing this out when I select a new (add-in) device and append a script tag with its .src file. I have some vague idea that unhooking an external js file might remove its code from memory. If not is there a way to do so? Functions in different script files have the same name - for example, I use start() to set up each device. It seems that the latest device start() overwrites the one in memory - but I am not sure if overwrite means delete last one or whether there is some horrendous build up of dross going on. Any clarification appreciated. I have an issue with my javascript files loading (i.e. checking the source code of the page after having loaded yields working links to my external files and the JQuery loading for sure after running some test), but calling a function from my javascript file works in no way shape or form. For example, one test I was running was: From my .js file Code: $("p").click( function() { $(this).hide(); } ) This will work on a standalone page when I test it (not loading from external .js file), but not in the page I need to get my scripts running on. I have this file: IPToned.js Code: // ==UserScript== // @name IPToned // @namespace http://users9.jabry.com/chatleague // @description IPTorrents Filter Enhancements // ==/UserScript== alert("hello world"); I drag and drop it into Firefox (Ubuntu) and it opens it as if it were a txt file. I want it to make the alert so I can get to coding. Any suggestions? Hi guys. I've made a html file with three lists to populate different pages of my site. Then i've called the html with SSI. let me show the code the HTML with the list's Code: <div id="list_box"> <ul class="list"> <li><a href="#">item01</a></li> <li><a href="#">item02</a></li> <li><a href="#">item03</a></li> <li><a href="#">item04</a></li> <li><a href="#">item05</a></li> </ul> </div> <div id="list_box"> <ul class="list"> <li><a href="#">item06</a></li> <li><a href="#">item07</a></li> <li><a href="#">item08</a></li> <li><a href="#">item09</a></li> <li><a href="#">item10</a></li> </ul> </div> <div id="list_box"> <ul class="list"> <li><a href="#">item11</a></li> <li><a href="#">item12</a></li> <li><a href="#">item13</a></li> <li><a href="#">item14</a></li> <li><a href="#">item15</a></li> </ul> </div> the HTML with the list loaded Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- #list_box { height:100%; width: 100%; padding-top: 15px; padding-left: 30px; padding-right: 30px; padding-bottom: 20px; background-color: #cccccc; overflow: hidden; } ul.list li { list-style-type: none; text-align: left; text-decoration: none; } .list a:link, .list a:visited { font-family: "Courier New", Courier, monospace; font-size: 12px; line-height: 15px; color: #036; text-decoration: none; text-align: left; font-weight: bold; font-style: normal; } .list a:hover{ font-family: "Courier New", Courier, monospace; font-size: 12px; line-height: 15px; color: #ffffff; text-decoration: none; text-align: left; font-weight: bold; font-style: normal; } --> </style> </head> <body> <div id="list_box"> <!--#include file="list.html" --> </div> </body> </html> the zip with the sample I've made load_external.zip I wanted to ask how can I make an item from the list's to have a different css in the html with the loaded list's. because in each page one of the items (that are all buttons) will be up or should I say active. can someone tell me how can I do this please. Maybe with javascript? thanks in advance Hi, I need some help with a bit of a challenge. I need to allow users to spesify a file stored on their hard drive, read the file and populate a table and eventually a database. I can probably upload the file using <input type='file'> but what then? How do I access the file after this, or is there a better way? Using XMLHTTP gives 'access denied.....' I can not use PHP as the site does not support PHP. For those who know the environment - it's a QuickBase application I need to upload to....... Thanks Nic I'm trying to execute an php file (which is present on an other host) by javascript. I've got three files for this: The javascript that calls the main program (launch.htm): Quote: <html> <script type="text/javascript"> document.write(unescape("%3Cscript src='http://www.mysite.com/reservetest.js' type='text/javascript'%3E%3C/script%3E")); </script> </html> The main program: (reservetest.js) Quote: function goer() { var url = 'test.php'; var pars="x=4&y=3"; makeHttpRequest(url+"?"+pars, thanks); } function thanks(text) { document.write(text); //$("divname").innerHTML=text; } function $() { if (arguments.length == 1) return get$(arguments[0]); var elements = []; $c(arguments).each(function(el){ elements.push(get$(el)); }); return elements; function get$(el){ if (typeof el == 'string') el = document.getElementById(el); return el; } }; function makeHttpRequest(url, callback_function, return_xml) { var http_request, response, i; var activex_ids = [ 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP' ]; if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+... http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { // IE6 and older for (i = 0; i < activex_ids.length; i++) { try { http_request = new ActiveXObject(activex_ids[i]); } catch (e) {} } } if (!http_request) { alert('Unfortunately your browser doesnt support this feature.'); return false; } http_request.onreadystatechange = function() { if (http_request.readyState !== 4) { // not ready yet return; } if (http_request.status !== 200) { // ready, but not OK alert('There was a problem with the request.(Code: ' + http_request.status + ')'); return; } if (return_xml) { response = http_request.responseXML; } else { response = http_request.responseText; } // invoke the callback callback_function(response); }; http_request.open('GET', url, true); http_request.send(null); } goer(); And finally the test file (test.php): Quote: <html><body>just a test</body></html> It works fine when I use all three files on the same host. However when I use launch.htm on an other host (which is the idea behind it) it gives me 'There was a problem with the request (code 0)'. When I change the url variable within reservetest.js to a relative/absolute path it gives me a 'access denied' on http_request.open line. Main idea is to show the user (who puts the code from launch.htm) on his/her website the contents of my test.php file (which retrieves mysql data). I think it's a security issue with the http_request.open line. Is there a way to work around this? Or am I missing something here? I don't want to use an iframe to retrieve information from my other host. Hello Guys, I have a question here.. I have a scroller on my pages that basically reads a text file and displays.. The problem that I am having is it doesn't update until I reload the page(even though the .txt file updates about every 3 minutes).. I would like it to update when the file has been changed.. Here is my page. PHP Code: <link rel="stylesheet" href="../../css/li-scroller.css" type="text/css"> <script src="../../js/jquery.li-scroller.1.0.js" type="text/javascript"></script> <script type="text/javascript" src="../../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("ul#ticker01").liScroll(); }); </script> <?php $file = file_get_contents ('playingnow.txt'); ?> <div class="scrollpos"> <ul id="ticker01"> <li><a href="#"><?php Echo $file;?></a></li> <!-- eccetera --> </ul> </div> What can I add to make it go out and reload just the div not the entire page? Please advise.. Hi I'm trying to call a external .js file that contains a function from a webpage, but haven't been able to discover how to reference the function. First, the function: Code: function biggestOfTwo(valueOne, valueTwo) { var big; if(valueOne > valueTwo) { big = valueOne; } else { big = valueTwo; } return big; } ... and the xhtml calling it... Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>An XHTML 1.0 Strict standard template</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script src="compare.js" type="text/javascript" /> </head> <body> <script type = "text/javascript"> var dataInput1; var dataInput2; dataInput1 = prompt("Enter the first number to be compared"); dataInput2 = prompt("Enter the second number to be compared"); alert("The biggest value is " + biggestOfTwo(dataInput1, dataInput2)); </script> </body> </html> According to the book Beginning JavaScript 4th Edn, this should work - why isn't it? Jenny 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. Hello all, and thanks in advance for the help. I want to update a div using innerHTML and take the data from an external HTM file residing on my server. The purpose is to have a series of links in the div content_left that when clicked dynamically change the div content_right. That will allow me to create individual pages for the dynamic content rather than including it all on the original page. Any help is appreciated. Hi, I read several examples, tried them all out - and nothing works! Driving me crazy - completely insane! Maybe you guys can help My problem is simple: file B.html includes this line: Code: <script type="text/javascript" src="B.js" defer="defer"></script> file B.js is a regular JS file, yet I need to insert a PHP function in it (yeah - I know it will operate server-side before the page reaches the browser). I did something like: Code: (some js code) var user_id = <?php $a=100; $b=200; $c=$a+$b; echo($c);?>; alert("Your user ID is:" + user_id); (some more js code) (What I expect is the browser to see the line as: var user_id = 300; ) Doesn't work. Renaming B.js to B.php did nothing. What am I doing wrong? Thanks! Hello! How can you make a bookmarklet access an external file? (C:/testFile). The external file code is simply: Code: alert("hello"); I have tried the following code to call my external file: Code: javascript:(function(){document.body.appendChild(document.createElement('script')).src='file::/C:/testFile';})(); ...but it's not working. Please help. I am using Windows 7 and IE8. Any solutions appreciated. Thanks in advance. Jman Hi I have 2 external javascript files added in the head section of a html file but neither will work. However, if i place the javascript code in the html file it work. I'm lost and need help. Could it be the onload function
Code: <body onload="showCookies(); startBanner();"> I have HTML page which use js function and worked fine b4 I pull out the javascripts function from that page. Then later, I created .js file for the js functions and test again, the function doesn't work anymore. In .js file, <script type="text/javascript"> var upload_number = 2; function addFileInput() { var d = document.createElement("div"); var file = document.createElement("input"); file.setAttribute("type", "file"); //file.setAttribute("name", "attachment"+upload_number); file.setAttribute("name", "ufile[]"); file.setAttribute("size", "40"); d.appendChild(file); document.getElementById("moreUploads").appendChild(d); upload_number++; } </script> ************* Then in html page, I put <script language="javascript" src="jsfile/test.js"></script> in the <head> tag and call the function in <body> tag, <div id="moreUploads"></div> <div id="moreUploadsLink" style="display:none;"> <a href="javascript:addFileInput();">Upload another File</a> </div> ******************** When I click on the Upload another file link, nothing appear. It worked b4 I create separate js file. Pls help me solving this problem and gimme suggestions. Thanks in advance! PY |