webForumDet fria alternativet

Hjälp med layers!!

10 svar · 315 visningar · startad av AndreasC

AndreasCMedlem sedan mars 20011 964 inlägg
#1

Jag behöver hjälp med ett par lager som jag inte vet hur jag ska göra med. Koden för lagren som vardera innehåller en bild ser ut så här:

<head>

<style type="text/css">
#divhl1{position:absolute; width:158; height:34; left:627; top:0; visibility:visible; z-index:1}
#divhl2{position:absolute; width:158; height:18; left:627; top:122; visibility:visible; z-index:2}
</style>

</head>
<body>

<div id="divhl1">
<img src="headline3.gif" width="158" height="34" alt="">
</div>

<div id="divhl2">
<img src="headline4.gif" width="158" height="18" alt="">
</div>

</body>

Ok, bilderna ligger med dess högra kant mot rullningslisten i webläsaren. När man ändrar storleken på rullningslisten under bildskärmsinställningarna i Windows så ser det förjäkligt ut eftersom allt annat utom dessa två bilder flyttar sig med rullningslisten.

Kan man inte med någon DHTML-kod göra så att även dessa lager anpassar sig till listen. Deras högra sida ska alltså ligga an mot rullningslisten och ligga kvar där även fasst man ändrar storlek på den. Lagren ska anpassas till nya positioner ändast när en användare ändrar storlek på listen och inte hålla på och flacka runt eller fladdra när man t.ex scrollar. Kan man fixa detta på någon sett, finns det något script för detta någonstans?

Ja, jag vet att detta kan verka lite petigt men det ser som sagt förjäkligt ut.

JojoxxMedlem sedan juni 20004 308 inlägg
#2

Ungefär så här;

<body onLoad="placeLayers();">
<script language="JavaScript">
function getClientWidth(){
	if(document.all){
		return document.body.clientWidth;
	} else if (document.layers &#0124;&#0124; document.getElementById){
		return window.innerWidth;
	}
}
window.onresize=placeLayers;
function placeLayers(){
	if (document.all){
		document.all['divhl1'].style.left = getClientWidth()-158;
		document.all['divhl2'].style.left = getClientWidth()-158;
	} else if (document.layers){
		document.layers['divhl1'].left = getClientWidth()-158;
		document.layers['divhl2'].left = getClientWidth()-158;
	} else if (document.getElementById){
		document.getElementById('divhl1').style.left = getClientWidth()-158;
		document.getElementById('divhl2').style.left = getClientWidth()-158;
	}
}
</script>
<div id="divhl1" style="position:absolute; top:0; z-index:1;">
<img src="headline3.gif" width="158" height="34" alt="">
</div>
<div id="divhl2" style="position:absolute; top:122; z-index:2;">
<img src="headline4.gif" width="158" height="18" alt="">
</div>

------------------
/ J

AndreasCMedlem sedan mars 20011 964 inlägg
#3

Det vekar inte fungera så bra. Kanske har jag gjort något fel. Så här ser det ut.

<head>
<style type="text/css">
#divhl4{position:absolute; width:158; height:34; left:627; top:0; visibility:visible; z-index:4}
#divhl5{position:absolute; width:158; height:18; left:627; top:122; visibility:visible; z-index:5}
</style>
</head>

<body onLoad="placeLayers();">
<script language="JavaScript" type="text/javascript">
function getClientWidth(){
if(document.all){
return document.body.clientWidth;
} else if (document.layers || document.getElementById){
return window.innerWidth;
}
}
window.onresize=placeLayers;
function placeLayers(){
if (document.all){
document.all['divhl4'].style.left = getClientWidth()-158;
document.all['divhl5'].style.left = getClientWidth()-158;
} else if (document.layers){
document.layers['divhl4'].left = getClientWidth()-158;
document.layers['divhl5'].left = getClientWidth()-158;
} else if (document.getElementById){
document.getElementById('divhl4').style.left = getClientWidth()-158;
document.getElementById('divhl5').style.left = getClientWidth()-158;
}
}
</script>

<div id="divhl4" style="position:absolute; top:0; z-index:4">
<img src="headline3.gif" width="158" height="34" alt="">
</div>

<div id="divhl5" style="position:absolute; top:122; z-index:5">
<img src="headline4.gif" width="158" height="18" alt="">
</div>
</body>

