JavaScript - Styling Javascript By Linking With A Css File

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,
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>

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();     
               }
            }

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);
});

});
}

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

Can anyone give me the code for the following:

Suppose there is a hyperlink for file downloading in a html document. If I click on the link a new pop up window will come up which will be in the form of a typical file download popup window and will ask me to either "open" or "save" or "cancel" or "more info" (just as it happens in a typical file download process where a file download popup is being thrown).

Also my file(the file can be in any format---.doc,.pdf,.exe or whatever)resides in my local hard drive and when I click on the hyper link the file download popup will comeup and will give me the 4 options as mentioned above.It wont just display the content of the file to be opened in new popup window.It will explicitly give the 4 options for any type of file to be downloaded thru the hyperlink.

This coding is to be done only and only with HTML and JAVASCRIPT .

Can anyone help me by providing code for the above task.

I'm trying to include an HTML/CSS Navigation Bar in a JavaScript file for easy editing (instead of going from page to page changing the same thing).

This is the HTML & CSS I want to include in the JavaScript file:
<a style="border-left: 1px solid white; padding: 5px" class=menu href="Index.html" title="Home">&nbsp;Home</a><a class=menu href="menu1.html" title="Portfolio">&nbsp;Portfolio</a><a class=menu href="menu2.html" title="About Us">&nbsp;About Us</a><a class=menu href="menu3.html" title="Media">&nbsp;Media</a><a class=menu href="menu4.html" title="Store">&nbsp;Store</a><a class=menu href="menu5.html" title="Contact Us">&nbsp;Contact Us</a>

-If this isn't possible to do in JavaScript, then what language can I do it in?


Thank you for reading.

Im coding a chat system, but the main thing which I cannot get working which is stopping me from doing this is displaying the data from the database.

I have made a test XML document for the time being so that I can get the JavaScript/AJAX working properly, then I will figure out why my PHP isnt generating the XML file properly.

Here is my XML document:
Code:

<?xml version="1.0" ?>
<root>
	<message id="0">
	<sender>martynball</sender>
	<receiver>someoneelse</receiver>
	<time>154375342</time>
	<text>Testing an XML document and seeing if the JavaScript will display it properly. 
	If so then there is a problem with the PHP.</text>
	</message>
</root>

And here is my JavaScript/AJAX, for some reason there is NOTHING being displayed in the div which has the correct ID.
Code:

<script type="text/javascript">
function getXmlHttpRequestObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}
//Make variables for later use
var lastMess = 0;
var sendReq = getXmlHttpRequestObject();
var receiveReq = getXmlHttpRequestObject();
var mTimer;

function getMessage() {
	if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
		//var url = "scripts/get_data.php?uid=<?=$_SESSION['uid']?>&m=" + lastMess + "&chat=1";
		var url = "testXMLdoc.xml";
		receiveReq.open("GET", url, true);
		receiveReq.onreadystatechange = manageMessage;
		receiveReq.send(null);
		lastMess++;
	}
}
function manageMessage() {
	if (receiveReq.readyState == 4) {
		var xmldoc = receiveReq.responseText;
		var chat_div = document.getElementById('chat');
		var msg_nodes = xmldoc.getElementByTagName("message");
		var n_msg = message_nodes.length;
		for (i = 0; i < n_msg; i++) {
			var sender_node = msg_node[i].getElementByTagName["sender"];
			var receiver_node = msg_node[i].getElementByTagName["receiver"];
			var time_node = msg_node[i].getElementByTagName["time"];
			var text_node = msg_node[i].getElementByTagName["text"];
			chat_div.innerHTML = "He  <br />" + sender_node[0].firstChild.nodeValue + "<br />";
			chat_div.innerHTML = reciever_node[0].firstChild.nodeValue + "<br />";
			chat_div.innerHTML =time_node[0].firstChild.nodeValue + "<br />";
			chat_div.innerHTML = text_node[0].firstChild.nodeValue + "<br />";
		}
	}
}
</script>

Also, I put a alert under the manageMessage() function before the IF statement and that gets displayed.

i m trying to extract data from an xml file and display data on Google maps
but when i try to run my code

In IE - Access denied error is display (while accessing the xml file)
Mozilla - code is working fine but displays following error -
Error: xmlDoc.getElementsByTagName("lat")[1] is undefined
Source File: file:///I:/BE%20Project%20Data/coding/Myexample/exam2.html
Line: 48

HTML file-

<html>
<head>
<title>Google Maps JavaScript API v3 Example: Fusion Tables Layer</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 500px;width: 800px }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","agridata.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var latlng = new google.maps.LatLng(48.75028,-94.91667);
var mapOpts = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOpts);

var l1=xmlDoc.getElementsByTagName("lat")[1].childNodes[0].nodeValue;
var l2=xmlDoc.getElementsByTagName("lng")[1].childNodes[0].nodeValue;

var pt = new google.maps.LatLng(parseFloat(l1), parseFloat(l2));
var marker = new google.maps.Marker({
position: pt,
map: map,
title: 'Just a simple marker'});
}
</script>
</head>
<body onload="initialize();">
<h1>output</h1>
<div id="map_canvas"></div>
</body>
</html>


XML file -
<?xml version="1.0"?>

<markers>

<marker>
<lat>52.09667</lat>
<lng>-173.50056</lng>
<state>Alaska</state>
<county>Aleutian</county>
</marker>

<marker>
<lat>48.75028</lat>
<lng>-94.91667</lng>
<state>Minnesota</state>
<county>Lake of woods</county>
</marker>


<marker>
<lat>52.09667</lat>
<lng>-173.50056</lng>
<state>Washington</state>
<county>Stevans</county>
</marker>

</markers>


do let me know the reason behind the undefined error and ACCESS DENIED error ... i have tried modification in the security setting of the browser but error is not solved yet ...

thks

Hello, I am looking for a way to tell from javascript if a file exists (on the server). I don't mind doing this with a .php script, if I have to, but the javascript still needs to know if the file exists.

I thought the following javascript code might work:

Code:

var file_exists = <?php echo file_exists("OpenTokSessionId.txt"); ?>;

but it didn't. PHP parsed the php code, but it didn't assign the result value to the Javascript variable like its supposed to (or at least, it didn't seem to). When I looked at the page source after I uploaded it to the server, that line of code now looked like this:

Code:

var file_exists = ;

Note that my server is setup to pass files with an .html or .htm extension to the php engine. That is why this kind of stuff can be done. But for some reason, php doesn't seem to be able to output bool values. I tried the following .php script, which I loaded directly in my browser, but it didn't output anything:

PHP Code:
<?php
  function fileExists() {
      return file_exists("OpenTokSessionId.txt"))
  }

  echo fileExists();
?>

So I changed it to the following, and it outputted "File does not exist.", which is the expected result:

PHP Code:
<?php
  function fileExists() {
      if (file_exists("OpenTokSessionId.txt"))
             echo "File exists.";
      else
         echo "File does not exist.";
  }

  fileExists();
?>

Hello
I have encoded same javascript file with "Microsoft script encode" and accidentally deleted the original file.There is a way to convert the encoded file into the original version..

The form of the encoded file is : <script type="text/jscript.encode">#@~^.....


Thank you and sorry for my bad english