PDA

View Full Version : I need help with my Anchors



JohnHow
12-16-2005, 05:09 PM
Hi,

My client wanted me to set up a web site with scrollable content. Once the site was finish the client decided to add anchors within the ilayer that takes a user to content further down within that ilayer. The script I used for the site is:

Scrollable content script II (http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm)

It's a great script.

My problem is that anchors will not work within the ilayer, when clicked they go nowhere.

Does anyone have a solution for this?

Thanks

Twey
12-16-2005, 06:49 PM
Hm? I've scanned quickly through the script, and they ought to work fine; the script doesn't touch the content of the div/layer, just its position.

JohnHow
12-16-2005, 10:50 PM
I have very little scripting knowledge, I am a designer, all I know is when I place an anchor in the ilayer and you click on it nothing happens, the user is not sent to the anchor. I have tried the same thing in and iFrame and it works just fine.

????????? . . .

Twey
12-17-2005, 10:48 AM
The walnuts invade at dawn. or paste your code here inside [code] tags.

JohnHow
12-18-2005, 04:55 AM
Hi Twey

This is the link to the Anchor Test (http://www.tempestdesign.com/test/anchorTest.html) as you will see clicking on the link does not take you to the anchor.


Thanks

jscheuer1
12-18-2005, 07:35 AM
Works fine here.

Twey
12-18-2005, 12:57 PM
Here too. What browser/OS are you using?

JohnHow
12-18-2005, 02:30 PM
Wow, you guys are right. Such a fundamental thing I didn't check it out in other browsers.

I work on a Macintosh OS 10.3.9 using Safari. After reading your comments I tried it on a PC using Internet Explorer. Bingo it works. Although the bottom link stops working when you scroll right to the bottom and back up to that link.

Now I have tried the anchors on following Mac browsers and got these results.

Camino Works Best

Firefox Works the same as PC Internet Explorer
Netscape

OmniWeb Does not work
Opera Does not work

So now I know this is not a universal problem. But it's a big one for me. My clients all use Macs.

Thanks

jscheuer1
12-18-2005, 03:59 PM
The script itself already has an alternative method built in. Try these instead of your anchor links (adapted from the moveup() and movedown() functions):


<a href="#" onclick="crossobj.style.top=(contentheight*(-1)+100)+'px';return false;">bottom</a>

and:


<a href="#" onclick="crossobj.style.top=0;return false;">top</a>

Using the two above links as templates (assuming they work in your browsers), you should be able to devise a way to scroll to just about anywhere you need to within the scrollable content area.

Twey
12-18-2005, 04:43 PM
Surely that's not very reliable though? The anchors won't always be at the same pixel positions throughout different browsers and resolutions.
P.S. it works in Galeon.

jscheuer1
12-18-2005, 07:25 PM
If one were to introduce a percentage calculation based upon the value of the variable 'contentheight', it should take care of any problems like that to within the sort of accuracy usually achieved by using named anchors. Alternatively, anchor tags could be used to calculate the exact pixel position. However, if one considers that even the scrolling action of the script is thrown off if one adjusts one's font size with the browser, this may be one of those situations where you trust that the user will (in most cases) view your page with default settings. Either that or the entire script should be rewritten. Something I recall thinking about before, some time ago, and therefore not out of the question.

jscheuer1
12-18-2005, 08:56 PM
I'd be interested in any problems with locating the contents using this mod. Takes care of the text resizing problem:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<script type="text/javascript">

/******************************************
* Scrollable content script II- Dynamic Drive (www.dynamicdrive.com)
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
******************************************/

iens6=document.all||document.getElementById
ns4=document.layers

//specify speed of scroll (greater=faster)
var speed=5

if (iens6){
document.write('<div id="container" style="position:relative;width:175px;height:160px;border:1px solid black;overflow:hidden">')
document.write('<div id="content" style="position:absolute;width:170px;left:0;top:0">')
}
</script>

<ilayer name="nscontainer" width=175 height=160 clip="0,0,175,160">
<layer name="nscontent" width=175 height=160 visibility=hidden>

<!--INSERT CONTENT HERE-->
<a href="#" onclick="return clikckNav(crossobj.offsetHeight*(-1)+155)">bottom</a>
<p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML is the
combination of HTML, JavaScript, and CSS</font></p>
<p><font size="2" face="Arial">- DOM stands for Document Object Model</font></p>
<p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML allows
content on a page to change on the fly, without reloading the page</font></p>
<p><font size="2" face="Arial">- CSS allows for the separation between content
definition and formatting</font></p>
<p><font size="2" face="Arial">- CSS stands for Cascading style sheet</font></p>
<p><font size="2" face="Arial">- </font><font size="2" face="Arial"><a href="http://www.dynamicdrive.com">Dynamic
Drive</a> provides free, cut and paste DHTML scripts</font></p>
<a href="#" onclick="return clikckNav(0);">top</a>
<!--END CONTENT-->

</layer>
</ilayer>

<script language="JavaScript1.2">
if (iens6)
document.write('</div></div>')
</script>

<table width="175px"><td><p align="right">
<a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)"><img src="../up.gif" border=0></a> <a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)"><img src="../down.gif" border=0></a></p></td>
</table>

<script language="JavaScript1.2">
var crossobj

if (iens6){
crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
crossobj=document.nscontainer.document.nscontent
crossobj.offsetHeight=crossobj.clip.height
}

