PDA

View Full Version : Dock Content Script



tomed
10-31-2008, 12:36 PM
Hi

1) Script Title: Dock Content Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/dockcontent.htm

3) Describe problem:

I'm finding that when I have my doctype set to


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


It won't work - any ideas of how to get it to work in safari / chrome with this doctype set? It doesn't work on DD site either.

jscheuer1
10-31-2008, 03:15 PM
That's basically the same DOCTYPE used on the demo page. Does the demo page work for you?

In future, please post new questions in a new thread, like here where I've moved this one, and:

Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.

tomed
11-04-2008, 05:18 PM
Hi John

Apologies, I felt it was the same issue and he just didn't explain it very well. I didn't want to repost the same issue.

The code doesn't work in Chrome or Safari on the dynamic drive site either.

It's definitely to do with the DocType, just hoping someone has figured a way around it.

Tom

jscheuer1
11-04-2008, 06:35 PM
Well you may want to revisit that thread after all:

http://www.dynamicdrive.com/forums/showthread.php?t=38205

Though it was definitely a different question, the answer may be of help to you, insofar as the real way to do this is via style, not script.

But if you want to use this script, I think I have figured out why it is behaving badly in compliance mode in those browsers.

First of all (probably inconsequential, but certainly could cause problems when combined with other code) on the demo page, they tell you to put this in the head:



<style type="text/css">

.dockclass{
position:relative;
}

</style>

<body>

<script type="text/javascript">

/***********************************************
* Dock Content script- Created by and Dynamicdrive.com
* This notice must sta . . .

There should never be a body tag in the head. Get rid of that.

Now the real trouble is that in compliance mode (under a valid URL DTD), those browsers not working will not recognise certain objects used by the script. There are alternative objects that are roughly equivalent that they will recognise in compliance mode though, but some of the currently working browsers still need the original ones even in compliance mode. So I did some branching (highlighted, in two areas):


<script type="text/javascript">

/***********************************************
* Dock Content script- Created by and Dynamicdrive.com
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full script
***********************************************/

var offsetfromedge=0 //offset from window edge when content is "docked". Change if desired.
var dockarray=new Array() //array to cache dockit instances
var dkclear=new Array() //array to cache corresponding clearinterval pointers

function dockit(el, duration){
this.source=document.all? document.all[el] : document.getElementById(el);
this.source.height=this.source.offsetHeight;
this.docheight=truebody().clientHeight || !window.innerHeight? truebody().clientHeight : window.innerHeight;
this.duration=duration;
this.pagetop=0;
this.elementoffset=this.getOffsetY();
dockarray[dockarray.length]=this;
var pointer=eval(dockarray.length-1);
var dynexpress='dkclear['+pointer+']=setInterval("dockornot(dockarray['+pointer+'])",100);';
dynexpress=(this.duration>0)? dynexpress+'setTimeout("clearInterval(dkclear['+pointer+']); dockarray['+pointer+'].source.style.top=0", duration*1000)' : dynexpress;
eval(dynexpress);
}

dockit.prototype.getOffsetY=function(){
var totaloffset=parseInt(this.source.offsetTop);
var parentEl=this.source.offsetParent;
while (parentEl!=null){
totaloffset+=parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function dockornot(obj){
obj.pagetop=truebody().scrollTop || !window.pageYOffset? truebody().scrollTop : pageYOffset;
if (obj.pagetop>obj.elementoffset) //detect upper offset
obj.source.style.top=obj.pagetop-obj.elementoffset+offsetfromedge+"px";
else if (obj.pagetop+obj.docheight<obj.elementoffset+parseInt(obj.source.height)) //lower offset
obj.source.style.top=obj.pagetop+obj.docheight-obj.source.height-obj.elementoffset-offsetfromedge+"px";
else
obj.source.style.top=0;
}

function truebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

</script>

Other than getting rid of the body tag from the head, and using this updated version of the main script, everything else should remain as directed on the demo page.

tomed
11-05-2008, 09:26 AM
Hi John

Firstly, thanks a million for your reply - it worked a treat. You're a legend!!!

On another note - I didn't post my original question on that post you mentioned above - I posted it on the following one http://www.dynamicdrive.com/forums/showthread.php?t=14535

I can't thank you enough for the help!

Tom

jscheuer1
11-05-2008, 07:59 PM
Sorry, my mistake on where you originally posted. The reason I moved you to a new thread wasn't that the issue was different, but that the thread you added to was so old. I've closed that thread and pointed to this one as containing a solution to its question.