PDA

View Full Version : Scroll page like Ext Api Documentation



piskui07
29 Nov 2007, 1:53 PM
Hi to all,
I want to realize something like the Ext Api Documentation scrolling effect.
My page is like this:


<div class="xcontainer" id="x1"><a name="1" id="1"></a>Some Content</div>
<div class="xcontainer" id="x2"><a name="2" id="2"></a>Some Content</div>
<div class="xcontainer" id="x3"><a name="3" id="3"></a>Some Content</div>
<div class="xcontainer" id="x4"><a name="4" id="4"></a>Some Content</div>
...
<div class="xcontainer" id="xN"><a name="N" id="N"></a>Some Content</div>

At the top of my page i've link to every anchor specified inside div "xcontainer"... like link
Properties Methods Events Config Options Direct Link
on the top-right corner of the Ext Api Documentation.
I want to scroll down page with a "slow-effect"... how to realize it?

I've just analysed docs.js but i doesn't work well... that's what i've write (or copy form it!!!:D):


function makeElementVisible(target_id){
var el = Ext.getDom(target_id);
var bodys = Ext.getBody();
var top = (Ext.Element.fly(el).getOffsetsTo(bodys)[1]) + bodys.dom.scrollTop;
bodys.scrollTo('top', top-25, {duration:.5, callback: function(){
Ext.Element.fly(el).pause(.2).highlight('#8DB2E3', {attr:'background-color', duration: 2});
}});
}
When I call this function nothing happen... i've checked value with FireBug and it's all ok.
What's wrong?

piskui07
3 Dec 2007, 1:00 AM
No one?

Condor
3 Dec 2007, 2:12 AM
No one?

Which id are you passing as parameter?
You should probably use the id of a div (e.g. 'x4').

phillroberts
3 Dec 2007, 2:56 AM
Code works...Condor's right...just use the id of a div...

piskui07
3 Dec 2007, 9:49 AM
Which id are you passing as parameter?
You should probably use the id of a div (e.g. 'x4').

Yes, i use an id like 'x4' for function input parameter.
Now, probably i'm wrong with the call (example):


<a id="el" href="#" onclick="makeElementVisible('x4')">go to 4</a>

maybe there's difference if i use Ext.get('el').on('click', makeElementVisible, this) to attach event handler to the link?

The code of the previous post work in IE (!!!) but not in Firefox, but in IE the page scrolling isn't "slow" but instantaneous like a click on an anchor link.
How can i do? Any suggestion?

Thanks

piskui07
7 Dec 2007, 1:20 PM
no one?