HTML - Targets, Anchors, Smooth Scrolling

Hello,

I was told it's better to use <object> to nest an html file inside another html file, rather than using iframes.

My question is, how do I via a link target the <object> to make it switch html files?

Currently, I have a link that pops up.

My issue is that within that popup, I have a link that I want to:
- target the parent window
- close on click

I can get the link to either target the parent window or close on click, but I can't get it to do both. Help?

Disregard this post

I would like to use anchors to move down a long scrolling section of my page. The idea is like freezing the top of a spread-sheet. The top section is fixed and has a solid background and a high z-index. The bottom is similar to the top section. The middle shows the low z-index section and allows it to scroll. Since the top is currently set to a height of 200px, I need to have my anchors offset by 200px.

I have this line of code showing in the top section:
<a href="#line1">group 1</a>, <a href="#line2">group 2</a>, <a href="#line3">group 3</a>, <a href="#line4">group 4</a>

Down in the code for the middle section I have code that looks like this:
<a name="line1" id="line1">Group 1</a> repeated for four groups of text.

The problem is that an anchor moves to the top of the browser window which is 200px above the area that is visible.

Here are two links http://www.roberson-family.com/testing/scroll_test.html this is showing the problem.

http://www.roberson-family.com/testi...ll_test_1.html and this is showing the cause of the problem. You can see that the underlying text aligns to the top of the browser.

Surely there is a method to do this, but thus far, Google has failed me, and I find nothing like this here.

Hello

I am having trouble understanding destination anchors(xhtml transitional)

First you do this right:

<a name="pagetop"></a>

then you do this


<a href="#pagetop">
Page top
</a>

what I dont understand is how you mark the place in the site where you are suppose to jump to.

I'm trying to add an anchor to my blog, but without having any link to it in the page itself. I just want to be able to have a specific address for the part of the page that I want to jump to, so that I can cite that address in other places.

Is there any way to do this? I tried inserting this in a random part of my page:

<a href="#name"></a>

And then this immediately above where I want the anchor to be:

<A NAME="name"></A>

But...going to mywebsite.com#name did not take me to the anchor, it just opened the page like normal.

Ideas?

It's seems I've come across a problem. When the page loads, I want it to go to the anchor. Do I have to use the "onload" Java command?

Arrrg,

- Miles

Hi all, just a tiny little problem here. I've got an index page with roll-over thumbnail jpg pics. I want to link them to another page at the relevant place on the page. Currently I can manage a link to the page (storyboards.html), but I can't get the link to go down the page to the relevant section. (storyboard section2).
Help appreciated.

trying to accomplish creating a drop down menu for the anchors of a page. any help or code would be greatly appreciated. any further details needed please dont be shy

Example
Drop Down-> Products Description->to anchored section.

For multiple anchors.

Thanks for your time.

I have a page with an i-frame and I know how to open links into i-frames. I also have a anchor at the top of the page and I know how to link to anchors. Is there a way to do both at the same time?

The i-frame is at the top of the page. I would like to be able to click a link at the very bottom of the page and be moved to the top *and* have that link opened up in the i-frame. Is there an easy way to do this?

Thx.

I am trying to link to a specific part of a page, the instructions tell me to:

Quote:
add # along with the destination anchor id to your href
This is my href:

Quote:
Read the <a href="http://buzz.headlabsfirst.com
title="Read all about caffeine on the buzz">Caffeine buzz</a>
I have added in bold below
<a id="#coffee"</a>
so my mark up looks like

Quote:
Read the <a href="http://buzz.headlabsfirst.com <a id="#coffee"</a>
title="Read all about caffeine on the buzz">Caffeine buzz</a>
but it does not take me directly to the coffee section, what am I doing wrong please?

Hello All,

You guys are probably sick of this topic but I'm really stuck.

I want the frame page (using horizontal frames) to open my content page part way down an existing HTML document. No Links, just want to open part way down my content page.

Here's my Frameset page:

<html><head><title>Table</title></head>

<FRAMESET Rows="148,100%">
<frame noresize src="table_hdr.html">
<frame src="green.html#greentop" NAME="content">
</FRAMESET>
</html>


I tried putting the standard anchor tag in my content page, as so:

<A name="greentop">

at the location I want the content page to open but no Joy. The content page still opens at the top. Using lE 7

What am I doing wrong and what is the proper tag to open the page where I wish?

Thanks all for your help.

Charlie

right i have a site which is like a blog

the parent page has two iframes on it:

one called date
and one called blog

now the iframe date has different dates in
the iframe blog has well the blog with anchors on the dates

now i need so that wen you click on a date in iframe date it moves to that anchor in iframe blog which are two completely different pages

any help appreciated

INDEX (base)
<html>
<head>
<title>site sliced</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (site sliced.psd) -->
<script type="text/javascript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
workinp_03_over = newImage("images/workinp_03-over.gif");
workinp_04_over = newImage("images/workinp_04-over.gif");
workinp_05_over = newImage("images/workinp_05-over.gif");
workinp_06_over = newImage("images/workinp_06-over.gif");
preloadFlag = true;
}
}

// -->
</script>
<!-- End Preload Script -->




<style type="text/css">
<!--
.style1 {color: #000000}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" background="images/background.gif" onLoad="preloadImages();">
<!-- ImageReady Slices (site sliced.psd) -->
<table id="Table_01" width="800" height="601" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="14">
<img src="images/workinp_01.gif" width="800" height="21" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/workinp_02.gif" width="93" height="79" alt=""></td>
<td colspan="2">
<a href="link1.html"
onmouseover="changeImages('workinp_03', 'images/workinp_03-over.gif'); return true;"
onmouseout="changeImages('workinp_03', 'images/workinp_03.gif'); return true;"
onmousedown="changeImages('workinp_03', 'images/workinp_03-over.gif'); return true;"
onmouseup="changeImages('workinp_03', 'images/workinp_03-over.gif'); return true;">
<img name="workinp_03" src="images/workinp_03.gif" width="132" height="79" border="0" alt="link1"></a></td>
<td>
<a href="link2.html"
onmouseover="changeImages('workinp_04', 'images/workinp_04-over.gif'); return true;"
onmouseout="changeImages('workinp_04', 'images/workinp_04.gif'); return true;"
onmousedown="changeImages('workinp_04', 'images/workinp_04-over.gif'); return true;"
onmouseup="changeImages('workinp_04', 'images/workinp_04-over.gif'); return true;">
<img name="workinp_04" src="images/workinp_04.gif" width="138" height="79" border="0" alt="link2"></a></td>
<td colspan="2">
<a href="link3.html"
onmouseover="changeImages('workinp_05', 'images/workinp_05-over.gif'); return true;"
onmouseout="changeImages('workinp_05', 'images/workinp_05.gif'); return true;"
onmousedown="changeImages('workinp_05', 'images/workinp_05-over.gif'); return true;"
onmouseup="changeImages('workinp_05', 'images/workinp_05-over.gif'); return true;">
<img name="workinp_05" src="images/workinp_05.gif" width="162" height="79" border="0" alt="link3"></a></td>
<td colspan="2">
<a href="link4.html"
onmouseover="changeImages('workinp_06', 'images/workinp_06-over.gif'); return true;"
onmouseout="changeImages('workinp_06', 'images/workinp_06.gif'); return true;"
onmousedown="changeImages('workinp_06', 'images/workinp_06-over.gif'); return true;"
onmouseup="changeImages('workinp_06', 'images/workinp_06-over.gif'); return true;">
<img name="workinp_06" src="images/workinp_06.gif" width="161" height="79" border="0" alt="link4"></a></td>
<td colspan="3">
<img src="images/workinp_07.gif" width="114" height="79" alt=""></td>
</tr>
<tr>
<td>
<img src="images/workinp_08.gif" width="39" height="38" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/workinp_09.gif" width="45" height="340" alt=""></td>
<td colspan="9">
<img src="images/workinp_10.gif" width="624" height="38" alt=""></td>
<td rowspan="2">
<img src="images/workinp_11.gif" width="50" height="340" alt=""></td>
<td>
<img src="images/workinp_12.gif" width="42" height="38" alt=""></td>
</tr>
<tr>
<td>
<img src="images/workinp_13.gif" width="39" height="302" alt=""></td>
<td colspan="5" BACKGROUND="images/workinp_14.gif" width="329" height="302">
<iframe name="IF" id="IF" src="dates.html" height="100%" width="100%" frameborder="0">your browser doesnt support iframes please update it</iframe></td>
<td colspan="4" BACKGROUND="images/workinp_15.gif" width="295" height="302" valign="top" style="padding-left: 25px">
<font color="white">HI HOW ARE YOU<P> this box doesnt extend and i cant make it so dont put too much here as it looks really screwy,<P> <B>but look at the background its acctually really smoothly animated and fades so it doesnt annoy you</B></font></td>
<td>
<img src="images/workinp_16.gif" width="42" height="302" alt=""></td>
</tr>
<tr>
<td colspan="14" BACKGROUND="images/workinp_17.gif" width="800" style="padding-left: 100px; padding-right: 100px"><BR>
<iframe src="blog.html" name="IF2" width="100%" height="100%" frameborder="0" class="style1" id="IF2">your browser doesnt support iframes please update it</iframe></td>
</tr>
<tr>
<td colspan="14">
<img src="images/workinp_18.gif" width="800" height="107" alt=""></td>
</tr>
<tr>
<td colspan="14">
<img src="images/workinp_19.gif" width="800" height="22" alt=""></td>
</tr>
<tr>
<td colspan="14" BACKGROUND="images/mid_b.gif" width="800" style="padding-left: 105px; padding-right: 105px"><font color="white">and sodoesn this one <P> its great</font></td>
</tr>
<tr>
<td colspan="2">
<img src="images/workinp_20.gif" width="75" height="17" alt=""></td>
<td colspan="3">
<img src="images/workinp_21.gif" width="46" height="17" alt=""></td>
<td colspan="5" rowspan="2">
<img src="images/workinp_22.gif" width="514" height="18" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/workinp_23.gif" width="73" height="18" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/workinp_24.gif" width="92" height="18" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/workinp_25.gif" width="121" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="39" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="36" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="28" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="104" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="138" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="50" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="112" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="110" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="51" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="22" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="50" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="42" height="1" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
<br>
</body>
</html>



DATES:
<html>
<head>
<title>doesnt matter</title>
</head>
<body bgcolor="black">
click a date to go to that date
<a href"blog.html#10807 target="IF2">August 10th 2007</a></center>
</font></body>
</html>



BLOG:
<html>
<head>
<title>doesnt matter</title>
<link href="blog.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="black">
<table width="100%" border="3" align="center" cellpadding="5" cellspacing="5" bordercolor="#999999">
<tr>
<td class="date" width="30%"><a name="10807">10th august 2007</a></td>
<td class="main" width="100%">Hi my name is Matthew Hailwood and i decided to start a blog to keep track of my life, i dont know how often i will update this however I will try my best </td>
</tr>
<tr class="main">
<td class="date">10th august 2007 </td>
<td>this is the second post </td>
</tr>
<tr class="main">
<td class="date">10th august 2007 </td>
<td>this is the third post </td>
</tr>
</table>

</body>
</html>

I have a website that has an image that loads at the top of the page, and then text about the image that loads below it. My problem is I placed an anchor by the text, underneath the image, so when a certain link is clicked it skips the image and goes right to the text where the anchor is....but when I click on a link to refer to that anchor, it loads to where the anchor is before the image size (width and height) loads. Then, the image loads, and expands th epage, and the image is on screen instead of the text I anchored to.

Is there any easy way to make it so the anchor waits for the image to load before going to where it is....or so the image preloads the size and expands to that width and height before bothering to load the entire image so the anchor will be positioned right....or anything along those lines?

To clarify, it looks like this:

<p><img src="image location" /></p>
Text: <a name="reviews" id="reviews"></a>

and then the link : <a href="site.php?cnt=<? echo($cnt); ?>&pg=<? echo($pg - 5); ?>#theanchor"> Prev 5 </a>

and the anchor position loads before the image loads, so instead of skipping the picture and displaying the text, it just displays only the bottom 90% of the image or so.

Any ideas would be welcomed ,

--Tony

I don't have the ability to add an anchor to the page, it's not mine, but I'd like to link to a specific area on the page. Is that possible without that page having some sort of anchor already on it?