javascript resize

dinsdag 1 mei 2012 16:18

Acties:

0 Henk 'm!

Topicstarter

Voor en website heb ik middels div een vergelijkend met frames model gemaakt. Om de content div de goede maat te geven en scrollen te voorkomen heb ik de grote nodig van de actuele beschikbare ruimte.

Het volgende script heb ik gevonden, de waardes tonen gaat nu naar behoren. Met javascript ben ik niet heel goed, maar hoe kan ik de actuele breedte en hoogte doorgeven aan de stylesheet.

Een voorbeeld script staat hier http://www.mkyong.com/jquery/jquery-resize-example/

Mijn idee is dus om bij de desbtreffende div, het volgende toe te voegen style="width="..." height="...."

Hopelijk kan iemand mij op weg helpen.

dinsdag 1 mei 2012 16:34

Acties:

0 Henk 'm!

Barryvdh

Je kan met jQuery heel makkelijk de hoogte/breedte instellen:
http://api.jquery.com/height/
http://api.jquery.com/width/

dinsdag 1 mei 2012 16:38

Acties:

0 Henk 'm!

josvane

Topicstarter

@barryvdh
Die heb ik idd ook gevonden, maar dat is een onclick functie. Het voorbeeld wat ik heb laten zien is een realtime functie. Die dus bij het schalen van een pagina een refresh geeft.

dinsdag 1 mei 2012 16:38

Acties:

0 Henk 'm!

CUnknown

$('#divid').css('height', 30px); werkt ook wanneer je jquery gebruikt (om de waarde te setten dan).

Een realtime en een onclick functie onderscheid is mij niet bekend. Ik denk dat je wilt dat je waarde steeds wordt herberekend als je het venster aanpast. Dit kan met een resize event.

$(window).resize(function() {
// doe hier iets veranderen als venster wijzigt.
});

Bijvoorbeeld:

$('#divid').css('height', $(window).height());
$('#divid').css('width', $(window).width());

Wat effectief hetzelfde oplevert als gewoon in je css de div met id divid width: 100% en height: 100% te setten.

[ Voor 79% gewijzigd door CUnknown op 01-05-2012 16:46 ]

dinsdag 1 mei 2012 16:48

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Javascript

josvane schreef op dinsdag 01 mei 2012 @ 16:38:
Die heb ik idd ook gevonden, maar dat is een onclick functie.

Helemaal niet; het zijn methods die die width/height teruggeven van 't element dat je opvraagt. Dat de example code toevallig onclick gebruikt is bijzaak. Wat let je om resize event daarvoor in de plaats te gebruiken?

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 1 mei 2012 16:51

Acties:

0 Henk 'm!

josvane

Topicstarter

@CUnknown
Thanks het werkt, met je korte antwoordt kon ik verder, het volgende is het geworden.

code:

<html>
 <head>
  <title>Heya</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
 </head>
 <body>
   <script type="text/javascript">
  
$(window).resize(function() {
  /*$('body').prepend('<div>' + $(window).width() + ' - ' + $(window).height() + '</div>');*/
   $('#box').css('height', $(window).height() - 200);
});
var w = $(windows).width();
   </script>
   <style type="text/css">
   #box{border:1px solid #FF0000;display:block;}
   </style>
   <div id="box">
    box
   </div>

 </body>
</html>

dinsdag 1 mei 2012 18:06

Acties:

0 Henk 'm!

CUnknown

Oke, volgens mij moet je de waarde die je instelt met de functie .css nog wel concateneren met 'px':

$('#box').css('height', ($(window).height() - 200) + 'px');

dinsdag 1 mei 2012 20:24

Acties:

0 Henk 'm!

Barryvdh

Daarom kan je dus ook de .height(xx) en .widht(xx) functies gebruiken; http://jsfiddle.net/4hjbH/
Denk er wel aan dat die resize() functie niet altijd wordt uitgevoerd. In IE wel zie ik, maar bijv Chrome niet. Je moet de resize functie dus ook even onLoad aanroepen.

Onderwerpen