I'm trying to create sticky div on the left (using Bootstrap 4 beta v2) without CSS that will follow the user on scroll. I've got it mostly working, but when I scroll, the sticky div jumps out of its parent element div (a ). I'm not sure if it's an HTML issue or my JavaScript is messed up somewhere.
The last div on the left begins contained within the parent col-sm-3 as per the first pic. However, upon scroll, when it "catches" you can see that it breaks out of the col-sm-3 and is underneath the main content divs (which is a col-sm-9).
My HTML:
<div class="container mt-3">
<div class="row">
<div class="col-sm-3 d-none d-md-block">
<div class="card mt-3">
<div class="card-header">
Featured
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
<div class="card mt-3" id="catcher">
<div class="card-header">
Featured
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
<div class="card mt-3" id="sticky">
<div class="card-header">
Featured
</div>
<div class="card-block">
<h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
My JavaScript:
<!--sticky on scroll javascript-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
function isScrolledTo(elem) {
var docViewTop = $(window).scrollTop(); //num of pixels hidden above current screen
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top; //num of pixels above the elem
var elemBottom = elemTop + $(elem).height();
return ((elemTop <= docViewTop));
}
var catcher = $('#catcher');
var sticky = $('#sticky');
$(window).scroll(function () {
if (isScrolledTo(sticky)) {
sticky.css('position', 'fixed');
sticky.css('top', '0px');
}
var stopHeight = catcher.offset().top + catcher.height();
if (stopHeight > sticky.offset().top) {
sticky.css('position', 'absolute');
sticky.css('top', stopHeight);
}
});
});
</script>
Related
I'm doing this in Wordpress using Sage theme. I want to display different images from a collection I provide to be displayed only once without repeating. I tried to do a simple JS one but it didn't work, it works when I try it as images not gif format. Below is my code, also one more thing right now I am hosting images somewhere and it would be really nice if I can use assets/images instead
var images = [
'https://gifyu.com/image/IwmR',
'https://gifyu.com/image/Iwmj',
'https://gifyu.com/image/Iwm0',
'https://gifyu.com/image/Iwm6',
'https://gifyu.com/image/Iwmi',
'https://gifyu.com/image/IwmC',
]
function randImg() {
var size = images.length
var x = Math.floor(size * Math.random())
document.getElementById('animateImage').src = images[x];
}
randImg()
HTMl part
<div class="container">
<div class="row">
<div class="col-6">
<div class="card my-5 mx-5" style="width: 25rem;">
<img class="card-img-top" src= "" id="animateImage" alt=""></img>
<div class="card-body">
<h5 class="card-title text-center" id="title"></h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
I'm looking for some help. I'm new to JQuery and I wrote a script for My Site:
jQuery(document).ready(function( $ ){
$(function() {
var $spcright = $(".single-product-content-right"),
$spcleft = $(".single-product-content-left"),
$spcbottom = $(".single-product-content-bottom"),
$window = $(window),
offset = $spcright.offset(),
height = $spcleft.height() - $spcright.height(),
topPadding = 45;
$window.scroll(function() {
if ($window.scrollTop() < height && $window.width() > 768) {
console.log(height);
$spcright.css('position', 'fixed').css('margin-top', '0');
$spcright.addClass('spc_right');
} else if($window.scrollTop() >= height && $window.width() > 768) {
$spcright.css('position', 'absolute').css('margin-top', height+'px');
$spcright.removeClass('spc_right');
} else if($window.width() < 768) {
$spcright.css('position', 'relative').css('margin-top', '0px');
$spcright.removeClass('spc_right');
} else {
$spcright.stop().animate({
marginTop: 0
});
}
});
});
});
The purpose is to have the description slide down with the images as you scroll until the end of the div with images (where it would stop). I can't quite seem to get the height nailed.
I tried calling $(".single-product-content-left").height(), but that only retreived a value of 200px and not the actual container height (which left me confused). I've been trying other ways, but it doesn't quite seem to work.
TL;DR: Need to retrieve height of left div (.single-product-content-left), but I am struggling to do so. Please help.
Edit: HTML for the section
<div class="single-product-content row">
<div class="single-product-content-left col-sm-6 col-xs-12">
<div class="gem-gallery gem-gallery-hover-default"> <div class="ly-gallery-item ly-gallery1" data-image-id="27245">
<div class="ly-gallery-item-image ly-gallery-item1">
<img class="27245 img1" src="http://lyboards.landyachtztesting.com/wp-content/uploads/2018/02/1.jpg" alt="" class="img-responsive">
</div>
</div>
<div class="ly-gallery-item ly-gallery2" data-image-id="27244">
<div class="ly-gallery-item-image ly-gallery-item2">
<img class="27244 img2" src="http://lyboards.landyachtztesting.com/wp-content/uploads/2018/02/4.jpg" alt="" class="img-responsive">
</div>
</div>
<div class="ly-gallery-item ly-gallery3" data-image-id="27243">
<div class="ly-gallery-item-image ly-gallery-item3">
<img class="27243 img3" src="http://lyboards.landyachtztesting.com/wp-content/uploads/2018/02/3.jpg" alt="" class="img-responsive">
</div>
</div>
<div class="ly-gallery-item ly-gallery4" data-image-id="27242">
<div class="ly-gallery-item-image ly-gallery-item4">
<img class="27242 img4" src="http://lyboards.landyachtztesting.com/wp-content/uploads/2018/02/2.jpg" alt="" class="img-responsive">
</div>
</div>
</div> </div>
<div class="single-product-content-right col-sm-6 col-xs-12">
<h2 class="product_title" style="color: #111111;">Test Board</h2><p class="price"><span class="woocs_price_code" data-product-id="26570"></span></p>
<div class="product-content entry-content"><p>Do you want to take a board everywhere you go but don’t want to lug around some giant piece of wood? We’ve managed to eliminate all the awkward from your life with the tiny Dinghy 24. It’s compact for quick moves through the streets, letting you dodge those human pylons as they drag their heels on their way to somewhere boring. But not you, you’re always headed somewhere epic with your Dinghy 24!</p>
<p>The quality and performance are unmatched, we could get into the details, but you’ll understand better when it’s under your feet.</p>
<p>24″ Length I 6.5″ Width I 14″ Wheelbase</p>
<p>100% Canadian Maple</p>
</div>
<form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="26570" data-product_variations="[]">
<p class="stock out-of-stock">This product is currently out of stock and unavailable.</p>
</form>
</div>
</div>
I want to trigger a JQuery event when the user scrolls across a div for the firs time.
I have tried using waypoint. It is not working. Here is the code, it gives no error.
var waypoints = $('#main').waypoint({
handler: function(direction) {
alert("Main div");
}
})
HTML code:
<body>
<!-- main content -->
<div id="push"></div>
<section class="grey darken-4 valign-wrapper">
<div class="container valign">
<div class="col s12">
<h2 class="center-align white-text">Hey!</h2>
<div class="divider"></div>
<p class="center-align white-text flow-text developer"></p>
</div>
</div>
</div>
</section>
<div id="main">
<div class="container" style="padding-top:8px">
<h2 class="center black-text darken-4">Profile</h2>
<h4 class="center teal-text darken-4">
I love to Code <a class="pulse btn-floating"><i class="material-icons">favorite</i></a>
</h4>
<div class="divider"></div>
<div class="row" style="padding-top:5%">
<div class="col s4">
<h4 class=" teal-text darken-4">About me</h4>
<p class="flow-text me" style="font-size:20px">
</p>
</div>
<div class="col s4">
<img src="Images/Aarth.jpg" alt="" class="circle responsive-img">
</div>
<div class="col s4">
<h4 class="teal-text darken-4" style="padding-left:11%">Details</h4>
<p style="padding-left:11%; font-size:20px;" class="flow-text"><strong>Name:</strong>
<span class="name "></span>
</p>
<p style="padding-left:11%; font-size:20px;" class="flow-text"><strong>Age:</strong>
<span class="age"></span>
</p>
<p style="padding-left:11%; font-size:20px;" class="flow-text"><strong>Location:</strong>
<span class="location"></span>
</p>
</div>
</div>
</div>
</div>
</body>
Here are the approaches I have used till now, but nothing worked
function Utils() {
}
Utils.prototype = {
constructor: Utils,
isElementInView: function (element, fullyInView) {
var pageTop = $(window).scrollTop();
var pageBottom = pageTop + $(window).height();
var elementTop = $(element).offset().top;
var elementBottom = elementTop + $(element).height();
if (fullyInView === true) {
return ((pageTop < elementTop) && (pageBottom > elementBottom));
} else {
return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
}
}
};
var Utils = new Utils();
Help would be great!
To use waypoints, bear in mind there needs to be enough scroll room for the top of the "main" div to hit the top of the viewport. This will vary depending on the size of the browser window the user has open. You can set a % offset from the top of the viewport to make it trigger when the element is a certain distance from the top.
If your "main" div is the last element, you can also use the special "bottom-in-view" offset to make it work once the scroll hits the bottom of the page, even if the top of "main" can't reach the top of the viewport:
var waypoints = $('#main').waypoint({
handler: function(direction) {
alert("Main div");
},
offset: "bottom-in-view"
});
All of this information is available in the documentation. See http://imakewebthings.com/waypoints/api/offset-option/ for more details
I got three blocks, when a block is clicked a div slides open using slideToggle. When the same block is clicked the div closes, this works as it should, but if the second block is clicked the data that belongs to the second block is loaded, but it instantly slides back up (closes).
How can I make sure that it only closes when the same block is clicked twice and just switches data / stays open when another block is clicked?
My html:
<div class="col-md-4 col-sm-6 vk-clear-padding handmouse haven">
<div class="vk-iconbox vk-iconbox-background text-center" style="background-color: #ececec;">
<div class="iconbox-content vk-section-style-5">
<h2 class="vk-heading text-uppercase" aria-label="01">
<span>Haven & Industrie</span>
</h2>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 vk-clear-padding handmouse openbaar">
<div class="vk-iconbox vk-iconbox-background vk-iconbox-striped text-center" style="background-color: #faf5f5;">
<div class="iconbox-content vk-section-style-5">
<h2 class="vk-heading text-uppercase" aria-label="02">
<span>Openbare Ruimte</span>
</h2>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 vk-clear-padding handmouse landmeten">
<div class="vk-iconbox vk-iconbox-background text-center" style="background-color: #ececec;">
<div class="iconbox-content vk-section-style-5">
<h2 class="vk-heading text-uppercase" aria-label="03">
<span>Landmeten</span>
</h2>
</div>
</div>
</div>
<div class="vk-what-we-do-section vk-section vk-section-style-2 vk-section-style-3 tabwrapper">
</div>
My jQuery:
$('.handmouse').on('click', function(e){
var alias = $(this).attr("data-attribute");
$.post("ajax/blokken.php", {
dienstnaam : alias
}, function(data) {
$(".tabwrapper").html(data);
MasonryItem.init();
});
$('.tabwrapper').slideToggle();
$('html, body').animate({
scrollTop: $(".tabwrapper").offset().top
}, 2000);
});
The three blocks all can be identified by their last classes (haven, openbaar, landmeten).
I am using this code
//Resize Div
$(document).ready(function(){
resizeDiv();
});
window.onresize = function(event) {
resizeDiv();
}
function resizeDiv() {
vpw = $(window).width();
vph = $(window).height();
$('.site-intro').css({'height': vph + 'px'});
}
It works great and makes the first div 100% of the window and set the height inline. Is there a way to add to this code so it would make other divs set to the same height?
I am placing one div on top of the other and want them all to be the same height (that same height being what ever 100% is).
Sorry,
The HTML
<div class="wrapper">
<div class="site-intro parallax" data-velocity="-.3">
<div class="row-fluid header">
<div class="col-lg-6 col-sm-6 col-6 logo">
<img src="img/logo.png" alt="" />
</div>
<div class="col-lg-6 col-sm-6 col-6 follow text-right">
<img src="img/follow-fb.png" alt="Follow Us On Facebook" />
<img src="img/follow-tw.png" alt="Follow Us On Twitter" />
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="text-center">Website Success</h1>
<h2 class="text-center">Is Dependent On Effort and Imagination</h2>
<p class="text-center"><a class="text-center can-do" href="#">See What We Can Do For You</a>
</div>
</div>
</div>
</div>
I want to have more divs underneath the (.site-intro) not side by side. Then have links inside each div that will anchor to the next div.
It's hard to say without seeing your DOM, but generally you can just use a multiple elements selector separated by commas.
Let's say you want to resize 3 elements:
div with class site-intro.
div with ID user-data.
section element.
The code will look like that:
function resizeDiv() {
vpw = $(window).width();
vph = $(window).height();
$('.site-intro, #user-data, section').height(vph);
}