10 svar · 435 visningar · startad av haider
Tjena
Detta script fick jag av Jojoxx för ett långt tag sen
Jag plockade upp det härom dagen, men upptäckte två problemos
http://www.animadesign.se/test/createlayer.htm
Varför, och hur löser man det?
Egentligen borde det inte bli en tomrad eftersom ingenting som skapas i diven tar någon plats från sidflödet eftersom det som skapas är absolut-positionerat. Men vi löser det genom att även göra denna div absolut-positionerad.
Det är inte så konstigt eftersom första raden i hideCenteredLayerg gömmer lagret, sedan visas det aldrig igen. Men den första raden fyller ingen funktion eftersom man på raden efter tömmer innehållet i div'en.
Alltså:
Text<br>
Text
<br>
<div id="createLayerHere" style="position:absolute;top:0px;left:0px;"></div>
<p>Text<br>
Text</p>
<p>&nbsp;</p>
<p>
<script type="text/javascript">
function makeCeneteredLayer(id,width,height,style){
var x=parseInt(((document.all)?document.body.clientWidth:window.innerWidth)/2-width/2);
var y=parseInt(((document.all)?document.body.clientHeight:window.innerHeight)/2-height/2);
document.getElementById('createLayerHere').innerHTML+='<div id="'+id+'" style=" position:absolute;top:'+y+'px;left:'+x+'px;width:'+width+'px;height:'+height+'px;'+style+'"></div>';
}
function hideCenteredLayer(){
document.getElementById('createLayerHere').innerHTML=''; /* här rensar den innehållet från innan*/
}
</script>
</p>
<p>&nbsp;</p>
<p><a href="javascript:makeCeneteredLayer('mitt_id',580,368,'border:solid blue 1px;');">Skapa lager</a><br>
<a href="javascript:hideCenteredLayer();">D&ouml;lj lager</a> </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
You are THE man!
tack
Jag upptäckte dock ett annat problem, som jag inte visste att jag hade
Det verkar som om centreringen i höjdled inte fungerar, alltså när den skapar lagret, så tycks den skapa den längst upp, inte centrerat där man råkar befinna sig
Observera att lagret visas inne i en hög iframe. Det är därför den ska befinna sig centrerat i höjdled i den "aktiva" ytan av iframen
Kan problemet bero på style="position:absolute;top:0px;left:0px;" ?
Hur gör man då?
Ändra dokumenttypsdefinitionen (första taggen i koden) till:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Tack, det funkade när man kör sidan för sig själv, dock inte när den placeras i en iframe :(
OK
Men nu när jag placerade sidan i ett vanligt frameset tycks det inte fungera
Hur stor betydelse har egentligen dokumenttypsdefinitionen?
haider skrev:
Hur stor betydelse har egentligen dokumenttypsdefinitionen?
Om vi enbart tittar på JavaScript så har den fått större betydelse på sista tiden i IE där objektmodellen ändrar sig beroende på vad du talar om att det är för typ av dokument. Detta är ett typ-exempel.
Du det funkar inte.
Om du gör så, att du skriver en en mängd rader neders, så att sidan börjar scrolla, och att du scrollar, så att du befinner dig i en annan höjd, så kommer du att se att det inte blir rätt.
Det verkar som om den skapar den centrerat med hänsyn till var länken finns, inte var i höjden på framen/iframen man befinner sig i.
Det man vill ju centrera i höjden på fönstrets innerhöjd, är det inte det som du kallar för window.innerHeight ?
haider skrev:
Det man vill ju centrera i höjden på fönstrets innerhöjd, är det inte det som du kallar för window.innerHeight ?
window.innerHeight används av Mozilla, men det som returneras är storleken om aktuellt fönster (eller frame), problemet är bara att lagrets position är angivet från topp/vänster i bodyn, oavsett var scroll-listan är placerad. Skall man ta hänsyn till scroll-listan blir det så här:
function makeCeneteredLayer(id,width,height,style){
var x=getScrollX()+parseInt(((document.all)?document.body.clientWidth:window.innerWidth)/2-width/2);
var y=getScrollY()+parseInt(((document.all)?document.body.clientHeight:window.innerHeight)/2-height/2);
document.getElementById('createLayerHere').innerHTML+='<div id="'+id+'" style=" position:absolute;top:'+y+'px;left:'+x+'px;width:'+width+'px;height:'+height+'px;'+style+'"></div>';
}
function getScrollX(){ return(document.all)?document.body.scrollLeft:pageXOffset; }
function getScrollY(){ return(document.all)?document.body.scrollTop:pageYOffset; }
function hideCenteredLayer(){
document.getElementById('createLayerHere').innerHTML=''; /* här rensar den innehållet från innan*/
}
Härligt!
Den här gången funkade det!
Tänk att jag inte klargjort redan från början detta med hänsyn till scrollen - jag hade för mig hela tiden att det funkade, men att problemet var nåt helt annat
tack!