Kan du se om något är fel med detta?

MVH Andreas

JojoxxMedlem sedan juni 20004 308 inlägg
#4

I IE fungerar det bra, men Netscape blir lite fundersam av den dubbla stilmallsinformationen. Det jag gjortde var att plocka bort den första CSS deklarationen och satte den i lagret istället, så <style type="text/css"> t.o.m. </style> kan du plocka bort.

------------------
/ J

AndreasCMedlem sedan mars 20011 964 inlägg
#5

Ok, då har jag gjort så här istället.

<body onLoad="placeLayers();">
<script language="JavaScript" type="text/javascript">
function getClientWidth(){
if(document.all){
return document.body.clientWidth;
} else if (document.layers || document.getElementById){
return window.innerWidth;
}
}
window.onresize=placeLayers;
function placeLayers(){
if (document.all){
document.all['divhl4'].style.left = getClientWidth()-158;
document.all['divhl5'].style.left = getClientWidth()-158;
} else if (document.layers){
document.layers['divhl4'].left = getClientWidth()-158;
document.layers['divhl5'].left = getClientWidth()-158;
} else if (document.getElementById){
document.getElementById('divhl4').style.left = getClientWidth()-158;
document.getElementById('divhl5').style.left = getClientWidth()-158;
}
}
</script>

<div id="divhl4" style="position:absolute; width:158; height:34; left:627; top:0; visibility:visible; z-index:4">
<img src="headline3.gif" width="158" height="34" alt="">
</div>

<div id="divhl5" style="position:absolute; width:158; height:18; left:627; top:122; visibility:visible; z-index:5">
<img src="headline4.gif" width="158" height="18" alt="">
</div>
</body>

Jag förstår inte riktigt varför det inte fungerar, som du säger så bör det ju fungera i ie. Jag har 5.5. Kan det ha betydelse att det står left och top attribut för lagren och därför ignoreras koden, måste man skriva på något annat sätt då?

MVH Andreas

AndreasCMedlem sedan mars 20011 964 inlägg
#6

Fungerar icke. Några aningar om vad som kan vara fel?

AndreasCMedlem sedan mars 20011 964 inlägg
#7

Jojoxx? Hjälp!

JojoxxMedlem sedan juni 20004 308 inlägg
#8

Jag använder precis samma kod och det fungerar i både IE (5.5) och Netscape (4.07). Använder du någon annan script-kod utanför detta exemepel? Kanske ligger något i head? Som genererar script-fel och orsakar att resterande script inte körs. För som sagt, ovanstående kod fungerar i sig.

------------------
/ J

AndreasCMedlem sedan mars 20011 964 inlägg
#9

Jag vet inte så noga. Jag gillar att lusa ner mina sidor med javascripts och DHTML, men under kontroll givetvis. Jag har fått allt att fungera förutom detta då. Jag vet inte om det är så bra att lägga ut koden eftersom den är ganska stor men jag skulle ändå viljas göra det så kan du ju skumma genom det och se om du hittar något sådär direkt som får det hela att inte fungera. Du får väl skälla på mig ifall du tycker att det inte var så bra att göra.

<html>
<head>

<title></title>

<link rel = STYLESHEET href = "style.css" Type = "text/css">

<script type="text/javascript" src="js-filer/error.js"></script>
<script type="text/javascript" src="js-filer/splashwin.js"></script>

<style type="text/css">
BODY{
scrollbar-3dlight-color:#000000;
scrollbar-arrow-color:#f29b00;
scrollbar-base-color:#e0f0ed;
scrollbar-darkshadow-color:#000000;
scrollbar-face-color:#666666;
scrollbar-highlight-color:#666666;
scrollbar-shadow-color:#666666;
scrollbar-track-color:#73767b;
}
</style>

<script type="text/javascript" language="JavaScript">
function popUp(URL) {
var day = new Date();
var id = day.getTime();
var bredd = 550
var hojd = 450
var posLeft = (screen.width/2)-(bredd/2)
var posTop = (screen.height/2)-(hojd/2)

window.open(URL,id,'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width='+bredd+',height='+hojd+',left='+posLeft+',top='+posTop+'');
}

