JavaScript - Javascript Static Updating...?

I'm looking for a simple code to perform this function I'm 3/4 of the way there but need some help.

I have a static GIF that is swapped for an animated gif after an onclick event. I want the animated gif to have a clickable URL that is activated once the user clicks on the static GIF.

Here is the current code I have to show the animated gif from the onclick event, how do I add a web site URL to make the animated.gif a clickable image link?

Code:

<img src="static.gif" width="620" height="549" onclick='javascript:(this.src=="static.gif"?this.src="animated.gif":"")' /></a>

I have a google static map which I spent ages trying to work out what to put in it and now it will not work, or be valid, so I am doing something wrong? Can anyone help Have I set it out the right way, I know it is static but it is still JS I believe.

Code:

<p><img alt="google_static_map" src="http://maps.google.com/maps/api/staticmap?center=51.454863,0.011673&zoom=13&markers=United+Reformed+Church,+111+Burnt+Ash+Road,++Lee,+London+SE12+8RG,+UK&size=250x250&sensor=TRUE /></a></p>

DO I need to put in it a div? I cant do iframes. My editor does not like it at all and it is not showing on the website. I am using XHTML

Hi guys,

I was wondering if anyone knows how I can achieve this static footer as seen on this site http://garcya.us/blog/80-vector-tags/

I assume its javascript which gives you the option of hiding the bar or letting it present vearious social site links etc?

Thanks in advance!

Kyle

Hello.

I'm creating a simple auto updating script based on PHP and using jQuery to set the interval to 1000 miliseconds. It works in FireFox, as the only one I've tested so far, but in Internet Explorer (Version 7 right now, didn't test others) it just freezes and doesn't auto update. Doesn't auto update either if I refresh the page, so something's messed up here.

I'm using the same way of auto updating on other things, such as a chat-page - works on those in all browsers, so I'm kinda on a lost track here.

Here's the JavaScript/jQuery:
Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function loadContent() {
	$('#count').load('counter.php', function() {
        setTimeout("loadContent()", 1000);
    });
    return false;
}
$(loadContent);

And this is what I put on the body of the page:
Code:

<div id="count"></div>

Can anyone see what my problem is? And any workarounds for this?

Hi,
I am creating a web page which automatically updates one image every 5 seconds. I use ajax to fetch a new img url every 5 seconds, and then update the image by changing img.src.

I tested the same (in IE8, firefox) and it worked without any issues in my development server. But, when I try to put it on production server, many people are complaining that they are not able to see any image at all.
Code:

if (url_received){
	var path = url.substring(url.indexOf("/"));
	var img = document.getElementById("testimage");
	img.src = "/test/media/" + path;
}

I cannot think of a reason why this is failing for others. Is this due to any security issues? If someone helps me out, I would be very thankful.

Hi I am making a PC customization website, And I need help wit hthe inputs where you select the parts for the PC.

Anyway, I need help for self updating inputs, Like if a user was to select a socket 775 processor, The form would automatically update the motherboard field from --Select a processor-- to a list of socket 775 motherboards.

I am quite new at javascript I have never attempted to do anything like this myself, Although I don't know if this would need some PHP in here as well

Anyway thanks in advance,

Gergy

Hi - I am updating a site for a friend as the original designer has gone missing.. I am no developer by any means but know basic html etc..

I want to change a link in the drop down menu.js file, have opened it in my text editor and changed the link that needs changing to a diff page but it isn't updating on the site - arghhh!!

I have notice at the top of the page it has:

// QuickMenu Pro, Copyright (c) 1998 - 2003, OpenCube Inc. - http://www.opencube.com

does this have anything to do with it?

I can't find anything on google - any advice is greatly appreciated.
Thanks

In a form I have two input boxes (ids of return1 and return2) with default values of 0 and a span element (id return3). The span's value is initalized to 0 on page load, and it updates when a button is clicked that calculates x - value of return1 - value of return 2, where x is calculated elsewhere.

Form code:

Code:

Month 1: <input size="7" type="text" value="0" id="return1" name="return_1">
<input type="button" value="Calculate Remaining Amount" onClick="thirdReturn();">
Month 2: <input size="7" type="text" id="return2" value="0" name="return_2">
Month 3: <span style="color:black; font-size:14px;" id="return3"></span>

ThirdReturn code:

Code:

function thirdReturn()	{
	var first_return = document.getElementById("return1").value;
	var second_return = document.getElementById("return2").value;
			
	first_return = first_return.replace(/\,/g,'');
	second_return = second_return.replace(/\,/g,'');
			
	var combined = Number(first_return) + Number(second_return);
			
	if (typeof this.remaining_pipp_amount == "undefined") {
		alert('Please select a Flex option');
	}
	else{
		if (combined > this.remaining_pipp_amount){
			alert('Return Amount Exceeds Credit Amount');
		}
		else{
			var temp = this.remaining_pipp_amount - combined;
			var third_return_amount = document.getElementById("return3");
			third_return_amount.innerHTML = addCommas(Math.round(temp));
		}
	}
}

I am trying to change it so that if return2 is zero when the button is clicked, return2 = x - return 1. Here is what I have:

Code:

function thirdReturn()	{
	var first_return = document.getElementById("return1").value;
	var second_return = document.getElementById("return2").value;
			
	first_return = first_return.replace(/\,/g,'');
	second_return = second_return.replace(/\,/g,'');
			
	var combined = Number(first_return) + Number(second_return);
			
	if (typeof this.remaining_pipp_amount == "undefined") {
		alert('Please select a Flex option');
	}
	else{
		if (combined > this.remaining_pipp_amount){
			alert('Return Amount Exceeds Credit Amount');
		}
		else{
			var temp = this.remaining_pipp_amount - combined;
			if (second_return == 0){
				var new_second = document.getElementById("return2")
				new_second.innerHTML = Math.round(temp);
			}
			else{
				var third_return_amount = document.getElementById("return3");
				//alert (temp);
				third_return_amount.innerHTML = addCommas(Math.round(temp));
			}
		}
	}
}

Does anyone know why this doesn't work or what can be done to fix it?

Thank you!

In the code below I have an iframe that acts as a WYSIWYG editor. On load a link is loaded inside the iframe. When you click the link a div opens that displays the URL of that link. Upon changing the link inside the DIV I want to update the href tag that I clicked.

I've experimented with pasteHTML/execCommand("inserthtml") however this only updates the link when you select the text before clicking (as opposed to just clicking on the link), otherwise it inserts a whole new link.

I'm trying to get this working across IE, Firefox, Opera, Chrome and Safari.

I'd happily pay someone (Paypal) to help me with this.

Code:

<html>
<body>

<script language="JavaScript">

// Initialize WYSIWYG
function initialise() {

	// HTML code to paste
	var html = "<a href='http://www.google.com'>Click Me</a>";
	
	if (detectBrowser() == "ie") {
	
		// IE
		editorContent.document.designMode='on'; // turn on design mode
		editorContent.document.attachEvent("oncontextmenu", showContextMenu); // add listener for context menu
		editorContent.document.attachEvent("onclick", showContextMenu); // add listener for context menu
		
		// Paste the HTML code in iframe
		document.editorContent.focus();
		range  = editorContent.document.selection.createRange();
		range.pasteHTML(html);
		document.editorContent.focus();
		
	} else {

		// FF, Saf, Chr, Op
		document.getElementById("editorContent").contentDocument.designMode='on'; // turn on design mode
		editorContent.document.addEventListener("contextmenu", showContextMenu, true); // add listener for context menu
		editorContent.document.addEventListener("click", showContextMenu, true); // add listener for context menu
		
		// Paste the HTML code in iframe
		editorContent.focus();
		editorContent.document.execCommand("inserthtml", false, html); 
		editorContent.focus();
			
	}
}

// Show Context Menu
function showContextMenu(e) {

	// Get the URL from the clicked link
	if (detectBrowser() == "firefox") {
	
		url = e.target.href;
	
	} else {

		url = document.getElementById('editorContent').contentWindow.event.srcElement.href;
	}
	
	// Set the URL in the pop-up and load it
	document.getElementById("theUrl").value = url;
	document.getElementById("popUp").style.visibility = 'visible';
	document.getElementById("popUp").style.display = '';

	if (navigator.appName != "Microsoft Internet Explorer") {
		e.stopPropagation();
		e.preventDefault();
	}

	return false;
}

// Update the URL
function updateUrl() {

	newUrl = document.getElementById("theUrl").value;

	alert('Update the URL to '+newUrl);
	
	/*******************************************/
	/* WHAT TO DO HERE TO UPDATE URL IN EDITOR */
	/*******************************************/
	
	document.getElementById("popUp").style.visibility = 'hidden';
	document.getElementById("popUp").style.display = 'none';

}

// Detect browser
function detectBrowser() {

	var userAgent = navigator.userAgent;
	var browser;

	if (userAgent.indexOf("MSIE") !=-1)
		browser = "ie";
	if (userAgent.indexOf("Firefox") !=-1)
		browser = "firefox";
	if (userAgent.indexOf("Chrome") !=-1)
		browser = "chrome";
	if (userAgent.indexOf("Safari") !=-1)
		browser = "safari";
	if (userAgent.indexOf("Opera") !=-1)
		browser = "opera";

	return browser;
}

</script>

<div id="popUp" style="width:250px; height:60px; border: 1px solid black; visibility:hidden; display:none; position: absolute; left: 300px; background-color:yellow; padding: 10px">
<form>
<input type="text" id="theUrl" size="30">
<p><input type="button" value="Update" onClick="updateUrl()">
</form>
</div>

<iframe id="editorContent" name="editorContent" width="200" height="200" frameborder="1" onLoad="initialise();"></iframe>

</body>
</html>

I am fairly new to JS so please have patenience with me.

What I am codeing is essentialy some digital signaage for my office. I will have a calender that updates through several screens with information in them.

The basic page stays the same but the content is loaded into a large iframe in the center of the page and each html file loaded into the iframe is changed using meta tags.

This is a touch screen so I want control along the bottom of the screen.

I have did this very crudely with css and html. But I would like to refine it a little more with javascript.

I want javascript to control the content of the iframe and javascript to control the buttons along the bottom to manual switch to a diffferent screen along with a button that stops the auto reloading of the page.

Here is where I am so far. I have the javascript to automatilly change the iframe src but I need help with the nav buttons and the stop button. Right now the nav buttons are still using the regular <a> tags targeting the iframe.

Code:

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="created" content="Thu, 21 Jul 2011 15:16:57 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<script type="text/javascript">
var frames = Array('cal11,html/', 10,
'cal22.html/', 10,
'cal33.html/', 10,
'cal55.html/', 10
'cal66.html/', 10,
'cal77.html/', 10,
'cal44.html/', 15,);
var i = 0, len = frames.length;
function ChangeSrc()
{
if (i >= len) { i = 0; } // start over
document.getElementById('frame').src = frames[i++];
setTimeout('ChangeSrc()', (frames[i++]*1000));
}
window.onload = ChangeSrc;

</script>


	<title>Calender</title>
  </head>
  <body>


<div align="center"><iframe src="" name="frame" id="frame" width="900" height="476" frameborder="0" scrolling="no"></iframe>
	 </div>
<ul class="solidblockmenu">
<li><a href="calstart.html">Instructions</a></li>
<li><a href="cal11.html" target="frame">Month View</a></li>
<li><a href="cal22.html" target="frame">Week View</a></li>
<li><a href="cal33.html" target="frame">Agenda</a></li>
<li><a href="cal55.html" target="frame">Current Projets</a></li>
<li><a href="cal66.html" target="frame">Bidding Projects</a></li>
<li><a href="cal77.html" target="frame">Open Service Calls</a></li>
<li><a href="cal44.html" target="frame">General Information</a></li>
<li><a href="??????????" target="frame">Stop Scroll</a></li>
</ul>



</body>

</html>

Hi guys,

I've had a little trouble with this and haven't been able to find answers on google. I'm trying to set up a new window that contains a button. Then, if the user clicks the button, the window would display new information accordingly. I have written a simple test that won't seem to work:

Code:

<html>
<head>
<script language="Javascript" type="text/javascript">
var count = 0;
function Window() {
	MyWindow = window.open('', 'myWin', 'height=250,width=250')
	MyWindow.document.write('<html>')
	MyWindow.document.write('<head>')
	MyWindow.document.write('<\/head>')
	MyWindow.document.write('<body>')
	MyWindow.document.write('<FORM method="post" name="aname">')
	MyWindow.document.write('<INPUT type="button" onclick="newfunc()" name="test" value="Click Me"\/>')
	MyWindow.document.write('<\/FORM>')
	MyWindow.document.write('<\/body>')
	MyWindow.document.write('<\/html>')
	MyWindow.focus()
}
function newfunc() {
	count++
	MyWindow.document.write(count)
}
</script>
</head>
<body>
<FORM method="post" name="me">
<INPUT name="opendis" value="Open Window" type="button" onclick="Window()"/>
</body>
</html>

I am probably doing something very wrong. Is there a way for this to work? Thanks!

Resolved

Hello Guys,

I have a question here..

I have a scroller on my pages that basically reads a text file and displays.. The problem that I am having is it doesn't update until I reload the page(even though the .txt file updates about every 3 minutes).. I would like it to update when the file has been changed..

Here is my page.

PHP Code:
<link rel="stylesheet" href="../../css/li-scroller.css"  type="text/css">
<script src="../../js/jquery.li-scroller.1.0.js" type="text/javascript"></script>
 <script type="text/javascript" src="../../jquery-1.6.1.min.js"></script>
   <script type="text/javascript">
       $(function(){
    $("ul#ticker01").liScroll();
    }); 
</script>

<?php 
 $file = file_get_contents ('playingnow.txt'); 
 
 ?> 
<div class="scrollpos">
    <ul id="ticker01">
    <li><a href="#"><?php Echo $file;?></a></li>
    
    <!-- eccetera -->
    </ul> 

</div>

What can I add to make it go out and reload just the div not the entire page?

Please advise..

All, first post on the forum. I hope this is relatively simple. I've looked around for the answer, but I thin think the search terms (update onchange event) are a bit too common...

Code:

document.getElementById("tester").innerHTML= "hello";
document.getElementById("tester").onmouseover = "alert('hello')";

You see I'm trying to change an event like I'd change a property. The first will change the text to hello. I'd like the second to change the onmouseover event to display a hello world alert... but it doesn't seem to do anything.

How can I change events?

Jason

What am I doing wrong here? I am trying to make it where the user can name the link whatever he/she wants.... I think it might be this part... links[i] = name.linkPosition.value; Where linkPosition is a variable. Can I do this? Or is there another way?


Code:

<div id="navBar">
	<ul>
    	<li><a href="#" id="link0"><script>document.write(links[0]);</script></a></li>
    	<li><a href="#" id="link1"><script>document.write(links[1]);</script></a></li>
    	<li><a href="#" id="link2"><script>document.write(links[2]);</script></a></li>
    	<li><a href="#" id="link3"><script>document.write(links[3]);</script></a></li>
    	<li><a href="#" id="link4"><script>document.write(links[4]);</script></a></li>
	</ul>	

</div><!--end navBar -->


<form>
<label style="color: #FFF;">Change name of links! You can only change them once!</label><br />
<input type="text" class="customLink" size="15" name="link0"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>

<input type="text" class="customLink" size="15" name="link1"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>

<input type="text" class="customLink" size="15" name="link2"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>

<input type="text" class="customLink" size="15" name="link3"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>

<input type="text" class="customLink" size="15" name="link4"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>

<input type="button" onclick="replaceLinks(this.form)" value="Replace Link Names!"  />
</form>

Code:

<script>

var links = new Array("home", "portfolio", "stuff", "about me", "contact");

function replaceLinks(name){

	for (var i=0; i<=4; i++) {
		var linkPosition = "link"+i;
	links[i] = name.linkPosition.value;
		changeLink(i);
	}
	
}

function changeLink(number) {

document.getElementById("link"+number).innerHTML="<span style=\"text-transform: capitalize;\">" + links[number] + "</span>";	
}
</script>

ANY HELP WOULD BE AWESOME!!!

I just replaced the functions to look like this...

Code:

function replaceLinks(name){

	for (var i=0; i<=4; i++) {
	links[i] = name.linker+i.value;
		changeLink(i);
	}
	
}

function changeLink(linkNumber) {

document.getElementById("link"+linkNumber).innerHTML="<span style=\"text-transform: capitalize;\">" + links[linkNumber] + "</span>";	
}

Now the links are updating but I get NaN for each link.