/    Sign up×
Community /Pin to ProfileBookmark

Open new window based on screen width?

On a page that is to be displayed within a frame is it possible to have a function that checks the user’s window resolution and if 800 x 600 or less opens the page in a new window instead of the intended frame?

to post a comment
JavaScript

8 Comments(s)

Copy linkTweet thisAlerts:
@PadonakJun 07.2006 — it seems to me this function is to be placed in the main page code but not in the iframe page's. this way script will decide what is to be displayed - iframe or a new win.

function decide(){

if(screen.width <= 800){

document.getElementById("divFrame").innerHTML = "";

location.href = "bla-bla.htm";

}

else return;

}

<body onload="decide()">

<div id="divFrame"><iframe.......></iframe></div>

</body> ?
Copy linkTweet thisAlerts:
@themartyJun 07.2006 — double post, never mind
Copy linkTweet thisAlerts:
@PadonakJun 07.2006 — sorry im not that good in the language... what was meant by double post?
Copy linkTweet thisAlerts:
@themartyJun 07.2006 — it wasn't meant for you :-)

i posted a reply, but the forum-software was telling me i couldn't post within 60 seconds of my last post (i think i type too fast), so i waited a while and when i posted it appeared you had already posted before me, with basically the same answer.

so i removed my answer and typed 'double post' to indicate mine was just a copy of yours
Copy linkTweet thisAlerts:
@PadonakJun 07.2006 — he-he i know an english saying that describes the situatuion : GMTA (great minds think alike) :-))))))))
Copy linkTweet thisAlerts:
@lxndrauthorJun 07.2006 — it seems to me this function is to be placed in the main page code but not in the iframe page's. this way script will decide what is to be displayed - iframe or a new win.

function decide(){

if(screen.width <= 800){

document.getElementById("divFrame").innerHTML = "";

location.href = "bla-bla.htm";

}

else return;

}

<body onload="decide()">

<div id="divFrame"><iframe.......></iframe></div>

</body> ?[/QUOTE]


Thanks for this. I have tried it but doesn't seem to work for me in that the page opens in the current frame (html frame not an iframe) and doesn't launch a new browser window whether the user's screen width is 800 or less or not.

I could be doing something wrong but can't see what ?
Copy linkTweet thisAlerts:
@arzooJun 08.2006 — With regards to this topic, is there a way to open a popup window that will adjust to exactly fit the size of the content of the window?

thanks.
Copy linkTweet thisAlerts:
@themartyJun 08.2006 — this should do the trick

[code=html]<html>
<head>
<script type="text/javascript">
function decide(url)
{
if (screen.width <= 800)
{
alert('screen width is <= 800nopening popup');
popup(url, 'NewWin', '500', '500');
}
else
{
alert('screen width is > 800nopening page in frame');
// i'm not sure if this is the correct way, but this is the general idea
document.getElementById('anotherpage').src = url;
}
}
function popup(url,win,w,h)
{
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
prop = 'height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars=yes,resizable=no,toolbar=no,location=no,status'
Window = window.open(url,win,prop);
Window.focus();
}
</script>
</head>
<body onLoad="decide('test.html');">
<iframe id="anotherpage"></iframe>
</body></html>[/code]


of course you can remove the alerts when everything is working.

With regards to this topic, is there a way to open a popup window that will adjust to exactly fit the size of the content of the window?[/quote]

Yes, every element has a property which tells you what the width and height is. (I think they're called clientWidth and clientHeight, but i'm not 100% sure about that). So, with an onload you could trigger a function that requests these properties from the body-tag and then with window.resizeTo you can change the width and height of the popup window
×

Success!

Help @lxndr spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...