IfBreakpoint/index.html at master · JacobLett/IfBreakpoint · 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132


<!DOCTYPE html>
<html >

<head>
  <meta charset="UTF-8">


  <title>IfBreakpoint.js - Detect Bootstrap 4 Breakpoints</title>
  <script src="https://bootstrapcreative.com/wp-bc/wp-content/themes/wp-bootstrap/codepen/bootstrapcreative.js?v=3"></script>


  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css'>


</head>

<body>

<div class="jumbotron text-center">

  <div class="container">
  <h1>IfBreakpoint.js</h1>


    <h3><small>Try it out!</small><br>Open up the console and resize your browser window.</h3>


 <h2 class="display-4 text-white" style="background-color:#563d7c;display:inline-block;padding:.5rem;">
  Breakpoint
  </h2>


    <div class="row justify-content-md-center">
    <div class="col col-lg-4">
        <iframe src="https://ghbtns.com/github-btn.html?user=JacobLett&repo=IfBreakpoint&type=star&count=true" frameborder="0" scrolling="0" width="100" height="20px"></iframe> <iframe src="https://ghbtns.com/github-btn.html?user=JacobLett&repo=IfBreakpoint&type=fork&count=true" frameborder="0" scrolling="0" width="100" height="20px"></iframe>    </div>
</div>


  </div>
</div>
<!-- /.jumbotron -->

    <div class="container">


<h3>1. Add the ifbreakpoint.js after jQuery</h3>

      <p>Bootstrap 4</p>
    <textarea class="form-control mb-3">
  &lt;script src='https://cdn.rawgit.com/JacobLett/IfBreakpoint/e9fcd4fd/if-b4-breakpoint.min.js'&gt;&lt;/script&gt;
</textarea>

      <p>Bootstrap 3</p>
    <textarea class="form-control mb-3">
  &lt;script src='https://cdn.rawgit.com/JacobLett/IfBreakpoint/e9fcd4fd/if-b3-breakpoint.min.js'&gt;&lt;/script&gt;
</textarea>

<h3>2. Then use it in your custom scripts</h3>
<pre class="bg-faded">
$(document).ready(function(){
  // update onload
  $("h2").text( breakpoint );

  if ( xs == true ) {
    alert("mobile first");
  }

  // Update on window resize
  $( window ).resize( function(){
    $("h2").text( breakpoint );
  });

});
</pre>
<p>It also adds and updates a body class on window resize. Resize your window and use chrome web inspector to see the change.</p>

  </div>


  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>


<script src='if-b4-breakpoint.min.js'></script>

    <script>

$(document).ready(function(){


// update onload
$("h2").text( breakpoint );

  if ( xs == true ) {
    console.log("mobile first");
  }

  // Update on window resize
  $( window ).resize( function(){
    $("h2").text( breakpoint );
  });

});


  </script>


</body>
</html>