|
JavaScript - Need Help Linking Many Columns To A Single Javascript File
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!
Similar TutorialsHello 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 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";
}
}
}
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 My 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. Hi all, i was trying to create a windows startup javascript where i was trying to perform a specific action after a time interval. Could anybody please help me with the syntax to add this timer to my js file thanks in advance 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. 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! 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 Hi there, I have this listbox that I want the user to select only one choice at a time. How do I disable the multiple selection feature in javascript? <select id="lstBxEmail" name="listBoxEmail" multiple="multiple" style="width: 580px;"> <option>Java</option> <option>PHP</option> <option>Perl</option> <option>Javascript</option> <option>C#</option> <option>Powershell</option> </select> <select id="lstBxEmail" name="listBoxEmail" multiple="multiple" style="width: 580px;"> <option>Java</option> <option>PHP</option> <option>Perl</option> <option>Javascript</option> <option>C#</option> <option>Powershell</option> </select> Hi, I have a javascript app that works fine to parse my bb_feed.xml page pasted below this message. The problem is I need to link to the script instead of including it within the web page. When I try to create the page as a .js file and link to this script from another webpage, it doesn't work. Here's the code that I used to link the .js file that I have named bb_footer.js <script language="javascript" src="bb_footer.js" type="text/javascript"></script> Is there some other way this has to be done? Thanks for any and all possible help... <html> <body> <script type="text/javascript"> if (window.XMLHttpRequest) { xhttp=new XMLHttpRequest(); } else // Internet Explorer 5/6 { xhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xhttp.open("GET","bb_feed.xml",false); xhttp.send(""); xmlDoc=xhttp.responseXML; var x=xmlDoc.getElementsByTagName("item"); for (i=0;i<x.length;i++) { document.write("<ul><li><a href=\""); document.write(x[i].getElementsByTagName("link")[0].childNodes[0].nodeValue); document.write("\">"); document.write(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue); document.write("</a></li></ul>"); } </script> </body> </html> Can we have two onFocus javascriptscript events for single HTML Tag? Thank you..
Hi, Looking for some help with something, I have a table with 20 columns, Im looking to color code column 7,8,9,10,11,12. all of the data is numeric. Here is how they should be colored. column 7 (column header name is test7) if >50 should be red if 41-50 should be yellow if <=40 should be green column 8 (column header name is test8) > 40 should be red 32-40 should be yellow <=31 should be green this is similiar for other colums, if someone could help with this one I could figure out rest. thanks jay Hello i need help with a simple single field javascript login form, i am building a small website for I and my classmates. i want it to be able to redirect each user to a specific page when a corresponding passcode is entered, i know its unsafe but we dont plan on keeping valuable information on the site, i dont know about MSQL and dont even wish to use it, the code works at this level but am unable to add users since i dont understand javascript if someone could help me i will be very grateful thanks in advance /*here is the code i got so far*/ <tittle> Enter Passcode to proceed </title> <h1 style="font-family:Comic Sans Ms;text-align="center";font-size:20pt; color:#00FF00;> </h1> <form name="login"> Passcode: <input type="text" name="userid"/> <input type="button" onclick="check(this.form)" value="Login"/> <input type="reset" value="Cancel"/> </form> <script language="javascript"> function check(form)/*function to check userid */ { if(form.userid.value == "JohnDoe") /* checkes userid */ { window.open("johndoe.php")/*target page */ } else { alert("Invalid Passcode, please try again!")/*error message*/ } } I have this script which is set to generate random anagrams of my name in rotation which works fine, but I can't work out how to put multiple instances of it on one page. if someone could point me in the right direction i'd be very grateful. thanks the code is var quotations = new Array() quotations[0]= "germaine arnold" quotations[1]= "endearing moral" quotations[2]= "analog reminder" quotations[3]= "regained normal" quotations[4]= "renaming ordeal" quotations[5]= "nominal regrade" quotations[6]= "arraigned lemon" quotations[7]= "ringleader moan" quotations[8]= "mineral groaned" function display() { a=Math.floor(Math.random()*quotations.length) document.getElementById('quotation').innerHTML=quotations[a] setTimeout("display()",5000) } and i'm calling the function using: <div id="quotation"> <SCRIPT type="text/javascript">display()</SCRIPT> </div> 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();
}
}
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); }); }); } 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 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?. Dear All I have a .js file in which i have pasted Urdu text and HTML tags like function urdutext() { innerHTML.right_column='HTML tags & urdu text';} The .js file contains about eighty lines of urdu text and some HTML tags in betweeen. But when i run this file alone in my browser it displays half of the file and the rest of the lines remain undisplayed. and when i use this file in my web page and when i click a button to display the urdu text, it dispays nothing in my web page. I know the reason but i cant solve it my self. The reason is that the .js file does not get fully uploaded and hence the file remains open and the syntax become wrong. And that is the reason it does not display anything in the web page. So i want ut help. Any one can help and would take my best wishes. Regards Sajad Bhatt Hi guys i have an embedded game in an html (unity3D) and i am wanting to delete a file from my server. so at the moment i have a php file on my server and the html containing the javascript on my desktop. test.php PHP Code: <?php $conn = ftp_connect("ftp.domain.co.uk") or die("Could not connect"); ftp_login($conn,"username","password"); echo ftp_delete($conn,"test.txt"); ftp_close($conn); ?> I will out the correct domian name and username and password and this should delete a file named test.txt on my server. the problem i am having is calling this script from my javascript which is my main html: i have searched all over and found if i do this : Code: <script language="JavaScript">
function DELETE_SERVER_FILE()
{
dummyimage = new Image();
dummyimage.src ="http://www.domain.co.uk/test.php"
}
</script>
But this is not working, can anyone help? |
|||||||