Author Topic: Form to act as address bar. (Read 8775 times)

Jacob · « **on:** September 19, 2008, 12:18:22 PM »

How would i create a text box and a button to act as an address bar for an inline frame.
Thanks

Current Code:

<html>

<head>
<script language=javascript type='text/javascript'>
function hideDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideShow').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'hidden';
}
else { // IE 4
document.all.hideShow.style.visibility = 'hidden';
}
}
}

function showDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideShow').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'visible';
}
else { // IE 4
document.all.hideShow.style.visibility = 'visible';
}
}
}
</script> 
<meta http-equiv="Content-Language" content="en-gb">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>AdvancedBrowse beta</title>
</head>

<body vlink="#0000FF" alink="#0000FF" text="#000000" bgcolor="#FFFFFF">

<p style="margin-top: 0; margin-bottom: 0"><b><font face="Arial" size="2">&nbsp;&nbsp;
</font></b>

<font size="2" face="Arial"><b>AdvancedBrowse</b> <a href="javascript:hideDiv()">
<img border="0" src="files/images/up.bmp" width="7" height="4">Hide</a>
<a href="javascript:showDiv()">
<img border="0" src="files/images/down.bmp" width="7" height="4">Show</a> <font color="#0000FF"> <u>
About</u> <u>Information</u> <u>beta</u> <u>
<img border="0" src="files/images/more.bmp" width="7" height="4">more</u></font></font></p>
  <div id="hideShow" ..etc>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" background="files/images/spacer.png">
  <tr>

    <td width="100%">
    &nbsp;<font face="Arial" size="2"><b>&nbsp; Address: </b></font>
    <input name="T1" size="63" value="http://www.google.com">
       <img border="0" src="files/images/back.bmp" width="5" height="10" onClick="history.back();">
    <img border="0" src="files/images/forward.bmp" width="5" height="10" onClick="history.forward();">
    <img border="0" src="files/images/refresh.bmp" width="11" height="11" onClick="window.location.reload();return false;">
    <img border="0" src="files/images/home.bmp" width="11" height="11" onclick="I1.location='http://www.google.com';"></td>
  </tr>
</table>

<p align="center" style="margin-top: 0; margin-bottom: 0">
<iframe name="I1" width="100%" height="91%" src="http://www.google.com" border="0" frameborder="0" align="left">
Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>

</div> 

</body>

</html>

kpac · « **Reply #1 on:** September 19, 2008, 01:18:52 PM »

What do you want the "address bar" to do?

ChrisXPPro · « **Reply #2 on:** September 19, 2008, 01:38:39 PM »

Quote

What do you want the "address bar" to do?

Wondering that too! Are you wanting someone to fill in a url and then go to it?

kpac · « **Reply #3 on:** September 19, 2008, 01:55:54 PM »

.... Or a search form for your website? We need a lot more information on what you are trying to do...

You have the iframe source as "http://www.google.com".... Is it that you want to have Google as the search form for your website? If so, it won't work. You'll need to sign up for a Google Custom Search.
Also the URL "http://www.google.com" won't load as a frame. You would have the use "http://www.google.com/index.htm" or "http://www.google.com/index.php" etc. etc.

But before we go any further,

Quote

We need a lot more information on what you are trying to do...

Jacob · « **Reply #4 on:** September 19, 2008, 02:04:03 PM »

I would like it as a standard URL address bar.
Like on any web browser.
I don't need it to search, but if you say typed www.website.com
then what you have typed would load in the inline frame.

kpac · « **Reply #5 on:** September 19, 2008, 02:06:04 PM »

Oh, yes, sorry.

I know it can be done, but I'm not 100% sure how to wrap links through frames... Someone else will help though.

Jacob · « **Reply #6 on:** September 19, 2008, 02:14:58 PM »

Quote from: kpac on September 19, 2008, 02:06:04 PM

Oh, yes, sorry.

I know it can be done, but I'm not 100% sure how to wrap links through frames... Someone else will help though.

I have a general idea that you get the info from the form then set it as the target frame (I1) as the address.
but I don't know how to turn that into html.
Thanks for your help so far.
ALSO [Update on code] (more current version)

and every time the website in the frame changed the text box displays the current URL.

kpac · « **Reply #7 on:** September 19, 2008, 03:48:58 PM »

Does what you have not work? It looks fine....

Jacob · « **Reply #8 on:** September 19, 2008, 03:53:06 PM »

It's an empty form.
with initial set as google

kpac · « **Reply #9 on:** September 19, 2008, 03:59:37 PM »

Ah yes, sorry once again.

I'm in a testing mood now so I try and make it work....

kpac · « **Reply #10 on:** September 19, 2008, 04:06:47 PM »

Here you go... Tested and working.

Code: [Select]

<html>

<head>
<script language=javascript type='text/javascript'>
function hideDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideShow').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'hidden';
}
else { // IE 4
document.all.hideShow.style.visibility = 'hidden';
}
}
}

function showDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideShow').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'visible';
}
else { // IE 4
document.all.hideShow.style.visibility = 'visible';
}
}
}

function changeURL(url)
{
  var url = document.getElementById('link').value;
  document.getElementById('linkframe').src = url;
  
}
</script> 
<meta http-equiv="Content-Language" content="en-gb">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>AdvancedBrowse beta</title>
</head>

<body vlink="#0000FF" alink="#0000FF" text="#000000" bgcolor="#FFFFFF">

<p style="margin-top: 0; margin-bottom: 0"><b><font face="Arial" size="2">&nbsp;&nbsp;
</font></b>

<font size="2" face="Arial"><b>AdvancedBrowse</b> <a href="javascript:hideDiv()">
<img border="0" src="files/images/up.bmp" width="7" height="4">Hide</a>
<a href="javascript:showDiv()">
<img border="0" src="files/images/down.bmp" width="7" height="4">Show</a> <font color="#0000FF"> <u>
About</u> <u>Information</u> <u>beta</u> <u>
<img border="0" src="files/images/more.bmp" width="7" height="4">more</u></font></font></p>
  <div id="hideShow" ..etc>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" 

width="100%" background="files/images/spacer.png">
  <tr>

    <td width="100%">
    &nbsp;<font face="Arial" size="2"><b>&nbsp; Address: </b></font>
    <input id="link" name="T1" size="63" value="http://www.google.com">
       <img border="0" src="files/images/back.bmp" width="5" height="10" onClick="history.back();">
    <img border="0" src="files/images/forward.bmp" width="5" height="10" onClick="history.forward();">
    <img border="0" src="files/images/refresh.bmp" width="11" height="11" onClick="changeURL()">
    <img border="0" src="files/images/home.bmp" width="11" height="11" 

onclick="I1.location='http://www.google.com/';"></td>
  </tr>
</table>

<p align="center" style="margin-top: 0; margin-bottom: 0">
<iframe id="linkframe" name="I1" width="100%" height="91%" src="http://www.google.com/" border="0" frameborder="0" 

align="left">
Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>

</div> 

</body>

</html>

Yes?

Jacob · « **Reply #11 on:** September 19, 2008, 04:10:16 PM »

Doesn't do a thing in iexplore or firefox?

kpac · « **Reply #12 on:** September 19, 2008, 04:12:17 PM »

Huh? Works in Firefox 3 for me.... The enter button doesn't work, BTW, because it's not a complete form.

Jacob · « **Reply #13 on:** September 19, 2008, 04:14:33 PM »

Quote from: kpac on September 19, 2008, 04:12:17 PM

Huh? Works in Firefox 3 for me.... The enter button doesn't work, BTW, because it's not a complete form.

There is no enter button?
Sure you C&P'd the right thing?

kpac · « **Reply #14 on:** September 19, 2008, 04:19:32 PM »

I meant the enter button on your keyboard....

Okay try this then,

Code: [Select]

<html>

<head>
<script language=javascript type='text/javascript'>
function hideDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideShow').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'hidden';
}
else { // IE 4
document.all.hideShow.style.visibility = 'hidden';
}
}
}

function showDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideShow').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'visible';
}
else { // IE 4
document.all.hideShow.style.visibility = 'visible';
}
}
}

function changeURL()
{
  var url = document.getElementById('link').value;
  document.getElementById('linkframe').src = url;
}
</script> 
<meta http-equiv="Content-Language" content="en-gb">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>AdvancedBrowse beta</title>
</head>

<body vlink="#0000FF" alink="#0000FF" text="#000000" bgcolor="#FFFFFF">

<p style="margin-top: 0; margin-bottom: 0"><b><font face="Arial" size="2">&nbsp;&nbsp;
</font></b>

<font size="2" face="Arial"><b>AdvancedBrowse</b> <a href="javascript:hideDiv()">
<img border="0" src="files/images/up.bmp" width="7" height="4">Hide</a>
<a href="javascript:showDiv()">
<img border="0" src="files/images/down.bmp" width="7" height="4">Show</a> <font color="#0000FF"> <u>
About</u> <u>Information</u> <u>beta</u> <u>
<img border="0" src="files/images/more.bmp" width="7" height="4">more</u></font></font></p>
  <div id="hideShow" ..etc>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" 

width="100%" background="files/images/spacer.png">
  <tr>

    <td width="100%">
    &nbsp;<font face="Arial" size="2"><b>&nbsp; Address: </b></font>
    <input id="link" name="T1" size="63" value="http://www.google.com">
       <img border="0" src="files/images/back.bmp" width="5" height="10" onClick="history.back();">
    <img border="0" src="files/images/forward.bmp" width="5" height="10" onClick="history.forward();">
    <img border="0" src="files/images/refresh.bmp" width="11" height="11" onClick="changeURL()">
    <img border="0" src="files/images/home.bmp" width="11" height="11" onclick="I1.location='http://www.google.com/';"></td>
  </tr>
</table>

<p align="center" style="margin-top: 0; margin-bottom: 0">
<iframe id="linkframe" name="I1" width="100%" height="91%" src="http://www.google.com/" border="0" frameborder="0" align="left">
Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>

</div> 

</body>

</html>

Computer Hope Forum

News:

Author Topic: Form to act as address bar. (Read 8775 times)

Jacob

Form to act as address bar.

kpac

Re: Form to act as address bar.

ChrisXPPro

Re: Form to act as address bar.

kpac

Re: Form to act as address bar.

Jacob

Re: Form to act as address bar.

kpac

Re: Form to act as address bar.

Jacob

Re: Form to act as address bar.

kpac

Re: Form to act as address bar.

Jacob

Re: Form to act as address bar.

kpac

Re: Form to act as address bar.

kpac

Re: Form to act as address bar.

Jacob

Re: Form to act as address bar.

kpac

Re: Form to act as address bar.

Jacob

Re: Form to act as address bar.

kpac

Re: Form to act as address bar.