ændre retning i en pulloutmenu fra sidelæns til ned/op
hejsa xperterjeg har fundet en slidemenuting på http://www.dansteinman.com/dynduo/ og kunne godt tænke mig at ændre det så retningen i slidefunktionen bliver ned/op istedet for sidelæns.
Her er sovsen til pullout.html
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">
<!-- saved from url=(0060)http://www.dansteinman.com/dynduo/demos/pullout/pullout.html -->
<HTML><HEAD><TITLE>The Dynamic Duo - Pull-Out Menus</TITLE>
<META http-equiv=Content-Type content=\"text/html; charset=windows-1252\">
<SCRIPT language=JavaScript src=\"dynlayer.js\"></SCRIPT>
<SCRIPT language=JavaScript src=\"miniscroll.js\"></SCRIPT>
<SCRIPT language=JavaScript>
<!--
/*
This is a simple application of DHTML to create a slick
interface to your pages. The concepts involved here
are Clipping, Nesting, Sliding, DynLayer, and MiniScroll
Object from the Scroll Concepts lesson.
*/
function init() {
// define arrays to be used to store DynLayers
pulloutContent = new Array()
pulloutWindow = new Array()
pulloutScroll = new Array()
// go through each of the 5 sets (0 to 4) of pullout screens
// assign a DynLayer to the main Window layer and the Content
// layer, then create a MiniScroll using these 2 DynLayers
for (var i=0;i<=4;i++) {
pulloutContent[i] = new DynLayer(\'pullout\'+i+\'Content\')
pulloutWindow[i] = new DynLayer(\'pullout\'+i+\'Window\')
pulloutWindow[i].slideInit()
pulloutScroll[i] = new MiniScroll(pulloutWindow[i],pulloutContent[i])
}
// set a flag so that you cannot activate multiple pullouts at the same time
pulloutActive = false
// keep track of which of the screens is shown
pulloutShown = 0
}
// function to slide the currently shown screen out
// then calls pulloutEnd which slides the next one into view
function pulloutStart(i) {
if (i!=pulloutShown) {
pulloutActive = true
// when it\'s done sliding out, call pulloutEnd() to slide the other one in
pulloutWindow[pulloutShown].slideTo(-285,null,15,15,\'pulloutEnd(\'+i+\')\')
}
}
function pulloutEnd(i) {
pulloutShown = i
// set the flag back to false so that you can then click another one
pulloutWindow[i].slideTo(0,null,15,15,\'pulloutActive==false\')
}
//-->
</SCRIPT>
<STYLE type=text/css>A {
FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: \'Arial\'
}
A.scroll {
COLOR: #ffffff
}
STRONG {
FONT-WEIGHT: bold; FONT-SIZE: 15pt; LINE-HEIGHT: 25pt; FONT-FAMILY: \'Arial\'
}
P {
FONT-SIZE: 10pt; LINE-HEIGHT: 13pt; FONT-FAMILY: \'Arial\'
}
#pulloutInterface {
LEFT: 50px; WIDTH: 400px; CLIP: rect(0px 400px 250px 0px); POSITION: absolute; TOP: 50px; HEIGHT: 250px; BACKGROUND-COLOR: #000000; layer-background-color: #000000
}
#pullout0Sidebar {
LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 100px 30px 0px); POSITION: absolute; TOP: 5px; HEIGHT: 30px; BACKGROUND-COLOR: #dedede; layer-background-color: #DEDEDE
}
#pullout1Sidebar {
LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 100px 30px 0px); POSITION: absolute; TOP: 40px; HEIGHT: 30px; BACKGROUND-COLOR: #c5c5c5; layer-background-color: #C5C5C5
}
#pullout2Sidebar {
LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 100px 30px 0px); POSITION: absolute; TOP: 75px; HEIGHT: 30px; BACKGROUND-COLOR: #a2a2a2; layer-background-color: #A2A2A2
}
#pullout3Sidebar {
LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 100px 30px 0px); POSITION: absolute; TOP: 110px; HEIGHT: 30px; BACKGROUND-COLOR: #7e7e7e; layer-background-color: #7E7E7E
}
#pullout4Sidebar {
LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 100px 30px 0px); POSITION: absolute; TOP: 145px; HEIGHT: 30px; BACKGROUND-COLOR: #7e7e7e; layer-background-color: #7E7E7E
}
#pulloutUpDown {
LEFT: 5px; POSITION: absolute; TOP: 200px
}
#pulloutViewArea {
LEFT: 110px; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 5px; HEIGHT: 240px; BACKGROUND-COLOR: #000000; layer-background-color: #000000
}
#pullout0Window {
LEFT: 0px; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #dedede; layer-background-color: #DEDEDE
}
#pullout0Content {
LEFT: 5px; WIDTH: 275px; POSITION: absolute; TOP: 0px
}
#pullout1Window {
LEFT: -285px; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #c5c5c5; layer-background-color: #C5C5C5
}
#pullout1Content {
LEFT: 5px; WIDTH: 275px; POSITION: absolute; TOP: 0px
}
#pullout2Window {
LEFT: -285px; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #a2a2a2; layer-background-color: #A2A2A2
}
#pullout2Content {
LEFT: 5px; WIDTH: 275px; POSITION: absolute; TOP: 0px
}
#pullout3Window {
LEFT: -285px; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #7e7e7e; layer-background-color: #7E7E7E
}
#pullout3Content {
LEFT: 5px; WIDTH: 275px; POSITION: absolute; TOP: 0px
}
#pullout4Window {
LEFT: -285px; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #7e7e7e; layer-background-color: #7E7E7E
}
#pullout4Content {
LEFT: 5px; WIDTH: 275px; POSITION: absolute; TOP: 0px
}
</STYLE>
<META content=\"MSHTML 5.50.4611.1300\" name=GENERATOR></HEAD>
<BODY text=#000000 bgColor=#ffffff onload=init()>
<DIV id=pulloutInterface>
<DIV id=pullout0Sidebar>
<P align=center><A href=\"java script:pulloutStart(0)\">Item 0</A></P></DIV>
<DIV id=pullout1Sidebar>
<P align=center><A href=\"java script:pulloutStart(1)\">Item 1</A></P></DIV>
<DIV id=pullout2Sidebar>
<P align=center><A href=\"java script:pulloutStart(2)\">Item 2</A></P></DIV>
<DIV id=pullout3Sidebar>
<P align=center><A href=\"java script:pulloutStart(3)\">Item 3</A></P></DIV>
<DIV id=pullout4Sidebar>
<P align=center><A href=\"java script:pulloutStart(4)\">Item 4</A></P></DIV>
<DIV id=pulloutUpDown><A onmouseup=pulloutScroll[pulloutShown].stop()
class=scroll onmousedown=pulloutScroll[pulloutShown].up()
onmouseout=pulloutScroll[pulloutShown].stop()
href=\"java script://%20Scroll%20Up\">Scroll Up</A> <BR><A
onmouseup=pulloutScroll[pulloutShown].stop() class=scroll
onmousedown=pulloutScroll[pulloutShown].down()
onmouseout=pulloutScroll[pulloutShown].stop()
href=\"java script://%20Scroll%20Down\">Scroll Down</A> </DIV>
<DIV id=pulloutViewArea>
<DIV id=pullout0Window>
<DIV id=pullout0Content>
<DIV align=center><STRONG>Item 0</STRONG></DIV>
<TABLE width=275 border=0>
<TBODY>
<TR>
<TD>
<P>This is item number 0. This text is here to fill up space. This is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here to
fill up space.</P>
<P>This is item number 0. This text is here to fill up space. This is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here to
fill up space.</P></TD></TR></TBODY></TABLE></DIV></DIV>
<DIV id=pullout1Window>
<DIV id=pullout1Content>
<DIV align=center><STRONG>Item 1</STRONG></DIV>
<TABLE width=275 border=0>
<TBODY>
<TR>
<TD>
<P>This is item number 1. This text is here to fill up space. This is item
number 1. This text is here to fill up space. This is item number 1. This
text is here to fill up space. This is item number 1. This text is here to
fill up space.</P>
<P>This is item number 1. This text is here to fill up space. This is item
number 1. This text is here to fill up space. This is item number 1. This
text is here to fill up space. This is item number 1. This text is here to
fill up space.</P>
<P>This is item number 1. This text is here to fill up space. This is item
number 1. This text is here to fill up space. This is item number 1. This
text is here to fill up space. This is item number 1. This text is here to
fill up space.</P>
<P>This is item number 1. This text is here to fill up space. This is item
number 1. This text is here to fill up space. This is item number 1. This
text is here to fill up space. This is item number 1. This text is here to
fill up space.</P>
<P>This is item number 1. This text is here to fill up space. This is item
number 1. This text is here to fill up space. This is item number 1. This
text is here to fill up space. This is item number 1. This text is here to
fill up space.</P>
<P>This is item number 1. This text is here to fill up space. This is item
number 1. This text is here to fill up space. This is item number 1. This
text is here to fill up space. This is item number 1. This text is here to
fill up space.</P></TD></TR></TBODY></TABLE></DIV></DIV>
<DIV id=pullout2Window>
<DIV id=pullout2Content>
<DIV align=center><STRONG>Item 2</STRONG></DIV>
<TABLE width=275 border=0>
<TBODY>
<TR>
<TD>
<P>This is item number 2. This text is here to fill up space. This is item
number 2. This text is here to fill up space. This is item number 2. This
text is here to fill up space. This is item number 2. This text is here to
fill up space.</P>
<P>This is item number 2. This text is here to fill up space. This is item
number 2. This text is here to fill up space. This is item number 2. This
text is here to fill up space. This is item number 2. This text is here to
fill up space.</P>
<P>This is item number 2. This text is here to fill up space. This is item
number 2. This text is here to fill up space. This is item number 2. This
text is here to fill up space. This is item number 2. This text is here to
fill up space.</P>
<P>This is item number 2. This text is here to fill up space. This is item
number 2. This text is here to fill up space. This is item number 2. This
text is here to fill up space. This is item number 2. This text is here to
fill up space.</P>
<P>This is item number 2. This text is here to fill up space. This is item
number 2. This text is here to fill up space. This is item number 2. This
text is here to fill up space. This is item number 2. This text is here to
fill up space.</P>
<P>This is item number 2. This text is here to fill up space. This is item
number 2. This text is here to fill up space. This is item number 2. This
text is here to fill up space. This is item number 2. This text is here to
fill up space.</P></TD></TR></TBODY></TABLE></DIV></DIV>
<DIV id=pullout3Window>
<DIV id=pullout3Content>
<DIV align=center><STRONG>Item 3</STRONG></DIV>
<TABLE width=275 border=0>
<TBODY>
<TR>
<TD>
<P>This is item number 0. This text is here to fill up space. This is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here to
fill up space.</P>
<P>This is item number 0. This text is here to fill up space. This is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here to
fill up space.</P>
<P>This is item number 0. This text is here to fill up space. This is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here to
fill up space.</P>
<P>This is item number 0. This text is here to fill up space. This is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here to
fill up space.</P>
<P>This is item number 0. This text is here to fill up space. This is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here to
fill up space.</P></TD></TR></TBODY></TABLE></DIV></DIV>
<DIV id=pullout4Window>
<DIV id=pullout4Content>
<DIV align=center><STRONG>Item 4</STRONG></DIV>
<TABLE width=275 border=0>
<TBODY>
<TR>
<TD>
<P>This is item number 0. This text is here to fill up space. This is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here to
fill up space.</P>
<P>This is item number 0. This text is here to fill up space. This is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here to
fill up space.</P>
<P>This is item number 0. This text is here to fill up space. This is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here to
fill up space.</P>
<P>This is item number 0. This text is here to fill up space. This is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here to
fill up space.</P>
<P>This is item number 0. This text is here to fill up space. This is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here to
fill up
space.</P></TD></TR></TBODY></TABLE></DIV></DIV></DIV></DIV></BODY></HTML>
og her er til dynlayer.js
// Dynamic Layer Object
// sophisticated layer/element targeting and animation object which provides the core functionality needed in most DHTML applications
// 19990604
// Copyright (C) 1999 Dan Steinman
// Distributed under the terms of the GNU Library General Public License
// Available at http://www.dansteinman.com/dynapi/
function DynLayer(id,nestref,frame) {
if (!is.ns5 && !DynLayer.set && !frame) DynLayerInit()
this.frame = frame || self
if (is.ns) {
if (is.ns4) {
if (!frame) {
if (!nestref) var nestref = DynLayer.nestRefArray[id]
if (!DynLayerTest(id,nestref)) return
this.css = (nestref)? eval(\"document.\"+nestref+\".document.\"+id) : document.layers[id]
}
else this.css = (nestref)? eval(\"frame.document.\"+nestref+\".document.\"+id) : frame.document.layers[id]
this.elm = this.event = this.css
this.doc = this.css.document
}
else if (is.ns5) {
this.elm = document.getElementById(id)
this.css = this.elm.style
this.doc = document
}
this.x = this.css.left
this.y = this.css.top
this.w = this.css.clip.width
this.h = this.css.clip.height
}
else if (is.ie) {
this.elm = this.event = this.frame.document.all[id]
this.css = this.frame.document.all[id].style
this.doc = document
this.x = this.elm.offsetLeft
this.y = this.elm.offsetTop
this.w = (is.ie4)? this.css.pixelWidth : this.elm.offsetWidth
this.h = (is.ie4)? this.css.pixelHeight : this.elm.offsetHeight
}
this.id = id
this.nestref = nestref
this.obj = id + \"DynLayer\"
eval(this.obj + \"=this\")
}
function DynLayerMoveTo(x,y) {
if (x!=null) {
this.x = x
if (is.ns) this.css.left = this.x
else this.css.pixelLeft = this.x
}
if (y!=null) {
this.y = y
if (is.ns) this.css.top = this.y
else this.css.pixelTop = this.y
}
}
function DynLayerMoveBy(x,y) {
this.moveTo(this.x+x,this.y+y)
}
function DynLayerShow() {
this.css.visibility = (is.ns4)? \"show\" : \"visible\"
}
function DynLayerHide() {
this.css.visibility = (is.ns4)? \"hide\" : \"hidden\"
}
DynLayer.prototype.moveTo = DynLayerMoveTo
DynLayer.prototype.moveBy = DynLayerMoveBy
DynLayer.prototype.show = DynLayerShow
DynLayer.prototype.hide = DynLayerHide
DynLayerTest = new Function(\'return true\')
// DynLayerInit Function
function DynLayerInit(nestref) {
if (!DynLayer.set) DynLayer.set = true
if (is.ns) {
if (nestref) ref = eval(\'document.\'+nestref+\'.document\')
else {nestref = \'\'; ref = document;}
for (var i=0; i<ref.layers.length; i++) {
var divname = ref.layers[i].name
DynLayer.nestRefArray[divname] = nestref
var index = divname.indexOf(\"Div\")
if (index > 0) {
eval(divname.substr(0,index)+\' = new DynLayer(\"\'+divname+\'\",\"\'+nestref+\'\")\')
}
if (ref.layers[i].document.layers.length > 0) {
DynLayer.refArray[DynLayer.refArray.length] = (nestref==\'\')? ref.layers[i].name : nestref+\'.document.\'+ref.layers[i].name
}
}
if (DynLayer.refArray.i < DynLayer.refArray.length) {
DynLayerInit(DynLayer.refArray[DynLayer.refArray.i++])
}
}
else if (is.ie) {
for (var i=0; i<document.all.tags(\"DIV\").length; i++) {
var divname = document.all.tags(\"DIV\")[i].id
var index = divname.indexOf(\"Div\")
if (index > 0) {
eval(divname.substr(0,index)+\' = new DynLayer(\"\'+divname+\'\")\')
}
}
}
return true
}
DynLayer.nestRefArray = new Array()
DynLayer.refArray = new Array()
DynLayer.refArray.i = 0
DynLayer.set = false
// Slide Methods
function DynLayerSlideTo(endx,endy,inc,speed,fn) {
if (endx==null) endx = this.x
if (endy==null) endy = this.y
var distx = endx-this.x
var disty = endy-this.y
this.slideStart(endx,endy,distx,disty,inc,speed,fn)
}
function DynLayerSlideBy(distx,disty,inc,speed,fn) {
var endx = this.x + distx
var endy = this.y + disty
this.slideStart(endx,endy,distx,disty,inc,speed,fn)
}
function DynLayerSlideStart(endx,endy,distx,disty,inc,speed,fn) {
if (this.slideActive) return
if (!inc) inc = 10
if (!speed) speed = 20
var num = Math.sqrt(Math.pow(distx,2) + Math.pow(disty,2))/inc
if (num==0) return
var dx = distx/num
var dy = disty/num
if (!fn) fn = null
this.slideActive = true
this.slide(dx,dy,endx,endy,num,1,speed,fn)
}
function DynLayerSlide(dx,dy,endx,endy,num,i,speed,fn) {
if (!this.slideActive) return
if (i++ < num) {
this.moveBy(dx,dy)
this.onSlide()
if (this.slideActive) setTimeout(this.obj+\".slide(\"+dx+\",\"+dy+\",\"+endx+\",\"+endy+\",\"+num+\",\"+i+\",\"+speed+\",\\\"\"+fn+\"\\\")\",speed)
else this.onSlideEnd()
}
else {
this.slideActive = false
this.moveTo(endx,endy)
this.onSlide()
this.onSlideEnd()
eval(fn)
}
}
function DynLayerSlideInit() {}
DynLayer.prototype.slideInit = DynLayerSlideInit
DynLayer.prototype.slideTo = DynLayerSlideTo
DynLayer.prototype.slideBy = DynLayerSlideBy
DynLayer.prototype.slideStart = DynLayerSlideStart
DynLayer.prototype.slide = DynLayerSlide
DynLayer.prototype.onSlide = new Function()
DynLayer.prototype.onSlideEnd = new Function()
// Clip Methods
function DynLayerClipInit(clipTop,clipRight,clipBottom,clipLeft) {
if (is.ie) {
if (arguments.length==4) this.clipTo(clipTop,clipRight,clipBottom,clipLeft)
else if (is.ie4) this.clipTo(0,this.css.pixelWidth,this.css.pixelHeight,0)
}
}
function DynLayerClipTo(t,r,b,l) {
if (t==null) t = this.clipValues(\'t\')
if (r==null) r = this.clipValues(\'r\')
if (b==null) b = this.clipValues(\'b\')
if (l==null) l = this.clipValues(\'l\')
if (is.ns) {
this.css.clip.top = t
this.css.clip.right = r
this.css.clip.bottom = b
this.css.clip.left = l
}
else if (is.ie) this.css.clip = \"rect(\"+t+\"px \"+r+\"px \"+b+\"px \"+l+\"px)\"
}
function DynLayerClipBy(t,r,b,l) {
this.clipTo(this.clipValues(\'t\')+t,this.clipValues(\'r\')+r,this.clipValues(\'b\')+b,this.clipValues(\'l\')+l)
}
function DynLayerClipValues(which) {
if (is.ie) var clipv = this.css.clip.split(\"rect(\")[1].split(\")\")[0].split(\"px\")
if (which==\"t\") return (is.ns)? this.css.clip.top : Number(clipv[0])
if (which==\"r\") return (is.ns)? this.css.clip.right : Number(clipv[1])
if (which==\"b\") return (is.ns)? this.css.clip.bottom : Number(clipv[2])
if (which==\"l\") return (is.ns)? this.css.clip.left : Number(clipv[3])
}
DynLayer.prototype.clipInit = DynLayerClipInit
DynLayer.prototype.clipTo = DynLayerClipTo
DynLayer.prototype.clipBy = DynLayerClipBy
DynLayer.prototype.clipValues = DynLayerClipValues
// Write Method
function DynLayerWrite(html) {
if (is.ns) {
this.doc.open()
this.doc.write(html)
this.doc.close()
}
else if (is.ie) {
this.event.innerHTML = html
}
}
DynLayer.prototype.write = DynLayerWrite
// BrowserCheck Object
function BrowserCheck() {
var b = navigator.appName
if (b==\"Netscape\") this.b = \"ns\"
else if (b==\"Microsoft Internet Explorer\") this.b = \"ie\"
else this.b = b
this.version = navigator.appVersion
this.v = parseInt(this.version)
this.ns = (this.b==\"ns\" && this.v>=4)
this.ns4 = (this.b==\"ns\" && this.v==4)
this.ns5 = (this.b==\"ns\" && this.v==5)
this.ie = (this.b==\"ie\" && this.v>=4)
this.ie4 = (this.version.indexOf(\'MSIE 4\')>0)
this.ie5 = (this.version.indexOf(\'MSIE 5\')>0)
this.min = (this.ns||this.ie)
}
is = new BrowserCheck()
// CSS Function
function css(id,left,top,width,height,color,vis,z,other) {
if (id==\"START\") return \'<STYLE TYPE=\"text/css\">\\n\'
else if (id==\"END\") return \'</STYLE>\'
var str = (left!=null && top!=null)? \'#\'+id+\' {position:absolute; left:\'+left+\'px; top:\'+top+\'px;\' : \'#\'+id+\' {position:relative;\'
if (arguments.length>=4 && width!=null) str += \' width:\'+width+\'px;\'
if (arguments.length>=5 && height!=null) {
str += \' height:\'+height+\'px;\'
if (arguments.length<9 || other.indexOf(\'clip\')==-1) str += \' clip:rect(0px \'+width+\'px \'+height+\'px 0px);\'
}
if (arguments.length>=6 && color!=null) str += (is.ns)? \' layer-background-color:\'+color+\';\' : \' background-color:\'+color+\';\'
if (arguments.length>=7 && vis!=null) str += \' visibility:\'+vis+\';\'
if (arguments.length>=8 && z!=null) str += \' z-index:\'+z+\';\'
if (arguments.length==9 && other!=null) str += \' \'+other
str += \'}\\n\'
return str
}
function writeCSS(str,showAlert) {
str = css(\'START\')+str+css(\'END\')
document.write(str)
if (showAlert) alert(str)
}
jeg går ud fra at det er i js filen at det skal ændres, men er ikke så snu til js, men mon ikke der lige er en ekspert der lige kan se hvordan det skal gøres????
