Author Topic: Form to act as address bar. (Read 8754 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>

Jacob · « **Reply #15 on:** September 19, 2008, 04:22:18 PM »

The text box does not update with the new website and it does not go to the site you enter in the text box.
What did you exactly add or change?
So i know what i am testing?

kpac · « **Reply #16 on:** September 19, 2008, 04:27:54 PM »

I added the JavaScript in the <head>....

Code: [Select]

function changeURL()
{
  var url = document.getElementById('link').value;
  document.getElementById('linkframe').src = url;
}

The clickable image that changes the location:

Code: [Select]

<img border="0" src="files/images/refresh.bmp" width="11" height="11" onClick="changeURL()">

And the ID to register witht the "getElementById" command:

Code: [Select]

<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>

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

That images was used refresh the page, but fair enough.
This works great, apart from say in the iframe i clicked to go to yahoo.com
how would i get the text box to auto update with http://www.yahoo.com.

kpac · « **Reply #18 on:** September 20, 2008, 04:32:20 AM »

I'm not sure about that one, sorry.

Jacob · « **Reply #19 on:** September 20, 2008, 04:47:13 AM »

No worries, thanks for your great help anyway.

Computer Hope Forum

News:

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

Jacob

kpac

ChrisXPPro

kpac

Jacob

kpac

Jacob

kpac

Jacob

kpac

kpac

Jacob

kpac

Jacob

kpac

Jacob

kpac

Jacob

kpac

Jacob