JavaScript - Getting Content Of Iframe To Change After Page Has Loaded

It's a well documented issue-
when you have a page that contains an iframe, and then navigate inside the iframe, hitting the browsers back button will only affect the contents of the iframe and not the entire page. I've been searching all over for solutions and cant find one that works for my current implementation.
Anyone have any suggestions?
Here is my code:
js
Code:

function ShowPage(frame)
 {
  frames[0].location = frame+'.html'
  frame.contentWindow.location.replace(newUrl);
  }

Buttons that change the contents of the iframe
Code:

<div id="thumb1"><a onmouseover="ShowPage('frame1')"onclick="ShowPage('frame1')" rel="nofollow" target="mainbox"></a></div>
<div id="thumb2"><a onmouseover="ShowPage('frame2')"onclick="ShowPage('frame2')" rel="nofollow" target="mainbox"></a></div>
<div id="thumb3"><a onmouseover="ShowPage('frame3')"onclick="ShowPage('frame3')" rel="nofollow" target="mainbox"></a></div>

and then the iframe itself
Code:

<iframe src="frame1.html" type="text/html"  style="border-width:0; border-style:hidden;" transparency="true" name="mainbox" frameborder="0" scrolling="no" width="700" height="807">
</iframe>

Ok, I am aware this will sound like a plug for my script, but please bare with me. I created a bookmarklet script to help me audit extremely large style sheets.

Basically while on a site that you would like to audit, you click the bookmarklet and the document's body contents gets remove and replaced with an iframe that points to the current sites home page. From here you can choose what style sheet (the script finds) to begin reporting over. The more pages you browse (through the iframe) the more accurate the report gets.

My problem however, is if the person is on the site's home page when first running the script, the iframe never loads up. I think it has to do with the fact that you are on the home page, and then the iframe tries to point to the home page as well and fails for some reason.

Is there any solution that comes to mind for anyone out there?

You can test it by bookmarking this bookmarklet and running it on any site's home page where style sheets can be found:

Get The Bookmarklet on this page

Again, it works great if you don't start the script from a sites home page.

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?

I am current building an information database for the company I work at...basically just a place for employees to get information and answers from. It is all hosted on a local server and I can only use javascript, html, and css. Ive got everything made there is just one thing i want to add to it. basically an "alerts and updates" page that only some people can edit without having to know html so if im not there they can post important updates. no computers have access to the internet so I did try some rich text editors but none of them worked. the lay out I'm going for is kind of like this.
------------------------------------
Alerts and Updates

Click on links to show updates: update 1 * update 2 * update 3 * update 4

stuff goes in the update

[edit button]
-------------------------------------
you click edit it prompts you to login, bring up something to edit the text in that specific update you hit submit and it changes the info that was on there.

The update links are linked to a script i wrote that just display the info below so when the page loads you see whats in update 1 then you click update and it changes the content to the next one.

i dont know if there is any way to do this in javascript and html. any help or a good direction to start would be great...thanks.

Hi

As title says :
"How to hide div so his content won't be loaded until he is visible?"

And is it possible to add preloader for that div?

I'm trying to write a progressively enhanced web application. I have an index page and a form with some select boxes and some radio buttons on a different php page. Before enhancement occurs, the form is accessible via regular links and everything works as expected. No issues.

In the enhanced version of the application, the form is AJAXed into the index page. When this occurs, the select boxes in the form work perfectly. The radio buttons are initially unchecked and I can check one option as usual. However, once one is checked, clicking the other radio options does nothing. I am unable to check a different option.

Anybody got a clue what the problem is?

Using Chrome by the way. Firefox is the same as Chrome. In IE I can't even check a radio button the first time.

Here's the code that's ajaxed in:

Code:

<label>First Time Buyer Status

  <!--These values can't be 1/0 because 0 stands for not set-->
  <input type="radio" name="FTB" id="FTBYes" value="1" <?php $M->checkFTBValue(1); ?> title=""/>First Time Buyer

  <input type="radio" name="FTB" id="FTBNo"  value="2" <?php $M->checkFTBValue(2); ?> title=""/>Not First Time Buyer
</label>

The PHP script you see there checks if the value on the server matches the value of the radio button and echo's checked="checked" if true. I thought this could be causing the problem initially but the exact same code is used in the non-enhanced version and it works fine. I tried commenting it out anyway but it makes no difference.

