Avatar billede hermie Nybegynder
23. juli 2002 - 11:14 Der 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.

Bemærk! Jeg er ingen haj... Kun lidt :0)

På forhånd tak for hjælpen!
Avatar billede Slettet bruger
23. juli 2002 - 18:17 #1
Du kan jo gøre noget lignende det her:

<script>
opl1 = (screen.width == 800 && screen.height == 600);
opl2 = (screen.width == 1024 && screen.height == 768);

if (opl1)
document.write('<div style="position: absolute; left: 300px; top: 300px;">');
else if (opl1)
document.write('<div style="position: absolute; left: 500px; top: 500px;">');
</script>
Avatar billede hermie Nybegynder
26. juli 2002 - 10:36 #2
Hmmm, det virker umiddelbart ikke, da der er en variabel, der styrer placeringen...

Kan der mon laves noget, så det ikke er det?? Hvis jeg sletter variablen, så forsvinder min lag af en eller anden mystisk grund.
Avatar billede Slettet bruger
27. juli 2002 - 17:50 #3
Hvad mener du?

Kan du ikke bare indsætte den henholdsvise placering af din div i de to write-sætninger?
Avatar billede hermie Nybegynder
29. juli 2002 - 08:50 #4
Så er jeg klar efter en solrig weekend :0)

Du kan se mit script:

<html>
<head>
<title>Lovelinks - because life is full of opportunities...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/CSS">
.fromtop {top:250px;}
</style>

<!--scroll-->
<style type="text/css">
body            {background-color:#ffffff;}
#divBg          {position:absolute; z-index:10; width:300px; left:0px; height:600px; clip:rect(0px 10px 10px                         0px); visibility:hidden;}
#divMenu        {position:absolute; z-index:11; top:1px; color:#333333; font-size:13px;                                             font-family:verdana,arial,helvetica,sans-serif; visibility:inherit;}
#divArrowLeft    {position:absolute; z-index:12; width:16px; height:21px; left:0px; top:210px;                                         visibility:inherit;}
#divArrowRight  {position:absolute; z-index:12; width:16px; height:21px; left:700px; top:210px;                                     visibility:inherit;}
</style>

<!--skærmopløsning-->
<script language="JavaScript" type="text/javascript">
opl1 = (screen.width == 800 && screen.height == 600);
opl2 = (screen.width == 1024 && screen.height == 768);

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??
Avatar billede 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:

<script language="JavaScript" type="text/javascript">
opl1 = (screen.width == 800 && screen.height == 600);
</script>

Så skal følgende linjer:

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>
Avatar billede hermie Nybegynder
29. juli 2002 - 18:09 #6
Det ser indviklet ud, men jeg kan godt følge dig :0) Jeg tester imorgen og vender tilbage. Tak indtil videre...
Avatar billede hermie Nybegynder
30. juli 2002 - 15:19 #7
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?

Scriptet ser nu sådan ud:

<head>
<title>Layout</title>
<!--scroll-->
<style type="text/css">

#divBg          {position:absolute; z-index:10; width:300px; left:0px; height:600px; clip:rect(0px 10px 10px                         0px); visibility:hidden;}
#divMenu        {position:absolute; z-index:11; top:1px; color:#333333; font-size:13px;                                             font-family:verdana,arial,helvetica,sans-serif; visibility:inherit;}
#divArrowLeft    {position:absolute; z-index:12; width:16px; height:21px; left:0px; top:210px;                                         visibility:inherit;}
#divArrowRight  {position:absolute; z-index:12; width:16px; height:21px; left:700px; top:210px;                                     visibility:inherit;}
</style>
<!--skærmopløsning-->
<script language="Javascript" type="text/javascrip">
opl1 = (screen.width == 800 && screen.height == 600);
</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 = (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>

<!--scrollfunktion slut-->
</head>
Avatar billede Slettet bruger
31. juli 2002 - 11:21 #8
Smid et link!
Avatar billede hermie Nybegynder
26. august 2002 - 11:18 #9
Hello phoenixv... Jeg har fundet en løsning, men tusind tak for dine svar - og tålmodighed :0)
Avatar billede Ny bruger Nybegynder

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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester