HTML - Using Button To Change The Page Displayed In An Iframe

Hi there I'm trying to make a website for a friend - http://wwwdev.cfpaddler.co.uk.

At the top of the site is a 1x40 pixel (WxH) GIF - a horizontal gradient - that is told to have a width of 100% so that it takes up the entire width of the browser window, regardless of resolution.

I want to put a 250-pixel-wide JPEG immediately to the left of this GIF and then make the GIF take up the rest of the space available. I tried setting the GIF width to 100% again but it puts the JPEG on the top line and then stretches the GIF across the entire window just beneath it.

I'd be happy to use PHP (although I'm a beginner at it) to maybe detect the user's browser window width (if it's possible?) then perform a calculation to find what 100% width minus 250 pixels is...

Any suggestions are very much appreciated; thanks for taking the time to read this.

Chris

Images in question are http://wwwdev.cfpaddler.co.uk/images/top_border.gif and http://wwwdev.cfpaddler.co.uk/images/top_logo.jpg.

I think I have the same problem, I am setting up a site offering bands a personal page on a local music scene website.

the band's page is displayed in a frame

when I have created a page for the band i want to offer them a url to directly link to their page but still show the entire frameset (index.html) what would this url be or how woul i go about creating it?

would really appreciate the help, cheers!

Luke

Hi,

Quite some time ago I was faced with putting a website together for the first time for a local community group (my wife nominated me!). Rather than tell you all what it contains and how it looks, it is probably easier for me to give you the link which is the Friends of Clifton Park based in South Yorkshire, UK.

This website consists of eight html pages. The first is the index, second is the welcome page and the rest are linked pages via links on the left.

On every of the "linked" pages, only the main body changes, with the exception of each link showing in Caps and link disabled.

The problem I'm having is that every single one of the linked html pages are the same, except the displayed text. 90% is the page set-up.

So my question is: Is it possible to "import" the required text information when a link is clicked on straight into the main body of ONE html page? btw, you'll notice that the page height isn't fixed, it expands depending on amount of information in it.

I have tried IFRAME but don't really seem to be getting anywhere as I can't seem to make the height auto-adjust. A specified height value has to be entered for each "page". This is no good as more information will be needed to be put on.

So basically what I am trying to do is:
Keep the index.html Change the welcome.html to display the main page (graphics/images, etc) Import text into main body into the welcome.html page when a link is clicked on.
Thus reducing the need of duplicate html pages and just having text files containing the main body text.

The main reason for wanting to do this is a) stop all the duplication of page set-up in each html file, and b) make it easier for the guy that wants to add information where needed, straight into notepad (txt file) and upload it to the website.

I hope all the above makes sense and if anyone requires further information, I will only be to happy to provide it!

Thank you.

i have an iframe set up using the code

Quote:
<iframe href="http://www.maidenerleghweather.com/forecast2.php" target="_self" scrolling="no" src="http://www.wunderground.com/swf/pws_mini_rf_nc.swf?station=IWOKINGH4&amp;freq=2.5&amp;units=metric&amp;lang=EN onClick=" style="zoom: 85%;"></iframe>
which is displayed at http://www.maidenerleghweather.com/livedata.html

the trouble is when i click on the iframe it links to a weatherunderground weather website, rather than the one i have specified in the code.

is it possible to take control of this and use my own link instead?

is it possible to use a transparent box over the iframe and then have my link connected to this?

hopefully someone can point me in the right direction. i am a beginner with iframes and html so please be patient!

check out this!
they said you couldnt, but i have!
visit www.jaicpromotions.co.uk and you'll see!!!
then view source!

Jai

insert this in the <head> section in your code, but make sure that each <iframe> has a new *.htm page as its base location, then again on each of those pages, insert this script into the <head> section again!!
sorted!!!! no more unsightly grey bars !!!!! Yipee !!!!!!

