Javascript variabele in CSS? [Archief]

Phrantic

%Europe/Berlin %769 %2005, 19:28

Ik worstel hier al een tijdje mee. Ik heb een paar div blokken die bij mouseovers van bepaalde links te voorschijn komen. De afstand dat deze vanaf rechts verwijderd moet zijn is afhankelijk van de breedte van het document (omdat er ook bezoekers zijn met verkleinde vensters, borders om hun browser en een andere dikte voor de scrollbar hebben enz. is dit verstandiger dan screen.width van de schermresolutie).

Voor het Javascript gebeuren heb ik ergens het volgende gevonden om de document breedte te krijgen:

<script type="text/javascript">
if (window.innerWidth){
docwidth = window.innerWidth;
}

if (document.body.clientWidth){
docwidth = document.body.clientWidth;
}

// om de gewilde afstand te krijgen
afstand = (docwidth - 780) / 2;
</script>

Nu heb ik de volgende tag met CSS:

<style type="text/css">
.agenda{
position: absolute;
right: afstand;
visibility:hidden;
}
</style>

Bij right: afstand moet dus die Javascript variabele komen. Hoe krijg ik dat voor elkaar? (Ik ben een Javascript leek dus ik weet uberhaupt niet of JS de syntax van die berekening pakt)

Kan iemand mij verder helpen?

Alvast bedankt. :)

Jorim

%Europe/Berlin %856 %2005, 21:33

Je kan het 'achteraf' met javascript wel doen. Eerst laat je de pagina gewoon inladen en als deze klaar is voer je een javascript-functie uit en verander je de CSS eigenschappen'.

Hiervoor gebruik je onderstaande functie:
document.getElementById("div_id").style.CSS_property_to_change = "new_CSS_value_in_quotes";

En dan waarschijnlijk op deze manier:
document.getElementById("div_id").style.right = afstand;

Natuurlijk moet je er dan nog wel even een werkend geheel van maken, maar ik denk dat je dat wel moet lukken. Een beetje Googlen zou zeer zeker al kunnen helpen! :D

Phrantic

%Europe/Berlin %857 %2005, 21:34

Ikzelf ben met document.write() aan de gang gegaan maar het lijkt niet echt te werken. Voorbeeld.

document.write('<style type="text/css">'
+ '.agenda {
+ ' position: absolute;
+ ' right: ' + afstand + ';
+ ' visibility: hidden;
+ '}
+ '</style>');
Ik weet dat ik voor bepaalde characters een backslash nodig heb, maar voor welke? Ook als ik ze allemaal doe, blijft het niet werken. Voor zover ik weet moet er hierboven een backslash voor '/' '"' en ';' en misschien ook ':' maar dat weet ik niet zeker. Kan iemand mij helpen, en dit misschien op de juiste manier schrijven?'

Phrantic

%Europe/Berlin %867 %2005, 21:49

Je kan het 'achteraf' met javascript wel doen. Eerst laat je de pagina gewoon inladen en als deze klaar is voer je een javascript-functie uit en verander je de CSS eigenschappen'.

Hiervoor gebruik je onderstaande functie:
document.getElementById("div_id").style.CSS_property_to_change = "new_CSS_value_in_quotes";

En dan waarschijnlijk op deze manier:
document.getElementById("div_id").style.right = afstand;

Natuurlijk moet je er dan nog wel even een werkend geheel van maken, maar ik denk dat je dat wel moet lukken. Een beetje Googlen zou zeer zeker al kunnen helpen! :D
Hmm... ik denk dat ik het eerste stukje niet helemaal snap. Als de pagina klaar is met laden een javascript-functie uitvoeren? Waar zou ik dit dan moeten plaatsen? Helemaal achteraan, of mag het ook achter de <style> tag? Ik heb het namelijk geprobeerd en daarbij in acht genomen dat 'div_id' waarschijnlijk in mijn geval moet worden vervangen met 'agenda'... maar het lijkt de CSS niet te veranderen.

Bedankt voor je reactie. :)

Jorim

%Europe/Berlin %900 %2005, 22:36

Ik heb even een voorbeeldje voor je gemaakt :)

Phrantic

%Europe/Berlin %974 %2005, 00:23

Ik heb getest en het werkt inderdaad volgens jouw manier... maarrr...

De <divs> die ik gebruik hebben al een id toegekend, die hebben allemaal een apart nummer vanwege nog meer Javascript (om het en dus moet ik CSS oproepen d.m.v. <div class="id">.

Volgens mij is het niet mogelijk (of althans niet door alle browsers ondersteund) om twee waarden voor <div id> in te vullen.

Is het niet met hetzelfde commando, mogelijk om de CSS al vantevoren te overschrijven zonder dat je iets hoeft te klikken?

<body onload("javascript:text()">

Dit lijkt niet te werken, misschien een andere manier?

-edit- OK met een beetje rondklooien met de implementatie van jouw script in mijn stylesheet en header is het me gelukt om te bereiken wat ik wil. Bedankt voor de hulp. :D

Jorim

%Europe/Berlin %539 %2005, 13:56

Is het niet met hetzelfde commando, mogelijk om de CSS al vantevoren te overschrijven zonder dat je iets hoeft te klikken?
Fijn dat het werkt, maar bovenstaande kan je alleen bereiken met serverside scripten in PHP of ASP :) (maarja het werkt dus waarom moeilijk doen :D)