hoogte van div met jquery

Status
Niet open voor verdere reacties.

fsasfsas

Gebruiker
Lid geworden
11 sep 2006
Berichten
429
Dag

Ik ben een website aan het maken en in dat kader probeer ik een stukje code aan te passen wat ik op internet heb gevonden. Dat stukje code gebruikt de hoogte van een div maar deze is in mijn geval variabel. Volgens wat ik met surfen gevonden heb, moet het eenvoudig zijn de hoogte van een element op te vragen maar ik krijg het niet werkend.
dit werkt wel:
Code:
var num = 100; 
   alert(num);
maar dit niet
Code:
var result = $('.bla').height();   
   alert(result);
bla is een class zonder enige css
Code:
   .bla {
   }

en krijg in het document wat hoogte door
Code:
   <div class="bla">
      djakdl<br>
      hdajdhs
   </div>
maar ik krijg bij de alert alleen maar "undefined" te zien.
waar zit mijn denkfout? ik kom er niet uit.

groetjes, Anjo
 
Werkt prima. Heb je ergens een tikfoutje
Code:
// alert( $('.bla').height() );
var result = $('.bla').height();
alert(result);
(edit) scripts horen onderaan een pagina, vlak boven </body>. Als je een reden hebt om dit niet te doen dan mag het script pas worden uitgevoerd nadat de DOM klaar voor het goed uitvoeren van Javascript. Dit doe je zo
Code:
$(document).ready(function(){
  //alert( $('.bla').height() );
  var result = $('.bla').height();
  alert(result);
});
Het is sowieso slim om altijd (document).ready te gebruiken dan heb je geen problemen met timing.
 
Laatst bewerkt:
Hoi Bron

dat was m:
(document).ready
geen tikfout. Blijkbaar toch een timing probleem.

Heel frustrerend dat ik er niet uit kwam. De website is opgebouwd onder bootstrap en ik probeer nu om het skelet werkend te krijgen zonder dat framework. Gewoon om te leren hoe het zit.
Heel erg bedankt weer!

groetjes, Anjo
 
Leuk experiment, dat zeker! Houdt er rekening mee dat de website zonder Bootstrap niet cross-device, cross-browser en cross-platform is. Met Bootstrap is dit wel het geval door de wereldwijde feedback van website bouwers. Maar zoals gezegd, wel leuk om Javascript / jQuery te leren.
 
Leuk experiment, dat zeker! Houdt er rekening mee dat de website zonder Bootstrap niet cross-device, cross-browser en cross-platform is. Met Bootstrap is dit wel het geval door de wereldwijde feedback van website bouwers. Maar zoals gezegd, wel leuk om Javascript / jQuery te leren.

Dag

