[CSS/JS] Hoogte div uitlezen en verwerken in plaatje - Softwareontwikkeling

maandag 10 juli 2006 20:08

Acties:

Topicstarter

Ik ben momenteel bezig met het maken van een website. Nu willen we het graag zo krijgen dat er maatlijnen om bepaalde elementen komen te staan. De eerste poging omvatte het plaatsen van een top, bottom en left margin en hierbij twee statische pijltjes aan toe te voegen (in apparte div's, zodanig uitgelijnd dat het er goed uitziet). Nu lijkt me dit geen mooie oplossing.

Daarna dacht ik, ik ga met de GD-Library aan de gang. Ik ben nu zover dat ik een PHP-file heb die ik een parameter mee kan geven, zodat de hoogte van het plaatje variabel is (om de positie van het onderste plaatje te bepalen). Als ik in een html-file de onderstaande code opgeef, krijg ik het gewenste resultaat.

HTML:

1	[img]"test.php?H=559"[/img]

Nu wil ik via JS de hoogte van iedere div (als een <p> ... </p>) bepalen en deze waarde (in pixels als het goed is) doorgeven aan de background-image-property in mijn CSS file. Mijn vraag is nu, is dit mogelijk? Of is er misschien een andere manier om dit te realiseren met mijn image-file.

In de search en op Google heb ik niet veel kunnen vinden. Ik weet dan ook niet echt met welke keywords ik moet zoeken in dit geval. Als er animo voor enkele voorbeelden is, dan post ik ze wel.

maandag 10 juli 2006 20:24

Acties:

Borizz

Dat kan inderdaad met het style object in javascript.

JavaScript:

1	document.getElementById('id').style.backgroundPosition = 'top left';

If I can't fix it, it ain't broken.

maandag 10 juli 2006 20:25

Acties:

Verwijderd

iets als:

JavaScript:

1	obj.style.backgroundImage = 'url(test.php?H='+obj.offsetHeight+')';

moet je toch wel gevonden kunnen hebben?

wat heb je al aan code en wat heb je geprobeerd? waar loop je vast?

maandag 10 juli 2006 20:37

Acties:

Loenhoet

Topicstarter

Bovenstaande opties zal ik eens proberen. Ik heb nu een aantal paragraphs met 'Lorem Ipsum ..'. Deze heb ik een top en bottom border van 2px gegeven. Deze lijnen worden ook in het plaatje gegenereerd. Daartussen moet een maatlijn komen.

Dat van die hoogte met

JavaScript:

1	obj.offsetHeight

had ik al wel eens gevonden, maar ik begrijp niet helemaal hoe je dat in een stylesheet kan verwerken.

Ik zal zodadelijk wel een voorbeeldje uploaden.

Vorbeeld:

Afbeeldingslocatie: http://img153.imageshack.us/img153/1787/image0027bk1.th.jpg

Zoals je kunt zien, is de positie van de achtergronden al wel goed. Alleen de variabele hoogte heb ik er nu nog niet in verwerkt. Het is misschien heel simpel, maar ik heb geen enkel idee hoe dit zou moeten. Het onderste plaatje is dus gewoon een losse img-tag zoals ik al eerder heb gepost.

[ Voor 44% gewijzigd door Loenhoet op 10-07-2006 21:11 ]

maandag 10 juli 2006 21:19

Acties:

Loenhoet

Topicstarter

Verwijderd schreef op maandag 10 juli 2006 @ 20:25:
iets als:
JavaScript:
1
obj.style.backgroundImage = 'url(test.php?H='+obj.offsetHeight+')';
moet je toch wel gevonden kunnen hebben?

wat heb je al aan code en wat heb je geprobeerd? waar loop je vast?

Dat met die plusjes ken ik nog niet. Ik ben nog niet echt heel erg ervaren met JS. Ik heb nu onderstaande code (sorry, heb momenteel geen hosting met php voorhande):

HTML:

<html>
<head>
<link rel="stylesheet" type="text/css" href="markup.css" />

</head>
<body>
<div id="top"></div>
    <p>Lorem ipsum ...</p>
    <p>Vestibulum pulvinar ...</p>
    <p>Aenean felis ...</p>
    <p>Sed eleifend ...</p>
    <p>Mauris pede ...</p>
[img]"test.php?H=559"[/img]
</body>
</html>

Cascading Stylesheet:

#top {
    margin: 10px
    padding: 10px; }