function popUp2(URL) {
var day = new Date();
var id = day.getTime();
var bredd = 700
var hojd = 500
var posLeft = (screen.width/2)-(bredd/2)
var posTop = (screen.height/2)-(hojd/2)

window.open(URL,id,'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width='+bredd+',height='+hojd+',left='+posLeft+',top='+posTop+'');
}
</script>

<script language="JavaScript" type="text/javascript">
/**********************************************************************************
NewsSlideFade
* 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 Brattli
*********************************************************************************/
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=this.agent.indexOf("Opera 5")>-1
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=new lib_bwcheck()

/***************************************************************************
Use the style tag to change the placement and width of the layers.
If you are trying to place this into a table cell or something make the
position of the divNewsCont layer relative...Remeber that that might crash
Netscape 4 though, Good luck!
********************************************************************************/

/****
Variables to set
****/

//How do you want the script to work?
//0 = Fade in - Fade out
//1 = Slide in - Fade out
//2 = Random
nWorks=1

//If you use the slide set these variables:
nSlidespeed=4 //in px
nNewsheight=55 //This is how long down it should start the slide

nBetweendelay=15000 //The delay before fading out.
nFont='arial' //The font for the news
nFontsize=10 //font size in pixel
nFadespeed=100 //The speed to fade in, in milliseconds

//Set the colors, first color is same as background, last color is the color it stops at:
//You can have as many colors you want
nColor=new Array('#FFFFFF', '#EEEEEE','#CCCCCC','#999999','#666666','#333333','#000000')

//This is the news you wanna have, set the link and the text. If you don't wan't it to link anywhere
//use a # as the link
nNews=new Array()
//Copy there three lines and change the info and numbers to get more news.
nNews[0]=new Array()
nNews[0]["text"]="Please, don't use a too high textsetting, or to low for that matter, if you absolutely don't have to! It will ruin the design of the site. Mediumsize is the best setting for this site, but if you decide to still use another textsetting, then you do that at your own behalf."
nNews[0]["link"]="JavaScript://"

/********************************************************************************
Object code...Object constructors and functions...
********************************************************************************/
function makeNewsObj(obj,nest,font,size,color,news,fadespeed,betweendelay,slidespeed,works,newsheight){
nest=(!nest) ? "":'document.'+nest+'.'
this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0;
this.writeref=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj+".document"):0;
if(font){this.color=new Array(); this.color=eval(color); this.news=new Array(); this.news=eval(news)
this.font=font; this.size=size; this.speed=fadespeed; this.delay=betweendelay; this.newsheight=newsheight;
this.fadeIn=b_fadeIn;this.fadeOut=b_fadeOut; this.newsWrite=b_newsWrite; this.y=1
this.slideIn=b_slideIn; this.moveIt=b_moveIt; this.slideSpeed=slidespeed; this.works=works
if(bw.dom || bw.ie4){this.css.fontFamily=this.font; this.css.fontSize=this.size; this.css.color=this.color[0]}
}
this.obj = obj + "Object"; eval(this.obj + "=this"); return this
}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}

