"My JS-JQ Reference"
Bootstrap 4.1.1 Snippet by mastersujit7

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>This is my page for reference </h2>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
// onclick toggle
// ===================
<script>
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").slideToggle("slow");
});
});
</script>
// onscroll navbar shrink
// ==========================
<script>
// When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementById("site-navbar").style.padding = "0px";
} else {
document.getElementById("site-navbar").style.padding = "15px";
}
}
</script>
// div show on scroll
// =====================
<script>
$(window).scroll(function() {
if ($(window).scrollTop() > 80) {
$("#gototop").fadeIn("slow");
} else {
$("#gototop").fadeOut("fast");
}
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Datepicker

Questions / Comments: