I have a script I wrote that I'd like the input tag to be expanded to 100% the width of the remaining area; it has a div section before it, with a few divs inside, a div section for the input tag, and a div section after it. The problem comes when I float:left all this that the styling for the input tag doesn't work, but if I display:inline I get the width, but everything isn't in a single row like I want.
This is my script. If you have any comments on it, please share as it's a work in progress.
This is my script. If you have any comments on it, please share as it's a work in progress.
Code:
<html>
<head>
<title>WebbyFox</title>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
// home button
function homepage()
{
// get the homepage variable the user set -- not yet implemented
window.open('http://www.google.com', 'iframe_content', 'status=yes').location.href;
//address_bar('www.google.com');
}
// back + forward + reload buttons
// mod code from: http://www.javascriptfreecode.com/25.htm
function goHist(a)
{
history.go(a);
}
// address bar + go button
function address_bar(variable)
{
var site = variable.value;
if (site != "")
{
var site = "http://" + site;
}
/* this will eventually replace the above if-statement
switch (variable.location.protocol)
{
case 1:
var site = "https://" + site;
break;
case 2:
var site = "ftp://" + site;
break;
case 3:
var site = "ftps://" + site;
break;
default:
var site = "http://" + site;
}
*/
window.open(site, "iframe_content", "status=yes").location.href;
// get the URL of the current page -- isn't aware of the iframe pages
variable = document.write(document.URL);
}
</script>
<!-- just here for future reference, doesn't hurt to have it here -->
<link rel="stylesheet" type="text/css" href="FILENAME.css" />
<style type="text/css">
body {
background-color: #999;
padding: 0;
margin: 0;
overflow: hidden; /* cuts off little bit of iframe -- can't see the down arrow of the scrollbar inside the iframe, not too bad if page has large scroll-cursor -- also can't see horizontal scrollbar, this is big problem! */
}
#navigation_bar
{
padding: 0;
margin: 0;
outline-width: 0;
border-width: 0;
}
#navigation_bar div
{
padding: 0;
margin: 0;
outline-width: 0;
border-width: 0;
float: left; /* #address is overlooked */
/*display: inline;*/
}
#address
{
text-align: left;
width: 100%; /* not shown correct if float:left is is place */
}
#content
{
width: 100%;
height: 100%;
outline-width: 0; /* iframe takes up edge-to-edge */
border-width: 0; /* iframe takes up edge-to-edge */
}
</style>
</head>
<body>
<div id="navigation_bar">
<div id="buttons">
<div>
<button id="back" type="button">
Menu
</button>
</div>
<div>
<button id="back" type="button" onclick="goHist(-1)">
<img src="" alt="<" />
</button>
</div>
<div>
<button id="forward" type="button" onclick="goHist(1)">
<img src="" alt=">" />
</button>
</div>
<div>
<button id="reload" type="button" onclick="goHist(0)">
<img src="" alt="R" />
</button>
</div>
<div>
<button id="home" type="button" onclick="homepage()">
<img src="" alt="H" />
</button>
</div>
</div>
<div id="address_bar">
<!-- way to take off history, so previously typed URLs don't show up? -->
<input id="address" type="text" value="" ondblclick="select()" />
</div>
<div id="go">
<button id="go_button" type="button" onclick="address_bar(document.getElementById('address'))">
<img src="" alt="GO" />
</button>
</div>
</div>
<!-- set a browser homepage? -->
<iframe id="content" name="iframe_content" src="">browser doesn't support frames</iframe>
</body>
</html>