PDA

View Full Version : linking to a Scrollable IFRAME



rhoymand
01-20-2006, 08:51 PM
script: Scrollable IFRAME
http://www.dynamicdrive.com/dynamicindex17/iframescroll.htm

a few questions about customizing the Scrollable IFRAME script:

is it possible to have links outside of the iframe link into it from a sourced html file? I want to use it as the means to navigate a website.

can you have multiple up and/or down buttons at different speeds. I want 2 down buttons: one at normal scroll speed and one so fast it'll take you to the end of the document instantly.

jscheuer1
01-21-2006, 07:43 AM
If you give the iframe a name and target it with your links on the top page, yes:


<iframe name="norma" src= . . .


<a href="some.htm" target="norma">Link Text</a>

You can also make up links (for the top page, not the contained page) with events like these:


<a href="javascript:toTop();" onclick="norma.scrollTo(0,0);return false;">Top</a>

and:


<a href="javascript:toBottom();" onclick="norma.scrollTo(0,10000);return false;">End</a>

Notes: The href values of these last two links are dummies. They could as well be:


href="#"

But, whatever they are will show in the status bar (in many browsers) onmouseover so, might as well make them seem official. This also means that if you make the event onmouseover, you still need to return false onclick, ex:


<a href="javascript:toBottom();" onclick="return false;" onmouseover="norma.scrollTo(0,10000);">End</a>

Warner
01-23-2006, 11:00 PM
Can you change background from white to transparant or a picture or a color?

Warner B. :confused:

jscheuer1
01-24-2006, 02:49 AM
Can you change background from white to transparent or a picture or a color?

Warner B. :confused:

That depends upon the browser and upon what's displayed in the iframe. Generally most browsers that support iframes will allow you to set the background color and/or image of the iframe via style and then that will show through as the background of the content of the iframe. However, in IE only a page with no background of its own set will do this and even then the proprietary allowtransparency="true" attribute must be set for the iframe. So, do something like so:


<iframe style="background-color:green;" allowtransparency="true" src="page_with_no_background_set.htm"></iframe>

or for an image:


<iframe style="background-image:url('some.gif');" allowtransparency="true" src="page_with_no_background_set.htm"></iframe>

Notes: Style can also be set in a stylesheet or stylesheet section if you are familiar with how that is done. If no page is used, for example if an image only is the content of the iframe, this will not work in IE.

gcam
04-03-2007, 09:20 PM
If you give the iframe a name and target it with your links on the top page, yes:


<iframe name="norma" src= . . .


<a href="some.htm" target="norma">Link Text</a>

You can also make up links (for the top page, not the contained page) with events like these:


<a href="javascript:toTop();" onclick="norma.scrollTo(0,0);return false;">Top</a>

and:


<a href="javascript:toBottom();" onclick="norma.scrollTo(0,10000);return false;">End</a>

Notes: The href values of these last two links are dummies. They could as well be:


href="#"

But, whatever they are will show in the status bar (in many browsers) onmouseover so, might as well make them seem official. This also means that if you make the event onmouseover, you still need to return false onclick, ex:


<a href="javascript:toBottom();" onclick="return false;" onmouseover="norma.scrollTo(0,10000);">End</a>

Hi, while searching for help I found this topic that looks like it is what I am trying to accomplish. Although I dont quite understand the html portion even if it looks easy.

I am attempting to use links in the following site:
http://www.californiabullfights.org/schedules/index.shtml

This is the code:

<table border="1" cellspacing="1" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber7">
<tr>
<td width="50%" align="center"><font face="Arial" size="2">2004</font></td>
<td width="50%" align="center"><font face="Arial" size="2">2005</font></td>
</tr>
<tr>
<td width="50%" align="center"><font face="Arial" size="2"><a href="../schedules/2006/index.shtml" target="datamain">2006</a></font></td>
<td width="50%" align="center"><font face="Arial" size="2">2007</font></td>
</tr>
</table>
<!--Scrollable iframe script- By Dynamic Drive-->
<!--For full source code and more DHTML scripts, visit http://www.dynamicdrive.com-->
<!--This credit MUST stay intact for use-->