Daar ben ik me terdege van bewust. Bootstrap is inderdaad uit-en-te-na getest, juist omdat het zo wijd verspreid is. Ik denk daarom ook dat de uiteindelijke versie gewoon de bootstrap-versie blijft. Maar ik wil gewoon graag wat meer leren en voor mij betekent dat dat ik bootstrap aan de kant zet en het zelf doe. Ik vind dat de handigste manier om mijn vinger te krijgen achter dingen als javascript(/jquery) en de media dingen (naast tutorials volgen, dan). Los daarvan zijn er wat dingen die ik met de site wil doen die zoveel kunst-en-vliegwerk binnen bootstrap vergen dat het soms handiger is om het daarbuiten te doen. Nou kan dat wel samen (soms met gebruikmaking van bootstrap, soms niet) maar dan is het wel handig dat ik weet wat bootstrap doet en waar ik ongestraft wellicht er buiten kan (met ongestraft bedoel ik nu gebruikmaken van dingen die inmiddels erg standaard zijn.
Mijn criterium is zo'n beetje dat als IE9 of lager het aan kan, dat het dan wel al zo lang mee gaat dat het inmiddels wel vertrouwd is om te gebruiken. Dus ik hoop ook met dit experiment beter te weten te komen wat een "verantwoord" uitstapje is en wat minder. Je kunt uiteraard leuke dingen doen maar ja, als het (nog) niet ondersteund wordt door veel browsers... En wat ik zelf belangrijk vind is een fall-back maken. Dus geen belangrijke info ergens in stoppen die wellicht niet door iedereen gezien kan worden maar een eenvoudige fall-back maken zodat het er misschien op sommige browsers minder flitsend uit ziet maar dat er nog steeds toegang is tot alle informatie. Wat dat betreft moest er bij mij een knop om met touch-screens. Ik ben nog uit de periode dat sites daar geen rekening mee hoefden te houden. Er zijn (vind ik) veel leuke hovereffecten maar ja, wat moet je daarmee op een mobieltje of een tablet. Dus op zich heb ik er niet zo'n problemen mee om de desktopversie daar een beetje mee op te leuken (binnen grenzen. het moet geen kermis worden) maar....: geen link achter een hovereffect. Dat soort dingen.

groetjes, Anjo
 
Een paar dingetjes die toch wat anders zijn

er zijn wat dingen die ik met de site wil doen die zoveel kunst-en-vliegwerk binnen bootstrap vergen dat het soms handiger is om het daarbuiten te doen.
Het is juist de bedoeling dat je een mix maakt van Bootstrap en andere componenten. Als iedereen alleen pure Bootstrap websites zou maken dan wordt het wel heel saai op internet.

Mijn criterium is zo'n beetje dat als IE9 of lager het aan kan, dat het dan wel al zo lang mee gaat dat het inmiddels wel vertrouwd is om te gebruiken
Dit criterium is niet juist. Als voorbeeld, Chrome op Windows heeft andere problemen dan Chrome op Android of iPhone. Een tweede voorbeeld, Opera of Firefox op Windows hebben andere problemen dan IE op Windows. Browser IE8 en ouder wordt door niemand meer ondersteund. IE9/IE10 binnenkort ook niet meer. Bootstrap 3 gaat uit van minimaal IE9 omdat dit de eerste html5 browser van Microsoft was met beperkt css3. Overigens gaat Bootstrap 4 uit van de "moderne browser", bij Microsoft is dit IE11 of Edge. Iedereen die z'n pc up-to-date houdt heeft een moderne browser!

Je kunt uiteraard leuke dingen doen maar ja, als het (nog) niet ondersteund wordt door veel browsers.
Alles in Bootstrap 3 wordt door alle browsers ondersteund op alle apparaten (vanaf tijdperk IE9). Juist de dingen die je zelf maakt of her-en-der van internet vist kunnen niet cross-browser zijn op alle apparaten. Scripts die uit gaan van IE7/IE8/IE9 zijn verouderd of hebben overbodige balast die de performance vermindert. Een fallback voor gedateerde browsers zoals IE8 hoort niet op een website thuis. Gezien het marktaandeel van IE9 (0,16%) kan je gerust van IE10/IE11 uitgaan omdat over een jaar IE9 is overleden. In framework's zoals jQuery en Bootstrap zijn fallback's helemaal verzorgd, dat is juist het voordeel van een framework. Waarom iets minder goed maken als het al top werkt.

het is wel handig dat ik weet wat bootstrap doet en waar ik ongestraft wellicht er buiten kan
Makers van Bootstrap hebben er voor gezorgd dat je het veilig met andere jQuery scripts kan gebruiken. Wil je bij twijfel toch een Bootstrap component eruit hebben dan maak je snel en simpel eigen Bootstrap files (klik). Vink de CSS en jQuery onderdelen uit die je niet wilt hebben en klik onderaan op de [Compile and Download]. Zelf doe ik dit altijd in verband met een betere performance van mijn websites.

Mijn idee blijft dat het een goed project is om te leren maar niet geschikt voor een live website. Suc6 met het project.
 
Laatst bewerkt:
oke, deels nieuwe info. ik dacht dat ik "safe' zat met mijn criterium "als IE9 het aankan, kan zo'n beetje elke browser het aan".

Dat bootstrap bedoeld was om te "mixen" dat had ik begrepen. Maar ik ben bv een poosje bezig geweest om een twee-regelige navbar te maken die deels inklapte en deels niet. Dat kan in bootstrap maar het blijkt vele malen eenvoudiger daarbuiten (maar houdt het dan ook stand op andere devices/browsers/platforms?). Maar het voordeel van het cross-enz van bootstrap is me duidelijk. Wat ik niet besefte was dat er zo veel verschil kan zitten het voorbeeld dat je aanstipt (chrome windows versus android). En sommige dingen die nu (voor mij) heel veel moeite kosten zie je aankomen in toekomstige versies (bv position:sticky). Ik gebruik bootstrap 3 en niet 4, mede omdat ik er toch nog vanuit ga dat niet iedereen een moderne browser heeft. Als ik alleen al naar mijn (schoon)ouders kijk en keek.... Kwestie van even wachten, dat snap ik.
Maar de hele niet-bootstrap oefening is ... een oefening. ik wil het gewoon leren en daarom doe ik dit. En dingen die ik (nog) niet binnen bootstrap voor elkaar krijg die laat ik gewoon even links liggen tot ik het wel kan. En ik ga, als ik er wat meer vanaf weet, vast nog eens kijken hoe dat werkt met bootstrap componenten eruit knikkeren. Er zijn best veel dingen van bootstrap die ik niet gebruik.

met dank voor al je hulp en het "sparren".

groetjes, Anjo
 
devices/browsers/platforms?
device = pc, laptop, tablet, smartphone, printer, tv, beamer (schermresolutie? touch?)
browsers = Chrome, Firefox, Opera, Safari, IE, Edge, Samsung browser (welke versie? welke bugs?)
platform = Windows, Android, iOS, OSX, Linux (Chrome op Win vs. Chrome op Android)
In het rijtje heb ik minder belangrijke dingen (smart horloge, smart bril) eruit gelaten :)

chrome windows versus android
Tja, er zijn verschillen. Zie website Can I Use (klik) bij Safari en Chrome op verschillende platforms.

Ik gebruik bootstrap 3 en niet 4
Slim, dat doe ik voorlopig ook nog.

Suc6. Have fun :thumb:
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan