SitePoint Sponsor |
|
User Tag List
Results 1 to 15 of 15
Thread: Floater
-
Apr 29, 2002, 05:39 #1
- Join Date
- Apr 2002
- Posts
- 24
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Floater
I've found a floating menu that I'd really love to duplicate on a site, can anyone point me at a resource or tutorial on creating one this smooth...
Scroll the page and watch the lefthand menu follow you.
http://www.royal.gov.uk/output/page1011.asp
Cheers,
Simon-----
Web Designer & Internet Consultant
www.simonlilly.co.uk
sililly@hotmail.com
-----
-
Apr 29, 2002, 05:54 #2
- Join Date
- Jan 2002
- Posts
- 48
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Its a simple script to write, but I dont have time @ this moment.
I would recommend that you make it stagnant for downgraded browsers (so it just sits where it is, and doesn't scroll), then use the document.onscroll event to trigger the scroll function. This way you dont have to deal with timeouts (who real cares about 3 world browsers anyways etc...)
-
Apr 29, 2002, 06:03 #3
- Join Date
- Oct 2001
- Location
- outside your house
- Posts
- 96
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
you could always take a peak at the source. But You heard nothing from me
If you like the look of my slippers you should see my undies!
-
Apr 29, 2002, 07:10 #4
- Join Date
- Aug 2001
- Location
- London
- Posts
- 2,475
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
heres the javascript for the code, who cares if they heard it from me:P
PHP Code://<script>
function chaserRollover(imgid,imgsrc)
{
nnstr=(document.layers)?"document.layers.CC.":""
eval(nnstr+"document.images['"+imgid+"'].src='"+imgsrc+"'")
}
function ClassChaser(divName, objName,takeOffTop, takeOffBottom)
{
// note the object is assuming that the magins of the HTML page are set to 0
//Properties
this.objName=objName
this.name=divName
this.takeOffTop=(takeOffTop!=null)?parseInt(takeOffTop):0; //default value to 0
this.takeOffBottom=(takeOffBottom!=null)?parseInt(takeOffBottom):0; //default value to 0
this.startPos //position where the div start chasing from
this.endPos //position where the div end chasing in
this.styleRef //refers to div styles according to browsers
this.divObj //div object reference
this.availableScrollingHeight //available height for the div to scroll in
this.divHeight //chaserHeight
this.callRate = 10
this.slideTime = 1200
this.A
this.B
this.C
this.D
this.interval
this.initialised
//methods
this.init = m_sw_init;
this.findObj = m_sw_findObj;
this.main = m_sw_main;
this.slide = m_sw_slide;
this.slideInit = m_sw_slideInit;
this.startChase = m_sw_startChase;
}
function m_sw_init()
{
this.macstr='MacPPC'
this.ismac = (navigator.platform == this.macstr)
//alert('hello');
this.styleRef=(document.layers)?"":".style"
this.divObj=this.findObj(this.name)
//position layer
eval("this.divObj"+this.styleRef+".top=this.takeOffTop")
this.divHeight=(document.layers)?parseInt(this.divObj.document.height):((document.all)?parseInt(this.divObj.clientHeight):parseInt(this.divObj.offsetHeight))
this.availableScrollingHeight=((document.all)?((this.ismac)?parseInt(document.body.offsetHeight):parseInt(document.body.scrollHeight)):parseInt(document.height))-this.takeOffTop-this.takeOffBottom-this.divHeight
this.startPos=this.takeOffTop
this.endPos=this.availableScrollingHeight+this.takeOffTop;
this.initialised=true
if (!document.all)
{
eval("this.interval=setInterval(\'"+this.objName+".main()\',this.callRate)");//this.callRate
}
}
function m_sw_findObj(n,d) {
var p,i,x;
if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document;
n=n.substring(0,p);
}
//Case IE
if(!(x=d[n])&&d.all)
x=d.all[n];
for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
//Case NN
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=this.findObj(n,d.layers[i].document);
//Case NN6
if(!x && d.getElementById)
x=d.getElementById(n);
return x;
}
function m_sw_main()
{
eval("this.currentY=parseInt(this.divObj"+this.styleRef+".top)")
this.scrollTop = (document.all)?parseInt(document.body.scrollTop):parseInt(window.pageYOffset);
var newTargetY = this.scrollTop +(this.startPos)
if ( this.currentY != newTargetY ) {
if ( newTargetY != this.targetY ) {
this.targetY = newTargetY
if (this.availableScrollingHeight>0)
this.slideInit( )
}
if (this.availableScrollingHeight>0)
this.slide( )
}
}
function m_sw_slideInit()
{
var now = new Date( )
this.A = this.targetY - this.currentY
this.B = Math.PI / ( 2 * this.slideTime )
this.C = now.getTime( )
if (Math.abs(this.A) > this.availableScrollingHeight) {
this.D = this.A > 0 ? this.targetY - this.availableScrollingHeight : this.targetY + this.availableScrollingHeight
this.A = this.A > 0 ? this.availableScrollingHeight : -this.availableScrollingHeight
} else {
this.D = this.currentY
}
}
function m_sw_slide()
{
var now = new Date( )
var newY = this.A * Math.sin( this.B * ( now.getTime( ) - this.C ) ) + this.D
newY = Math.round( newY )
if (( (this.A > 0) && (newY > this.currentY) && (newY<=this.endPos)) ||
( (this.A < 0) && (newY < this.currentY) && (newY<=this.endPos) )) {
eval("this.divObj"+this.styleRef+".top=newY")
}
if ((newY==this.targetY)&& (this.interval)&&(document.all))
{
clearInterval(this.interval)
}
}
function m_sw_startChase()
{
if ((document.all)&&(this.initialised))
{
if (this.interval)
{
clearInterval(this.interval)
}
eval("this.interval=setInterval(\'"+this.objName+".main()\',this.callRate)");
}
}
function SurfTo(PageLocation) {
window.location.href = PageLocation;
}
called in the page like so
<script language="JavaScript" src="float.js"></script>
its initialised here
OChaser= new ClassChaser("CC","OChaser",150,170)
next they preload the images with this function
PHP Code:function preload()
{
//Floating Menu
img_34 = new Image()
img_34.src="/files/images/ROYAL_FAMILY_B3_DIANA_10_over.gif"
img_35 = new Image()
img_35.src="/files/images/ROYAL_FAMILY_B3_DIANA_14_over.gif"
img_36 = new Image()
img_36.src="/files/images/ROYAL_FAMILY_B3_DIANA_16_over.gif"
img_37 = new Image()
img_37.src="/files/images/ROYAL_FAMILY_B3_DIANA_21_over.gif"
img_38 = new Image()
img_38.src="/files/images/ROYAL_FAMILY_B3_DIANA_22_over.gif"
img_39 = new Image()
img_39.src="/files/images/ROYAL_FAMILY_B3_DIANA_23_over.gif"
img_40 = new Image()
img_40.src="/files/images/history_b_27_over.gif"
img_41 = new Image()
img_41.src="/files/images/history_b_28_over.gif"
}
function init()
{
preload();
OChaser.init();
}
This should be enough to make it work
-
Apr 29, 2002, 07:28 #5
- Join Date
- Feb 2002
- Location
- UK
- Posts
- 146
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
...but remember if you are going to use someone else's code verbatim you should at the very least credit them.
-
Apr 29, 2002, 07:43 #6
- Join Date
- Aug 2001
- Location
- London
- Posts
- 2,475
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
But, they never coded that. look at there code and let me know if you still think that, as im sure they didn't
-
Apr 29, 2002, 08:57 #7
- Join Date
- Oct 2000
- Location
- Nashvegas Baby!
- Posts
- 7,845
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
It IS a governemt website. I think it's a distinct possibility that they did code it themselves.
Adobe Certified Coldfusion MX 7 Developer
Adobe Certified Advanced Coldfusion MX Developer
My Blog (new) | My Family | My Freelance | My Recipes
-
Apr 29, 2002, 09:43 #8
- Join Date
- Feb 2002
- Location
- UK
- Posts
- 146
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Andrew,
looking at the code you are right that there is no credit identifying who wrote the code so you could also be right about them not writing the code.
however, the lack of a credit would incline me to believe that they did write the code as i would like to think that any reputable web design company, such as the one that produced this site, would credit someone else's work if they copied it.
but maybe i'm just naive
-
Apr 29, 2002, 10:20 #9
- Join Date
- Apr 2002
- Posts
- 24
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
The Answer
Coded it themselves I don't think....
Just found this after doing a search for "chaser javascript"
http://www.webreference.com/dhtml/column37/index.html
Enjoy and distribute!!
Simon-----
Web Designer & Internet Consultant
www.simonlilly.co.uk
sililly@hotmail.com
-----
-
Apr 29, 2002, 10:38 #10
- Join Date
- Aug 2001
- Location
- London
- Posts
- 2,475
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
hehe that reminds me creole, So your trying to say that any sight that is built by a professional/valid authority is a credible resource.
lmfao just read your msg simonlilly"
-
Apr 29, 2002, 10:44 #11
- Join Date
- Feb 2002
- Location
- UK
- Posts
- 146
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
ok, ok, i'm naive ): my illusions are shattered.
i shall not doubt Andrew again
although they changed it somewhat they should have at least ackowldedged their inspiration.
-
Feb 12, 2003, 12:54 #12
- Join Date
- Nov 2002
- Posts
- 218
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Question: How can I make the "chaser" javascript work in other browsers, other than IE.
I have gone over the "floater" script that was based on "chaser"posted but cannot get that to work.
-berzerko
-
Feb 13, 2003, 10:56 #13
- Join Date
- Nov 2002
- Posts
- 218
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I should mention that the javascript "float.js" as shown in this thread is totally corrupted. If you want the script use this link:
http://www.royal.gov.uk/include/js/float.js
-berzerko
P.S.#1 float.js(from the link) shows no javascript errors and seems to work very well for the orignial site :
http://www.royal.gov.uk/output/page1011.asp
I just can't seem to make it work for me. I have no clue what I am doing wrong.
P.S.#2 Anyway here is my site "MenuTest.php":
PHP Code:<html lang="en">
<head>
<title>MenuTest</title>
<script language="JavaScript" src="Includes/float4.js"></script>
<script language="JavaScript">
var objPage = Page();
function Page() {
return(this);
}
objPage.idPage='MenuTest';
OChaser= new ClassChaser("CC","OChaser",150,170)
function resz()
{
if (document.layers)
history.go(0);
}
// function rollover(imgid,imgsrc)
// {
// eval("document.images['"+imgid+"'].src='"+imgsrc+"'")
// }
// function preload()
// {
//Top Navigation
// img_01 = new Image()
// img_01.src="/files/images/history_a_01_over.gif"
// img_02 = new Image()
// img_02.src="/files/images/history_a_02_over.gif"
// }
function init()
{
// preload();
OChaser.init();
}
</script>
</head>
<body onresize="resz();" onscroll="OChaser.startChase();" onload="init();" bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Begin Ref_Links Page -->
<table border="0" class="reftext" cellpadding="0">
<tr>
<td width="175">
</td>
<td valign="top">
<table valign="top" border="0" cellpadding="0" cellspacing="0">
<tr>
// a whole bunch of links and stuff here
// removed to conserve space
</tr>
</table>
</td>
</tr>
</table>
<div name="CC" id="CC" >
<table width="173" border="1" cellpadding="7" bordercolor="#CCCCCC">
<TBODY>
<tr>
<td align="left" valign="top" bordercolor="#CCCCCC" bgcolor="#CCCCCC">
The following is a list of subjects that you may find helpful.</td></tr>
<tr><td> 1</td></tr>
<tr><td> 2</td></tr>
<tr><td> 3</td></tr>
<tr><td> 4</td></tr>
<tr><td> 5</td></tr>
<tr><td> 6</td></tr>
</TBODY>
</table>
</div>
<!-- End Ref_Links Page -->
</body>
</html>
-
Feb 13, 2003, 15:16 #14
- Join Date
- Nov 2002
- Posts
- 218
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
We have a Winner!!!
We have a Winner!!!
The problem was that I didn't realize that the "Queens" website placed the following required code in the CSS:
#CC {
position:absolute;
left:0px;
top:100px;
width:175px;
}
(You can also put the same code between <style></style> tags above the <div> tag, as I have done )
Ok, so you have float.js, the script that goes between the <head> tags, the body tag, and the <style><div> tags. Looks like it's all here.
Have fun,
-berzerko
-
Feb 18, 2003, 10:43 #15
- Join Date
- Nov 2002
- Posts
- 218
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
A Better Script
Here is one that I like better from Dynamic drive. Since it in not preloaded by "onLoad," it doesn't cause interferance problems with other divisions. Here is the link:http://www.dynamicdrive.com/dynamici...staticmenu.htm
Notes: You can replace the script (to add divisions) before and after the menu with <div></div>. Also, you can place the working part of the java in a .js file and link it in.
-berzerko
Bookmarks