How to, Link to a section of a scrollable page??

[DesignIt]

Does anybody know what the code is for this function?

I have a large scrolling page and I have a nav off to the side with links to sections of the page.

THanks!

[EC]

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_bookmark

[DesignIt]

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_bookmark

I'm not sure what that link is for, but I did find out what I am looking for. It's called a "Named Anchor".

Now if I can just get it to work!! =)

[EC]

that link above shows you an example of the named anchor. Just look at the code to see how it works. :)

[DesignIt]

that link above shows you an example of the named anchor. Just look at the code to see how it works. :)

I have the code in place properly but it's still not working for some reason. Does it matter if part of the page is scrollable?

[EC]

hmmm. well I don't ever use frames, so this has me a bit stumped. is that section you're linking to on the left -- is that a separate page? You would then just write the full link path ... i.e.

<a href="http://www.yourdomain.com/thatpage.htm/#spot" />

[DesignIt]

I'm not using frames. It's all the same page.

The scrolling is accomplished thru CSS.

[EC]

aaah. why not post the code so we can take a look.

[chris_bcn]

you don't have the link in the right place.

try putting it here

<a name="elegantinteriors" id="elegantinteriors"></a>
<div class="features_amenitieslist">
<ul>
<img src="images/features_subhdline3.gif" alt="COMMUNITY FEATURES" width="200" height="13" class="features_amenitiessubhdr"/>
<li><span class="listdots">•</span> Knotty Alder Interior Doors</li>
<li><span class="listdots">•</span> 5&rdquo; Knotty Alder Baseboards and 4&rdquo; Knotty Alder Window and Door Casing throughout</li>
<li><span class="listdots">•</span> 9&rsquo; Ceilings as per plans</li>
<li><span class="listdots">•</span> Hand trowelled texture on walls and ceilings</li>
<li><span class="listdots">•</span> Wood Burning Fireplace in Living Area and Basement</li>
<li><span class="listdots">•</span> Slate Tile in entry, bathrooms and kitchen as per plan </li>
<li><span class="listdots">•</span> 4 Hose Bibs (front, rear and main floor and upper floor decks) </li>
<li><span class="listdots">•</span> Pre-Finished Low Maintenance Dual Glazed Windows </li>
<li><span class="listdots">•</span> Cultured Stone Trim as shown </li>
</ul>
<div class="nav_backtotop"><a href="#top" class="navlinksb">Back to Top</a> </div>
</div>

[DesignIt]

Ok, but I warn you. The css is kind of a mess right now. I still need to go thru and organize it. =) This is for the whole site also. If it's too much of a pain, don't worry about it. =)

[EC]

did what chris do fix it? If not, paste the HTML, not the CSS.

[chris_bcn]

holy moly!

If you move the anchor link to where I put it in the code it will work - it's not a css issue

[DesignIt]

you don't have the link in the right place.

try putting it here

<a name="elegantinteriors" id="elegantinteriors"></a>
<div class="features_amenitieslist">
<ul>
<img src="images/features_subhdline3.gif" alt="COMMUNITY FEATURES" width="200" height="13" class="features_amenitiessubhdr"/>
<li><span class="listdots">•</span> Knotty Alder Interior Doors</li>
<li><span class="listdots">•</span> 5&rdquo; Knotty Alder Baseboards and 4&rdquo; Knotty Alder Window and Door Casing throughout</li>
<li><span class="listdots">•</span> 9&rsquo; Ceilings as per plans</li>
<li><span class="listdots">•</span> Hand trowelled texture on walls and ceilings</li>
<li><span class="listdots">•</span> Wood Burning Fireplace in Living Area and Basement</li>
<li><span class="listdots">•</span> Slate Tile in entry, bathrooms and kitchen as per plan </li>
<li><span class="listdots">•</span> 4 Hose Bibs (front, rear and main floor and upper floor decks) </li>
<li><span class="listdots">•</span> Pre-Finished Low Maintenance Dual Glazed Windows </li>
<li><span class="listdots">•</span> Cultured Stone Trim as shown </li>
</ul>
<div class="nav_backtotop"><a href="#top" class="navlinksb">Back to Top</a> </div>
</div>

That still doesn't work. I've even done it directly thru dreamweaver, and it still doesn't work. =\ Doesn't make sense.

[chris_bcn]

Odd - worked for me

[DesignIt]

Odd - worked for me

It's live right now, try it. It doesn't work for me.

[chris_bcn]