function movedown(){
if (iens6&&parseInt(crossobj.style.top)>=(crossobj.offsetHeight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(crossobj.offsetHeight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}

function moveup(){
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)

}

function getcontent_height(){
if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
if (ns4)
window.onload=getcontent_height

function clikckNav(coord){
if (iens6)
crossobj.style.top=coord+'px'
if (ns4)
crossobj.top=coord
return false;
}
</script>
</body>
</html>

JohnHow
12-19-2005, 03:09 PM
I must say this is a clever solution, but I find a few problems with it. I have tested the revised script with all the browsers I mentioned earlier and found that it works with all of them to some degree. The script is effected by font size. If the user chooses to override my CSS settings the anchors are not targeted properly. On the default settings all the anchors are targeted properly on Macintosh browsers, but because PC's handle text differently none of them target correctly. Go to the link bellow on a PC and you will see that they are not going to the right anchors, on a MAC they are right on. Also when working with a number of targets it is very hard to determine the exact settings for each one. For me it was a lot of guess work.

anchor test (http://www.tempestdesign.com/test/anchorTest.html)

jscheuer1
12-19-2005, 05:41 PM
Due to those facts and the relatively small (relative to a full window) size of the scroll area, I like this approach better:


<h1>Anchor Test</h1>
<p><a onclick="return clikckNav((crossobj.offsetHeight*(-1)+135)/3)" href="#">Target 1</a></p>
<p><a onclick="return clikckNav((crossobj.offsetHeight*(-1)+135)/2)" href="#">Target 2</a></p>
<p><a onclick="return clikckNav((crossobj.offsetHeight*(-1)+135)/1.5)" href="#">Target 3</a></p>
<p><a onclick="return clikckNav(crossobj.offsetHeight*(-1)+340)" href="#">Target 4</a></p>

That way the content associated with a given anchor should appear around the middle of the scroller's viewport in most browsers and at most font sizes, except for the bottom one, which will be at the bottom (like it would be if this were a page in a window). Using it this way, it would be wise to add to clickNav(), like so:


function clikckNav(coord){
if (iens6)
crossobj.style.top=Math.floor(coord)+'px'
if (ns4)
crossobj.top=Math.floor(coord)
return false;
}

This harkens back to my suggestion that a percentage value be used. The above is customized to your demo and further refinements probably can be made.

JohnHow
12-19-2005, 08:12 PM
The changes do work better in every browser I tried, with the settings as they. The one exception is Opera on a Mac, it's a bit off.

Although it is still based on relative positioning it may do the job for me.

Can you explain for me some of the coding so I may be able to adjust it better in particular the "offsetHeight" e.g (-1)+135)/3) ... (-1)+340) also crossobj.style.top=Math.floor(coord).


Thanks

jscheuer1
12-19-2005, 09:21 PM
Believe it or not, this is a bit oversimplified but, I am confident it will answer your question.

OK, lets pick this one apart:


clickNav((crossobj.offsetHeight*(-1)+135)/3)

The clickNav and the outermost parenthesis pair simply say that what's in there is to be passed to the clickNav() function. That leaves:


(crossobj.offsetHeight*(-1)+135)/3

We now basically have a math expression. Parenthesis pairs now show order of precedence (performance), isolating whatever falls within them as a distinct number to be evaluated before anything outside of them is considered. By default, multiplication and division take precedence over addition and subtraction.

So we are querying the height of the scroller contents 'crossobj.offsetHeight'[1], multiplying (*) it times -1 to make it a negative number, then adding 135 to the result and dividing (/) this all by, in this case 3.

Math.floor(number) - floor is a method of the global Math object that returns a number rounded down to its nearest whole number.

[1]The script has already defined 'crossobj' as the object element with the id of 'content' (the containing element of the scroller's contents):


crossobj=document.getElementById? document.getElementById("content") : document.all.content

'offsetHeight' is a javascript object that is almost always available to give us the Height of an object.

JohnHow
12-19-2005, 10:52 PM
OK, I get that. The -1 was what was throwing me off.

Thanks for all you help

dilly85
06-14-2006, 10:40 PM
I have this same problem in making anchor points for moving in between the content.

I have a list of FAQ's with links at the top of the DIV tag these work perfect going to the answers section in the content,

however once you scroll down to the very bottom of the scrollable layer i have tried putting alsorts of link images tags and even the reference made by jscheuer1

but nothing works to the desired effect here is the page in question

http://www.ddee.co.uk/testsite/iolifetestsite/licence_opp_faqs.htm

any help will be appreciated, thanks in advance


regards

Dee

djshaw
09-01-2006, 07:45 PM
I have figured out a way to make anchors work perfectly with the scrollable content script. This method works no matter what browser/platform/text-size the user is using.

I combine the clickNav function provided by jscheuer1 here with this script:
http://javascripttoolbox.com/lib/objectposition/


<script language="JavaScript1.2" type="text/javascript" src=".position.js"></script>

<SCRIPT TYPE="text/javascript">
function clickNav(coord) {
if (iens6)
crossobj.style.top=Math.floor(coord)+'px'
if (ns4)
crossobj.top=Math.floor(coord)
return false;
}

function anchor_jump(anchor_name) {
var pos1 = Position.get('top');
var pos2 = Position.get(anchor_name);
var top1 = pos1["top"];
var top2 = pos2["top"];
clickNav(-(top2 - top1));
}
</SCRIPT>

.... snip ....

<!--INSERT CONTENT HERE-->
ORDERING POLICY<a name="top" id="top"> </a><br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
OUR RETURN POLICY<a name="return_policy" id="return_policy"> </a><br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
SHIPPING<a name="shipping" id="shipping"> </a><br>
blah blah blah<br>
blah blah blah<br>
blah blah blah<br>
<!--END CONTENT-->

.... snip ....

<!-- links to anchor positions -->
<a href="#" onClick="clickNav(0)">Ordering Policy</a>
<a href="#" onClick="anchor_jump('return_policy')">Return Policy</a>
<a href="#" onClick="anchor_jump(shipping')">Shipping</a>