p {
    border-bottom: 2px solid black;
    border-top: 2px solid black;
    padding-left: 50px;
    background-image: url(test.php?H=450);
    background-repeat: no-repeat; }

PHP:

<?
if(!empty($_GET["H"]) && is_numeric($_GET["H"])) {
    $Width = 50;
    $Height = $_GET["H"];
    $CenterLine = 20;
    $Offset = 10;
    $ArrowStyle = 5;
    $Font = 'arial.ttf';
    $FontSize = 10;

    $Image = ImageCreate($Width, $Height);

    $Background = ImageColorAllocate($Image, 255,255,255);
    $Black = ImageColorAllocate($Image, 0, 0, 0);

    ImageSetThickness($Image, 2);
    $Line = ImageLine($Image, 0, 0 + 1, $Width, 0 +1, $Black);
    $Line = ImageLine($Image, 0, $Height - 1, $Width, $Height - 1, $Black);

    ImageSetThickness($Image, 1);
    $Line = ImageLine($Image, $CenterLine, 0 + 1, $CenterLine, $Height - 1, $Black);

    $UT = array(    0 + $Offset, 25,
                    10 + $Offset, 0,
                20 + $Offset, 25,
                10 + $Offset, 25 - $ArrowStyle);

    $UT = ImageFilledPolygon($Image, $UT, count($UT) / 2, $Black);

    $LT = array(    0 + $Offset, $Height - 25,
                    10 + $Offset, $Height - 0,
                    20 + $Offset, $Height - 25,
                    10 + $Offset, $Height - (25 - $ArrowStyle));

    $LT = ImageFilledPolygon($Image, $LT, count($LT) / 2, $Black);

    $HeightDiv = str_replace(".", ",", round((127 * round($Height)) / 480, 2));

    $SizeArray = ImageTtfBBox($FontSize, 00, $Font, $HeightDiv);

    $dx = abs($SizeArray[2] - $SizeArray[0]); 
    $StartPostition = $Height - ($Height - $dx) / 2;
    $SizeArray = ImageTtfText($Image, $FontSize, 90, 15, $StartPostition, $Black, $Font, $HeightDiv);

    header("Content-type: image/gif");
    ImageGif($Image);
    ImageDestroy($Image);

} else {
    header("Content-type: image/gif");
    $Image = ImageCreate(10, 10);
    $Background = ImageColorAllocate($Image, 255,255,255);
    ImageGif($Image);
    ImageDestroy($Image);
}
?>

[ Voor 9% gewijzigd door Loenhoet op 10-07-2006 22:09 ]

donderdag 13 juli 2006 12:33

Acties:

Loenhoet

Topicstarter

Heeft iemand een idee hoe ik dit zou kunnen doen ???

donderdag 13 juli 2006 14:08

Acties:

Crayne

Have face, will travel

Loenhoet schreef op donderdag 13 juli 2006 @ 12:33:
Heeft iemand een idee hoe ik dit zou kunnen doen ???

Je wilt dus een pagina laden waarbij een waarde uit GET collectie gebaseerd moet zijn op een door JS uitgelezen hoogte van een bepaalde div?

Dat wordt moeilijk, aangezien de PHP wordt uitgevoerd voor de JS (clientside) en de parameter dus niet beschikbaar is als je hem nodig hebt.

Of begrijp ik je nu verkeerd?

