 Lid |
|
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.
initialize();// height van info aanpassen
$(".media-block").opentoe();// functie aanroepen.
//functies staan hieronder
// initialize functie:
function initialize(){
var contentheight=$('#content').css('height');
$('#info').css('height',contentheight);
//rest van script.
}
// opentoe functie:
(function( $ ){
$.fn.opentoe = function() {
this.each(function(){
var inhoud=$(".inhoud",$(this));
var status=inhoud.attr("id");
if(status=="dicht")
inhoud.hide();
$(".title",$(this)).click(function(){
inhoud.toggle('slow');
var contentheight=$("#content").css('height');
$("#info").css('height',contentheight);
});
});
};
})( jQuery );
initialize();// height van info aanpassen $(".media-block").opentoe();// functie aanroepen. //functies staan hieronder // initialize functie: function initialize(){ var contentheight=$('#content').css('height'); $('#info').css('height',contentheight); //rest van script. } // opentoe functie: (function( $ ){ $.fn.opentoe = function() { this.each(function(){ var inhoud=$(".inhoud",$(this)); var status=inhoud.attr("id"); if(status=="dicht") inhoud.hide(); $(".title",$(this)).click(function(){ inhoud.toggle('slow'); var contentheight=$("#content").css('height'); $("#info").css('height',contentheight); }); }); }; })( jQuery );
<div class="media-block">
<div class="title">
<h3>illustratie's:</h3>
</div>
<div class="inhoud" id="open">
<a href="..."><img src="..." /></a>
<a href="..."><img src="..." /></a>
<a href="..."><img src="..." /></a>
</div>
</div>
<div class="media-block">
<div class="title">
<h3>foto's:</h3>
</div>
<div class="inhoud" id="dicht">
<a href="http://..."><img src="http://..." /></a>
<a href="http://..."><img src="http://..." /></a>
<a href="http://..."><img src="http://..." /></a>
</div>
</div>
<!-- en zo voorts -->
<div class="media-block"> <div class="inhoud" id="open"> <a href="..."><img src="..." /></a> <a href="..."><img src="..." /></a> <a href="..."><img src="..." /></a> <div class="media-block"> <div class="inhoud" id="dicht"> <a href="http://..."><img src="http://..." /></a> <a href="http://..."><img src="http://..." /></a> <a href="http://..."><img src="http://..." /></a> <!-- en zo voorts -->
#content{
width:650px;
float:left;
border:solid #60C;
border-width:0 0 0 1px;
}
#info{
float:left;
width:150px;
border:solid #CC9;
border-width:0 1px;
}
#content{ width:650px; float:left; border:solid #60C; border-width:0 0 0 1px; } #info{ float:left; width:150px; border:solid #CC9; border-width:0 1px; }
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.
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
Gesponsorde links
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
Actiefste leden van de maand