The only thing I can think of is that some javascript is preventing me from selecting a different radio option. That would explain why it works ok in the non-enhanced version because there is no JS there. I can't find anything that I've written that might cause this effect I'm using jQuerys form plugin on my pages. I'm going to try writing it out and see if that fixes anything. Any body ever experience a similar problem with this?

In the mean time, is there a way I can check if any JS functions when I click on the radio button?


Sorry if this is in the wrong forum, there's so many different languages involved, I hadn't a clue where to put it.

i have an iframe on my webpage and i am loading appropriate page in it by clicking
appropriate button but when user logs out and at that time some page is opened in iframe corresponding to the login pages(like "edit profile") of user then at that moment i want to know that what page is loaded in iframe so that i close it(if it corresponds to pages of login like "edit profile") as user logs out and if it does not correspond to login pages then it remains as it is.For doing that i must know that what page is loaded in iframe and compare it in " if(condition){statement} in logout function" with the logion pages so that i know that if any of them is loaded in iframe and if loaded then close it.Can you help me with that by giving exact code example.

Im running js to do some color coding in a table, i tried adding the onload but its not working, can someone take a look ? I need this to run when the entire page is fully loaded and not before.

THE FUNCTION
Code:

var table1_column_settings = [
    [32,40],          // ito score - First column values more than 5 will be red, 2-5 will be yellow, less than 2 will be green
    [11,12],          // schedule
    [14,15],           // cost
    [11,12],	      // execution
    [9,10],	      // commercial
    [41,50]          // total
    ];


// Loop through all cells in a table, coloring each one according to column-specific thresholds
function color_cells(table, column_settings)
{
    // How many rows are in the table?
    var num_rows = table.rows.length;
    
    // Loop through all rows.
    for (var r = 0; r < num_rows; r++)
    {
        // Get a reference to the current row.
        var this_row = table.rows[r];
        // How many cells are in this row?
        var num_cells = this_row.cells.length;
        
        // Loop through all cells in this row.
        for (var c = 0; c < num_cells; c++)
        {
            // Get a reference to the cell.
            var this_cell = this_row.cells[c];
            
            // Get the numerical value of the first (and only) node inside the cell.
            var cell_value = parseFloat(this_cell.firstChild.nodeValue);
            // If it's a number (literally if it's not not not-a-number)
            if (!isNaN(cell_value))
            {
                // Apply the color according to the thresholds for this column number (c).
                if (cell_value > column_settings[c][1]) this_cell.style.backgroundColor= "red";
                else if (cell_value > column_settings[c][0]) this_cell.style.backgroundColor= "yellow";
                else this_cell.style.backgroundColor = "green";
            }
        }
    }
}

EXECUTE THE FUNCTION
Code:

</TBODY>
</table>

<script> color_cells(document.getElementById("table1"), table1_column_settings);</script>

//I TRIED LIKE THIS <script> window.onload=color_cells(document.getElementById("table1"), table1_column_settings);</script> AND IT DIDNT WORK

My source :

Code:

<html>
<head>
<title></title> 
<script type="text/javascript">
function runcode(cwin)
{ 
   cwin.location.replace("javascript:alert("Loaded complete")");
}
function newtab()
{
   win=window.open("http://www.google.com");
   setTimeout("runcode(win)",5000);
   setTiemout("win.close()",7000);
}
</script>
</head>
<body>
<input type="button" value="Click to open newtab" onclick="newtab()" />
</body>
</html>

I want after newtab is opened 5s, alert window will be opened with message:"Loaded complete". Then 2s it is closed. But it isn't what I expect. Please fix it for me. Thanks in advance!

hi, on my page: here
the logos are greyscale but when the page is loading they flash up in colour?! could this be avoided and hidden?


here is my Javascript o apply greyscale to my logos
Code:

$(window).load(function(){ // On window load. This waits until images have loaded which is essential

		
						// Fade in images so there isn't a color "pop" document load and then on window load
						$("#our-work img").animate({opacity:1},500);
		
						// clone image
						$('#our-work img').each(function(){
							var el = $(this);
							el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0","margin-left":"64px;"}).insertBefore(el).queue(function(){
								var el = $(this);
								el.parent().css({"width":this.width,"height":this.height});
								el.dequeue();
							});
							this.src = grayscale(this.src);
						});
						
						// Fade image 
						$('#our-work img').mouseover(function(){
							$(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
						})
						$('.img_grayscale').mouseout(function(){
			$(this).stop().animate({opacity:0}, 1000);
	});		
});
					
	
					// Grayscale w canvas method
					function grayscale(src){
						var canvas = document.createElement('canvas');
						var ctx = canvas.getContext('2d');
						var imgObj = new Image();
						imgObj.src = src;
						canvas.width = imgObj.width;
						canvas.height = imgObj.height; 
						ctx.drawImage(imgObj, 0, 0); 
						var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
						for(var y = 0; y < imgPixels.height; y++){
							for(var x = 0; x < imgPixels.width; x++){
								var i = (y * 4) * imgPixels.width + x * 4;
								var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
								imgPixels.data[i] = avg; 
								imgPixels.data[i + 1] = avg; 
								imgPixels.data[i + 2] = avg;
							}
						}
						ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
						return canvas.toDataURL();
				}

Hi,

I have a site that runs a javascript slideshow automatically when a user visits it.

It is designed in such a way that I cannot pre-load individual images for aesthetic reasons. (Also the whole concept makes my brain hurt.)

I therefore need 1 of 2 things:

1. A preloader that doesn't show the page or start the slideshow until all the images are loaded.

or

2. I could start with the slideshow paused, and when the page is fully loaded, the play command (currently attached to a 'play' button) is 'sent'.

(I'm not techy, so this is the best I can do as explanation.)

The latter would probably be more elegant, especially if ultimately I could hide the controls for the slideshow with a loading bar until all the html is loaded, and then show them when the slideshow starts.

I'm sorry if this is a really basic question. I tried searching the site but couldn't find anything.

If you do feel like answering, can you imagine that you are speaking to a 5 year old. Then dumb it down a bit. I need all the explanation and clarity I can get!

Thanks!

I am having problems calling a JS function from asp.net code behind button click after some code is ran. The first time the button is clicked and it calls the JSfunction the readyState = loading and it cannot find the element. The second time the button is clicked the readystate is complete and it finds the element. Anybody have any suggestions?

Here is the code behind

ClientScript.RegisterStartupScript(Me.GetType(), "CC", "<SCRIPT language='javascript'>parent.abc('button1')</SCRIPT>")

and javascript

function abc(src) {
if (document.readyState == 'loading') {
alert(document.readyState);
}
else {
document.getElementById(src).click();
}
}

I have a form with three fields. When the user changes the value of field1, the form displays either field2 or field3. This works fine for NEW records.

However, I'm running into a problem when trying to EDIT an existing record. When the form is loaded, I need to test the value of field1 and display either field2 or field3. I've tried using the form onload event, but do not know how to access the value of field1.

I'm using Javascript and div tags.

This is what I have so far.

<script type="text/javascript">

function hide(obj)
obj1 = document.getElementById(obj);
obj1.style.display = 'none';
}

function show(obj)
{
obj1 = document.getElementById(obj);
obj1.style.display = 'block';
}

function show_other(optionValue)
{
if(optionValue=='C') { show('divClass');} else{hide('divClass'); }
if(optionValue=='W') { show('divWorkshop');} else{hide('divWorkshop'); }
}
</script>

/* Field1 - is a drop down list */
<select name="ClassType" size="1" onchange="show_other(this.value)">
...
</select>

/* Field2 */
<div id="divClass">
...
</div>

/* Field 3 */
<div id="divWorkshop">
...
</div>

Appreciate any assistance.
Thanks
Peter

Hi, ive been asked to make a blackjack game in javascript but I have a little bit of a problem. When the page loads, it deals cards to the player and the dealer, showing which cards have been dealt and the current scores. When I press the HIT button, i need to add another card to the array player_hand_img, and the value of this card to player_hand. I have successfully created this code, but my question is, how do I update the information (the score and the cards) on the screen after it has loaded? Can you do this in JavaScript or do I need another language?

Thanks very much in advance!

Can a random page be loaded without a prior visit to a site?

I have a list of 15 people with a photo and contact information in a table with 3 columns and 5 rows. The issue is that the people near the bottom want a chance to be at the top the first time the page is viewed. It is unlikely that a second visit would happen.
Is this possible to load a random page for a site without it being viewed or logged into before, therefore no cookies will be used.

My knowledge of Java script code is limited so any help would be great.

Thanks

Motty