jQuery containment bij draggable en resizable

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Mark Hogeveen

Mark Hogeveen

24/04/2013 20:31:43
Quote Anchor link
Hallo,

Ik heb nu dit stukje code.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
$(document).ready(function() {
    $(".selector').draggable({
        handle: ".handle-selector"
    }).resizable({
        containment: "document"
    });
});

Ik heb dus verplaatsbare elementen.
De elementen die ik verplaatsbaar heb gemaakt met jQuery wil ik ook resizable hebben. Dat lukt me nog wel. Maar ik wil ook dat als je ze "buiten beeld" sleept, dat dan geen scrollbars komen, en dat je niet verder kunt slepen (dus een containment)
Ditzelfde wil ik ook met resizable, dat je ze niet groter kunt maken dan de hele pagina is, maar ook dat er dus nooit scrollbars kunnen komen als je een element doet resizen.

En dan nog een vraagje, als ik een element zoals een div heb met daarin inhoud waarvan ik niet weet hoe groot die inhoud is. Dan weet ik ook niet hoe groot de div is. Dan kun je die grootte opvragen met width() en height(). Maar ik wil dus dat je een reszable element niet kleiner kunt maken dan de inhoud die erin staat. Kan dat ook?
Gewijzigd op 24/04/2013 21:02:54 door Mark Hogeveen
 
PHP hulp

PHP hulp

29/03/2024 07:38:27
 
Tim S

Tim S

25/04/2013 10:58:07
Quote Anchor link
Heb je al overflow hidden geprobeerd?
En min-width?
 
Kris Peeters

Kris Peeters

25/04/2013 11:56:48
Quote Anchor link
Harry hogeveen op 24/04/2013 20:31:43:
En dan nog een vraagje, als ik een element zoals een div heb met daarin inhoud waarvan ik niet weet hoe groot die inhoud is. Dan weet ik ook niet hoe groot de div is. Dan kun je die grootte opvragen met width() en height(). Maar ik wil dus dat je een reszable element niet kleiner kunt maken dan de inhoud die erin staat. Kan dat ook?


Ik ben er niet volledig tevreden over, maar dit werkt wel ongeveer.
Met wat extra rekenwerk, kan dat waarschijnlijk nog wat beter.
Mijn basis-idee was om te detecteren wanneer een overflow plaats vindt

(bronnen: http://jqueryui.com/resizable/ en http://stackoverflow.com/questions/2059743/detect-elements-overflow-using-jquery)

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Resizable - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
  #resizable { width: 250px; height: 250px; padding: 0; overflow: hidden;}
  #resizable h3 { text-align: center; margin: 0; }
  #content {overflow: auto; width: 100%;}
  </style>
  <script>
  $(function() {
    var resizable = $( "#resizable" );
    var content = $( "#content" );
    var message = $( "#message" );
    
    resizable.resizable({
      resize: function() {
        if (resizable.hasOverflow()) {
          // Er is een overflow.  Dit zien we als een teken dat de minimum bereikt is ...
          resizable.resizable({ minWidth: resizable.width() });
          resizable.resizable({ minHeight: resizable.height() });
        }
      }
    });
  });
  
  /*
    // zie http://stackoverflow.com/questions/2059743/detect-elements-overflow-using-jquery , antwoord 9
    // example:
    var $content = $('#content').children().wrapAll('<div>');
    while($content.hasOverflow()){
      var size = parseFloat($content.css('font-size'), 10);
      size -= 1;
      $content.css('font-size', size + 'px');
    }
  */
  $.fn.hasOverflow = function() {
      var $this = $(this);
      var $children = $this.find('*');
      var len = $children.length;
      if (len) {
          var maxWidth = 0;
          var maxHeight = 0
          $children.map(function(){
              maxWidth = Math.max(maxWidth, $(this).outerWidth(true));
              maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
          });
          return maxWidth > $this.width() || maxHeight > $this.height();
      }
      return false;
  };
  </script>
</head>
<body>
  <div id="resizable" class="ui-widget-content">
    <h3 class="ui-widget-header">Resizable</h3>
    <div id="content">
      Lorem ipsum .... Lorem ipsum .... Lorem ipsum .... Lorem ipsum .... Lorem ipsum .... Lorem ipsum .... Lorem ipsum .... Lorem ipsum .... Lorem ipsum .... Lorem ipsum .... Lorem ipsum .... Lorem ipsum .... Lorem ipsum ....
    </div>
  </div>
</body>
</html>
Gewijzigd op 25/04/2013 14:50:20 door Kris Peeters
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.