The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Using javascript to set values of iframe height HELP NEEDED!
sony user
post Mar 17 2010, 07:34 AM
Post #1





Group: Members
Posts: 4
Joined: 17-March 10
Member No.: 11,408
Hi!
I'am having problems with entering a javasript as a value of iframe height. The thing is i want the iframe size to depend on the size of the window. I have already writen the javasript to calculate the size, but it doesn't allow me to put it in size value position. Please help!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 17 2010, 07:38 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Let's see what you have then. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
sony user
post Mar 17 2010, 11:27 AM
Post #3





Group: Members
Posts: 4
Joined: 17-March 10
Member No.: 11,408
QUOTE(pandy @ Mar 17 2010, 07:38 AM) *

Let's see what you have then. smile.gif

Hi, I have:
<script type="text/javascript">
<!--

var viewportheight;
var razlika=100;
var visina=+viewportheight-razlika+'px'

// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

if (typeof window.innerWidth != 'undefined')
{
viewportheight = window.innerHeight
}

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportheight = document.documentElement.clientHeight
}

// older versions of IE

else
{
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
document.write(+viewportheight-razlika+'px');
//-->
</script>

Thank you for your answer!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
sony user
post Mar 17 2010, 11:41 AM
Post #4





Group: Members
Posts: 4
Joined: 17-March 10
Member No.: 11,408
QUOTE(pandy @ Mar 17 2010, 07:38 AM) *

Let's see what you have then. smile.gif

P.S. I've tried it, and the calculation is correct, but how to get it in configuration of an iframe?

Thank you!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 17 2010, 11:57 AM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
You could target the iframe with document.frames[0] (if it's the only iframe on the page) or you could give the iframe an id like below. Then use the style object to change its height.


CODE
var frame_h = viewportheight-razlika+'px'
document.getElementById('the_frame').style.height = frame_h;


HTML
<iframe src="http://google.com" id="the_frame"></iframe>


Note that the iframe must be created before the script runs. If you have it in HEAD or in a linked JS file, you need to put it all in a function and call it onload. You can also just put the script after the iframe, but that's a little sloppy if it isn't necessary, me thinks.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
sony user
post Mar 17 2010, 01:14 PM
Post #6





Group: Members
Posts: 4
Joined: 17-March 10
Member No.: 11,408
Hi, again...
I don't know why, but it doesn't work. I guess it's because i have very little experience with javascript blink.gif. Can you post or PM me a full code?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 17 2010, 03:11 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
You just need to replace your document.write with the lines I posted and give the iframe the corresponding ID. Oh, and put it in a function and call it onload. Like this.

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<head>

<script type="text/javascript">
<!--
function sizeFrame()
{
var viewportheight;
var razlika=100;
var visina=+viewportheight-razlika+'px'

// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

if (typeof window.innerWidth != 'undefined')
{
viewportheight = window.innerHeight
}

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportheight = document.documentElement.clientHeight
}

// older versions of IE

else
{
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}


// NEW STUFF BELOW

var frame_h = viewportheight-razlika+'px'
document.getElementById('the_frame').style.height = frame_h;
}


window.onload = sizeFrame;


//-->
</script>

</head>


<html>

<iframe src="http://google.com" id="the_frame"></iframe>

</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 25th April 2024 - 12:30 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC