[JS] variabele gebruiken als breedte plaatje

[Kaastosti]

Om de breedte van een cel uit te lezen heb ik er een div in gezet die precies om te tekst in die cel heen past. De breedte daarvan is bijvoorbeeld 150 pixels. De omkadering die ik er omheen heb moet in totaal 300 pixels breed zijn, waarvan een gedeelte wordt gebruikt door de omkadering zelf. Zodoende kwam ik op de berekening 300 (totale breedte) - 50 (die omkadering) - 150 (breedte tekst) = 100 pixels over. Die waarde 100 wil ik gebruiken om een transparant gifje de goede breedte te geven en de layout kloppend te maken.

Die waarde 100 heb ik inmiddels in een variabele staan... maar nu moet ik 'm nog netjes in de html krijgen. Wat ik ook doe, ik krijg 'm maar niet zover dat er gewoon width='100' in de code komt te staan, of in ieder geval dat die gif ook echt die breedte krijgt.

width='breedte'
width='<script>breedte</script>'
width='<script>document.write(breedte)</script>'
en andere wanhoopspogingen... help!

[Tijgertje84]

nu ben ik zelf ook aps bezig met JS maar misschien dat ik een id weet...

JavaScript:

function breedte(){
    var breedte= '100';
    return breedte;
}

width='javascript: return breedte()'

[ Voor 46% gewijzigd door Tijgertje84 op 27-10-2005 13:51 ]

[Kaastosti]

Leuke suggestie, maar helaas geen effect

De code die ik nu heb staan is de volgende:

code:

<script>
var width='".$width."';
var breedte = width-50-document.getElementById('titel').offsetWidth;
</script>

Zoals je ziet komt er ook een PHP variabele in voor, welke de totale breedte (in het voorbeeld 300) aangeeft.

De variabele 'breedte' die hier uit komt klopt en is het aantal pixels wat ik als breedte moet hebben.

[ Voor 83% gewijzigd door Kaastosti op 27-10-2005 13:59 ]

[Borizz]

Ik snap niet wat je precies wilt bereiken ? Volgens mij moet hetgeen wat je wilt ook met html / css lukken. Probeer eens duidelijk te omschrijven hoe het eruit moet komen te zien of maak er even een tekening of iets dergelijks van.

[Tijgertje84]

je moet wel een functie aanlaten roepen zoals ik zei met return breedte()
maar je maakt dan een functie aan

JavaScript:

function breedte(){
var width='".$width."';
var breedte = width-50-document.getElementById('titel').offsetWidth;
}

probeer zoiets eens..
en bij het plaatje zelf: width="javascript: return breedte()"
weet niet zeker en blijft maar een suggestie

[Borizz]

Tijgertje84 schreef op donderdag 27 oktober 2005 @ 14:04:
je moet wel een functie aanlaten roepen zoals ik zei met return breedte()
maar je maakt dan een functie aan

JavaScript:

function breedte(){
var width='".$width."';
var breedte = width-50-document.getElementById('titel').offsetWidth;
}

probeer zoiets eens..
en bij het plaatje zelf: width="javascript: return breedte()"
weet niet zeker en blijft maar een suggestie

Dat gaat echt niet werken hoor! In het attribuut width kan je geen javascript zetten (het wordt in ieder geval niet uitgevoerd). Je kan alleen javascript gebruiken voor events (zoals onclick, onfocus, onblur).

[Kaastosti]

Ter illustratie:

De zwarte rand is de omkadering, het rode blok is het titelveld waarvan ik de breedte nodig heb. De tekst van de titel hoort uiteraard links te staan en zodoende wil ik op de plaats van het groene kruis een transparante gif neerzetten die er voor zorgt dat de afmetingen tot op de pixel nauwkeurig kloppen en alles op de goede plaats staan.

Dit kader heb ik in meerdere gevallen nodig, dus moet dynamisch zijn afhankelijk van de tekst die er in de titel staat.

Op het plaatje is aan de linker kan van de titel gewoon een zwarte lijn te zien. Als de tekst echter links staat, is er achter een heel stuk wit te zien. Dit wilde ik 'oplossen' door die transparate gif in die cel te zetten, zodat er wel een breedte moet zijn en dus ook een border

[Tijgertje84]

Borizz schreef op donderdag 27 oktober 2005 @ 14:07:
[...]

Dat gaat echt niet werken hoor! In het attribuut width kan je geen javascript zetten (het wordt in ieder geval niet uitgevoerd). Je kan alleen javascript gebruiken voor events (zoals onclick, onfocus, onblur).

tjah dan houd het op met mijn noob skills

[Borizz]

Probeer het hier eens mee .

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
    <head><title>Test</title>
        <style type="text/css">
            html, body { height: 100%; margin: 0; }
            .kader { 
                border: 1px solid #000000;
                position: relative;
                padding: 10px;
                width: 300px;
            }
            .kader h2 {
                color: white;
                height: 20px;
                font-size: 16px;
                padding: 2px;
                position: absolute;
                left: 10px;
                top: 0px;
                margin-top: -10px;
                border: 1px solid red;
                background-color: blue;
            }
            
        </style>
    </head>
    <body>
        <div style="height: 100px;"></div>
        <div class="kader">
            <h2>titel</h2>
            <p>tekst die hierin komt te staan</p>
        </div>
    </body>
</html>

[Kaastosti]

Hmm da's wel een stuk makkelijker thx!

Alleen vul je daar weer wel een vaste breedte bij in, dus de style moet opgenomen worden in de html zelf, aangezien je niet remote in een stylesheet een PHP breedte op kan geven...

[ Voor 71% gewijzigd door Kaastosti op 27-10-2005 14:42 ]

[Sendy]

Je kan toch ook je css bestand door PHP laten genereren?

[Kaastosti]

Dat wel, alleen is de kolombreedte steeds verschillend, dus het is niet een kwestie van 1 variabele doorgeven. Dat probleem kom ik overheen door de style rechtstreeks in de elementen te zetten, welke in een PHP functie staan... dus dat komt goed.

Alleen kom ik uiteraard in de knel met het ombouwen zodat de layout weer totaal anders is

[Borizz]

Cascading Stylesheet:

.kader {
  width: 100%;
}

.
Kijk anders eens op http://www.w3schools.com/css/.

[ Voor 47% gewijzigd door Borizz op 27-10-2005 14:59 ]

[crisp]

Spacer gifjes is toch echt van de vorige eeuw hoor; het lijkt me erg sterk dat dit niet met gewoon CSS op te lossen is...

[Kaastosti]

Zijn spacer gifjes alweer not-done? *schaam*
Het rottige van die divjes vind ik altijd dat de positionering nooit wil zoals ik in m'n hoofd heb en het er onder verschillende browsers over het algemeen ook heel verschillend uitziet .. tenminste, als ik het maak dan. Dat was eigenlijk de reden dat ik er nooit echt verder mee ben gegaan, omdat je uitzonderingen _bleef_ maken voor weer een aparte versie van een browser

<hier stond een zooi gejammer en gemekker jegens browserverschillen>

...blijkt dat het probleem in m'n eigen code zat (typo) en dat het nu wel werkt
note to self: minder snel terug naar GoT, eerst zelf zoeken

Toch lijken FF en IE andere maten te hanteren voor 1 pixel, aangezien afstanden ondanks gelijke code gewoon verschillen.

[ Voor 132% gewijzigd door Kaastosti op 27-10-2005 15:46 ]