JavaScript - How To Detect Iframe Size Change Or Get Current Size Of Iframe

Hey the Title basically says I need a way to read the iframe url even when you navigate to a different page it will read again and keep tracking where the URL is on. Display the URL of the iFRame all the time how would I do this is it possible?

Javascript
HTML
PHP

Is used

QUESTION 1:

Hello. I would like to know if this is possible with Javascript, and if yes, if someone can please provide me with the code or point me in the right direction.

Let me start of by saying that this is for an eBay listing. I know that they accept basic / limited javascript and if what I am asking is possible, I hope that it can work on eBay listings.

I would like to know if it's possible to determine the dimensions of an image with Javascript from an Image url, and to then resize it or not based on the the size of the image.

So, let's say this is the URL: www.adomainname.com/image.jpg

and let's say that image is 1400 px x 1400 px. I would first like the javascript code to detect that size. I also would like the maximum dimension for any side of the image to be 600 px. If both sides of the image are over 600 px, for both sides to be reduced proportionally to 600 px or lower. If any one side of the image is larger than 600 px, the image is to be resized to 600 px or lower. If both sides are under 600 px, the image is to not be reduced. It would also be nice if it can detect whether the image is portion or landscape based on I guess the larger side, because an image at 600 px in height might be too big, but in width might be o.k.

So, in this example (the 1400 px by 1400 px), the image is to be resized to 600 px x 600 px.

For an image that's 300 px x 500 px, it should remain as such.

For an image that's 400 px x 700 px, it should be resized to 400 / (700 / 600) px by 600 px, which is approximately 343 px x 600 px.

I have looked a bit into this and I see things being mentioned about the image being loaded first completely on the screen, or about using server side language like PHP, and so on, but like I said, keep in mind that this is for eBay, and so I am limited.

Note: The part that I am most interested in is in being able to detect the size / dimensions of the image.

QUESTION 2:

On a side note, does anyone know if it's possible to have a Javascript enlarging function for images, in which when one clicks on an image, it is enlarged, but either in a popup window that's smaller than the one behind it, and possibly centered, or by making the background go dark and then bringing up the enlarged image (is the latter done with Javascript; I have seen this effect for a while now and have always wondered.)

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.

I want to deviate from using css to designate a font size in one place.

I have a string with a name.

This is stored in a variable called "name."

I just re-defined name to include district number.

Now, it is name=lastname+', '+district;

I am appending this string into the html dom.

I want the district portion to appear in a slightly smaller font.

How can I do this without having to set up a separate <span>? Or can this be done?

Ok my menuBarContainer div wont change width or height... I've tried everything... whats stopping it?

http://opentech.durhamcollege.ca/~in...rittains/labs/

Dear All,

I need to get JavaScript to change the font size used for a website if Opera is detected. I have been trying this but it hasn't worked:

Code:

function changeFooter(){
if (navigator.userAgent.indexOf("Opera") >= 0) {	 // if I alert this line the output is 0
document.getElementById("footer").style.fontSize = '0.5em';       
};
};

in the head of the html document (as well as the link to the external JavaScript file):

Code:

<script type="text/javascript">
changeFooter();
</script>

I tried using window.onload = changeFooter(); but still no luck.

I used the same principle in a different function to change another css property via getElementById and it works beautifully so I am a bit puzzled.

I then realised that I actually need to change the value of the font size in the body tag from 100% to 90% when Opera is detected so I changed the script to this:

Code:

function changeFooter(){
if (navigator.appName == 'Opera') {
document.write('<link href="styleOpera.css" rel="stylesheet" type="text/css" />');
}
else {
	document.write('<link href="style.css" rel="stylesheet" type="text/css" />');
};
};

But it's still not working.

I was hoping that I could benefit from your collective wisdom as I am not sure where I am going wrong with this and several hours spent searching the web for answers have been fruitless so far...

My knowledge of JavaScript is not very extensive, I haven't studied it in great depth so perhaps I am making some very silly mistakes here.

My pseudo code for this exercise is something like this:

Code:

detect browser
 if browser = Opera {
    change font-size for body to 90%
    }
else {
   do nothing
    }

alternatively:

detect browser
 if browser = Opera {
    link to stylesheet1
    }
else {
   link to stylesheet2
    }

Thanks in advance for your help, much appreciated.

Kind regards,
Cristina Alciati

Hi,

I'm creating web application that picks out a randomly chosen image from google, and displays it in the browser window every time it is refreshed. What I'm struggling with is that I want the browser window to resize automatically to exactly fit the image displayed.

I know how to resize a browser window, but I want it done dynamically. Can anyone help me with this?

I want to change iframe.src value? So I use following code,when I click 'Click here',I find the iframe don't go to b.html page,why? Where is error? How to correct my code? Thanks

