|
HTML - Maximizing Browser Window ?
Hi:
I would like to maximize a browser window after a page is loaded: I believe the command would be something like: <body onload="window.maximize" > Would someone care to correct or adjust or revamp the above statement please ? Thanks Mel Smith (still wandering about in the html wilderness) Similar TutorialsHello, Please go to http://www.cactusridgerr.com/choices.htm. Click on the 'enlarge' button. Your browser may be setup to maximizing the size of the new window that pops up, but I'd like to know if there's a way to force the size of the window to be maximized - otherwise, the image doesn't look all that enlarged. My code for the 'enlarge' button looks like this: Code: <td> <a id="aenlarge" href="print/freisa.jpg" onmouseover="ienlarge.src='JPGs/enlarge_highlighted.jpg'" onmouseout="ienlarge.src='JPGs/enlarge_normal.jpg'" target=_blank> <img id="ienlarge" src="JPGs/enlarge_normal.jpg" border=0></a> </td> As you can see, it links to a simple JPG and the target=_blank attribute in the link tag ensures that it will open in a new window. Is there anything I can add to the link tag that will force a maximization of the size of the new window? Something like like onclick="target.window.size=max;"? Thanks for any forthcoming help. Suppose a user types the url of a website in their browser, so that the script http://url/index.htm is displayed in the browser. In other words, the user is not opening the page via a link or whatever, they are just typing in your url. In that situation, what (if anything) can you put in that script itself that gives the user's browser window a name that can be referred to later. The reasons why I want to do this are complicated, but in a nutshell this first window will become the parent window of other windows that open up later via links within the page, and script within those windows will have to refer to it by a name. Alternatively, is there some standard name that your browser window automatically recieves when you open up a website, like "parent" or something, that allows you to refer to it? i got a problem i cant figure out. in dreamweaver when i add the behavior "open new browser window" to a link that is not external....but like a small pop up page.....when the user clicks on the link, the window opens, but the main window resets....meaning if the link was at the bottom of the page and the user scrolled down to get there....they then have to rescroll on the page to get back to the bottom. how can i get the new window to open without changing the view of the main page. many thanks! How can I make the browser window that my site is in automatically have specific height/width dimensions? Making toolbar and scrollbar go away would also be nice. Hello; I am a graphic designer that codes pages quick and dirty entirely with tables. The one I am currently working on needs to be centered in all browser windows at all sizes. I understand that this shouldn't be hard, however everything that I have tried so far hasn't worked. My thoughts are that since it is built entirely in tables (with a java search tool) that I need to make a centered container and place the entire page inside of it. I have tried a few codes I've pulled from other forums with no luck temporary url (and I know the code is dirty) www.showcasepublishing.com/myoutandabout Thanks in advance I am new to HTML coding. I am trying to create a form, which, automatically submits the form contents and finally automatically close the browser window. But I am not able to get the self form submissions and self window closing. The code that I have written is found below. Kindly advice on how to get it working. Thanks in advance. <html> <body> </form> <p><b>This form submits an HTTP POST request to url '/forms_example/post'</b></p> <form name="form1" form method="POST" action="http://localhost/forms_example/post"> <table> <tr> </tr><tr><td>Name</td><td><input type="Text" name="name" VALUE="roger"></td></tr> <tr><td>Address</td><td><input type="Text" name="address" VALUE="smith"></td></tr> <tr><td>Phone</td><td><input type="Text" name="phone" VALUE="25714988"></td></tr> <tr><td>E-Mail</td><td><input type="Text" name="email" VALUE="roger.smithatgmail.com"></td></tr> <tr><td><input type="Submit" VALUE="submit" > </td></tr> </table> </form> </script> function GO(){ setTimeout("subForm()",0) } function subForm(){ document.form1.submit() } t = null; function closeMe(){ t = setTimeout("self.close()",2000); } </script> </body onload="GO()";"closeMe()"> </html> Similar to how most pop-up windows are a fixed size, I was curious as to how I could fix the size of a browsing window (particularly the width) of a page. Vertical scrolling isn't as important, but I would like my index page as well as the pages within the Iframe in the index page to remain a certain width so viewers would only have to scroll vertically to view the entire content of the html document. I have tried "stealing" the coding used in pop-up windows, trying it in both the head and body of the code but to no avail. I have searched for countless hours on the 'net looking for a tutorial that gives the code for this and have had zero luck. (I know it must be possible.) Any and all help/input is greatly appreciated! Thanks so much in advance, Dereck Im in the process of redoing my website. I originally did it in dreamweaver with a very cheesy method of just using hotspots. So Im going through and redoing it by hand in html. Im doing the index page right now and playing around with the idea of having the whole page in one table. My problem is the table isnt starting in the top left corner where I want it. I have the border set to "0" but theres still space around the table. How do I get rid of this space? How can I get a browser window to open maximized regardless of screen size, screen res, or browser type/version? Thanks... Hello, hopefully you can help me. I have the following code, which opens a new internet browser window: <form> <p align="center"><b></b> <select id="setit" style="color: #0000FF" size="1" name="test"> <option value="">Please Select</option> <option value="http://www.nu.nl">nu</option> <option value="http://www.telegraaf.nl">telegraaf</option> <option value="http://www.google.com">Google</option></select> <input type="button" value="Go" onclick="window.open(setit.options[setit.selectedIndex].value)"> </p></form> What do I need to change so the onclick opens the link in the same internet browser window instead of opening a new one? Many thanks, Ralfie This is for a flash site but I think it needs to be coded in the html page. My Flash swf size is approximately 1000x700. If the browser size is smaller than this the site needs to scale down but if it is larger I don't want it to scale. Just like this http://www.milesaldridge.com/. I've tried publishing the Flash settings at ScaleDefault(Show All) which scales it but I need to stop the scaling upwards at 1000x700. I'd have thought that I could say in the html if (width<1024){scale;} and if(height<700){scale;}. But it's not working. Should it all be done in the html and if so how? Hello, I want to open a html page in a same browser window with fullscreen mode. I tried following code: window.open("hello.html","_self","fullscreen,scrollbars") However if I use _self, I did not get page in fullscreen mode. Any help is really appreciated. Regards, John Howdy! Is there a way to force a new browser window to automatically maximize itself? I have a few links from my home page to some of my other pages that I have included the target="_blank" code to in order to get these pages to open in a new browser window when someone clicks on the link. Here's an example: <a href="nextpage.html/" target="_blank">My next page</a> Is there a way to get this new browser window to open maximized? Thanks for your help on this. JohanM My website pops up a browser window that cannot be resized. Occassionally though, the window's content exceeds its size. Is it possible to implement a scrollbar/scrollpane inside the window using just html? Cheers, James Hey guys, I recently setup a basic "intranet" for my family, since we have a number of computers, and it would be easy to leave messages for each other, attach files, etc. It may not be an intranet per se, but it acts as one. I have setup "Appserv" on a computer that is always on, which is a package that installs everything you need to turn a normal PC into a server, and I have installed "Wordpress" into a folder in "root/wordpress/". What I want to do is create a file, index.* in the root directory and force each computer's browser to head to that file. Now what I want is for it to open as a normal webpage (since we all use Google as our homepage, that would be preferrable) with a small thin bar at the top/bottom, which says "Go to Intranet Home" or "Close This Window". Now I have tried a variety of ways to do this, including frames, but the problem is that the URL will not change. If i point the file to 192.168.1.6/index.php, it will show that as the address even if you type something into google and go to links etc (as it is the frame's URL, not the browser's). What I need is for the browser to open into a page that acts normal, except has a hovering bar that can send the family members to the wordpress home page. I was thinking that maybe CSS could do it but I'm not even sure if this is possible at all. If the URL dosen't change, its not possible for anybody to bookmark sites as it will always bookmark the same address. Please leave feedback even if the idea is not possible, any help is greatly appreciated. Thanks again, Curtis ive put a background in to my html document that stretches to fit the size of the browser window. heres the code: <style type="text/css">html {height:100%;}body {height:100%;margin:0;padding:0;}#bg {position: absolute;top:0;left:0;width:100%;height:100%;}#content { position:absolute;z-index:1; width:100%;}</style> <!--[if IE 6]><style type="text/css">html {overflow-y:hidden;}body {overflow-y:auto;}#bg {position:absolute;z-index:-1;}#content {position:static;}</style><![endif]--> <script type="text/javascript" src="swfobject.js"></script> </head> <body bgcolor="#000000" text="#999999" link="#999999" vlink="#999999" alink="#999999"> <div id="bg"><img src="NJWwallpaper01.jpg" width="100%" height="100%" alt=""></div> <div id="content"> I have a terrible problem how to make this page resize whatever the resolution of the browser. I've already did liquid layout via percent but the height doesn't do it. They want the content to be scalable in whatever browser dimensions they want. Kindly help me. Thanks. Here is the html: Code: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Porter House New York</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/main.css" />
<script src="js/jquery.js"></script>
<script src="js/drop-down-menu.js"></script>
<!--[if IE]>
<script src="js/CreateHTML5Elements.js"></script>
<![endif]-->
<!--[if IE 6]>
<script src="js/unitpngfix.js"></script>
<![endif]-->
</head>
<body>
<header> <a href="index.html"><img src="images/logo_porter_house_new_york.png" alt="Porter House New York" class="logo" title="Porter House New York" /></a> </header>
<!-- end header -->
<nav>
<ul>
<li><a href="#" class="about" title="about">about</a>
<ul>
<li><a href="#" title="The Restaurant">The Restaurant</a></li>
<li><a href="#" title="The Chef">The Chef</a></li>
<li><a href="#" title="The Owners">The Owners</a></li>
</ul>
</li>
<li><a href="#" class="menus" title="menus">menus</a></li>
<li><a href="#" class="press" title="press">press</a></li>
<li><a href="#" class="photos" title="photos">photos</a></li>
<li><a href="#" class="private" title="private dining">private dining</a></li>
<li><a href="#" class="gift" title="gift certificates">gift certificates</a></li>
<li><a href="#" class="contact" title="contact">contact</a></li>
<li><a href="#" class="watch" title="contact">contact</a></li>
<li><a href="#" class="reserve" title="contact">contact</a></li>
</ul>
</nav>
<!-- end nav -->
<div id="content">
<div id="contentTop"> </div>
<!-- end contentTop -->
<div id="side"></div>
<!-- end side -->
<div id="main">
</div>
<!-- end main -->
<div id="contentBottom"> </div>
<!-- end contentBottom -->
</div>
<!-- end content -->
<footer>
<p>© Copyright 2007. Porter House New York. Powered by 2B-Unique.com</p>
</footer>
<!-- end footer -->
</body>
</html>
Here is the CSS: Code: /* ---------------------------------------- */
/* CSS RESETS */
/* ---------------------------------------- */
@import url('reset.css');
body {
background: #fff url(../images/bg.jpg) repeat-x center 0;
background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-khtml-background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
/* ---------------------------------------- */
/* HEADER */
/* ---------------------------------------- */
header {
position: relative;
margin: 1% auto 0;
height: 20%;
width: 98%;
background: url(../images/header.png) no-repeat 0 0;
*background: url(../images/header_ie.gif) no-repeat 0 0;
background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-khtml-background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
header img.logo {
margin: 3% 0 2% 3%;
height: 50%;
width: 25%;
}
/* ---------------------------------------- */
/* NAV */
/* ---------------------------------------- */
nav {
position: relative;
margin: 0 auto;
height: 28px;
width: 98%;
background: url(../images/nav.png) no-repeat 0 0;
*background: url(../images/nav_ie.gif) no-repeat 0 0;
background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-khtml-background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
nav ul {
margin-left: 1.1%;
position: relative;
}
nav li {
position: relative;
float: left;
}
nav a {
display: block;
text-indent: -9999px;
height: 25px;
background: url(../images/nav_sprites.png) no-repeat 0 0;
}
nav a.about {
background-position: 0 0;
width: 73px;
}
nav a.about:hover {
background-position: 0 -25px;
}
nav a.menus {
background-position: -73px 0;
width: 85px;
}
nav a.menus:hover {
background-position: -73px -25px;
}
nav a.press {
background-position: -158px 0;
width: 83px;
}
nav a.press:hover {
background-position: -158px -25px;
}
nav a.photos {
background-position: -241px 0;
width: 98px;
}
nav a.photos:hover {
background-position: -241px -25px;
}
nav a.private {
background-position: -339px 0;
width: 145px;
}
nav a.private:hover {
background-position: -339px -25px;
}
nav a.gift {
background-position: -484px 0;
width: 166px;
}
nav a.gift:hover {
background-position: -484px -25px;
}
nav a.contact {
background-position: -650px 0;
width: 84px;
}
nav a.contact:hover {
background-position: -650px -25px;
}
nav a.watch {
background-position: -741px 0;
width: 252px;
}
nav a.watch:hover {
background-position: -741px -25px;
}
nav a.reserve {
background-position: -993px 0;
width: 121px;
}
nav a.reserve:hover {
background-position: -993px -25px;
}
nav ul ul {
position: absolute;
left: -10px;
top: 25px;
z-index: 900;
padding: 3px 0;
background-color: #ffffeb;
}
nav ul ul li {
float: none;
width: 143px;
}
nav ul ul a {
margin: 0 3px;
padding-left: 10px;
height: 16px;
width: 127px;
background: none;
color: #71462d;
font: normal 12px Tahoma;
text-indent: 0;
text-decoration: none;
text-transform: uppercase;
}
nav ul ul a:hover {
background: url(../images/submenu_hover.jpg) no-repeat 0 0;
color: #fff;
}
/* ---------------------------------------- */
/* CONTENT */
/* ---------------------------------------- */
#content {
position: relative;
margin: 0 auto;
overflow: hidden;
height: 304px;
width: 98%;
background: url(../images/content.png) repeat-y 0 0;
*background: url(../images/content_ie.gif) repeat-y 0 0;
background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-khtml-background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
#contentTop {
position: absolute;
top: 0;
left: 1.05%;
z-index: 100;
background: url(../images/content_top.png) repeat-x 0 0;
*background: none;
height: 2%;
width: 97.85%;
}
#contentBottom {
position: absolute;
bottom: 0;
left: 1.05%;
z-index: 100;
background: url(../images/content_bottom.png) repeat-x 0 0;
*background: none;
height: 2%;
width: 97.75%;
}
#side {
position: relative;
float: left;
display: inline;
margin-left: 1.1%;
height: 304px;
width: 19.62%;
}
#main {
position: relative;
float: right;
display: inline;
margin-right: 1.1%;
min-height: 276px;
width: 76.07%;
padding: 28px 0 0 12px;
}
/* ---------------------------------------- */
/* FOOTER */
/* ---------------------------------------- */
footer {
position: relative;
margin: 0 auto;
width: 98%;
background: url(../images/footer.png) no-repeat 0 0;
*background: url(../images/footer_ie.gif) no-repeat 0 0;
background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-khtml-background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
footer p {
margin: 20px 0 0 11px;
display: inline-block;
text-indent: -9999px;
height: 50%;
width: 40%;
background: url(../images/copyright.png) no-repeat 0 0;
background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-khtml-background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
Hi im aware how to fit the width of a page so it fills the browser window but im curious on how to set the height of the page? the width works perfectly and just the height im stuck with "Use the below code example. <input type=""button"" value=""Close this window"" onclick=""self.close()"">" Hello I'm new to HTML Now straight to the point : I have a web page that looks too big when screen resolution is 1024x786 , but on the other pc (screen resolution 1280x1024 ) the same page looks too small and I have white spaces around it. I want my whole page with it's elements adapt to the browser window size and fit exactly to it ( I don't want to see that scrolling thing on the right or bottom ). You could just give me the link of the function/code I have to use. Here is my code if that helps. Code: <html>
<title>AiiT</title>
<body background="b.png" style="background-repeat:no-repeat; background-position:center center; width: 1024px;height:768px;">
<div style="background-image: url('1.png'); width:764px; height:557px; position: absolute;
top: 12%;
left: 50%;
margin-left: -382px; text-align:center;
"><div style="background-image: url('Tr.png'); background-repeat:no-repeat; position: relative; left:30px; top:30px;"><img src="Her.png" border="0" style="margin-top:10px;"><br><br>
<a href="en/"><img src="an.png" border="0"></a> <a href="lt/"><img src="li.png" border="0"></a><br><br><img src="Logo.png" border=0"></div></div>
</body>
</html>
Help appreciated. |
|||||||