<STYLE type="text/css">
BODY {scrollbar-3dlight-color:#F0FFFF;
scrollbar-arrow-color:#FF8C00;
scrollbar-base-color:#000000;
scrollbar-track-color:#000000;
scrollbar-darkshadow-color:#696969;
scrollbar-face-color:#000000;
scrollbar-highlight-color:#FF8C00;
scrollbar-shadow-color:#FF8C00}
</STYLE>

Is there a way to make a link within an iFrame to change the page the user is on?

e.g. I have a menu, I put the iframe code on all my web pages, someone clicks on a link in the iframe and it changes the web page.

Thanks in advance!

I am trying to detect a change in an iframe (to a different particular source) and when this happens refresh the outer ( top ?) frame that contains the iframe.

Do I need to do this via javascript?

both frames are actually php

thanks in advance

Hi guy,

Due to my limited knowledge, i had stuck here and hope you guys can guide me along.

Let say i have a surveyform.html that is plant into index.htm via iframe. I have limited control to surveyform.html and this surveyform.htm have a submit button. Once this submit button is clicked, it will go to a 'Thankyou.htm'.

The problem now is that this thankyou.htm is still plant inside index.htm which i doesn't want it to be. Is there any way that i can change the whole page? Maybe when iframe detect changed of html and the whole page redirect to another page?

note: i can't do much to the surveyform.htm

How do I make a button change images when a user rolls over his/her mouse? Thanks.

I'd like to improve the appearance of three buttons on an html page. i believe this is the code:

Code:

<input type="submit" name="purchase" value="Use Remaining Credits" style="margin:7px 0" style="padding:1px 2px 1px 2px" rel="gb_page_center[600, 635] ">
<input type="button" name="search" value="Get New Credits" onclick="window.location.href='newcredits.php';" style="margin:7px 0" style="padding:1px 2px 1px 2px">
<input type="button" name="search" value="Search Again Now" onclick="window.location.href='page.php??page=12';" style="margin:7px 0" style="padding:1px 2px 1px 2px">

How can I add more attractive buttons, which would include the text "Use Remaining Credits", etc.? can you please provide a code example, with image code?
Thanks

How do I make a button change images when a user rolls over his/her mouse? Thanks.

I have plain HTML on the main page and <iFrame> tag on it, inside tag i have URL to other page that using some script that forces host page to reload and show page from frame instead of it.

Can i somehow stop it from messing my entire main page?

Hello

Im creating a IE Mobile website, which has limited CSS capabilities ( see http://blogs.msdn.com/windowsmobile/...es/213771.aspx ) and jscript capabilities( http://msdn.microsoft.com/library/de...ects2_jrzu.asp )

I have been able to change the buttons color and my current version I have the following code that changes the page background color when a button is focused. I just want the buttons to change color when the focus is on it and when no longer focused goes back to normal, so the user knows they have moved to another button.

<HEAD><title>MySite</title>
<SCRIPT TYPE="text/javascript">
<!--
function setbg(color)
{
document.bgColor=color;
document.body.style.backgroundColor=color;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="BUTTON" NAME="Btn1" VALUE="1"
onFocus="setbg('red')" >
<INPUT TYPE="BUTTON" NAME="Btn1" VALUE="1"
onFocus="setbg('black')" >
</BODY>
</HTML>

Any suggestion on how to change just button color upon mouseover and mouseout?

Well thanks for any help 1 can extend!

Hey, I need help making the bg color of an autoshape change its color by pressing a button. I'm using Microsoft FrontPage and am quite new to html. I know how to press a button and change the document background color but can not figure out how to do this but with an autoshape. Here is the code I have used to change the document background color:

HTML Code:

<div style="width: 110; height: 19; position: absolute; left: 903; top: 6">
<font size="2" face="Verdana,Arial,Helvetica,Sans Serif"> 
<input type="button" name="colr" onclick="document.bgColor='#0000FF'" style="color: #0000FF; width: 18; height: 18; border: 3px outset #0000FF; background-color: #0000FF"> 
<input type="button" name="colr" onclick="document.bgColor='#00FF00'" style="width: 18; height: 18; color: #00FF00; border: 3px outset #00FF00; background-color: #00FF00"> 
<input type="button" name="colr" onclick="document.bgColor='#FFFFFF'" style="width: 18; height: 18; color: #FFFFFF; border: 3px outset #FFFFFF; background-color: #FFFFFF"> 
<input type="button" name="colr" onclick="document.bgColor='#FFFFFF'" style="width: 18; height: 18; color: #FFFFFF; border: 3px outset #FFFFFF; background-color: #FFFFFF"> 

</div>

It says document.bgcolor= ect but I cannot figure out the name of the autoshape so am not sure, in the html I think it only says the ID of the autoshape but do not know where to go from there. Please try and help and thanks in advance.

hi there. i made a website for somebody years ago when i knew nothing about html. the code is absolutely crazily bad and i am looking to revamp it.
the site is www.englishandproudofit.co.uk

i know how to do the layout but its the buttons i am struggling with.
what is the best way to make the buttons around the outside?
i only want to use one image for all of the buttons and then have text on each button that also chnages colour on hover, pretty much how it is now but what would be the correct way to do it?
all help greatly appreciated. thank you, sam