<iframe id="datamain" src="../schedules/2007/sched2007.shtml" width=550 height=400 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=1 scrolling=no></iframe>

<layer visibility=hide>
<div style="width:550px;" align="left">
<a href="#" onMouseover="scrollspeed=-2" onMouseout="scrollspeed=0">Up</a> | <a href="#" onMouseover="scrollspeed=2" onMouseout="scrollspeed=0">Down</a>
</div>
</layer></p>

As you can see in the third cell of table is where the link is, and the target is the iframe id: datamain. But when I click on link, a new window opens.

Hope I am not to confused, or this is confusing.

Any help? Thanks

Gcam

jscheuer1
04-04-2007, 04:07 AM
You target by name:


<a href="../schedules/2006/index.shtml" target="datamain">2006</a>


<iframe name="datamain" id="datamain" src="../schedules/2007/sched2007.shtml" width=550 height=400 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=1 scrolling=no></iframe>


Fortunately, you can use the same name and id for one iframe.

gcam
04-04-2007, 02:34 PM
John,

Well That is the way I have it set up, yet the link keeps opening a new window. Anything I might be doing wrong?

Gerry

jscheuer1
04-04-2007, 02:46 PM
<iframe id="datamain" src="../schedules/2007/sched2007.shtml" width=550 height=400 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=1 scrolling=no></iframe>


John,

Well That is the way I have it set up, yet the link keeps opening a new window. Anything I might be doing wrong?

Gerry

Yes, you only have the id specified.



<iframe name="datamain" id="datamain" src="../schedules/2007/sched2007.shtml" width=550 height=400 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=1 scrolling=no></iframe>

gcam
04-04-2007, 02:53 PM
John,

Bingo. Got it now, thanks. Mucho help, u Are.

Gerry

gcam
04-04-2007, 02:55 PM
Going to read up on this iframe stuff, like what it does. I heard it was getting phased out, is that true?

Thanks again,

Gerry

gcam
04-04-2007, 03:13 PM
John,

I seem to have a problem, with the rest of the page. All links on the page are targeting the iframe=datamain. Not sure why though...

Gerry

jscheuer1
04-04-2007, 03:16 PM
I seriously doubt that iframe will be phased out anytime soon. This is a confusion that often arises around anything that is being phased out of the current standard. Iframe is in fact invalid in HTML 4.01 strict. However, the installed based of web pages that utilize iframe ensures that browsers will support it for a very long time to come. The only thing that might get tricky anytime soon, and I stress might, is that some of the newer browsers (not any that exist today that I know of) may actually require that if you do use iframe, that you do not also use on that page the DOCTYPE(s) in which is is considered invalid.

gcam
04-04-2007, 03:24 PM
ok ten four, will school on it. by the way, my issue with everything linking to the iframe is fixed. I have the target set by default to the datamain, oops.

Thanks again.

Gerry

jscheuer1
04-04-2007, 03:24 PM
John,

I seem to have a problem, with the rest of the page. All links on the page are targeting the iframe=datamain. Not sure why though...

Gerry

Get rid of this:


<base target="datamain">

ditsever
04-06-2007, 02:55 AM
I am using the div tag, and inside it i am using iframe for showing another page[php page].
And i want to open another div window from the pointed page[i.e page opened inside iframe] by clicking on hyperlink on the page.The hyperlink is placed on different page which is loaded through iframe.

To be simple,i have two div ids div1,div2 in my page5.In the div1 i am using the iframe to open another page[let say page10].And when the user clicks on the hyperlink in page10,i want to invoke div2 and the load another page[page7] into it.


Actually it is a chat system.All are Inline Windows using div tags.
The problem is that i want to pass arguments from the page10 t0 page7 where different users have diff ids for the chat system to work.

Any help will be very much appreciated.