webForumDet fria alternativet

div och upplösning, att sätta ihop!

JavaScript

13 svar · 339 visningar · startad av roady

Medlem sedan jan. 2002473 inlägg
Frågan#1

Jag tänke fråga lite snällt ifall någon har lust att hjälpa mig, jag är fruktansvärt värdelös på Javascript.
Som ni vet är lager en rolig grej att pilla med, förutom om man centrerar sitt object. Då flyttas allt beroende på browserns storlek, medans lagerna ligger kvar, inte så kul :(

Hittade denna på wf som någon duktig rackare knåpat ihop (Jojoxx)

function getClientWidth(){
	if(document.all){
		return document.body.clientWidth;
	} else {
		return window.innerWidth;
	}
}
function getClientHeight(){
	if(document.all){
		return document.body.clientHeight;
	} else {
		return window.innerHeight;
	}
}

Sedan har jag denna koden på min sida. (Thomas Brattli )
NOTE; detta är bara toppen på scriptet, men antar att det är det enda som behövs...

<style type="text/css">
#divCont {position:absolute; z-index:1; left:5px; top:5px; height:400px; width:250px; visibility:hidden;}
.clTop   {position:absolute; z-index:1; width:250px; line-height:17px;}
.clSub   {position:absolute; z-index:1; left:20px; top:20px; width:250px; line-height:14px;}
</style>

Så målet är ju att få ihop det här, jag antar att jag skall göra någon beräkning på det som jag får ut av att kolla browserna upplösning och sedan lägga till värdet eller något med lagrets (div) placering i <style> :q

#divCont {position:absolute; z-index:1; left:5px; top:5px; height:400px; width:250px; visibility:hidden;}

Medlem sedan jan. 2002473 inlägg
#2

*buhu*, är det ingen som kan :(

man kan ju sedan exempelvis skriva ut bredden med.

<SCRIPT>
document.write (getClientWidth())
</SCRIPT>

Skall man lägga in det i på något sätt?

#divCont {position:absolute; z-index:1; left:5px; top:5px; height:400px; width:250px; visibility:hidden;}

Typ:

left:<SCRTIP>document.write (getClientWidth())</SCRIPT>-50

Men så kan man ju inte göra x(

Medlem sedan jan. 2002473 inlägg
#3

Någon som kan matte och Javascript borde kunna det här ju!

Borde inte detta funka, bara att det som skrivs ut är false.
Alltså om jag tar bredden på browsern minus x, och de talen skall bli 150 tillsammans... Och om jag sedan då skriver ut talet x som placering där jag vill att lagret skall ligga :q

Eller är jag helt ute och flamsar?
Eller man kanske inte kan räkna så med JavaScript?

<SCRIPT>
var x
document.write (getClientWidth()-x == 150)
</SCRIPT>
Medlem sedan sep. 20001 124 inlägg
#4

Positionen för den vänstra kanten ska vara (clientWidth - 150) / 2

Medlem sedan jan. 2002473 inlägg
#5

hmm, hela det här sättet funkar nog inte att räkna på!
Det du skrev Chainsaw funkar så länge man vill ha lagret i mitten av webfönstret.,,

Medlem sedan jan. 2002473 inlägg
#6

hahaha... löste det.... :stud
Och jag som har IG i matte (kanske därför det tog sådan tid)

För de som är intresserade!

I huvudet tittar man efter bredden på browsern

<SCRIPT>
function getClientWidth(){
	if(document.all){
		return document.body.clientWidth;
	} else {
		return window.innerWidth;
	}
}
</SCRIPT>

Sedan tar vi scripten

<SCRIPT language="JavaScript">
document.write (getClientWidth()/2 - 380)
</SCRIPT>

med getClientWidth() så hämtar jag bredden på fönstret
sedan delar jag det med två för att få mitten, och eftersom jag sedan vet att min centrerade tabell är 760px så delar jag det på 2 och får att jag skall ta -380.

På detta sättet sättet får jag fram pixelbredden från browserns vänstra kant till vänstra början av min tabell.

Medlem sedan jan. 2002473 inlägg
#7

Men nu kommer ännu ett problem :(

Hur fan får jag in det i en stilmall???

<style type="text/css">
#divCont {position:absolute; z-index:1; left:140px; top:170px; height:400px; width:250px; visibility:hidden;}
</style>
Medlem sedan sep. 2001269 inlägg
#8

Det är ju bara att addera och subtraheta sedan.
Ex: koden skall ligga 100px vänster om mitten och är 150px bred.

document.getElementById("divCont").style.left = (getClientWidth() - 150) / 2 - 100 + "px";

Varför vill du ha det i en stilmall?
Infoga bara scriptet längst ner på alla dina sidor ;)

Medlem sedan jan. 2002473 inlägg
#9

Funkar fint... fast jag ändrade det lite;
document.getElementById("divCont").style.left = (getClientWidth()/2 - 380) "px";

fast nu måste man bara ha något som laddar om sajten ifall man ändrar webfönstrets storlek

Medlem sedan sep. 2001269 inlägg
#10
<body onResize="location.reload()">

Om jag inte minns fel...

Medlem sedan jan. 2002473 inlägg
#11

Alltid dessa problem, och problemet heter Netscape!!!
Jag brukar plocka upp mina sajter i netscape 4,5 för att se hur det går, funkar det där så borde det ju funka i vilken läsare som helst.

Men

document.getElementById("divCont").style.left = (getClientWidth()/2 - 370) + "px";

funkar inte, DIV-lagret ligger längst till vänster i webläsaren!
Kan man skriva in i själva <DIV> taggen var den skall ligga och där lägga till beräkningen i java på något smidigt sätt?

Medlem sedan sep. 20001 124 inlägg
#12

NS4 stödjer inte getElementById(), däremot så gör NS6 + Mozilla det.

Medlem sedan jan. 2002473 inlägg
#13

Men kan man inte få in javascript i <div>-taggen då?

alltså något såhär:
<div id="divCont" style="position:absolute; left:<script>(getClientWidth()/2 - 370)</script>px; top:170px; width:250px; height:400px; z-index:1; visibility: hidden">

Men det vill sig inte riktigt, eller mycket möjligtvis så går det inte att göra så :(
Men kan man inte göra det på något annat sätt?

Medlem sedan apr. 2001762 inlägg
#14

Precis detta har jag också problem med :)

men det jag inte förstår är vart man ska skriva in:

document.getElementById("Asd").style.left = (getClientWidth()/2 + 200) "px";

Alltså i mitt menyscript så är det också så här

<style>
<!--
a            { text-decoration: underline }
a:hover      { color: #bbe9ff; text-decoration: none }
#Asd     { left: 709px; position: absolute; top: 329px; visibility: hidden; z-index: 1 }
.menus       { color: #FFFFFF; font-family: arial, helvetica, 'sans serif'; font-size: 8pt;
               text-decoration: none }
.menus:hover { color: #ffffff; background-color: #FFFFFF; font-family:
               arial, helvetica, 'sans serif'; font-size: 8pt;
               text-decoration: none }
select       { font-family: arial, verdana; font-size: 12px }
input.Small  { font-family: arial, verdana; font-size: 12px }
input        { font-family: arial, verdana; font-size: 12px }
input.Button { font-family: arial, verdana; font-size: 12px }
-->
</style>

Är inte den bästa på javascript direkt :)

276 ms totalt · 4 externa anrop · v20260731065814-full.6fe65c25
136 ms — deklarationer (db)
0 ms — hämta statistik (cache)
138 ms — hämta tråd, inlägg och bilagor (db)
130 ms — ändringar (db)