Edit: wat je kunt doen is een pagina maken waarop de divs worden geladen, met in de head sectie een js script dat aan wordt geroepen onload. Dat javascript kan dan inderdaad, zoals hierboven beschreven de background-image property veranderen voor alle divs op de pagina, gebaseerd op de hoogte op dit moment.

De achtergrond moet je dan laten genereren door een tweede PHP pagina.

Pagina 1:

HTML:

<html>
<head>
<script type="javascript/css" src="script.js"></script>
</head>
<body onload="loadBackgrounds();">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
</body>
</html>

JS:

JavaScript:

function loadBackgrounds() {
    
    var divArray = document.getElementsByTagName("div");
    var currDivHeight;

    for (var i = 0; i < divArray.length; i++) { 
    
        currDivHeight = divArray[i].style.height;
        
        divArray[i].style.background-image = "url(test.php?H=" + currDivHeight + ")";
    
    }
    
}

In de tweede pagina bouw je dan de image die je als achtergrond wilt zetten.

[ Voor 132% gewijzigd door Crayne op 13-07-2006 14:24 ]

Mijn Library Thing catalogus

donderdag 13 juli 2006 18:05

Acties:

Loenhoet

Topicstarter

Crayne schreef op donderdag 13 juli 2006 @ 14:08:
[...]

Je wilt dus een pagina laden waarbij een waarde uit GET collectie gebaseerd moet zijn op een door JS uitgelezen hoogte van een bepaalde div?

Dat wordt moeilijk, aangezien de PHP wordt uitgevoerd voor de JS (clientside) en de parameter dus niet beschikbaar is als je hem nodig hebt.

Of begrijp ik je nu verkeerd?

Edit: wat je kunt doen is een pagina maken waarop de divs worden geladen, met in de head sectie een js script dat aan wordt geroepen onload. Dat javascript kan dan inderdaad, zoals hierboven beschreven de background-image property veranderen voor alle divs op de pagina, gebaseerd op de hoogte op dit moment.

De achtergrond moet je dan laten genereren door een tweede PHP pagina.

Pagina 1:
HTML:
1
...
JS:
JavaScript:
1
...
In de tweede pagina bouw je dan de image die je als achtergrond wilt zetten.

Bedankt voor de reactie. Voor zover ik het begrijp, heb ik dat al uitgevoerd. Ik heb een pagina in PHP die a.d.h.v. een GET-parameter een afbeelding genereerd (Zie hierboven). Deze kan ik nu via de HTML-DOM direct in de CSS aanroepen via:

Cascading Stylesheet:

1	expression("url(test.php?H=" + this.offsetHeight + ")");

In Internet Explorer werkt het nu wel goed, alleen in Firefox (de rest heb ik nog niet getest) werkt het niet. Wie heeft hier meer verstand van en heeft er een alternatief wat wel werkt?

donderdag 13 juli 2006 18:38

Acties:

Loenhoet

Topicstarter

Crayne schreef op donderdag 13 juli 2006 @ 14:08:
[...]

Je wilt dus een pagina laden waarbij een waarde uit GET collectie gebaseerd moet zijn op een door JS uitgelezen hoogte van een bepaalde div?

Dat wordt moeilijk, aangezien de PHP wordt uitgevoerd voor de JS (clientside) en de parameter dus niet beschikbaar is als je hem nodig hebt.

Of begrijp ik je nu verkeerd?

De achtergrond wordt dus pas gegenereerd op het moment dat de CSS verwerkt wordt. Hierin komt dus de expression uit de vorige post te staan. Het JS-script dat je gepost hebt zal ik zodadelijk eens bekijken.

donderdag 13 juli 2006 18:40

Acties:

Borizz

Loenhoet schreef op donderdag 13 juli 2006 @ 18:05:
[...]

