JavaScript - Displaying Content In Javascript

I have a site that can be downloaded and run on a closed network (not needing an active Internet connection). I'd like a page that displays live data to a user with Internet connectivity (I can do this) but display "canned" data when the user is without an internet connection...and this difference in page display is transparent to the user. I know this can be done with php but the user without Internet connectivity will likely not be able to run php locally so the page must be an .htm file. I there a javascript somewhere that does this?Any help is greatly appreciated.

Hi, I'm new to Javascript, so bear with me.

I'm trying to use a script that replaces the contents of a div, based on div id's. I've gotten it to work how I want he

http://www.sixnations.be/home1.html

But can't get it to work here, and I'm not sure why:
http://www.sixnations.be/menu.html

Relevent code, Javascript:

Code:

function changeMenu(obj) {

    if (obj == 'food') {
        //alert('food');
        var fd = document.getElementById('food');
        fd.style.display = 'inline';
        var fdi = document.getElementById('foodImages');
        fdi.style.display = 'inline';
        var dr = document.getElementById('drink');
        dr.style.display = 'none';
        var dri = document.getElementById('drinkImages');
        dri.style.display = 'none';
    }
    else if (obj == 'drink') {
        //alert('drink');
        var fd = document.getElementById('food');
        fd.style.display = 'none';
        var fdi = document.getElementById('foodImages');
        fdi.style.display = 'none';
        var dr = document.getElementById('drink');
        dr.style.display = 'inline';
        var dri = document.getElementById('drinkImages');
        dri.style.display = 'inline';
    }
}

HTML (the data's tabular, hence the tables):

CSS:

Code:

/*-- MAIN CONTENT --*/

.maincont {
	width: 930px;
	margin: auto;
	margin-top: 10px;
	overflow: auto;
}

.backcont {
	position: relative;
	width: 620px;
	margin-right: 296px;
}

.backrightcont {
	float: right;
	width: 296px;
}

.backtop,
#info_En,
#info_Fr,
#info_It,
#drink,
#food,
.backrighttop {		
	background-image: url(../sixnations_images/backtop.png);
	background-repeat: repeat-x;
	background-position: bottom;
	border-right: 1px solid #21201C;
	border-left: 1px solid #21201C;	
	width: 100%;
	height: 57px;
	text-align: center;
}

.backbottom {
	background-image: url(../sixnations_images/backbottom.png);
}


#info_En,
#info_Fr,
#info_It,
#food,
#drink {
	background-image: url(../sixnations_images/contentback4.png);
	background-repeat: repeat;
	padding-bottom: 30px;
	text-align: left;
	height: auto;	
}

.backright,
.backrighttop,
.backrightbottom {
	width: 100%;
}

.backright {
	background-image: url(../sixnations_images/backright.png);		
}

.backrighttop {
	background-image: url(../sixnations_images/backtop2.png);
	background-position: top;
	border: 0;	
}	

.backrightbottom {
	height: 50px;
	background-image: url(../sixnations_images/backrightbottom.png);
	border: 0;
}

.backrighttop h1,
.backright h1 {
	font-family: 'Cambria', Palatino, Georgia, serif;
	font-size: 1.6em;
	color: #eee;
	line-height: 70px;
	text-align: center;	
}

.backright h1 {
	width: 95%;
	line-height: normal;
	border-top:1px dashed #333;
	padding-top: 15px;
}

#noborder {
	border:0;
}

.twitter {
	margin-left: 15px;
}

#info_Fr,
#info_It,
#drink
{
    display: none;
}

.lang,
#info_En p,
#info_En h1,
#info_Fr p,
#info_Fr h1,
#info_It p,
#info_It h1,
#food h1,
#food p,
#drink h1,
#drink p {
	width: 71%;
	margin: auto;
}

#info_En h1,
#info_Fr h1,
#info_It h1,
#food h1,
#drink h1 {
	font-family: 'GothamBook','Cambria', Georgia, serif;
	font-size: 2.5em;
	color: #000;
	padding-bottom: 10px;
	padding-top: 20px;
	margin-bottom: 15px;
	font-variant: small-caps;
	letter-spacing:.1em;
	text-align: center;
	border-bottom: 1px dashed #777;
}

