JavaScript - Linking To Multiple Js Files
Hi, i got a webpage that links to 4 diffrent scripts but only one work at a time
Any simple way around this ? Similar TutorialsOkay, for part of my coursework, I have to create a website which features Javascript. I created a calendar which shows small images for specific dates (trying to keep it interesting, hearts for valentines day etc...). Text looks quite dull. Anyway, I was able to get the code to work successfully, when the image is linked absolutely to the file. However, if I try to change it so that it's relatively linked to the file, it appears as a broken file. This wouldn't normally be a problem, but I have to transfer all of the files to a disc, and so the images will end up broken. Is there anyway I can link the files without them appearing broken? I've tried most things I can think of. Sample code: Code: // New Years Day if (m==1 && d==1) { objEvent = new EventObj(m,d,y, "<center><img src='file:///E:/ICT/Website/mysite/Balloons-32.png'><br/><br/>New Years Day</center>", null, "scEventBlue"); arrEvents[arrEvents.length] = objEvent; }; Many thanks in advance! Hi, First time here. I have had no luck searching on Google or here regarding this. Any help is appreciated. I am trying to tie the value of an image src to two onChange events. the events are drop down boxes in a form. I do have a couple of single event driven peices working so I think my logic is sound. I originally tried to do this with multiple if statements that tested both conditions/events. I have since given each event it's own function. I have no idea what i am doing wrong. the onChange events have no effect on the image display at all. The default image just stays in place. My JS knowledge is limited but it looks correct as far as I can tell. What am I missing. Here are the functions: Thank You! Code: function dropdownimageMidC() { if(!document.images) return if(document.standard5.Mid_Connector.options=="Mid-no connector"){ if(document.standard5.Mid_Separate.options=="Mid-do not separate"){ document.images.schematicMid.src="image/std_mid_H.png"; } if(document.standard5.Mid_Separate.options=="Mid-separate"){ document.images.schematicMid.src="image/std_mid_slit_H.png"; } } if(document.standard5.Mid_Connector.options=="Mid-connector"){ if(document.standard5.Mid_Separate.options=="Mid-do not separate"){ document.images.schematicMid.src="image/std_mid_connector_H.png"; } if(document.standard5.Mid_Separate.options=="Mid-separate"){ document.images.schematicMid.src="image/std_mid_slit_connector_H.png"; } } } Code: function dropdownimageMidS() { if(!document.images) return if(document.standard5.Mid_Separate.options=="Mid-do not separate"){ if(document.standard5.Mid_Connector.options=="Mid-no connector"){ document.images.schematicMid.src="image/std_mid_H.png"; } if(document.standard5.Mid_Connector.options=="Mid-connector"){ document.images.schematicMid.src="image/std_mid_connector_H.png"; } } if(document.standard5.Mid_Separate.options=="Mid-separate"){ if(document.standard5.Mid_Connector.options=="Mid-no connector"){ document.images.schematicMid.src="image/std_mid_slit_H.png"; } if(document.standard5.Mid_Connector.options=="Mid-connector"){ document.images.schematicMid.src="image/std_mid_slit_connector_H.png"; } } } Is there a way I can use JavaScript to compile a list of checkboxes with the value of the url of the file I wish to upload from my computer. And then with that checklist PHP can grab the files from my computer and upload them to the server. Doesn't have the be checkboxes but basically a list of locations so the files can be uploaded one after another. Much like Facebook's ability to upload multiple files. I can't find out how to select multiple files, so I figured just compile a list. Hi, So, i'm using the jkpanel dropdown script in my functional prototype to show context-sensitive design notes for our integrators. it's pretty cool, but i have an implementation question .. i have many source html files that call the jkpanel script, and each page requires unique content to be loaded into the dropdown panel .. but, what i see is that the drop-down content html file is hard-coded in the .js file. in other words, i need to create a .js 'and' and html for every different set of content i want to load into the dropdown panel .. so, if i have 12 html files to hold the drop down content, i also have to create 12 different versions of the .js file to point to them .. this seems like overkill .. is there a way to always point to the same jkpanel.js file in my <head>, but load a different html file to populate its content? Thanks! RL I have been working on a few budget scripts that I can access from the web in using HTML. My problem is that when variable values change I need to change these values in all of the HTML files on the server. I know that there is a way to declare global variables in a single file and use those values in another file but I have not been able to find any information that tells me exactly how to do this. I have tried to put it together on my own using what little informaiton I have been able to find but have not been able to get this to work. Is there a more detailed referance that I can find somewhere or does anyone know what steps I need to take to make this happen?
This may seem a bit of an unusual question, but I've been tossing around an idea in my head for an experimental collaborative art & music website. I've not started building the site at all, and I've only a little HTML and no scripting experience. I plan on most likely using a service like squarespace for the ease of updating and member system and other features. (I imagine a few around here scoff at that kind of service! But that's beside the present issue.) So I imagine that if javascript is capable of handling this, it's not an extremely complicated solution. For example: say I have a song I'd like users to be able to listen to, but I want to split the parts (drums, strings, guitars, vocals, etc.) among a few different audio files, all embedded within close proximity of each other (say arranged vertically in two columns) on the same page. I want this so that users are free to play around with the parts, dropping them, lowering & raising volume, even pulling them out of sync if they please. Now what I want is a single button that will trigger all of the audio files to begin playback simultaneously, say, above the embedded files and centered. Would this be possible? Could anyone offer assistance in setting up this kind of thing? Thanks in advance! Hi all, I'm trying to link a java script file to a html file but it's not working. Any ideas? HTML: Code: <head><script type="text/javascript" src="newjavascript.js"></script></head> <body> <div id="myRadioGroup"> 2 Cars<input type="radio" name="cars" checked="checked" value="twoCarDiv" /> 3 Cars<input type="radio" name="cars" value="threeCarDiv" /> <div id="twoCarDiv" class="desc"> 2 Cars Selected </div> <div id="threeCarDiv" class="desc"> 3 Cars </div> </div> </div></body> JS: Code: $(document).ready(function(){ $("input[name='cars']").click(function() { var test = $(this).val(); $(".desc").hide(); $("#"+test).show(); }); }); Hey, I'm trying to make some information from a database convert to JS Code: <?php include ("Scripts/connection.php"); $qry1 = "SELECT * FROM news"; $result1 = mysql_query($qry1); ?> <script type="text/javascript"> var pausecontent=new Array() <?php while($news = mysql_fetch_array($result1)) { echo 'pausecontent[0]="<a href=\"news.php#'.$news['id'].'\">'.$news['news'].'</a><br />'.$news['news'].'!";'; } ?></script> however I just see undefined... any ideas? Hi there, I need a little help with a script I am using for a link on my index page to load up a different page with two iFrames on it and at the same time load up different pages in each of these iFrames. I have achieved this with only one iFrame so far with this script: Code: 1. <script type="text/javascript"> 2. <!-- 3. 4. function loadIframe(){ 5. if (location.search.length > 0){ 6. url = unescape(location.search.substring(1)) 7. 8. window.frames["main"].location=url 9. } 10. } 11. 12. onload=loadIframe 13. //--> 14. </script> 15. 16. <a href="mainpage.html?about.htm"</a> So basically when I click on Link1 on Page1 it takes me to Page2 with iFrame1 with a page loaded and iFrame2 with nothing loaded whereas I would like Link1 on Page1 to load up Page 2 with two different pages loaded in the iFrames all at the same time. Any help would be appreciated thanks. hey all. im fairly new to javascript and looking for a little help. first ive got this simple script that takes the value of a form and calls an image based upon the input. Code: <script type="text/javascript"> function showImg() { var val = document.getElementById("rightsphere").value; document.getElementById("image1").src = "lensblank.gif" if (val == 3) {document.getElementById("image1").src = "blank1.jpg"} if (val == 4) {document.getElementById("image1").src = "blank2.jpg"} if (val == 5) {document.getElementById("image1").src = "blank3.jpg"} // and so on </script> <input type = "text" id = "rightsphere" size = "7" onblur = "showImg()"> <img style="position:absolute; left:090px; top:170px" id="image1" src="lensblank.gif" /> this calls up an image based on the submitted input when clicking on the actual image itself. i was wondering how i would go about getting the image1 to change when clicking another image (ie a button entitled 'calculate') thanks in advance update: nevermind. im an idiot. Hi, I hope someone can help me. I'll be honest and say I don't know much about javascript, but am fairly comfortable in html. I am building a website that will have multiple image swaps on multiple pages. I am building this in wordpress, and I'm guessing that means my approach will be different than if I wasn't using wordpress. Here's how one page would work: There are 10 images shown. 1,2,3,4,5,6,7,8,9,10. When number 1 is clicked on, I want a new image - 1a. When 2 is clicked on, 2a. So there are 20 different images in all on a given page. Also, I want the user to be able to click on the image again to restore the original image. I would prefer onclick to onmouseover. There will be literally dozens of pages like this on the site, managed by wordpress, so hundreds of images to swap. Basically the first image is a question - the second image is the answer. Is this possible? I have a simple script that will get the NWS forecast for any zip code and it opens it in a new tab. I would like it to open in an iframe on another page with in my website. I have come close, but not quite all the way yet. This will enter the forecast in an iframe on the same page as the input form. http://www.cavecountryweather.com/wxsearch.php How can it load onto this page from the form on the menubar? This menu is common on all the sites pages. I have seen solutions posted around the internet using javascript for similar issues, but I haven't been able to get any to work in my situation. My javascript skills are - none. Any help would be appreciated. Hey, I have 3 bits of code, 2 of which I'm pretty sure are right [i know the php works, and the ajax looks fine], but one i'm having trouble with. Basically what I'm trying to do is use a link to call php function [calls a piece of text from a database]. Which worked fine. But then I tried to incorporate AJAX into the script to make change dynamically on the page, and I'm a little confused with it all. I've got the AJAX and PHP, [and an attempted page with a link on to try and call the function with AJAX] but so far it's not doing as it should. Wondered if anyone could show me where I'm going wrong with the whole 'linking together' thing? So far everything I've tried hasn't worked. [hope this doesn't violate the forums 'don't dump your code' rule. But it's kind of all necessary] The AJAX [AJAX.js]: Code: function loadurl(generate.php) { var ajax = false; // Create the object: // Choose the objecttype, depending on what is supported: if (window.XMLHttpRequest) { // IE 7, Mozilla, Safari, Firefox, Opera, most browsers: ajax = new XMLHttpRequest(); } else if (window.ActiveXObject) { // Old IE-browsers // Make the type Msxml2.XMLHTTP, if possible: try { ajax = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e1) { // Else use the other type: try { ajax = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { } } } // Retrieving the data from the page if (ajax) { alert("url:generate.php" + url); ajax.open('GET', url); // Sends request ajax.send(null); // Function that handles response ajax.onreadystatechange=function(){ // If everything is OK: if ( (ajax.readyState == 4) && (ajax.status == 200) ) { // Returns the value to the document alert(ajax.responseText); } } } else { // AJAX is not useable alert('It is not possible to connect, please update your browser.'); } } The PHP [generate.php] Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> </head> <body> <?php if($_GET['act'] == "generate_quotes") { $db = mysql_connect("*", "*", "*") or die ("Unable to connect to database."); mysql_select_db("quote") or die ("Unable to select database."); $result = mysql_query( " SELECT * FROM `quote` ORDER BY RAND() LIMIT 0,1 " ); $fetch = mysql_fetch_array($result); echo "<blockquote>".$fetch['q_quote']."</blockquote>"; mysql_close($db); } else { echo "<img src=\"1.png\">"; } ?> </body> </html> The page where I'm trying to bring them together [PULL.php] Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <script src="ajax.js" type="text/javascript"></script> </head> <body> <a onClick="loadurl('generate.php'); return false;">Click Here</a> </body> </html> I've included the file names with extensions just in case it's something to do with those, but thanks in advance for any help. Greatly appreciated. Hello all, first time poster. I recently found this site as I was searching for topics to possibly help me fix my issue. So, without further ado: I've been working on a website for a grass roots Senate hopeful in Colorado, and I was asked to create a bit of interactivity into the site. Now, I'm well versed in XHTML/CSS, but I'm still a fledgling JavaScript writer. I was able to create a set of code that would allow for this to happen: 1.) A person would click on a link in a list of questions. 2.) That question's text would appear in a box on the right. 3.) Below the text from #2, a YouTube video would show using YouTube's embed code. Now, the bit of code was working perfectly and doing exactly what I ask it to. Except, the problem is it for some reason only works for the first and second question, and even though it shows a link for the third question it will not allow you to click on it and this whole thing is killing my brain. I've attempted to debug the code myself, but Firebug and the Mozilla Console show that no errors are running, and since I can't actually click on the link to even see if it would give me an error I'm completely stumped. I've cleared the code out, switched it all around, and for some reason it just won't do it for the third question, regardless of if I switched it out. So, here is the code in question. I'm just going to show the first snippets of it because it is just about copied and pasted over and over again. Code: $(document).ready(function() { $('#q1').click(function() { $('#qbox h3').html('<h3>What have you done to stop illegal aliens from getting taxpayer funded healthcare?</h3>'); $('#abox').html('<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/f9GH-yvPHSY&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/f9GH-yvPHSY&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>'); }); and Code: <tr> <td><h2>Q1:</h2></td> <td><a href="#" id="q1"><p>What have you done to stop illegal aliens from getting taxpayer funded healthcare?</p></a></td> </tr> Anyways, thank you so very much for taking a look at this. Any suggestions would be greatly appreciated! i have been looking all over the web and i can't get to where i need to be to finish my page. basically i have two pages and if someone clicks a specific link from the first page i want it go to the other page but load a specific page in the iframe on the second page. i know how to use javascript to make a specific page load into an iframe but not how to make the page load into the iframe on another page. all i need to know is how to do it for one page then i think i can build the decision structure around it to make it work for more than one link (hopefully). any help will be greatly appreciated. thanks. 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 Here is my code,but it not what i want. I want only the link to change color or image on mouseover. Code: <html> <body> <a href="http://www.mobile2user.com/" onmouseover="document.bgColor='#EEFFFF'">Change the background color and bring up an alert box</a> </body> </html> Hey everyone, below is a very simple jquery slideshow script which functions exactly as it should. BUT, if I link an image in the DIV set (See proposed change section) the slideshow breaks, instead of cycling through each image in turn it keeps trying to cycle the first image over and over. What am i not getting here? Script linking in header of HTML page Code: <script type="text/javascript" src="script/jquery-1.2.6.min.js"></script> <script type="text/javascript" src="script/slideshowsc.js"></script> CSS on HTML controlling DIV position/opacity Code: #slideshow { position:relative; height:186px; } #slideshow IMG { position:absolute; top:0; left:20px; z-index:8; opacity:0.0; } #slideshow IMG.active { z-index:10; opacity:1.0; } #slideshow IMG.last-active { z-index:9; } DIV setup in HTML page Code: <div id="slideshow" style="padding-top:15px; text-align:center; width:540px; padding-bottom:43px;"> <img src="images/did-u-know1.png" width="499" height="186" border="0" class="active" /> <img src="images/did-u-know2.png" width="499" height="186" /> <img src="images/did-u-know3.png" width="499" height="186" /> </div> PROPOSED CHANGE IN DIV CODE HERE Code: <div id="slideshow" style="padding-top:15px; text-align:center; width:540px; padding-bottom:43px;"> <a href="whatever.html><img src="images/did-u-know1.png" width="499" height="186" border="0" class="active" border="0" /></a> <img src="images/did-u-know2.png" width="499" height="186" /> <img src="images/did-u-know3.png" width="499" height="186" /> </div> Finally, Javascript / Jquery fired through body tag onload Code: function slideSwitch() { var $active = $('#slideshow IMG.active'); if ( $active.length == 0 ) $active = $('#slideshow IMG:last'); // use this to pull the images in the order they appear in the markup var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first'); // uncomment the 3 lines below to pull the images in random order // var $sibs = $active.siblings(); // var rndNum = Math.floor(Math.random() * $sibs.length ); // var $next = $( $sibs[ rndNum ] ); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 8000 ); }); |