sorry - I know - I meant odd - works for me, locally

I'll have another look at it

[DesignIt]

I take that back. It works in Internet Explorer on a pc.

It does not work in Mac Safari. =\ ARrgh

[chris_bcn]

try putting it inside the div:

<div class="features_amenitieslist">
<a name="elegantinteriors" id="elegantinteriors"></a>

rather than wha I originall said:
<a name="elegantinteriors" id="elegantinteriors"></a>
<div class="features_amenitieslist">

Does that work?

[DesignIt]

try putting it inside the div:

<div class="features_amenitieslist">
<a name="elegantinteriors" id="elegantinteriors"></a>

rather than wha I originall said:
<a name="elegantinteriors" id="elegantinteriors"></a>
<div class="features_amenitieslist">

Does that work?

Negatory. =\

[chris_bcn]

maybe safri needs something to link it to? trying wrapping the <a> round text or an image?

I haven't got access to a Mac at them oment to test I'm afraid

[EC]

^ by the way, just for future reference, this is handy if you don't have a mac and want to test:

http://www.fundisom.com/g5/

It's offline right now, but pretty cool.

[chris_bcn]

very cool - don't want to thread hikack, but how accurate is it?

[EC]

as far as I know, very. last time I was there, it has more than safari too -- it had all the major browsers.

[DesignIt]

I'm gonna take a look at it later on. I have gathered that it is definately a safari/mac issue. It doesn't work consistently in netscape mac either.

[ecsyle]

Perhaps make the code validate first. 79 errors, and one related to this problem it seems.
Line 208 column 31: ID "elegantinteriors" already defined.

[DesignIt]

Perhaps make the code validate first. 79 errors, and one related to this problem it seems.
Line 208 column 31: ID "elegantinteriors" already defined.


I appreciate the catch, but the errors aren't problems that are causing this issue. I have since updated the page and got rid of the errors. I am just thinking it is a mac thing. I will have to find some sort of hack I guess.

[chris_bcn]

I'm inclined to think it's down to your code. It didn't seem to work in Firefox on PC either. IE is generally more forgiving of wrongly formed code.

I would strip it down to it's bare essentials and take another look at it

[DesignIt]

I'm inclined to think it's down to your code. It didn't seem to work in Firefox on PC either. IE is generally more forgiving of wrongly formed code.

I would strip it down to it's bare essentials and take another look at it

Here is the correctly coded link. I works in both PC IE and Mac Netscape...but still not Safari. If anybody knows of a javascript hack, that would be great! I am positive it is a safari issue though.

http://dev.nootgroup.com/dev.theshores/TSF05005_v1j/features.htm

[EC]

can I make just a small suggestion? The titles on top on the left are RIGHT ON the top of the browser, they don't have any breathing room. I never use these types of links because I hate having to adjust my eyeballs and figure out where I'm supposed to start reading. (Although I know they are very useful in certain situations).

But just a little more room above those titles and I think the user's eyes will go *right* to the proper place. So either a margin-top or maybe a <br /> or two to give it some room?

What is your audience, how many of them (%) do you think will be Safari. And what exactly happens to it in safari.

I check my stats for my sites and I RARELY have safari users. It depends on your audience I think.

[chris_bcn]

by the way, have you checked it 1280x1024 - I know not many people use that resolution, but the site is all footer on my screen, and very little content.

[DesignIt]

can I make just a small suggestion? The titles on top on the left are RIGHT ON the top of the browser, they don't have any breathing room. I never use these types of links because I hate having to adjust my eyeballs and figure out where I'm supposed to start reading. (Although I know they are very useful in certain situations).

But just a little more room above those titles and I think the user's eyes will go *right* to the proper place. So either a margin-top or maybe a <br /> or two to give it some room?

What is your audience, how many of them (%) do you think will be Safari. And what exactly happens to it in safari.

I check my stats for my sites and I RARELY have safari users. It depends on your audience I think.

I agree with you. I don't like how the "named anchor" code throws the title right up on the browser. I will experiment with that a bit after I figure out how to get this to work in safari...that is my primary concern right now.

Also, we didn't design this page like this the first time around, it was purely a request of the client. I don't like them either. =)

I realize that very few people use safari, compared to other browsers. And right now, Safari, is the only place this doesn't work. But since one of the clients for this site uses safari...well...yeah, it SHOULD work in safari. =)

[DesignIt]