Bedankt voor de reactie. Voor zover ik het begrijp, heb ik dat al uitgevoerd. Ik heb een pagina in PHP die a.d.h.v. een GET-parameter een afbeelding genereerd (Zie hierboven). Deze kan ik nu via de HTML-DOM direct in de CSS aanroepen via:
Cascading Stylesheet:
1
expression("url(test.php?H=" + this.offsetHeight + ")");
In Internet Explorer werkt het nu wel goed, alleen in Firefox (de rest heb ik nog niet getest) werkt het niet. Wie heeft hier meer verstand van en heeft er een alternatief wat wel werkt?

Expressions werken voor zover ik weet alleen in IE, je zal het dus met javascript op moeten lossen en hoe dat moet is ook al aan bod gekomen in dit topic.
Zie bijvoorbeeld: Verwijderd in "[CSS/JS] Hoogte div uitlezen en verwerke...".
Een beetje eigen inzicht/inzet is wel vereist hier.

If I can't fix it, it ain't broken.

vrijdag 14 juli 2006 11:53

Acties:

Loenhoet

Topicstarter

Loenhoet schreef op donderdag 13 juli 2006 @ 18:38:
[...]

De achtergrond wordt dus pas gegenereerd op het moment dat de CSS verwerkt wordt. Hierin komt dus de expression uit de vorige post te staan. Het JS-script dat je gepost hebt zal ik zodadelijk eens bekijken.

Ik heb je tips toe proberen te passen, maar ik kom er niet helemaal uit. Daarom heb ik je code rechtstreeks in een nieuw bestand gezet, maar zelfs dan werkt het niet. Ik weet wel wat je doet in het script, maar ik kan zelf de code niet verzinnen, daar ben ik te onervaren voor. Volgens mij zit er een klein foutje in je js-script, volgens mij moet het .style.backgroundImage zijn (dus zonder streepje)

Bovendien komt dit overeen met wat mophor aangaf, maar zoals ik hierboven al zei, snap ik niet waar bijvoorbeeld die obj vandaan komt. Sorry dat ik er niet zo veel van snap.

vrijdag 14 juli 2006 12:13

Acties:

Crayne

Have face, will travel

Loenhoet schreef op vrijdag 14 juli 2006 @ 11:53:
[...]
Volgens mij zit er een klein foutje in je js-script, volgens mij moet het .style.backgroundImage zijn (dus zonder streepje).

Je hebt helemaal gelijk.

Bovendien komt dit overeen met wat mophor aangaf, maar zoals ik hierboven al zei, snap ik niet waar bijvoorbeeld die obj vandaan komt. Sorry dat ik er niet zo veel van snap.

Dat komt omdat (en dat staat niet in Morphor's voorbeeld) je eerst in de variabele obj je te manipuleren DOM object stopt.

JavaScript:

var obj;

var divArray = document.getElementsByTagName("div");

// for loopje door elementen van divArray begint

      obj = divArray[i];

      // doe iets met obj

// for loopje eindigt.

Mail me anders even met de bestanden die je nu hebt en ik kijk er even naar. Zie profiel.

[ Voor 7% gewijzigd door Crayne op 14-07-2006 12:13 ]

Mijn Library Thing catalogus

donderdag 20 juli 2006 08:49

Acties:

Loenhoet

Topicstarter

Ik heb het nu bijna voor elkaar. In FireFox wordt de achtergrond nu ook juist weergegeven. Alleen rest mij nu nog het probleem dat als ik te tekst resize (zoomen met scrollwheel) de achtergrond niet meeveranderd. In IE werkt dit wel gewoon (m.b.v. expression()). Van Crayne kreeg ik de tip dat je op je tag een onresize=... toe kunt passen, alleen veranderd de groote van het element niet (in px gezien). Als je het met em's zou doen, dan werkt het wel, maar dan kan je de hoogte niet meer exact uitlezen.

Crayne had hier zo snel geen oplossing voor, misschien dat iemand anders een idee heeft?

Pagina: 1

Reageer