Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript "Resizable" problem.

    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:
    Code:
    <!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:
    Code:
    @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:

    Code:
    <!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:

    Code:
    // 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.
    Last edited by m3dic; 12-09-2008 at 12:14 PM.

  • #2
    Regular Coder
    Join Date
    Mar 2006
    Posts
    728
    Thanks
    35
    Thanked 132 Times in 123 Posts
    You can't usually prevent the user from resizing his browser- put your inflexible content in an absolutely positioned div.

  • #3
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mrhoo View Post
    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.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by m3dic View Post
    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.

    Quote Originally Posted by m3dic View Post
    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.

    1. https://developer.mozilla.org/En/DOM...ality_features.
    2. https://bugzilla.mozilla.org/show_bug.cgi?id=177838#c0
    3. In Mozilla Firefox, navigate to about:config then search put “open_newwindow” in the filter field to see the preferences.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    m3dic: I got your back
    Code:
    <!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).
    Last edited by itsallkizza; 12-09-2008 at 09:42 PM.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •