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
Related
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'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>
I have a set of "div" whose children count I want to check when a user fadeOut images under that div block, if the all childrens have be closed out i want to call the function: kind of like:
edited: the current code always alerts YES whenever the div is faded,
how do i destroy the DOM entirely without having to use :visible
filter. getting rid of the entire card class after fading out
considering the HTML:
<div class='scrolling-wrapper'>
<div class='card'>
<div class='panel panel-primary'>
<div class='panel-body'>
<div class='img-wrap'>
<span class='close-x'> × </span>
<img width='100%' id='3' class='' src='resizer/resizer.php?file=profiles/images/default_cover.jpg&width=700&height=400&action=resize&watermark=bridgoo&watermark_pos=tl&color=255,255,255&quality=100' />
</div>
<div class='title h5'>
<span class='user-popover'>
<a href='/groupstomason/'><b>tomason</b></a>
</span>
<br/>
<small class='small-text'>for max tomason
</small>
</div>
</div>
<div class='panel-heading'>
<button class='btn btn-primary'> <span class='fa fa-plus-circle fa-fw'> </span>Join </button>
</div>
</div>
<div class='card-group-holder' style='width:250px; background-color:inherit;'>
</div>
<div class="card"> another card</div>
<div class="card"> another card</div>
<div class="card"> another card</div>
</div>
and the jquery below:
$('.img-wrap .close-x').on('click', function() {
var card = $(this).closest('.card');
card.fadeOut('slow', function() {
var cardWrapper = $(this).closest('.card').closest('scrolling-wrapper');
var cardcount = cardWrapper.children('.card');
if (cardcount.length < 1) alert('yes');
});
});
when the <span class = 'close-x'> × </span> is clicked the
entire <div class='card'> is fadedOut, then on fadeout, if no more
cards exist or the last cards have been faded, then alert('yes');
Assuming that multiple .card elements are nested in the same parent, you can check if all the siblings have faded out.
In your original markup, you have an unclosed </div>, which causes the .card elements not to be siblings of each other, I believe this is a typo on your part, since it is the most parsimonious explanation.
Since .fadeOut() hides the element, you can simply check if the filtered set of :visible returns a length of 1 or more:
$('.img-wrap .close-x').on('click', function() {
var card = $(this).closest('.card');
card.fadeOut('slow', function() {
var cardWrapper = $(this).closest('.scrolling-wrapper');
var cardcount = cardWrapper.children('.card');
if (cardcount.filter(':visible').length < 1) {
console.log('All cards have faded out');
}
});
});
Here is a proof-of-concept example:
$(function() {
$('.close').on('click', function() {
var card = $(this).closest('.card');
card.fadeOut('slow', function() {
// Get wrapping ancestor
var cardWrapper = $(this).closest('.scrolling-wrapper');
var cardcount = cardWrapper.children('.card');
// Filter out those that are not visible, and check for remaining visible cards
if (cardcount.filter(':visible').length < 1) {
console.log('All cards have faded out');
}
});
});
});
/* Just styles for a dummy call-to-action element in .card */
span.close {
cursor: pointer;
color: steelblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrolling-wrapper">
<div class="card">Card 1. <span class="close">Click to hide me.</span></div>
<div class="card">Card 2. <span class="close">Click to hide me.</span></div>
<div class="card">Card 3. <span class="close">Click to hide me.</span></div>
<div class="card">Card 4. <span class="close">Click to hide me.</span></div>
<div class="card">Card 5. <span class="close">Click to hide me.</span></div>
</div>
In your callback you may simply test if at least a card is visible:
if ($(this).closest('.card').siblings('.card:visible').length < 1) alert('yes');
$('.img-wrap .close-x').on('click', function () {
var card = $(this).closest('.card');
card.fadeOut('slow', function () {
if ($(this).closest('.card').siblings('.card:visible').length < 1) console.log('yes');
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class='scrolling-wrapper'>
<div class='card'>
<div class='panel panel-primary'>
<div class='panel-body'>
<div class='img-wrap'>
<span class='close-x'> × </span>
<img width='100%' id='3' class=''
src='resizer/resizer.php?file=profiles/images/default_cover.jpg&width=700&height=400&action=resize&watermark=bridgoo&watermark_pos=tl&color=255,255,255&quality=100'/>
</div>
<div class='title h5'>
<span class='user-popover'>
<a href='/groupstomason/'><b>tomason</b></a>
</span>
<br/>
<small class='small-text'>for max tomason
</small>
</div>
</div>
<div class='panel-heading'>
<button class='btn btn-primary'><span class='fa fa-plus-circle fa-fw'> </span>Join</button>
</div>
</div>
<div class='card-group-holder' style='width:250px; background-color:inherit;'>
</div>
</div>
<div class='card'>
<div class='panel panel-primary'>
<div class='panel-body'>
<div class='img-wrap'>
<span class='close-x'> × </span>
<img width='100%' id='3' class=''
src='resizer/resizer.php?file=profiles/images/default_cover.jpg&width=700&height=400&action=resize&watermark=bridgoo&watermark_pos=tl&color=255,255,255&quality=100'/>
</div>
<div class='title h5'>
<span class='user-popover'>
<a href='/groupstomason/'><b>tomason</b></a>
</span>
<br/>
<small class='small-text'>for max tomason
</small>
</div>
</div>
<div class='panel-heading'>
<button class='btn btn-primary'><span class='fa fa-plus-circle fa-fw'> </span>Join</button>
</div>
</div>
<div class='card-group-holder' style='width:250px; background-color:inherit;'>
</div>
</div>
</div>
I've been trying to get the automatic update on my navbar but i cant get it to work.
Here is my code: http://pastebin.com/YTHaBD0i
<div id="header">
<ul class="nav-list">
<li class="download selected">Download</li>
<li class="features">Features</li>
<li class="method">Method</li>
<li class="purchase">Purchase</li>
</ul>
</div>
<div id="footer">yey productions © 2016</div>
<div id="fullpage">
<div class="section " id="section0">
<div class="intro">
<h1>Download</h1>
<p>Lorem Ipsum</p>
</div>
</div>
<div class="section" id="section1">
<div class="slide" id="slide1">
<div class="intro">
<h1>Features</h1>
<p>Cheese.</p>
</div>
</div>
<div class="slide" id="slide2">
<h1>Cheese2</h1>
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>Yey</h1>
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<h1>Yey2</h1>
</div>
</div>
</div>
Help would be much appreciated!
Greetz,
Assuming you are using jQuery, you will need a function that fires every time you scroll.
From there, you need to detect which elements are in view.
Once you know which elements are in view, clear any currently active elements with the .selected class, then choose which one you want to be .selected and add the .selected class.
Edit for more detail:
Below is a pure JavaScript solution, which I found here. This should be close to a drop-in solution!:
(function() {
'use strict';
var section = document.querySelectorAll(".section");
var sections = {};
var i = 0;
Array.prototype.forEach.call(section, function(e) {
sections[e.id] = e.offsetTop;
});
window.onscroll = function() {
var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
for (i in sections) {
if (sections[i] <= scrollPosition) {
document.querySelector('.selected').setAttribute('class', ' ');
document.querySelector('a[href*=' + i + ']').setAttribute('class', 'selected');
}
}
};
})();
Hello for my project i need to get the positions of all .move elements and check if there is an element at relative position.
Here's the HTML code :
<article id="move_wrapper">
<div class="move">
<span class="location"></span>
</div>
<div class="move">
<span class="location"></span>
</div>
<div class="move">
<span class="location"></span>
</div>
<div class="move">
<span class="location"></span>
</div>
<div class="move">
<span class="location"></span>
</div>
</article>
And here's the JS code:
function overlap() {<br>
$(".move").click(function () {
$("#main *.move").each(function () {
var thisPosLeft = this.position().left;
var thisPosTop = this.position().top;
var elem = document.elementFromPoint(thisPosLeft - 100, thisPosTop - 100);
});
alert(elem.index(this));
});
}
Here's a jsfiddle with the full code:
http://jsfiddle.net/C3uqV/