Page 1 of 2 12 LastLast
Results 1 to 10 of 18

Thread: DHTML Window Size Question

  1. #1
    Join Date
    Apr 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default DHTML Window Size Question

    Script: DHTML Window
    http://www.dynamicdrive.com/dynamici...htmlwindow.htm

    Okay this script works awesome.. just a couple things, how would I be able to get the div to open maximized to begin with. So when people click the button to open the window, it will open it maximized all the way no matter the browsers size.

    I need it to do that for my arcade script, im using this as a "boss/teacher hide" feature so it looks like they are on google.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    A DHTML window can never be larger than the browser. If you need to open a full size window using minimal 'chrome', use the window.open() method:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script type="text/javascript">
    
    function fullwin(targeturl){
    var h=screen.availHeight, w=screen.availWidth
    var full=window.open(targeturl,"","top=0,left=0,width="+w+",height="+h+",scrollbars=1")
    if (document.documentElement.filters)
    full.resizeTo(w,h);
    }
    
    </script>
    <form>
    <input type="button" onClick="fullwin('somepage.htm')" value="Open window">
    </form>
    </head>
    <body>
    
    </body>
    </html>
    You can have somepage.htm be whatever page you like, as long as it is on the same domain as the above opener page.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Apr 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That works nice but I was hoping that it could actually hide my site so if the instructor was to click on the browser window that my site is in then they wouldnt be able to see the site there but instead see google. Thanks!

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Sorry I didn't understand the question at first. Try this (To close the Google 'page', put the mouse pointer near the top of the window and, when it becomes a pointing hand, click):

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    
    //DHTML Window script- Copyright Dynamic Drive (http://www.dynamicdrive.com)
    //For full source code, documentation, and terms of usage,
    //Visit http://www.dynamicdrive.com/dynamicindex9/dhtmlwindow.htm
    
    var ie5=document.all&&document.getElementById
    var ns6=document.getElementById&&!document.all
    
    function iecompattest(){
    return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    function loadwindow(url){
    if (!ie5&&!ns6)
    window.open(url,"","width="+screen.width"+,height="+screen.height+",scrollbars=1")
    else{
    //maximize window
    document.getElementById("dwindow").style.width=window.innerWidth? window.innerWidth-20+"px" : iecompattest().clientWidth+"px"
    document.getElementById("dwindow").style.height=window.innerHeight? window.innerHeight-20+"px" : iecompattest().clientHeight+"px"
    document.getElementById("dwindow").style.left=0
    document.getElementById("dwindow").style.top=0
    document.getElementById("dwindow").style.display=''
    document.getElementById("cframe").src=url
    }
    }
    
    function closeit(){
    document.getElementById('cframe').src="about:blank"
    document.getElementById("dwindow").style.display="none"
    }
    </script> 
    </head>
    
    <body>
    
    <div id="dwindow" style="position:absolute;background-color:white;cursor:pointer;left:0px;top:0px;display:none" onMousedown="closeit()" onSelectStart="return false">
    <div align="right" style="background-color:white;height:10px;"></div>
    <div id="dwindowcontent" style="height:100%">
    <iframe id="cframe" src="about:blank" width=100% height=100% frameborder="0" scrolling="0"></iframe>
    </div>
    </div>
    
    
    
    <!--Use below code to load DHTML window via link-->
    <a href="javascript:void(0);" onclick="loadwindow('http://www.google.com');return false;">Geocities</a>
    </body>
    
    </html>
    Last edited by jscheuer1; 04-27-2006 at 07:47 AM. Reason: simplify code and markup
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Apr 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks its awesome!!

  6. #6
    Join Date
    Jul 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    is there a way to change the top bar in the window to some other color, currently its blue. Thanks

  7. #7
    Join Date
    Jul 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    bump, pleASe help

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by EZboy
    is there a way to change the top bar in the window to some other color, currently its blue. Thanks
    Yes, here is the HTML portion of this script from the demo page:

    Code:
    <div id="dwindow" style="position:absolute;background-color:#EBEBEB;cursor:hand;left:0px;top:0px;display:none" onMousedown="initializedrag(event)" onMouseup="stopdrag()" onSelectStart="return false">
    <div align="right" style="background-color:navy"><img src="max.gif" id="maxname" onClick="maximize()"><img src="close.gif" onClick="closeit()"></div>
    <div id="dwindowcontent" style="height:100%">
    <iframe id="cframe" src="" width=100% height=100%></iframe>
    </div>
    </div>
    See the red highlighted color name? You can change this to any valid HTML color name or hex value (examples: red or #ffd044).
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Jul 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks a lot, changed the colour, all is good

  10. #10
    Join Date
    Apr 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hello, been awhile, but I am using this code once again, except im getting that "Done. But with errors" message in the status bar of IE.

    Of course It doesnt give any hint as to what it is doing wrong other then what line it is.. and that line is this:
    Code:
    function closeit(){
    Which is part of this part of the code you gave me:
    Code:
    function closeit(){
    document.getElementById('cframe').src="about:blank"
    document.getElementById("dwindow").style.display="none"
    }
    The window is coming up perfectly fine, but it would be nice if my site doesnt say it has errors to the visitors.

Bookmarks

Posting Permissions

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