login  Naam:   Wachtwoord: 
Registreer je!
 Forum

jQuery hoogte automatisch aanpassen.

Offline lolll - 08/04/2011 20:16 (laatste wijziging 09/04/2011 12:03)
Avatar van lolllLid Beste sima's,
ik probeer een soort van site'je te maken met wat jQuery in. Ik had juist een functie in jQuery geschreven die ervoor zorgt dat bepaalde menu's kunnen in en uitklappen. Maar dit verandert natuurlijk mijn hoogte van mijn 'content', en ik heb naast die content nog een div 'info'. Maar die zijn hoogte wordt niet automatisch mee aangepast, waardoor er nogal een lelijk beeld ontstaat. Ik zorg ervoor dat de hoogte van 'info' gelijk is aan die van 'content' m.b.v. jQuery, omdat het in css niet lukte. Mocht iemand dus een css optie hebben, zou dat nog veel beter zijn. Ik zal mijn voorbeeldje even online zetten, en hier de belangrijkste code neerzetten.

  1. initialize();// height van info aanpassen
  2. $(".media-block").opentoe();// functie aanroepen.
  3. //functies staan hieronder
  4.  
  5. // initialize functie:
  6. function initialize(){
  7. var contentheight=$('#content').css('height');
  8. $('#info').css('height',contentheight);
  9. //rest van script.
  10. }
  11. // opentoe functie:
  12. (function( $ ){
  13. $.fn.opentoe = function() {
  14. this.each(function(){
  15. var inhoud=$(".inhoud",$(this));
  16. var status=inhoud.attr("id");
  17. if(status=="dicht")
  18. inhoud.hide();
  19. $(".title",$(this)).click(function(){
  20. inhoud.toggle('slow');
  21. var contentheight=$("#content").css('height');
  22. $("#info").css('height',contentheight);
  23. });
  24. });
  25. };
  26. })( jQuery );

  1. <div class="media-block">
  2. <div class="title">
  3. <h3>illustratie's:</h3>
  4. </div>
  5. <div class="inhoud" id="open">
  6. <a href="..."><img src="..." /></a>
  7. <a href="..."><img src="..." /></a>
  8. <a href="..."><img src="..." /></a>
  9. </div>
  10. </div>
  11. <div class="media-block">
  12. <div class="title">
  13. <h3>foto's:</h3>
  14. </div>
  15. <div class="inhoud" id="dicht">
  16. <a href="http://..."><img src="http://..." /></a>
  17. <a href="http://..."><img src="http://..." /></a>
  18. <a href="http://..."><img src="http://..." /></a>
  19. </div>
  20. </div>
  21. <!-- en zo voorts -->

  1. #content{
  2. width:650px;
  3. float:left;
  4. border:solid #60C;
  5. border-width:0 0 0 1px;
  6. }
  7. #info{
  8. float:left;
  9. width:150px;
  10. border:solid #CC9;
  11. border-width:0 1px;
  12. }


Alvast bedankt, Lolll

P.s:
Alles staat hier geuploadet: [url]http://users.telenet.be/dcbr/voor sima's/media.html[/url]
P.P.s:
Ik dacht voor vandaag nog een antwoord te krijgen, maar blijkbaar is dat dus niet. Ik vertrek vandaag op vakantie dus daarom zal ik op mogelijke latere berichten niet kunnen reageren.

3 antwoorden

Gesponsorde links
Offline Martijn - 13/04/2011 18:46
Avatar van Martijn Crew PHP zou het toch met css gaan proberen misschien even vanuit een andere hoek proberen te cssen, want dit met jquery gaan doen is dweilen met de kraan open, t werkt, maar t is niet erg jusit
Bedankt door: lolll
Offline Beirensg - 14/04/2011 22:35
Avatar van Beirensg HTML beginner Probeer eens te werken met z-index in css, dan kan je de divs laten overlappen.

Kan natuurlijk zijn dat je dat niet wil, dan kijk ik wel eens naar de code. Alles is mogelijk met jQuery 
Offline lolll - 16/04/2011 10:10
Avatar van lolll Lid ok, heb hier op sima ook nog een css stukje gezien, dat ongeveer overeen komt met mijn indeling. Dus ik zal dat nog eens proberen, en mss lukt het dan wel.

Bedankt voor de reacties!
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.184s