nested/index.html at master · davisvilums-old/nested · GitHub

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nested</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.nested.js"></script>
<script src="makeboxes.js"></script>
</head>
<body>

<a class="btn" id="prepend">Prepend</a>

<div id="wrapper">
  <div id="container">
    <div class="box size11 deskbox">Firstdiv Desk</div>
    <div class="size33 mobbox">Firstdiv Mob</div>
    <div class="box size33">2</div>
    <div class="box size32">3</div>
    <div class="box size11">4</div>
    <div class="box size21">5</div>
    <div class="box size12">6</div>
    <div class="box size21">7</div>
    <div class="box size21">7</div>
    <div class="box size21">7</div>
    <div class="box size31">9</div>
    <div class="box size31">1</div>
    <div class="box size31">1</div>
    <div class="box size23">2</div>
    <div class="box size32">3</div>
    <div class="box size11">4</div>
    <div class="box size21">5</div>
    <div class="box size12">6</div>
    <div class="box size21">7</div>
    <div class="box size21">7</div>
    <div class="box size21">7</div>
    <div class="box size11">8</div>
    <div class="box size31">9</div>
    <div class="box size22">10</div>
  </div>
</div>

<a class="btn" id="append">Append</a>

<script type="text/javascript" >

  $(function() {
    var Nested_Width = 100;
    var Nested_Gutter = 5;

    resizator(Nested_Width,Nested_Gutter);
    $(window).resize(function(){
      resizator(Nested_Width,Nested_Gutter);
    });

    $('#container').nested({
      minWidth: Nested_Width,
      minWidthOrigin: Nested_Width,
      gutter: Nested_Gutter,
      animate: false,
      resizeToFit: false,
      resizeToFitOptions: { resizeAny: false },
      animationOptions: {
        complete: function () {
          isNested = true;
          //resize_modulor();
        }
      }
    });

    $('#prepend').click(function(){
      var boxes = makeBoxes();
      $('#container').prepend(boxes).nested('prepend',boxes);
    })
    $('#append').click(function(){
      var boxes = makeBoxes();
      $('#container').append(boxes).nested('append',boxes);
    })

  });
  var resizator = function(w,g){
    containerw = Math.floor(($(window).width()-g)/(w+g))*(w+g);
    $('#container').width(containerw);
    if(containerw<500){
      $('.deskbox').removeClass('box');
      $('.deskbox').hide();
      $('.mobbox').addClass('box');
    } else {
      $('.mobbox').removeClass('box');
      $('.mobbox').hide();
      $('.deskbox').addClass('box');
    }

  }


</script>

</body>
</html>