23. juli 2002 - 11:14Der er
8 kommentarer og 1 løsning
Lag ifht. skærmopløsning
Jeg er ved at opbygge en side, hvor jeg i en tabel har oprettet en vandret scroll i lag (fra Brattli). Men de lag tilter helt, når jeg ser sitet i 800x600.
Er der en fornuftig måde jeg kan scripte, så lagenes placering bliver defineret til henholdsvis 1024x768 og 800x600 skærmopløsning? Hvis der er nogen, der har et script liggende eller et link, hvor jeg kan læse om det specifikke problem, ville jeg bliver monsterglad.
<html> <head> <title>Lovelinks - because life is full of opportunities...</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
If (opl1) document.write('<div style="position:absolute; left: 100px; top:100px> else if (opl1) document.write ('<div style="position:absolute; left: 500px; top: 500px> </script> <!--skærmopløsning slut-->
<!--scrollfunktion--> <script language="JavaScript" type="text/javascript"> /********************************************************************************** SideScrollMenu * Copyright (C) 2001 Thomas Brattli * This script was released at DHTMLCentral.com * Visit for more great scripts! * This may be used and changed freely as long as this msg is intact! * We will also appreciate any links you could give us. * * Made by Thomas Brattliand modified byMichael van Ouwerkerk * * Script date: 09/07/2001 (keep this date to check versions) *********************************************************************************/ function lib_bwcheck(){ //Browsercheck (needed) this.ver=navigator.appVersion this.agent=navigator.userAgent this.dom=document.getElementById?1:0 this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0; this.ie4=(document.all && !this.dom && !this.opera5)?1:0; this.ie=this.ie4||this.ie5||this.ie6 this.mac=this.agent.indexOf("Mac")>-1 this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; this.ns4=(document.layers && !this.dom)?1:0; this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5) return this } var bw=lib_bwcheck() /************************************************************************** Variables to set. ***************************************************************************/ sLeft = 150 //The left placement of the menu sTop = 120 //The top placement of the menu sMenuheight = 600 //The height of the menu sArrowwidth = 16 //Width of the arrows sScrollspeed = 20 //Scroll speed: (in milliseconds, change this one and the next variable to change the speed) sScrollPx = 8 //Pixels to scroll per timeout. sScrollExtra = 15 //Extra speed to scroll onmousedown (pixels)
/************************************************************************** Scrolling functions ***************************************************************************/ var tim = 0 var noScroll = true function mLeft(){ if (!noScroll && oMenu.x<sArrowwidth){ oMenu.moveBy(sScrollPx,0) tim = setTimeout("mLeft()",sScrollspeed) } } function mRight(){ if (!noScroll && oMenu.x>-(oMenu.scrollWidth-(pageWidth))-sArrowwidth){ oMenu.moveBy(-sScrollPx,0) tim = setTimeout("mRight()",sScrollspeed) } } function noMove(){ clearTimeout(tim); noScroll = true; sScrollPx = sScrollPxOriginal; } /************************************************************************** Object part ***************************************************************************/ function makeObj(obj,nest,menu){ nest = (!nest) ? "":'document.'+nest+'.'; this.elm = bw.ns4?eval(nest+"document.layers." +obj):bw.ie4?document.all[obj]:document.getElementById(obj); this.css = bw.ns4?this.elm:this.elm.style; this.scrollWidth = bw.ns4?this.css.document.width:this.elm.offsetWidth; this.x = bw.ns4?this.css.left:this.elm.offsetLeft; this.y = bw.ns4?this.css.top:this.elm.offsetTop; this.moveBy = b_moveBy; this.moveIt = b_moveIt; this.clipTo = b_clipTo; return this; } var px = bw.ns4||window.opera?"":"px"; function b_moveIt(x,y){ if (x!=null){this.x=x; this.css.left=this.x+px;} if (y!=null){this.y=y; this.css.top=this.y+px;} } function b_moveBy(x,y){this.x=this.x+x; this.y=this.y+y; this.css.left=this.x+px; this.css.top=this.y+px;} function b_clipTo(t,r,b,l){ if(bw.ns4){this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l;} else this.css.clip="rect("+t+"px "+r+"px "+b+"px "+l+"px)"; } /************************************************************************** Object part end ***************************************************************************/
/************************************************************************** Init function. Set the placements of the objects here. ***************************************************************************/ var sScrollPxOriginal = sScrollPx; function sideInit(){ //Width of the menu, Currently set to the width of the document. //If you want the menu to be 500px wide for instance, just //set the pageWidth=500 in stead. pageWidth = 700
//Making the objects... oBg = new makeObj('divBg') oMenu = new makeObj('divMenu','divBg',1) oArrowRight = new makeObj('divArrowRight','divBg')
//Placing the menucontainer, the layer with links, and the right arrow. oBg.moveIt(sLeft,sTop) //Main div, holds all the other divs. oMenu.moveIt(sArrowwidth,null) oArrowRight.css.width = sArrowwidth; oArrowRight.moveIt(pageWidth-sArrowwidth,null)
//Setting the width and the visible area of the links. if (!bw.ns4) oBg.css.overflow = "hidden"; if (bw.ns6) oMenu.css.position = "relative"; oBg.css.width = pageWidth+px; oBg.clipTo(0,pageWidth,sMenuheight,0) oBg.css.visibility = "visible"; }
//executing the init function on pageload if the browser is ok. if (bw.bw) onload = sideInit; </script>
<!--scrollfunktion slut-->
</head>
Når jeg tester det, så virker det ikke efter hensigten. Det er som om, at variablen "SLeft" styrer positionen. Hvis jeg sletter den, så kan jeg slet ikke se lagene. Gør jeg noget forkert??
Synes godt om
Slettet bruger
29. juli 2002 - 18:05#5
Nårh, du vil bruge det sammen med et andet script! Jamen, så bliver det meget lettere! :)
Du har ret i, at variablerne sLeft og sTop styrer positionen af menuen. Og derfor er det bare disse linjer, der skal ændres. Slet mit foregående forslag og indsæt kun dette istedet:
sLeft = 150 //The left placement of the menu sTop = 120 //The top placement of the menu
... ændres til:
sLeft = (opl1) ? 100 : 500; //The left placement of the menu sTop = (opl1) ? 100 : 500; //The top placement of the menu
Læg mærke til, at scriptet kun tjekker, om opløsningen er 800x600. Hvis den ikke er det, går scriptet automatisk ud fra, at opl. er 1024x768! Derfor bør du nok skrive et sted, at siden skal ses i enten opl. 800x600 eller 1024x768. Du kan alternativt indsætte denne alert, som vil informere brugeren om problemet, hvis han har en mindre eller større opl. Dette skal indsættes istedet for opløsnings-scriptet:
<script language="JavaScript" type="text/javascript"> if (screen.width < 800 || screen.width > 1024) alert("Siden skal ses i opløsning 800x600 eller 1024x768!"); opl1 = (screen.width == 800 && screen.height == 600); </script>
Hmmm, det er altså meget mærkeligt, for ligeså snart jeg ændre i sLeft og sTop til andet end, det der står, så forsvinder min scroller, når jeg browser det... Er det mon fordi, det modarbejder noget i de efterfølgende functions og objects?
<!--scrollfunktion--> <script language="JavaScript" type="text/javascript"> /********************************************************************************** SideScrollMenu * Copyright (C) 2001 Thomas Brattli * This script was released at DHTMLCentral.com * Visit for more great scripts! * This may be used and changed freely as long as this msg is intact! * We will also appreciate any links you could give us. * * Made by Thomas Brattliand modified byMichael van Ouwerkerk * * Script date: 09/07/2001 (keep this date to check versions) *********************************************************************************/ function lib_bwcheck(){ //Browsercheck (needed) this.ver=navigator.appVersion this.agent=navigator.userAgent this.dom=document.getElementById?1:0 this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0; this.ie4=(document.all && !this.dom && !this.opera5)?1:0; this.ie=this.ie4||this.ie5||this.ie6 this.mac=this.agent.indexOf("Mac")>-1 this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; this.ns4=(document.layers && !this.dom)?1:0; this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5) return this } var bw=lib_bwcheck() /************************************************************************** Variables to set. ***************************************************************************/ sLeft = (opl1) ? 100 : 500; //The left placement of the menu sTop = (opl1) ? 100 : 500; //The top placement of the menu sMenuheight = 600 //The height of the menu sArrowwidth = 16 //Width of the arrows sScrollspeed = 20 //Scroll speed: (in milliseconds, change this one and the next variable to change the speed) sScrollPx = 8 //Pixels to scroll per timeout. sScrollExtra = 15 //Extra speed to scroll onmousedown (pixels)
/************************************************************************** Scrolling functions ***************************************************************************/ var tim = 0 var noScroll = true function mLeft(){ if (!noScroll && oMenu.x<sArrowwidth){ oMenu.moveBy(sScrollPx,0) tim = setTimeout("mLeft()",sScrollspeed) } } function mRight(){ if (!noScroll && oMenu.x>-(oMenu.scrollWidth-(pageWidth))-sArrowwidth){ oMenu.moveBy(-sScrollPx,0) tim = setTimeout("mRight()",sScrollspeed) } } function noMove(){ clearTimeout(tim); noScroll = true; sScrollPx = sScrollPxOriginal; } /************************************************************************** Object part ***************************************************************************/ function makeObj(obj,nest,menu){ nest = (!nest) ? "":'document.'+nest+'.'; this.elm = bw.ns4?eval(nest+"document.layers." +obj):bw.ie4?document.all[obj]:document.getElementById(obj); this.css = bw.ns4?this.elm:this.elm.style; this.scrollWidth = bw.ns4?this.css.document.width:this.elm.offsetWidth; this.x = bw.ns4?this.css.left:this.elm.offsetLeft; this.y = bw.ns4?this.css.top:this.elm.offsetTop; this.moveBy = b_moveBy; this.moveIt = b_moveIt; this.clipTo = b_clipTo; return this; } var px = bw.ns4||window.opera?"":"px"; function b_moveIt(x,y){ if (x!=null){this.x=x; this.css.left=this.x+px;} if (y!=null){this.y=y; this.css.top=this.y+px;} } function b_moveBy(x,y){this.x=this.x+x; this.y=this.y+y; this.css.left=this.x+px; this.css.top=this.y+px;} function b_clipTo(t,r,b,l){ if(bw.ns4){this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l;} else this.css.clip="rect("+t+"px "+r+"px "+b+"px "+l+"px)"; } /************************************************************************** Object part end ***************************************************************************/
/************************************************************************** Init function. Set the placements of the objects here. ***************************************************************************/ var sScrollPxOriginal = sScrollPx; function sideInit(){ //Width of the menu, Currently set to the width of the document. //If you want the menu to be 500px wide for instance, just //set the pageWidth=500 in stead. pageWidth = 700
//Making the objects... oBg = new makeObj('divBg') oMenu = new makeObj('divMenu','divBg',1) oArrowRight = new makeObj('divArrowRight','divBg')
//Placing the menucontainer, the layer with links, and the right arrow. oBg.moveIt(sLeft,sTop) //Main div, holds all the other divs. oMenu.moveIt(sArrowwidth,null) oArrowRight.css.width = sArrowwidth; oArrowRight.moveIt(pageWidth-sArrowwidth,null)
//Setting the width and the visible area of the links. if (!bw.ns4) oBg.css.overflow = "hidden"; if (bw.ns6) oMenu.css.position = "relative"; oBg.css.width = pageWidth+px; oBg.clipTo(0,pageWidth,sMenuheight,0) oBg.css.visibility = "visible"; }
//executing the init function on pageload if the browser is ok. if (bw.bw) onload = sideInit; </script>
Hello phoenixv... Jeg har fundet en løsning, men tusind tak for dine svar - og tålmodighed :0)
Synes godt om
Ny brugerNybegynder
Din løsning...
Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.