.lang {
    margin-top: 35px;   
    padding-top: 5px; 
	border-top: 1px dashed #777;
    font-size: 1em;
	font-variant: small-caps;
    text-align: right;
    color: #777;
}
 
.lang a:hover {
	background-color: #777;
	color: #eee;
} 

/*-- MAIN CONTENT -- SPORTS ON TV / FOOD & DRINK --*/

table.sports,
table.menu1 {
	width: 90%;
	margin: auto;
}

table.sports thead td,
table.menu1 thead td {
	font-size: 1.3em;
	font-variant: small-caps;
	color: #777;
	border-bottom: 1px dotted #999;
	width: 100%; 
	padding-top: 20px;
}

table.sports tr,
table.menu1 tr {
	border-bottom: 1px dotted #999;
}

table.menu1 tr {
	border: 0;
}

table.sports td {
	padding: 7px;
}

table.menu1 td {
	border:0;
	padding: 8px;
}

table.sports td.foot,
table.sports td.rugby  {
	background-image: url(../sixnations_images/ball1.png);
	background-repeat: no-repeat;
	background-position: bottom left;
	padding-left: 35px;
}

table.sports td.foot {
	background-image: url(../sixnations_images/ball2.png);
}

table.menu1 td.desc {
	color: #888;
	font-style: italic;
	padding-top: 0px;
	font-size: .9em;
}

Any ideas?

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 have to display a div before firing a sync ajax in javascript
div is getting displayed in firefox but not in IE and chrome.

I need to basically display a download bar to indicate the user that the request is in progress

Hi guys, I already posted this but it hasn't been approved by a mod or the mods are all at lunch or something lol.

I want to display an image using javascript instead of HTML (or use javascript to change the HTML code dynamically when an update is made). I have created an XML file, which contains text data which is displayed in HTML by using Javascript.

What I am having trouble with is getting Javascript to grab the image URL from the XML file, and then display that image in the correct div. How does one show an image by using javascript? and how do you get javascript to get the url from the XML?

The following is my Javascript code which grabs the text from the XML and displays it in the HTML;

Code:

<script type="text/javascript">

var xmlDoc;
<!--
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  } 
else // Internet Explorer 5/6
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET","SDS.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;

var x=xmlDoc.getElementsByTagName("NEWS");
i=0;

function display()
{
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue.fontsize("5").fontcolor("white").bold());
date=(x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue.fontsize("2").fontcolor("white").bold());
stitle=(x[i].getElementsByTagName("STITLE")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white").italics());
story=(x[i].getElementsByTagName("STORY")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white"));
txt= title + "<br />" + date + "<br />" + stitle + "<br />" + story;
document.getElementById("show").innerHTML=txt;
}

//-->
</script>

And this is the XML file;

Code:

<?xml version="1.0" encoding="ISO-8859-1"?>

<BULLETIN>
<NEWS>
<PIC>"newssmall.jpg"</PIC>
<DATE>14/3/2010</DATE>
<TITLE>News Story 1</TITLE>
<STITLE>This is a short sentence to describe the story in brief</STITLE>
<STORY>This is the text of the news story</STORY>
</NEWS>
</BULLETIN>

So what I want to do is create a function that grabs the url (relative) from the PIC tag in the XML ("newssmall.jpg") and then uses this URL to display the image on the HTML page. This way, only the XML needs updating when updating the news section of the site.

Thanks for helping if you can,
Dan

using a javascript function to determine if a string is all digits or not and return result based off the decision. if it is all digits, mask all digits except the first two, if not all digits just return the string.

these are the snippets however i am not seeing anything returned in the column

Code:

<script >


var start = function RenderRC(CodeOwner) {

        var Rcode = CodeOwner.toString();

        var pattern = new RegExp("^\d{2,}$ ");

        if (Rcode.match(pattern)) {

            if (Rcode.length > 2)
             {
                var newcode = Rcode.substr(0, 2) + Array(Rcode.length - 2 + 1).join("*");
                return newcode;
            }

        }
          else 
        {
               return Rcode; 
        }
        
    };

</script>

 <ext:RecordField Name="CodeOwner" />


 <ext:Column Header="<%$ Resources:Text, CodeOwner %>"DataIndex="CodeOwner" Width="110" >
                <Renderer Fn ="start" />
                </ext:Column>

I'm working with greasymonkey scripts. Firefox JS console would always display GM script errors, but all of the sudden it stopped doing that. Script just won't load and no errors are displayed. I didn't touch any settings, yesterday they were showing fine, today none are displayed. Would appreciate any help.

I am currently using the JavaScript Light Box found on; http://www.huddletogether.com/projects/lightbox2/

I was wondering if it is possible, or easy enough to create something alike the one found on; http://www.whsmith.co.uk/Support/Hel...ffiliates.aspx when you click on; > How to become an affiliate > Complete the OMGuk.com affiliate application form.

Many Thanks, Tim

Howdy all.

I have Win 7, IE9.

I have a HTML file on my hard drive, with Javascript within. When I load the page, it keeps popping up Do u want to allow this content, I have to click to allow. I want to stop this, and after doing some searching I found the setting in Internet Options, Advanced - "Allow active content to run in files on my computer".

Perfect.

Doesnt work. When i check this box, the page loads without the warning, but then the Javascript just doesnt work.

Getting quite annoying, because this file is my home page.

Any help would be great!

I'm very new at JavaScript and I'm trying to get each of the if statements below in a text text box with the result depending on the answer of the equation. However i can't figure out a way to allow the user to click a button to to show the result in a text box. If anyone could help it would be much appreciated.
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript"> 
function calculate() {

A = document.form1.text2.value

B =(parseInt(A ) * 52) 

D= (parseInt(B ) * 0.015 ) 

if ( B <= 6000){
tax = 0;}

else

if (B <= 37001){

tax = (B - 6000) * .15;

} else

if (B<= 80001){

tax = (B - 37000) * .30 + (37000 - 6000) * .15;

} else

if (B <= 180001){

tax = (B- 80000) * .37 + (80000- 37000) * .30 + (37000 - 6000) * .15;

} else

tax = (B - 180000)* .45 + (180000 - 80000 begin_of_the_skype_highlighting**************180000 - 80000******end_of_the_skype_highlighting) * .37 + (80000- 37000) * .30 + (37000 - 6000) * .15;}


</script> 
</HEAD>

<BODY>
<form name="form1"> 
Weekly Salary: <INPUT TYPE="TEXT" NAME="text2">
<INPUT TYPE="BUTTON" VALUE="SUBMIT" Onclick="calculate();">

</BODY>
</HTML>

Box 1 - Box 2 / Box 3 and i put a round off number so the decimals dont give a million numbers

the problem is...the math is wrong now.... someone please help me fix this..

<!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>
<title>Calc</title>

<script type="text/javascript">

function calculate() {
var one = document.getElementById("one").value*1;
var two = document.getElementById("two").value*1;
var three = document.getElementById("three").value*1;
document.getElementById("answer").value=((one-two)/three);
;
}

</script>
</head>
<body>
Enter Number 1
<br>
<br><input type="text" id="one" /><hr>Enter Number 2<br><br><input type="text" id="two" /><br><br><hr>Enter Average number<br><br><input type="text" id="three" /><br><br><button onclick="calculate();">Calculate</button> <br id="result"></center></br> Total <input type="text" readonly="readonly" id="answer" /><br><br></center>

</body>
</html>

</td>
</tr>
</table>
</center>
</body>
</html>

Hi all,

I want to display varying company information from a javascript array randomly each time the page is refreshed. My problem is that the each piece of company information must be split up into 3-4 array elements since I have set up spans in the body where the information go accordingly and as such I don't how to randomize that.

The relevant code is (I will only give two company examples as it's a long list):

Code:

<script type="text/javascript" language='javascript'>    
     function compInfo(comp){
      var companyInfo = new Array();        
      if(comp == document.getElementById('test').innerHTML)
     {
       //insert business name here.    
       companyInfo[0] = 'Test';
       //insert business type here.
       companyInfo[1] = 'Media';
       //insert street name here.
       companyInfo[2] = 'Test Road.';
       //insert actual opening time here.
       companyInfo[3] = '5am - 10pm';
       //insert actual closing time here.
       companyInfo[4] = 'Christmas'; 
       //insert contact info here.
       companyInfo[5] = 'test'; 
       //insert web address here.      
       companyInfo[6] = '<a href="http://www.test.com" style="color: #0092DD; text-decoration: none;">test.com</a>';
       //insert image link here.
       companyInfo[7] = 'images/test.jpg';                
     }

      if(comp == document.getElementById('test1').innerHTML)
     {
      //insert business name here.    
       companyInfo [0] = 'Test1';
       //insert business type here.
       companyInfo [1] = 'Club';
       //insert street name here.
       companyInfo[2] = 'Test1 Road.';
       //insert actual opening time here.
       companyInfo[3] = '5am - 10pm';
       //insert actual closing time here.
       companyInfo[4] = 'Christmas'; 
       //insert contact info here.
       companyInfo[5] = 'test1'; 
       //insert web address here.      
       companyInfo[6] = '<a href="http://www.test1.com" style="color: #0092DD; text-decoration: none;">test1.com</a>';
       //insert image link here.
       companyInfo[7] = 'images/test1.jpg';
   }

      document.getElementById('title').innerHTML =companyInfo[0];
       document.getElementById('name').innerHTML = companyInfo[1]; 
       document.getElementById('street').innerHTML = companyInfo[2]; 
       document.getElementById('open').innerHTML = 'Open'; 
       document.getElementById('otime').innerHTML = companyInfo[3]; 
       document.getElementById('close').innerHTML = 'Closed'
       document.getElementById('ctime').innerHTML = companyInfo[4];     
       document.getElementById('contact').innerHTML = 'Contact';
       document.getElementById('cinfo').innerHTML = companyInfo[5];  
       document.getElementById('web').innerHTML = companyInfo[6];   
       document.getElementById('image').style.display =  'block';     
       document.getElementById('image').src =  companyInfo[7]; 


}
</script>
</head>
<body>
<SPAN ID='test' onclick="compInfo(document.getElementById('test').innerHTML);"><b>Test</b></SPAN>
<SPAN ID='test1' onclick="compInfo(document.getElementById('test1').innerHTML);"><b>Test1</b></SPAN>

//info shown he 
<div style='text-overflow: ellipsis;'>
                      <table cellpadding='0' cellspacing='0' border='0' style='height:178px; width:185px;'>
                      
                        <tr>                         
                           
                                             
                            <td align="left" style='height:25px;'>

                               <b><SPAN ID='title'  ></SPAN></b>
                            </td>
                        
                        </tr>
                        
                        <tr>                        
                             
                        
                            <td align="left" >
                                
                                
                                
                                  <SPAN ID='name' ></SPAN>
                                  
                                  <br />
                                  
                                  
                                  <SPAN ID='street'></SPAN>
                                  
                                  <div style='height:8px;'>

                                  
                                  </div>
                                  
                                  <SPAN ID='open'></SPAN>
                                  
                                  <br />
                                  
                                  <SPAN ID='otime'></SPAN>
                                  
                                  <br />
                                  
                                  <SPAN ID='close'></SPAN>
                                  
                                  <br />
                                  
                                  <SPAN ID='ctime'></SPAN>
                                  
                                  <br /> 
                                  
                                  <div style='height:8px;'>

                                  
                                  </div>
                                  
                                  <SPAN ID='contact'></SPAN>
                                  
                                  <br />
                                  
                                  <SPAN ID='cinfo'></SPAN>                         
                                  
                                  <SPAN ID='web'></SPAN>
                                   
                                  <img ID='image' style='display:none;'></img>  
                                
                                
                            </td>
                            
                            
                        
                        </tr>                      
                      
                    
                      
                      </table>
                  
                  
                  </div>

</body>

So essentially the process is:
1. The person clicks on the company name.
2. Relevant information from the array is shown in the div.

But what I want is that on startup, information about a random company is shown automatically. How can I achieve this?

Thanks.

I typed this code straight out of the book and it just doesn't seem to work. I have the headlines on the left side and when clicked the contents of the headline is supposed to show up in the text box on the right. Well, needless to say, nothing appears. Please someone tell me what I am doing wrong. I am not the only person in the class having this issue. Thanks a million.

Code:

<!DOCTYPE HTML>

<!--mwelborn-->
<!--Chapter 8 Page 475-->
<!--October 25, 2011 -->

<html>

<head>

<title>News Items</title>

<script type="text/javascript">
/* <![CDATA[ */

var newsItem1 = "L'AQUILA, ITALY (AP) - L'Aquila's
		 chief prosecutor announced an investigation
		 into allegations of shoddy construction as
		 people sill missing after a devastating
		 earthquake five days ago.
		 http://in.reuters. com/article/
		 idUSWBT01103020090411;

var newsItem2 = "WASHINGTON (Reuters) - President
		Barack Obama said on Friday the recession-
		hit US economy was showing 'glimmers of
		hope' despite remaining under strain and
		promised further steps in coming weeks to
		tackle the financial crisis.
		http://in.reuters.com/article.
		idUSWBT01103020090411";

var newsItem3 = "(eweek.com) - Apple is close to
		hitting 1 billion downloads from its App
		Store and plans on a prize giveaway fo
		whoever downloads the billionth application
		that includes a MacBook Pro and an iPod
		Touch. http://www.eweek.com/c/a/
		Application-Development/eWeek-Newsbreak
		-April-13-2009/";

var newsItem4 = "ATLANTA (AP) - Chipper Jones
		drove in two runs, including a tiebreaking
		single, and the Atlanta Braves beat
		Washington 8-5 on Sunday to hand the
		Nationals their sixth straight loss to
		start the season.
		http://www.newsvine.com/_news/2009/04/11
		2667835-jones-braves-beat-winless
		-nationals-8-5?category=sports";
/* ]] */
</script>
</head>

<body>

<form name="newsHeadlines" action=""  method="get">
	<table style="border: 0; width: 100%">
	      <tr valign="top">
		<td>
		     <select name="newsHeadlines" multiple="multiple"
		      style="height: 93px">

			<option onclick="document.newsHeadlines
			.news.value=newsItem1">
			Investigation of building standards in
			quake zone</option>

			<option onclick="document.newsHeadlines
			.news.value=newsItem2">
			Obama sees signs of economic progress</option>

			<option onclick="document.newsHeadlines
			.news.value=newsItem3">
			Apple App Downloads Approach 1 Billion</option>

			<option onclick="document.newsHeadlines
			.news.value=newsItem4">
			Jones, Baves beat winless Nationals 8-5</option>

		      </select>
		</td>
		<td>
		     	<textarea name="newsHeadlines" cols="50" rows="10"
		     	style="background-color: Transparent"></textarea>
		</td>
	      </tr>
	</table>
</form>

</body>
</html>

Hi,

I am creating a webpage to display menu items in a div tag.
The premis of my page is to use 4 div tags.
1st div tag = company logo (top left)
2nd div tag = img of restaurant and address (top right).
3rd div tag = horizontal menu with text or buttons to call up menu items, for example: Lunch: Dinner: Beverages: Driving Directions, etc
4th div to display content pages. For example, if the user clicks the Lunch button, it would call the lunch page and place it into the 4th div tag.

I am able to do this with frames in HTML or content pages in ASP.net, but how would I do it using CSS and div tags.

The best response I got was with AJAX, but I am not familiar with this language yet.

Can I use JavaScript to do this?

Any suggestions?

Thank you,
Paul

I have a div that changes background on click.
Example:

<script type="text/javascript">

function changeBackground(strURL)
{
document.getElementById('about').style.backgroundImage="url("+strURL+")";
}

</script>

<body>

<div id="about">
<a href="#about" onClick="changeBackground('mainbackground.jpg');">text</a>
<a href="#about" onClick="changeBackground('background2.jpg');">text</a>
</div>

This part works just fine so no issues.

However, I have content on the mainbackground.jpg that is getting transferred over to the other backgrounds as well.

I would like each background to have its own paragraph content. I do not want to embed the info into the images for SEO reasons.

Any ideas on how to do this?

Thanks!