anoniem Geplaatst: 1 juli 2013 Delen Geplaatst: 1 juli 2013 Dag Profs, Ik ben bezig met een website waar ik de margin-top afhankelijk moet laten zijn van de schermbreedte. Dat zit zo: De header met menubalk zijn een afbeelding met een width:100%; Dat betekend dat de hoogte van de afbeelding afhankelijk is van de schermbreedte. Over de menubalk komen in text de kopjes met links naar de andere pagina's. De margin-top moet dus afhankelijk zijn van de schermbreedte en niet van de schermhoogte. In verband met enige vorm van responsive design kan ik niet met pixels werken maar alleen met percentages. De margin-left is geen probleem, maar de margin-top dus wel. Mijn vraag is nu: (hoe) kan ik dit doen??? Alvast bedankt, Jaapyse Quote Link naar reactie
anoniem Geplaatst: 1 juli 2013 Auteur Delen Geplaatst: 1 juli 2013 Je kunt met jQuery de breedte van een venster achterhalen: [code:1:bccdf1b2fa]$(window).width(); // Breedte van het complete venster incl. scrolbalk etc. $(document).width(); // Breedte van de pagina [/code:1:bccdf1b2fa] Ik denk dat de onderste voor jou van belang is. Vervolgens kun je met die waarde denk ik wel berekenen wat je margin-top moet worden? Quote Link naar reactie
anoniem Geplaatst: 1 juli 2013 Auteur Delen Geplaatst: 1 juli 2013 Dat ziet er goed uit! Bedankt! Ik hoef alleen even de basis van jQuery leren en dan kan ik er weer tegenaan! Bedankt! Quote Link naar reactie
anoniem Geplaatst: 1 juli 2013 Auteur Delen Geplaatst: 1 juli 2013 Als je aan het front-enden bent en je wilt dynamische pagina's bouwen, kun je tegenwoordig bijna niet meer om jQuery heen. :) Quote Link naar reactie
anoniem Geplaatst: 1 juli 2013 Auteur Delen Geplaatst: 1 juli 2013 Ik kan echt nergens vinden hoe je met die schermbreedte door kan rekenen, laat staan dat eindproduct in een pagina in te voeren! Help! Ik snap er niets van! Quote Link naar reactie
anoniem Geplaatst: 1 juli 2013 Auteur Delen Geplaatst: 1 juli 2013 Even resumeren. Je schrijft: [quote:8cf8802cbd]Dat betekend dat de hoogte van de afbeelding afhankelijk is van de schermbreedte. (...) De margin-top moet dus afhankelijk zijn van de schermbreedte [/quote:8cf8802cbd] Daaruit begrijp ik dat je zelf al weet hoe hoog de margin-top moet zijn bij verschillende breedtes, of begrijp ik je dan verkeerd? Indien zo, dan wordt het iets als: [code:1:8cf8802cbd]<!DOCTYPE html> <html lang="nl"> <head> <script src="/js/jquery-1.8.0.min.js"></script> <link rel="stylesheet" type="text/css" href="/style/style.css"/> <title>Je titel</title> <script> $(document).ready(function(){ var breedte = $(document).width(); // Hiermee kun je dus verder rekenen. }); </script> </head> <body> <div id="header"> <img id="headerimg" src="header.jpg" /> </div> <!-- etc. --> </body> </html>[/code:1:8cf8802cbd] Eventueel kun je ook gewoon naar de hoogte van de afbeelding kijken, indien die variabel is: [code:1:8cf8802cbd]var hoogte = $("headerimg").height();[/code:1:8cf8802cbd] Misschien is dat nog wel gemakkelijker ook. Mocht het toch allemaal anders zijn dan ik begrepen heb, dan is het wellicht handig dat je even een linkje of wat code/screenshots geeft. Quote Link naar reactie
anoniem Geplaatst: 1 juli 2013 Auteur Delen Geplaatst: 1 juli 2013 De header is één afbeelding, zonder div of wat ook, meer niet. Ik weet de hoogte en de breedte van de headerafbeelding. Uit die twee kan ik een verhouding berekenen. De header heeft een width van 100% dus als ik de schermbreedte weet kan ik met die verhouding de hoogte van de header berekenen. De text van de koppen moet over de header komen, in het midden, bijna aan de onderkant ervan. (U begrijpt me goed.) Als ik een breder of smaller scherm neem moet die text dus naar boven of naar beneden. Hoe ik dat moet doen weet ik niet. Ik heb geen verstand van JavaScript of jQuery, wel van HTML en CSS. Quote Link naar reactie
anoniem Geplaatst: 1 juli 2013 Auteur Delen Geplaatst: 1 juli 2013 [quote:ef103f0b0b="Jaapyse"] Ik weet de hoogte en de breedte van de headerafbeelding. Uit die twee kan ik een verhouding berekenen. De header heeft een width van 100% dus als ik de schermbreedte weet kan ik met die verhouding de hoogte van de header berekenen.[/quote:ef103f0b0b] Als je de hoogte en breedte al weet, en met mijn code hierboven dus de schermbreedte kunt herleiden, wat mis je dan? [code:1:ef103f0b0b] <script> $(document).ready(function(){ var schermbreedte = $(document).width(); var plaatjebreedte = 1111px; var plaatjehoogte = 2222px; }); </script> [/code:1:ef103f0b0b] Vertel eens in peppie-en-kokkie taal wat je hiermee nu wilt berekenen? Dan kunnen we dat wellicht ombouwen naar javascript. :) Quote Link naar reactie
anoniem Geplaatst: 1 juli 2013 Auteur Delen Geplaatst: 1 juli 2013 (Schermbreedte/1266*202)*ongeveer90%=margin-top van textblok. Is dat duidelijk of niet? Die ongeveer 90% hoeft er niet direct bij, dat is voor de fine-tuning. Alles gaat om de 'responsiviteit' van de pagina. :lol: Peppie-en-kokkietaal genoeg? Quote Link naar reactie
anoniem Geplaatst: 1 juli 2013 Auteur Delen Geplaatst: 1 juli 2013 In dat geval [code:1:d35ed11b19] <script> $(document).ready(function(){ var schermbreedte = $(document).width(); var plaatjebreedte = 1266px; var plaatjehoogte = 202px; var rekenmarge = (schermbreedte/(plaatjebreedte*plaatjehoogte)) * 0.9; // hier gaan we het toepassen $('headerimg').css('margin-top', rekenmarge); }); </script> [/code:1:d35ed11b19] Je moet wel eerst jQuery includen, vanuit je eigen site of via CDN. Zie ook: http://jquery.com/download/ Quote Link naar reactie
anoniem Geplaatst: 2 juli 2013 Auteur Delen Geplaatst: 2 juli 2013 Ik heb momenteel dit: [code:1:4a74b43b00]<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> $(document).ready(function(){ var schermbreedte = $(body).outerWidth(true); var headerbreedte = 1266; var headerhoogte = 202; var rekenmarge = (schermbreedte/(headerbreedte*headerhoogte)) * 0.9; $("#koppen").css("margin-top", "rekenmarge"); }); </script>[/code:1:4a74b43b00] Wat ik ook doe, de margin-top lijkt een vaststaand aantal pixels, hoe ik mijn scherm ook resize en ververs. Dreamweaver geeft geen syntaxfouten aan. Het lijkt erop dat de schermbreedte niet goed wordt waargenomen. Iets klopt niet, maar wat? :? Quote Link naar reactie
anoniem Geplaatst: 2 juli 2013 Auteur Delen Geplaatst: 2 juli 2013 Werkt jQuery wel met var's/variables? Quote Link naar reactie
anoniem Geplaatst: 2 juli 2013 Auteur Delen Geplaatst: 2 juli 2013 Probeer het eens met [b:bab8fe06af]$(body).width();[/b:bab8fe06af] in plaats van [b:bab8fe06af]$(body).outerWidth(true);[/b:bab8fe06af] ? Nu je het zo zegt, meen ik me te herinneren dat outerWidth niet altijd goed werkt... Quote Link naar reactie
anoniem Geplaatst: 3 juli 2013 Auteur Delen Geplaatst: 3 juli 2013 Wederom werkt het niet. Nogmaals de vraag: werkt jQuery wel met variables/vars? Quote Link naar reactie
anoniem Geplaatst: 3 juli 2013 Auteur Delen Geplaatst: 3 juli 2013 [quote:e490f42cb4="Jaapyse"]Wederom werkt het niet. [/quote:e490f42cb4]Heb je een linkje voor me? [quote:e490f42cb4="Jaapyse"]Nogmaals de vraag: werkt jQuery wel met variables/vars?[/quote:e490f42cb4]Ja. Kijk maar eens op [url=http://jquery.com/]hun eigen homepage[/url], tweede stukje voorbeeldcode. Quote Link naar reactie
anoniem Geplaatst: 3 juli 2013 Auteur Delen Geplaatst: 3 juli 2013 Ik heb helaas geen rechten en informatie om de pagina op een server te zetten. Dat is ook mijn taak niet. Quote Link naar reactie
anoniem Geplaatst: 3 juli 2013 Auteur Delen Geplaatst: 3 juli 2013 Zet eens het volgende direct onder de regel waar je de rekenmarge berekent: [code:1:98465ecc21]alert(rekenmarge);[/code:1:98465ecc21] Dat geeft een popupje met ofwel iets als NULL of iets leegs, ofwel een getal (het resultaat van je berekening). Quote Link naar reactie
anoniem Geplaatst: 4 juli 2013 Auteur Delen Geplaatst: 4 juli 2013 [code:1:4dbdd176fe]<script> // Berekening van zakking var headerbreedte = 1288; var headerhoogte = 202; var verhouding = headerhoogte / headerbreedte; var schermbreedte=window.innerWidth var textzakking = (schermbreedte * verhouding); var definitief = "'" + Math.round(textzakking) + "px" + "'"; alert(definitief) // Toepassing van berekening document.getElementById('koppen').marginTop = definitief; </script>[/code:1:4dbdd176fe] Ik heb veel getest en geprobeerd. De alert in bovenstaande code geeft bij een schermbreedte van 1024px het volgende aan: [code:1:4dbdd176fe]'161px'[/code:1:4dbdd176fe] Dat lijkt keurig. Ook alle andere gegevens kloppen (heb ik driedubbel getest). Toch werkt het niet. [b:4dbdd176fe]Google Chrome meldt 1 error: [code:1:4dbdd176fe] Uncaught TypeError: Cannot set property 'marginTop' of null index.html:21 [/code:1:4dbdd176fe][/b:4dbdd176fe] Op regel 21 in index.html staat de document.getElementById enzovoort. De feiten: 1. De waarde van de variabele definitief is '161px', de accenten meegerekend. 2. Google Chrome meldt dat er geen waarde van null kan worden ingevoerd als marginTop. DIT STROOKT TOCH NIET MET ELKAAR!!!???? :cry: :roll: :? by the way, ik heb JavaScript een beetje geleerd met http://www.codecademy.com/tracks/javascript! :lol: Quote Link naar reactie
anoniem Geplaatst: 4 juli 2013 Auteur Delen Geplaatst: 4 juli 2013 Even een fiddletje gemaakt: http://jsfiddle.net/TNThB/1/ Wel met jQuery in plaats van native javascript, maar dat is meer omdat ik jQuery vaak wat gemakkelijker vindt. En zoals je ziet werkt het. :) Quote Link naar reactie
anoniem Geplaatst: 5 juli 2013 Auteur Delen Geplaatst: 5 juli 2013 Waarom werkt mijn stukje JavaScript dan niet? Quote Link naar reactie
Aanbevolen berichten
Om een reactie te plaatsen, moet je eerst inloggen