by the way, have you checked it 1280x1024 - I know not many people use that resolution, but the site is all footer on my screen, and very little content.

Again...a request of the client to make it (the footer) this size. =)

[EC]

I agree with you. I don't like how the "named anchor" code throws the title right up on the browser. I will experiment with that a bit after I figure out how to get this to work in safari...that is my primary concern right now.

Also, we didn't design this page like this the first time around, it was purely a request of the client. I don't like them either. =)

I realize that very few people use safari, compared to other browsers. And right now, Safari, is the only place this doesn't work. But since one of the clients for this site uses safari...well...yeah, it SHOULD work in safari. =)

Aaah yes, well then we must find a solution. You know, if you google your problem -- I've found that you can sometimes find a forum or blog or some discussion out there that goes over it. "Safari bug named anchor" type of thing.

[DesignIt]

Aaah yes, well then we must find a solution. You know, if you google your problem -- I've found that you can sometimes find a forum or blog or some discussion out there that goes over it. "Safari bug named anchor" type of thing.

I did find this javascript workaround, but can't seem to get it to work:

http://blog.deconcept.com/code/overflowsafari/overflowsafarijs.html

My coding abilities don't go quite that far I guess. =)

[EC]

is it live? toss me a link, I'm lazy.

[DesignIt]

Link removed temporarily.

[EC]

Ok I see it. Keep in mind I don't know anything about javascript. But, if you read this dudes' notes, you'll see that's he's indentified a variable ("box") and that needs to be changed.



/*
* Javascript fix for Safari's inability to link to named anchors (or ids of elements) inside
* elements with overflow: auto set
*
* see http://blog.deconcept.com/code/overflowsafari/overflowsafari.html
* for more information
*
* by Geoff Stearns ( geoff @ deconcept.com )
*
*/


// the id of the element with overflow: auto set, in this case the div
var targBox = "box";

function init() {
if (document.getElementById) {
var atags = document.getElementsByTagName("A");
for (var i=0;i<atags.length;i++) {
var ca = atags[i];
if (ca.href.indexOf("#") > -1) {
ca.onclick = function() {
scrollDivToAnchor(this.href.split("#")[1]);
}
}
}
}
}

function scrollDivToAnchor(a) {

var b = document.getElementById(targBox);
b.scrollTop = document.getElementById(a).offsetTop - b.offsetTop;

// alternately, if your elements are not nested within other nodes inside the box,
// you could use document.getElementById(a).parentNode.scrollTop
// that way you wouldn't need to specify the id of the scrollable box

}

if (navigator.userAgent.indexOf("Safari") > -1) {
window.onload = init;
}



People might come along and laugh at me, but I'd just try experimenting. Somehow you need to tell this little code where to go is the thing. Maybe start with the last option, replacing


var b = document.getElementById(targBox);
b.scrollTop = document.getElementById(a).offsetTop - b.offsetTop;

with

var b =document.getElementById(a).parentNode.scrollTop


Until a js guru comes along anyway. ;)

Edit

OR Ok, ok. targBox replace "Box" with the name of your div? targYourdivname? lol I dunno. I'm tryin' anyway. I probably sound like a dumbass.

[DesignIt]

Appreciate your help EC. Thanks! I will mess around and see how it goes.

[EC]

No problem. I wish I were a better coder in this regard, but I'm not. :(

What I have learned to do, though, is to read notes VERY carefully. Programmers don't like to use a lot of unecessary words, they get right to the point. lol But the clues to their mysteries are typically always there if you look carefully enough. Good luck. :)

(And let us know how it goes, I might need this trick sometime.)

[DesignIt]

OR Ok, ok. targBox replace "Box" with the name of your div? targYourdivname? lol I dunno. I'm tryin' anyway. I probably sound like a dumbass.

I tried this but it didn't work. but I have a different setup than his. His is pretty basic. hmmm.

[EC]

Yeah because it's more than one link, more than one variable, huh. You might PM JPnyc, I'm pretty sure he's a javascript wiz.

[JPnyc]

Do you have overflow set to auto as it says in the comments?

[ecsyle]

Unless I was looking at the wrong page, you didn't add the javascript to the link. You need to add the onclick attribute.

<a href="#top" onclick="scrollDivToAnchor('#top')">Link name</a>

[JPnyc]

Are you passing the value of "a" in the function call? Can you post your relevant HTML as you have it?

[DesignIt]

I will have to come back to this tomorrow for more "exploration". Gotta jump on something else atm.