function b_newsWrite(num,i){
if(bw.ns4){
this.writeref.write("<a href=\""+this.news[num]['link']+"\" target=\"myTarget\" style=\"text-decoration:none; font-size:"+this.size+"px\">"
+"<font face=\""+this.font+"\" color=\""+this.color+"\">"+this.news[num]['text']+"</font></a>")
this.writeref.close()
}else this.writeref.innerHTML='<a id="'+this.obj+'link' +'" target="myTarget" style="text-decoration:none; font-size:'+this.size+'px; color:'+this.color+'" href="'+this.news[num]['link']+'">'+this.news[num]['text']+'</a>'
}
//Slide in
function b_slideIn(num,i){
if(this.y>0){
if(i==0){this.moveIt(0,this.newsheight); this.newsWrite(num,this.color.length-1)}
this.moveIt(this.x,this.y-this.slideSpeed); i++
setTimeout(this.obj+".slideIn("+num+","+i+");",50)
}else setTimeout(this.obj+".fadeOut("+num+","+(this.color.length-1)+")",this.delay)
}
//The fade functions
function b_fadeIn(num,i){
if(i<this.color.length){
if(i==0 || bw.ns4) this.newsWrite(num,i)
else{obj=bw.ie4?eval(this.obj+"link"):document.getElementById(this.obj+"link");obj.style.color=this.color}
i++; setTimeout(this.obj+".fadeIn("+num+","+i+")",this.speed)
}else setTimeout(this.obj+".fadeOut("+num+","+(this.color.length-1)+")",this.delay)
}
function b_fadeOut(num,i){
if(i>=0){
if(i==0 || bw.ns4) this.newsWrite(num,i)
else{obj=bw.ie4?eval(this.obj+"link"):document.getElementById(this.obj+"link");obj.style.color=this.color}
i--; setTimeout(this.obj+".fadeOut("+num+","+i+")",this.speed)
}else{
num++; if(num==this.news.length) num=0
works=!this.works?0:this.works==1?1:Math.round(Math.random())
if(works==0) setTimeout(this.obj+".fadeIn("+num+",0)",500)
else if(works==1){this.y=1; setTimeout(this.obj+".slideIn("+num+",0)",500)
}
}
}
/********************************************************************************************
The init function. Calls the object constructor and set some properties and starts the fade
*********************************************************************************************/
function fadeInit(){
oNews=new makeNewsObj('divNews','divNewsCont',nFont,nFontsize,"nColor","nNews",nFadespeed,nBetweendelay,nSlidespeed,nWorks,nNewsheight)
oNewsCont=new makeNewsObj('divNewsCont')
works=!oNews.works?0:oNews.works==1?1:Math.round(Math.random())
if(works==0) oNews.fadeIn(0,0)
else if(works==1) oNews.slideIn(0,0)
oNewsCont.css.visibility='visible'
}

//Calls the init function on pageload.
if(bw.bw)
</script>

</head>

<body onLoad="placeLayers(); fadeInit(); blurLinks()">

<script type="text/javascript" language="JavaScript">
function blurLinks()
{
for(i=0 ; i<document.links.length ; i++)
document.links.onfocus=new Function("this.blur()");
}
function
DoIt(current)
{if(current.blur)current.blur();
}
</script>

<script language="JavaScript" type="text/javascript">
function getClientWidth(){
if(document.all){
return document.body.clientWidth;
} else if (document.layers || document.getElementById){
return window.innerWidth;
}
}
window.onresize=placeLayers;
function placeLayers(){
if (document.all){
document.all['divhl4'].style.left = getClientWidth()-158;
document.all['divhl5'].style.left = getClientWidth()-158;
} else if (document.layers){
document.layers['divhl4'].left = getClientWidth()-158;
document.layers['divhl5'].left = getClientWidth()-158;
} else if (document.getElementById){
document.getElementById('divhl4').style.left = getClientWidth()-158;
document.getElementById('divhl5').style.left = getClientWidth()-158;
}
}
</script>

<script
type="text/javascript" language="Javascript">

if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4)) {

var url="http://min.adress";
var title="Zelda - The Legend Goes On";

document.write('<a href="javascript:window.ext');
document.write('ernal.AddFavorite(url,title);" ');
document.write('onMouseOver="window.status=');
document.write("'Please, bookmark this website!'; return true ");
document.write('"onMouseOut="window.status=');
document.write("' '; return true ");
document.write('">Bookmark this website</a>');
}
else {
var msg = "Don't forget to bookmark me!";
if(navigator.appName == "Netscape") msg += "(CTRL-D)";
document.write(msg);
}
</script>

<script
language="JavaScript" type="text/javascript">
"cookiegenererande script"
</script>

</body>
</html>

Jag har tagit bort alla lagerinställningar för att få ner storleken på koden lite.

JojoxxMedlem sedan juni 20004 308 inlägg
#10

Ja, det var ett och annat script ;) Antagligen så krockar scriptet med någon av de inkluderade js-filerna. Antagligen så är det hanteraren för onresize. Det skulle kunna vara dubletter av funktionerna getClientWidth eller placeLayers, men det låter mindre troligt (kolla i de inkluderade filerna om dessa funktioner redan finns, i så fall är det bara att döpa om funktionerna i mitt exempel). är det onresize om krockar måste js-filerna skrivas om. Finns det en annan hanterare för onresize är det bara att lägga in placeLayers(); först i den funktionen.

------------------
/ J

AndreasCMedlem sedan mars 20011 964 inlägg
#11

Det funkar nu. Jag fick döpa om funktionerna i scriptet så funkade det sedan. Tack för hjälpen.

138 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
135 ms — hämta tråd, inlägg och bilagor (db)