JavaScript - Actively Change/update Content In A Specific Part Of A Page

Hi, I have this PHP code that shows the amount of minutes and seconds to a certain date. Somehow I want to update this code every second so that it looks like it's counting down. Anyone who has any good pointers how to do this?
Thank you in advance.

The project I am working on involves a flash piece that communicates with a iframe. Currently the flash piece just calls on javascript functions. I want the buttons in the flash piece to be able to change the src of the iframe.

PHP Code:
<script type="text/javascript">

document.getElementById('video').setAttribute('src',address2);

function closeVideo() {
   document.getElementById('video').style.height='0px'; return false;
   document.getElementById('video').setAttribute('src', address2);
   }
function openVideo() {
        document.getElementById('video').style.height='391px'; return false;
        document.getElementById('video').setAttribute('src', address);
}  
</script> 


So the way the code works now is when the page loads it sets the iframe with the id of 'video' to the variable address2 which it pulls from an XML file. In the flash piece when a button is hit, it calls openVideo() which "opens" the iframe and I want it to change the contents to address. This does not work though. It opens the frame but will not change the src.

I've tried a bunch of different things now such as make the flash target the iframe using navigateToURL(request1, 'video'); but in Firefox and IE is opens it stills as if I had _blank in there. It does strangely work in Safari.

Any ideas how to get this to work? I'm new to javascript so it could be something basic I'm overlooking

Code is triggered on the following page when mouse position leaves a profile link while logged in: http://www.veinsfetiche.com/forums/

Code:

<script type="text/javascript">
// <![CDATA[
	
	// show the popup
	function show_popup(UserID) {
		if(http_getuser) { 
			
			//get user data and show popup
			sendRequest(UserID);
		}
	}
	
	// hide the popup
	function close_popup() {
		document.getElementById('popup').style.display='none';
	}
	
	// Make the request
	function createRequestObject() {
		if(window.XMLHttpRequest){
			ro = new XMLHttpRequest();
		} else if(window.ActiveXObject) {
			ro = new ActiveXObject("Msxml2.XMLHTTP");
			if(!ro) {
				ro = new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
		return ro;
	}
	
	//Create Request Variables
	var http_getuser = createRequestObject();
	
	//Send Request for user info
	function sendRequest(UserID) {
		var userinfo_url = '{AJAX_USERINFO_PATH}';
		http_getuser.open('get', userinfo_url.replace('USERID', UserID));
		http_getuser.onreadystatechange = handleResponse;
		http_getuser.send(null);
	}
	
	// fill in the response
	function handleResponse() {
		if(http_getuser.readyState == 4 ){
			var xmlDoc = http_getuser.responseXML;
			if(xmlDoc.hasChildNodes()) {
				document.getElementById('ajax_username').innerHTML = xmlDoc.getElementsByTagName('username')[0].firstChild.nodeValue;
				document.getElementById('ajax_registert').innerHTML = xmlDoc.getElementsByTagName('regdate')[0].firstChild.nodeValue;
				document.getElementById('ajax_posts').innerHTML = xmlDoc.getElementsByTagName('posts')[0].firstChild.nodeValue;
				document.getElementById('ajax_website').innerHTML = xmlDoc.getElementsByTagName('website')[0].firstChild.nodeValue;
				document.getElementById('ajax_from').innerHTML = xmlDoc.getElementsByTagName('from')[0].firstChild.nodeValue;
				document.getElementById('ajax_last_visit').innerHTML = xmlDoc.getElementsByTagName('lastvisit')[0].firstChild.nodeValue;
				document.getElementById('ajax_rank').innerHTML = xmlDoc.getElementsByTagName('rank')[0].firstChild.nodeValue;
				document.getElementById('ajax_avatar').innerHTML = xmlDoc.getElementsByTagName('avatar')[0].firstChild.nodeValue;								//document.getElementById('ajax_add').innerHTML = xmlDoc.getElementsByTagName('add')[0].firstChild.nodeValue;
				
				//Apply style which makes profile info visible
				document.getElementById('popup').style.display='block';
				
				//Get height of popup
				var getRefById = function() {return null;};

				if(document.getElementById) {
					getRefById = function(i) {return document.getElementById(i);};
				} else if(document.all) {
					getRefById = function(i) {return document.all[i] || null;};
				}

				var d = getRefById('popup'), h = '0px', o;

				if(d) {
					if((o = document.defaultView) && o.getComputedStyle) {
						h = o.getComputedStyle(d, null).height;
					} else if('number' == typeof d.offsetHeight) {
						h = d.offsetHeight + 'px';
					}	
				}
				// 'h' should now contain the height of 'myDiv', or 0px
				//alert(h);
				//make room for popup
				document.getElementById('test').style.height= h;
			}
		}
	}
	
	// set popup to mouse possition
	function set_div_to_mouse(e) {
		//Make x and y cord vars
		var docX, docY;
		//get page info
		 if(e) {
			if(typeof(e.pageX) == 'number') { docX = e.pageX; docY = e.pageY;}
			else {docX = e.clientX; docY = e.clientY;}
		//vert
		} else {
			e = window.event;
			docX = e.clientX; docY = e.clientY;
			if(document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
				docX += document.documentElement.scrollLeft; docY += document.documentElement.scrollTop;
			}
			else if(document.body && (document.body.scrollTop || document.body.scrollLeft)) {
				docX += document.body.scrollLeft; docY += document.body.scrollTop;
			}
		} 
		//hor
		if (docX > document.body.offsetWidth - 400) {
			document.getElementById('popup').style.left = (docX - 350) + "px";
		} else {
			document.getElementById('popup').style.left = (docX - 5) + "px";
		}
		document.getElementById('popup').style.top    = (docY + 30) + "px";
	}
	//document.onmousemove = set_div_to_mouse;
// ]]>

</script>

<div id="test">
<div class="forabg" id="popup" style="width: 90%;">
   <div class="inner">
      <span class="corners-top"><span></span></span>
      <ul class="topiclist fullwidth">
         <li class="header"><dl><dt>{L_READ_PROFILE}</dt></dl></li>
      </ul>
      <ul class="topiclist forums">
         <li><dl>
            <dd style="width:100%">
                <table>			   <tr>			   <td><div id="ajax_avatar"></div></td>			                  <td><strong>{L_USERNAME}:</strong> <span id="ajax_username"></span><br />               <strong>{L_TOTAL_POSTS}:</strong> <span id="ajax_posts"></span><br />               <strong>{L_SORT_RANK}:</strong> <span id="ajax_rank"></span><br />               <strong>{L_JOINED}:</strong> <span id="ajax_registert"></span><br />               <strong>{L_LAST_VISIT}:</strong> <span id="ajax_last_visit"></span><br />               <strong>{L_LOCATION}:</strong> <span id="ajax_from"></span><br />               <strong>{L_WEBSITE}:</strong> <span id="ajax_website"></span><br/>			   <span id="ajax_add"></span>			   </tr>			   </table>
               <br/ style="clear: both;">
            </dd>
         </dl></li>
      </ul>
      <span class="corners-bottom"><span></span></span>
   </div>
</div>
</div>

When my code hits line 80, the height of a div tag is increased to make room for expanding content, so that the new content does not overlap already existing content. When the div tag's height increases, this increases the overall page height. When the page height increases, then the scroll bar stays in the same place, but the page position changes in the browser. Is there anyway to prevent the viewer's position from changing when room is made for the expanding content?

Hi,

The Problem
I am trying to create a Google Translate widget on my webpage, with just one language pair, Latin to English. Unfortunately the Google Translate AJAX API only supports a subset of all languages available, and Latin is not included. However, Latin IS included on the Google Translate website. Apparently languages that are in beta are available there, via a different server, while only fully released languages are available via the AJAX Translate API.

My Attempts at Solutions

a) I wrote a script that generated the XMLHttpRequest() call to the server the Google Translate website uses, but it always returned a '0' status code. I have since found out that this is normal, as these kinds of calls can only be made between pages on the same server.


b) I then wrote a script that created a popup, and used the baseURL+params for the URL, , and this produced a pop-up window containing the translation result. However, as that page came from a different server to the server containing the script, I could not access the results on it. The code for that is he

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,locationbar.visible=false,status=0,menubar=1,resizable=0,width=500,height=400,left = 710,top = 400');");
window.focus();
}
// End -->
</script>
</head>

<body>

<form>
<input type=button value="Open the Popup Window" onClick="javascript:popUp('http://translate.google.com/translate_a/t?client=t&q=vicecomes&sl=la&tl=en&pc=0')">
</form>

</body>
</html>

c) So, in final desperation I wrote a small script with an IFrame in it that shows the Google Translate webpage, using this code:

Code:

<iframe name="frame1" src="http://translate.google.com/?sl=la&tl=en#la|en|" frameborder="0" scrolling="auto" style="width:100%;height:280px;"></iframe>

The result can be seen here (click on the Latin-Help tab):

http://www.blanshard.org/

Not too bad. Now I would like to just to tidy this up (until Latin comes out of beta and is moved to the Google Translate AJAX API server) I would like to move the Google Translate page up a few px so that the top menu does not show, and disable the scrollbars, so I am just framing the Translation box and result area. It appears that the top-left corner of the called page always aligns with the top-left corner of the IFrame, but I want to add offsets.

Is it possible to offset the called page anywhere within the IFrame so I can frame just the part I want?

Thanks for any help,

Wibs

I've got an idea for simplifying my code and avoid a bunch of switch functions but don't know how, though I assume it's possible.

How do I write a function to change/insert only part of an img src?

in other words something along the lines of

if url contains: "/folder1/folder3/";

change this to: "/folder1/ folder2 /folder3/";