javascript resize

Dinsdag 01 mei 2012 16:18

Bezoek homepage van josvane

Reacties: 362
Reg. datum: 05-10-2002

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 01 mei 2012 16:34

Barryvdh

Bezoek homepage van Barryvdh

Reacties: 616
Reg. datum: 12-06-2003

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

Dinsdag 01 mei 2012 16:38

josvane

Bezoek homepage van josvane

Reacties: 362
Reg. datum: 05-10-2002

@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 01 mei 2012 16:38

CUnknown

Bezoek homepage van CUnknown

Reacties: 4
Reg. datum: 19-06-2009

$('#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.

CUnknown wijzigde deze reactie 01-05-2012 16:46 (79%)

Dinsdag 01 mei 2012 16:48

RobIII

Admin Doktersteam / Moderator Devschuur®

^ Romeinse 3 ja!

Bezoek homepage van RobIII

Reacties: 33.848
Reg. datum: 18-12-2001

quote:
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?

Never test for an error you don't know how to handle.

Trotse papa van Luca en Danu! | Pick My Icon!

Dinsdag 01 mei 2012 16:51

josvane

Bezoek homepage van josvane

Reacties: 362
Reg. datum: 05-10-2002

@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 01 mei 2012 18:06

CUnknown

Bezoek homepage van CUnknown

Reacties: 4
Reg. datum: 19-06-2009

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 01 mei 2012 20:24

Barryvdh

Bezoek homepage van Barryvdh

Reacties: 616
Reg. datum: 12-06-2003

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.

Pagina: 1

Reageer

Onderwerpen