My code is follows:

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script language="javascript" type="text/javascript">
function showDiv(){
document.getElementById('popDiv').style.display='block';
document.getElementById('popIframe').style.display='block';
document.getElementById('bg').style.display='block';
document.getElementById('popIframe').src='b.html';
}
</script>
</head>
<body>
<div id="popDiv" class="mydiv" style="display:none;">This is a test
<div id="bg" class="bg" style="display:none;"></div>
<a href="javascript:showDiv()">Click here</a>
<iframe id='popIframe' class='popIframe' frameborder='0' ></iframe>
</body>
</html>

Hi there, I'm working on a site: ocmd.co.nr

And it features a lot of handy little web gadgets and apps for users. I was interested in creating a page, where two iframes are shown side-by-side both with the width of 50% and the height of 100%, with adressbars on top of each of them.

So, essentially, what I need is just a code that allows the user to edit the iframe's src and get it to a different site.

Try to figure out how to change the css display property of a table, from hidden, to block outside of an iframe.

//This data is outside of the iframe
Code:

<style>
#table {display: hidden; z-index: 100;}
</style>

<table id='table' ><td> ......data</td></table>

//This link is inside of an iframe
Code:

<script>
function change(){
document.getElementById("table").style.display='block';
}
</script>

<a href='javascript:void(0)' onclick='change()'>Change</a>

hi all,

I really need help with this topic. I have to use onMouseOver to change the content of an iframe. I'm trying to use an array but I'm confused and I'm not really sure if what I'm doing is correct and it doesnt work. I will appreciate your help and understanding.

Thanks a lot!

here is part of my code..


var frame=new Array(6);
frame[0]="page1.html";
frame[1]="page2.html";
frame[2]="page3.html";
frame[3]="page4.html";
frame[4]="page5.html";
frame[5]="page6.html";
var j=0;

function nextFrame()

{
if (j < 5)
{
j++;
document.getElementById(frame).contentDocument=frame[j];

}
return;
}

<span onMouseOver="nextFrame()" > <img name="upperImage" src="something.jpg" width=350 height=250 /></span>

<iframe id="frame1" name="frame1" src="" width=350 height=250 frameborder="0"> </iframe>


Please let me know if at least I'm in the right track.

Thanks

Is there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really.

Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with.
We have a central area which can be longer or shorter depending on the forum.

Hi there everybody,
I've got this problem which I can't solve myself...

I've got a website which has 3 colums and is hosted on domain1.com. in the right column I've got an Iframe which loads content from domain2.com . this content are some textboxes and a datepicker tool. if I press the 'search'-button in this Iframe I would like to refresh the mainpage (from domain1.com) so that another Iframe appears in the middle column. in this column i would like to load a new form from domain2.com which contains the values that I've put in in the form from the right Iframe.

Unfortunally I can't get this to work... Will somebody please help me?

Hi all,

I hope you can help

I have some code which:

1) Opens a URL (e.g. google.com) in a hidden iframe, then
2) Redirects the visitor to a different URL (e.g. yahoo.com) after it has loaded...

This works exactly as I need.

What I'd like to do is the following:

1) Open a URL (e.g. google.com) in a hidden iframe, then
2) Redirect the visitor to a different URL (e.g. yahoo.com) in a full-screen iframe
3) The address bar of the full-screen iframe should be my domain (obviously!)

Here's what I have so far...

Hidden iframe -> New URL Code:

Code:

<html>
<body>
	<script type="text/javascript">

		var page_body = document.getElementsByTagName('body');
		var myframe = document.createElement('iframe');
		var id = Math.random();
		myframe.setAttribute('id', 'myFrame'+id);
		myframe.src = 'http://google.com';  //First open Google in hidden iframe 
		myframe.setAttribute('frameborder', '0')
		myframe.setAttribute('width', '0');
		myframe.setAttribute('height', '0');
		if (myframe.attachEvent)
			{
				myframe.attachEvent('onload', function()
					{
						top.location = 'http://yahoo.com';  //Once loaded redirect to Yahoo -- but the address bar shows yahoo.com -- I want the address bar to display mydomain.com/page.html 
					});
					}
		else if (myframe.addEventListener)
			{
				myframe.addEventListener('load', function()
					{
						top.location = ('http://yahoo.com');
					}, false);
					}
		page_body[0].appendChild(myframe);

	</script>
</body>
</html>

I have an example of some code which displays the full screen iframe, but my problem is...

...I can't figure out how to redirect to this after the hidden iframe has loaded

Here's an example of how I want the redirect to display -- after the initial hidden iframe has loaded:

Code:

<html>
<head>
	<script type="text/javascript">
 		function sendParams() {
 			document.body.style.overflow = "hidden";
 		}
	</script>
</head>
<body>
	 <!--Open Yahoo.com in a full screen iframe, and disable extra scrollbar --> 
	<iframe height="100%" width="100%" frameBorder="no" onload="sendParams()" src="http://yahoo.com"></iframe>
</body>
</html>

I've been beating my head against the wall today trying to figure this out, and I'm fresh out of ideas.

If you can help, you'll have some serious gratitude and good karma thrown your way!

Best wishes, and thanks in advance,
Paul