...
PDA

Javascript "Resizable" problem.

m3dic
12-09-2008, 12:11 PM
Hey all.
I am trying to open a page in a fixed width window using Javascript, yet I want to the disable the user from resizing that window, as it prevents the layout from looking bad. I have added "resizable=0" to the Javascript, yet it still doesn't work.

Splash Page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles/stylesheet.css">
<title>Green</title>
<script type="text/javascript" src="styles/javascript.js">
</script>
</head>
<body onload="MM_preloadImages('images/splash/Splashbutton2.jpg')">
<div class="splashcontainer">
<div class="splashmaincontainer">
<div class="splashheader"><img src="images/splash/Splashlogo.jpg" alt="logo" /></div>
<div class="splashabout"><img src="images/splash/Splashabout.jpg" alt="About" /></div>
<div class="splashbutton"><a href="javascript:openpopup('pages/Home.html')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Enter','','images/splash/Splashbutton2.jpg',1)"><img src="images/splash/Splashbutton1.jpg" alt="Enter" name="Enter" width="70" height="31" border="0" id="Enter" /></a></div>
<div class="splashfooter"><img src="images/splash/Splashnote.jpg" alt="Note" /></div>
</div>
</div>
</body>
</html>




Stylesheet:
@charset "utf-8";

/* Splash Page */

.splashcontainer {
width: 1024px;
height: 768px;
background-color:#ffffff;
margin-left: auto;
margin-right: auto;
}

.splashmaincontainer {
height: 242px;
width: 374px;
background-color:#ffffff;
margin-left: 35%;
margin-right: auto;
margin-top: 300px;
}

.splashheader {
background-color:#FFFFFF;
width: 254px;
height: 82px;
}

.splashabout {
width: 193px;
height: 18px;
margin-left:95px;
margin-top:10px;
}

.splashbutton {
margin-left: 95px;
width: 70px;
height: 21px;
margin-top: 35px;
}

.splashfooter {
width: 176px;
height: 7px;
margin-top: 130px;
margin-left: 199px;
}

/* Main Site */

* {
padding:0px;
margin:0px;
}

.pagecontainer {
background-color:#ffffff;
width: 1000px;
height: 700px;
margin:auto;
}

.maincontainer {
height: 594px;
width: 980px;
margin-top: 50px;
}

.contentcontainer {
background-color:#ffffff;
width: 532px;
height: 594px;
float:right;
}

.header {
width: 254px;
height: 82px;
background-color:#ffffff;
margin-left: 278px;
background-image:url(../images/main/header.jpg);
}
.menu {
width: 492px;
height: 29px;
background-color:#ffffff;
}

.undermenu {
width: 492px;
height: 15px;
background-color:#ffffff;
}

.submenu {
width: 492px;
height: 23px;
background-color:#ffffff;
}

.undersubmenu {
width: 492px;
height: 16px;
background-color:#ffffff;
border-top:thin #69a008 solid;
}

.pagecontent {
width: 492px;
height: 464px;
margin-right: 41px;
background-color:#ffffff;
margin-top: 47px;
}

.contentimage {
width: 217px;
height: 130px;
background-image:url(../images/main/Image.jpg);
float:right;
margin-left: 15px;
}

.content {
height: 368px;
width: 492px;
background-color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: justify;
margin-right: 20px;
}

.contactform {
text-align:right;

}

.imagecontainer {
width: 336px;
height: 218px;
background-color:#ffffff;
float:left;
margin-top: 375px;
background-image:url(../images/main/handimage.jpg);
}

.footer {
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
text-align:right;
margin-top: 40px;
}




Page that is linked to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/Green.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../styles/stylesheet.css"/>
<title>Green Orchard</title>
<script type="text/javascript" src="../styles/javascript.js">
</script>
</head>
<body onload="MM_preloadImages('../images/main/buttons/menuhome1roll.jpg','../images/main/buttons/menuservices1roll.jpg','../images/main/buttons/menuclients1roll.jpg','../images/main/buttons/submenunews1roll.jpg','../images/main/buttons/submenuabout2roll.jpg','../images/main/buttons/submenu3roll.jpg')">
<div class="pagecontainer">
<div class="maincontainer">
<div class="imagecontainer"></div>
<div class="contentcontainer">
<div class="header"></div>
<div class="pagecontent">

<div class="menu"><a href="home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','../images/main/buttons/menuhome1roll.jpg',1)"><img src="../images/main/buttons/menuhome1.jpg" alt="Home" name="Home" width="65" height="29" border="0" id="Home" /></a><img src="../images/main/buttons/menusep1.jpg" /><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Services','','../images/main/buttons/menuservices1roll.jpg',1)"><img src="../images/main/buttons/menuservices1.jpg" alt="Services" name="Services" width="97" height="29" border="0" id="Services" /></a><img src="../images/main/buttons/menusep2.jpg" /><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Clients','','../images/main/buttons/menuclients1roll.jpg',1)"><img src="../images/main/buttons/menuclients1.jpg" alt="Clients" name="Clients" width="74" height="29" border="0" id="Clients" /></a><img src="../images/main/buttons/menusep3.jpg" /><a href="Contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','../images/main/buttons/menucontact1roll.jpg',0)"><img src="../images/main/buttons/menucontact1.jpg" alt="Contact" name="Contact" width="83" height="29" border="0" id="Contact" /></a></div>
<div class="undermenu"></div>
<!-- InstanceBeginEditable name="EditRegion1" --><div class="submenu"><img src="../images/main/buttons/filler1.jpg" /><a href="News.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('News','','../images/main/buttons/submenunews1roll.jpg',1)"><img src="../images/main/buttons/submenunews1.jpg" alt="News" name="News" width="38" height="16" border="0" id="News" /></a><img src="../images/main/buttons/submenusep1.jpg" /><a href="Home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About','','../images/main/buttons/submenuabout2roll.jpg',1)"><img src="../images/main/buttons/submenuabout2.jpg" alt="About" name="About" width="41" height="16" border="0" id="About" /></a><img src="../images/main/buttons/submenusep2.jpg" /><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Team','','../images/main/buttons/submenu3roll.jpg',1)"><img src="../images/main/buttons/submenuteam3.jpg" alt="Team" name="Team" width="40" height="16" border="0" id="Team" /></a></div>
<div class="undersubmenu"></div>
<div class="content"><div class="contentimage"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat mi eu ligula euismod adipiscing. Nullam facilisis, velit non gravida volutpat, metus pede hendrerit urna, nec eleifend metus justo et ante. Cras tincidunt congue purus. Nullam fringilla pede a mauris. Fusce congue ante at massa imperdiet fringilla. Sed vehicula, turpis non pulvinar fermentum, diam lorem vulputate mi, sed accumsan purus dui sit amet sapien. Aenean erat. Morbi pede ante, scelerisque a, auctor sed, iaculis eget, nunc. Sed eget nulla. In dui ipsum, adipiscing quis, eleifend non, faucibus a, justo. Donec fringilla tincidunt sem.

Morbi semper dui sed lectus feugiat fermentum. Fusce ut nisi. Maecenas erat. Aenean neque turpis, congue eu, eleifend sit amet, luctus lobortis, erat. Suspendisse vulputate commodo ligula. Ut ac mi non felis ultricies placerat. Curabitur non lectus. Sed libero justo, gravida ut, laoreet nec, tristique convallis, arcu. Nulla facilisi. Aliquam semper. Sed tempus lobortis nisi. Cras nunc justo, blandit eget, fringilla sed, accumsan vel, sem.

Phasellus in tortor. Donec eros. Quisque pellentesque, velit et dictum tincidunt, enim eros hendrerit quam, nec rutrum quam quam sit amet enim. Aenean iaculis libero sit amet elit. Nunc semper interdum magna. Suspendisse imperdiet, nibh sed dapibus fringilla, leo lorem fringilla dolor, et fermentum lectus orci a libero. Proin dolor purus, congue id, imperdiet in, imperdiet a, mi. Etiam bibendum elit vel lorem. Nullam ipsum urna, scelerisque a, cursus tristique, auctor non, ligula. Suspendisse pulvinar luctus purus. Donec nisl. Vivamus eget nisl a urna gravida tempor. Nunc eget tellus. Vivamus sit amet ipsum eget libero vehicula aliquet. In vehicula diam eu arcu. Nam eget turpis vitae ligula laoreet accumsan. Nullam porttitor ligula et ligula. Aenean mattis bibendum enim. Duis porta. Fusce semper rhoncus tortor. Nunc eget nibh et massa ultrices dapibus. Vestibulum nec ante vitae eros mattis venenatis. Nullam pretium augue vel massa. Nullam augue. Ut tristique, turpis at suscipit ornare, metus sem aliquam diam, eget interdum erat velit non tortor. Etiam vitae felis non quam feugiat gravida. Phasellus pretium pellentesque turpis. Ut ut purus vitae ipsum pulvinar imperdiet. Integer leo arcu, luctus a, imperdiet vel, ornare ac, dui.
</div>
<div class="footer">&copy; Written and Designed by Jonathon Toon 2008</div><!-- InstanceEndEditable -->
</div>
</div>
</div>
</div>
</div>
</body>
<!-- InstanceEnd --></html>




Javascript:

// JavaScript Document
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function openpopup(popurl){
var winpops=window.open(popurl,"Green Orchard","width=1000px,height=700px,resizable=0")
}

Site:
www.samcamfilms.com/jo


If anyone can help out this small problem I would be greatly obliged.
Cheers.
mrhoo
12-09-2008, 12:36 PM
You can't usually prevent the user from resizing his browser- put your inflexible content in an absolutely positioned div.
m3dic
12-09-2008, 08:11 PM
You can't usually prevent the user from resizing his browser- put your inflexible content in an absolutely positioned div.
I have seen it done with pop-up ads, and if it is not preventable how come there is an option within Javascrpt to do it? I've added all the right code seem to achieve nothing.
Arbitrator
12-09-2008, 09:03 PM
I am trying to open a page in a fixed width window using Javascript, yet I want to the disable the user from resizing that window, as it prevents the layout from looking bad. I have added "resizable=0" to the Javascript, yet it still doesn't work.You may want to read up on the code at someplace like MDC. [1] Apparently, you want resizable=yes.

I have seen it done with pop-up ads, and if it is not preventable how come there is an option within Javascrpt to do it?If that MDC article [1] and the linked Bugzilla@Mozilla bug report [2] are any indication, it is not possible to prevent users from resizing windows in Mozilla Firefox 3.0 and Opera 6+. The MDC article also indicates that the ability to prevent window size adjustments has been limited in previous versions of Firefox as well.

Consider also the fact that Firefox has preferences [3] that allow you to prevent pop‐up windows entirely (that I use, BTW). In my browser, your link opens the “pop‐up” in the current tab with a broken layout. (Then again, your start page also has a messed up layout since you, apparently, didn’t consider custom user style sheets.)

Also consider that, if scripting is disabled, not only will you not get a pop‐up window, but you won’t even be able to access the site’s content. That seems like a serious issue for a site that doesn’t look like it has any necessary script dependencies in the first place.

You may as well just create a dynamic layout.


https://developer.mozilla.org/En/DOM/Window.open#Window_functionality_features.
https://bugzilla.mozilla.org/show_bug.cgi?id=177838#c0
In Mozilla Firefox, navigate to about:config then search put “open_newwindow” in the filter field to see the preferences.
itsallkizza
12-09-2008, 09:22 PM
m3dic: I got your back ;)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example</title>
<style type="text/css">
</style>
<script type="text/javascript">
// <![CDATA[

/*Author: itsallkizza*/

function c_resize_window()
{
if (window.resizeTo) window.resizeTo(c_winsize.width,c_winsize.height);
else if (window.outerWidth)
{
window.outerWidth = c_winsize.width;
window.outerHeight = c_winsize.height;
}
if (window.moveTo) window.moveTo(0,0);
}

var c_winsize = {};
function constant_window_size(width,height)
{
c_winsize.width = width;
c_winsize.height = height;
if (window.addEventListener) window.addEventListener("resize",c_resize_window,false);
else if (window.attachEvent) window.attachEvent("onresize",c_resize_window);
else window.onresize = c_resize_window;
c_resize_window();
}

window.onload = function()
{
constant_window_size(800,600);
}
// ]]>
</script>
</head>
<body>

</body>
</html>


Note: This keeps the browser at a specific size - not the document body. Without a table with height set to 100% to stretch the document.body out, it is impossible to determine the height of a user's toolbar in IE (in Firefox this is easy with innerWidth and innerHeight).

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum