I've appended some divs onto a nav with jQuery. These are set so they append if the window is bigger than 980px.
I would like these appended divs to be removed if the window is less than 980px. The jQuery I'm using in the example works, but only if the window is this size when loaded. When I re-size the window the appended divs don't get removed or added which is what I need.
I have a codepen here: http://codepen.io/emilychews/pen/jBGGBB
The code is:
jQuery
if ($(window).width() >= 980) {
$('.box').append('<div id="newbox">appended with jQuery</div>');
}
if ($(window).width() <= 979) {
$('#newbox').remove();
}
CSS
.box{
position: relative;
left: 50px;
top: 50px;
height: 30px;
width: 100px;
background: blue;
line-height: 30px;
text-align: center;
color: white;
}
#newbox {
margin-top: 20px;
width: 100px;
height: 100px;
background: red;}
HTML
<div class="box">Test</div>
Any help would be wonderful.
Emily
I've updated your codepen to show how you can accomplish this:
Code Pen Here: http://codepen.io/anon/pen/ZeXrar
// Logic inside of function
function addRemoveDiv() {
// Window Width pointer
var wW = $(window).width();
// If window width is greater than or equal to 980 and div not created.
if (wW >= 980 && !$('#newbox').length) {
$('.box').append('<div id="newbox">appended with jQuery</div>');
// else if window is less than 980 and #newbox has been created.
} else if (wW < 980 && $('#newbox').length) {
$('#newbox').remove();
}
}
// Initial function call.
addRemoveDiv();
// On resize, call the function again
$(window).on('resize', function() {
addRemoveDiv();
})
Also, I would recommend looking into debouncing the function call on resize so it's not called over and over and over again as the window resizes. Reference for that here:
https://davidwalsh.name/javascript-debounce-function
Also, libraries like Underscore and LoDash have debounce functions available when sourced:
http://underscorejs.org/
https://lodash.com/
You should use event listeners.
$(document).ready(function() {
function checkMyDiv(calledByResize) {
if($(window).width() >= 980 && $('#newbox').length < 1) { // "$('#newbox').length < 1" will prevent to add lots of div#newbox elements
$('.box').append('<div id="newbox">appended with jQuery</div>');
} else if (calledByResize === true && $('#newbox').length > 0) {
$('#newbox').remove();
}
}
$(window).resize(function() {
checkMyDiv(true);
});
checkMyDiv(false);
});
You may also want to use css rules, like display:none|block; instead of removing or appending div#newbox element everytime the window resizes.
You're almost there, you just need the resize event, and for it to be applied after the ready event:
(function($) {
$(function() {
$(window).on('resize', function() {
if ($(window).width() >= 980) {
$('.box').append('<div id="newbox">appended with jQuery</div>');
}
if ($(window).width() <= 979) {
$('#newbox').remove();
}
}).trigger('resize');
});
})(jQuery);
Although, it should be noted this will actually append an additional copy of your newbox on every single resize event, which I'll assume you don't want. So, we'll sort out that problem.
We can also do a few simple optimisations here to make the code slightly more efficient, such as storing our element selectors and window width in variables:
(function($) {
$(function() {
var $window = $(window),
newBox = $('<div id="newbox">appended with jQuery</div>'),
box = $('.box');
$window.on('resize', function() {
var windowWidth = $window.width();
if (windowWidth >= 980) {
if(!$.contains(document, newBox[0])) {
box.append(newBox);
}
} else if (windowWidth <= 979) {
if($.contains(document, newBox[0])) {
newBox.remove();
}
}
}).trigger('resize');
});
})(jQuery);
I think you need to add an event listener on the window object, listening for the .resize() event:
https://api.jquery.com/resize/
Then in the callback function you should be able to check whether the new size is below your threshold, so you can remove the div in that case.
$(window).resize(function () {
// Check window width here, and remove div if necessary
})
Related
I have the following JQuery code:
$(document).ready(function () {
var $containerHeight = $(window).height();
if ($containerHeight <= 818) {
$('.footer').css({
position: 'static',
bottom: 'auto',
left: 'auto'
});
}
if ($containerHeight > 819) {
$('.footer').css({
position: 'absolute',
bottom: '3px',
left: '0px'
});
}
});
The only problem is that this only works when the browser first loads, I want containerHeight to also be checked when they are resizing the window?
Any ideas?
Here's an example using jQuery, javascript and css to handle resize events.
(css if your best bet if you're just stylizing things on resize (media queries))
http://jsfiddle.net/CoryDanielson/LAF4G/
css
.footer
{
/* default styles applied first */
}
#media screen and (min-height: 820px) /* height >= 820 px */
{
.footer {
position: absolute;
bottom: 3px;
left: 0px;
/* more styles */
}
}
javascript
window.onresize = function() {
if (window.innerHeight >= 820) { /* ... */ }
if (window.innerWidth <= 1280) { /* ... */ }
}
jQuery
$(window).on('resize', function(){
var win = $(this); //this = window
if (win.height() >= 820) { /* ... */ }
if (win.width() >= 1280) { /* ... */ }
});
How do I stop my resize code from executing so often!?
This is the first problem you'll notice when binding to resize. The resize code gets called a LOT when the user is resizing the browser manually, and can feel pretty janky.
To limit how often your resize code is called, you can use the debounce or throttle methods from the underscore & lodash libraries.
debounce will only execute your resize code X number of milliseconds after the LAST resize event. This is ideal when you only want to call your resize code once, after the user is done resizing the browser. It's good for updating graphs, charts and layouts that may be expensive to update every single resize event.
throttle will only execute your resize code every X number of milliseconds. It "throttles" how often the code is called. This isn't used as often with resize events, but it's worth being aware of.
If you don't have underscore or lodash, you can implement a similar solution yourself:
JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?
Move your javascript into a function and then bind that function to window resize.
$(document).ready(function () {
updateContainer();
$(window).resize(function() {
updateContainer();
});
});
function updateContainer() {
var $containerHeight = $(window).height();
if ($containerHeight <= 818) {
$('.footer').css({
position: 'static',
bottom: 'auto',
left: 'auto'
});
}
if ($containerHeight > 819) {
$('.footer').css({
position: 'absolute',
bottom: '3px',
left: '0px'
});
}
}
Try this solution. Only fires once the page loads and then during window resize at predefined resizeDelay.
$(document).ready(function()
{
var resizeDelay = 200;
var doResize = true;
var resizer = function () {
if (doResize) {
//your code that needs to be executed goes here
doResize = false;
}
};
var resizerInterval = setInterval(resizer, resizeDelay);
resizer();
$(window).resize(function() {
doResize = true;
});
});
jQuery has a resize event handler which you can attach to the window, .resize(). So, if you put $(window).resize(function(){/* YOUR CODE HERE */}) then your code will be run every time the window is resized.
So, what you want is to run the code after the first page load and whenever the window is resized. Therefore you should pull the code into its own function and run that function in both instances.
// This function positions the footer based on window size
function positionFooter(){
var $containerHeight = $(window).height();
if ($containerHeight <= 818) {
$('.footer').css({
position: 'static',
bottom: 'auto',
left: 'auto'
});
}
else {
$('.footer').css({
position: 'absolute',
bottom: '3px',
left: '0px'
});
}
}
$(document).ready(function () {
positionFooter();//run when page first loads
});
$(window).resize(function () {
positionFooter();//run on every window resize
});
See: Cross-browser window resize event - JavaScript / jQuery
Give your anonymous function a name, then:
$(window).on("resize", doResize);
http://api.jquery.com/category/events/
function myResizeFunction() {
...
}
$(function() {
$(window).resize(myResizeFunction).trigger('resize');
});
This will cause your resize handler to trigger on window resize and on document ready. Of course, you can attach your resize handler outside of the document ready handler if you want .trigger('resize') to run on page load instead.
UPDATE: Here's another option if you don't want to make use of any other third-party libraries.
This technique adds a specific class to your target element so you have the advantage of controlling the styling through CSS only (and avoiding inline styling).
It also ensures that the class is only added or removed when the actual threshold point is triggered and not on each and every resize. It will fire at one threshold point only: when the height changes from <= 818 to > 819 or vice versa and not multiple times within each region. It's not concerned with any change in width.
function myResizeFunction() {
var $window = $(this),
height = Math.ceil($window.height()),
previousHeight = $window.data('previousHeight');
if (height !== previousHeight) {
if (height < 819)
previousHeight >= 819 && $('.footer').removeClass('hgte819');
else if (!previousHeight || previousHeight < 819)
$('.footer').addClass('hgte819');
$window.data('previousHeight', height);
}
}
$(function() {
$(window).on('resize.optionalNamespace', myResizeFunction).triggerHandler('resize.optionalNamespace');
});
As an example, you might have the following as some of your CSS rules:
.footer {
bottom: auto;
left: auto;
position: static;
}
.footer.hgte819 {
bottom: 3px;
left: 0;
position: absolute;
}
Use this:
window.onresize = function(event) {
...
}
can use it too
function getWindowSize()
{
var fontSize = parseInt($("body").css("fontSize"), 10);
var h = ($(window).height() / fontSize).toFixed(4);
var w = ($(window).width() / fontSize).toFixed(4);
var size = {
"height": h
,"width": w
};
return size;
}
function startResizeObserver()
{
//---------------------
var colFunc = {
"f10" : function(){ alert(10); }
,"f50" : function(){ alert(50); }
,"f100" : function(){ alert(100); }
,"f500" : function(){ alert(500); }
,"f1000" : function(){ alert(1000);}
};
//---------------------
$(window).resize(function() {
var sz = getWindowSize();
if(sz.width > 10){colFunc['f10']();}
if(sz.width > 50){colFunc['f50']();}
if(sz.width > 100){colFunc['f100']();}
if(sz.width > 500){colFunc['f500']();}
if(sz.width > 1000){colFunc['f1000']();}
});
}
$(document).ready(function()
{
startResizeObserver();
});
You can bind resize using .resize() and run your code when the browser is resized. You need to also add an else condition to your if statement so that your css values toggle the old and the new, rather than just setting the new.
I have this jQuery which should 'slide in' a header after scrolling on the page, but nothing happens. At the 3rd line, my code editor gives me a !read only alert, perhaps theres a problem with the syntax?
I'm using beaver builder which calls jQuery automatically.
$( document ).ready(function() {
$(window).scroll(function(){
scroll = $(window).scrollTop();
if (scroll > 450){
$('#jQuery-mob').slideDown();
}
if (scroll < 450){
$('#jQuery-mob').slideUp();
}
});
});
$( document ).ready(function() {
$(window).scroll(function(){
scroll = $(window).scrollTop();
if (scroll > 700){
$('#why-jquery').slideDown();
}
if (scroll < 700){
$('#why-jquery').slideUp();
}
});
});
both #jquery-mob and #why-jquery are set to display:none
css:
#why-jquery {
position: fixed;
top:0;
z-index: 99;
width: 100%;
height: 100px;
display: none;
}
#jQuery-mob {
position: fixed;
top:0;
z-index: 99;
width: 100%;
height: 100px;
padding: 0 !important;
display: none;
}
I'm using beaver builder which calls jQuery automatically.
I think you mean to say:
I'm using wordpress which calls jQuery automatically.
For wordpress sites you must, by default, use jQuery instead of $. You can either replace all, or only use jQuery in the .ready "wrapper" and pass the $ into the .ready function.
Example of both:
jQuery( document ).ready(function() {
jQuery(window).scroll(function(){
scroll = jQuery(window).scrollTop();
if (scroll > 450){
jQuery('#jQuery-mob').slideDown();
}
if (scroll < 450){
jQuery('#jQuery-mob').slideUp();
}
});
});
jQuery(document).ready(function( $ ) {
$(window).scroll(function(){
scroll = $(window).scrollTop();
if (scroll > 700){
$('#why-jquery').slideDown();
}
if (scroll < 700){
$('#why-jquery').slideUp();
}
});
});
Be aware I did not check your code, but I did see you're using scroll without declaring it with var. This means scroll will be a global variable. Both functions setting/using it could cause interference with each other, as well as overwriting window.scroll function. You may want to use var scroll= etc. and also better use another variable name.
scroll is a window-level function, so in a browser context acts as a reserved word:
console.log(scroll)
You're trying to overwrite it with a variable named "scroll", which is what causes the "!read only" error you're seeing.
Use a different variable name (and declare it using 'var'.)
This code has logical issue
if (scroll < 450 && scroll < 800){
When scroll is smaller than 450, it is smaller than 800 as well, so why did you include the second comparison?
The same story on this line:
if (scroll < 700 && scroll < 1000){
I have some element that is visible when scroll is bigger than 890px.
But i have problem that element has to be visible between 890px and 920px, and if user scroll more thna 920 or less than 890px i need to hide that element.
I am using animated css for adding animation to element when appear.
This is what i have for now in JS
var $document = $(document),
$elementField = $('.center-field');
$document.scroll(function () {
if ($document.scrollTop() >= 890) {
$elementField.stop().addClass("show animated bounceInDown");
}
});
Now it will appear when user scroll more than 890px, but when user goes back it will stay again, is there somekind of watch user scroll?
Just be a bit more specific with the if condition.
var $document = $(document),
$elementField = $('.center-field');
$document.scroll(function () {
if ($document.scrollTop() >= 890 && $document.scrollTop() <= 920) {
$elementField.css('color', 'tomato');
} else {
$elementField.css('color', 'blue');
}
});
body {
position: relative;
height:1800px;
}
.center-field {
position: absolute;
top: 900px;
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>scroll down please</p>
<h1 class="center-field">Hello</h1>
The code you done is working like that:
every time you scroll:
check if the scroll is more than 890px
if so add the class
As you can see it doesn't contains the logic of hiding the element.
You need to check if the scroll is less than 890px and remove the classes.
You can try something like that (assuming that when you node hasn't the class show it is hidden):
var $document = $(document),
$elementField = $('.center-field');
$document.scroll(function () {
var scroll = $document.scrollTop();
if (scroll >= 890 && scroll <= 920) {
$elementField.addClass("show animated bounceInDown").removeClass("fadeOut");
} else {
$elementField.removeClass("show bounceInDown").addClass("fadeOut");
}
});
Cant you do a hide in the else?
$document.scroll(function () {
if ($document.scrollTop() >= 890) {
$elementField.stop().addClass("show animated bounceInDown");
}else{
$elementField.hide(); //or something like that
}
I am trying to add a fixed div on the top after the user scrolls down but how can I hide that same div if the resized window is smaller than 768px and show it back again if the window is bigger than 769px?
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 400) {
$('.js-quick-navbar').show();
} else if($(this).width() < 768) {
$('.js-quick-navbar').hide();
}
});
jsFiddle
If it's just a matter of showing or hiding a div based on the window width, then you could use Media queries.
#media (max-width:768px){
.quick-navbar {
display:none;
}
}
}
http://jsfiddle.net/daveSalomon/qefoLdwa/7/
However, if you need to support browsers which don't support CSS media queries (yuck!), then you could use jQuery, and listen on window.resize.
It's worth looking into throttling, and also optimising the following. For example, .show() will be called regardless of whether or not it is necessary. It'll also fire an event for every px the window is resized - you really want to batch them together and action it every x seconds. (Great post: http://benalman.com/projects/jquery-throttle-debounce-plugin/)
$(window).resize(function(){
var w = $(this).width();
if(w > 768){
$('.quick-navbar').show();
} else {
$('.quick-navbar').hide();
}
});
http://jsfiddle.net/daveSalomon/qefoLdwa/8/
Missed the scroll part - apologies.
$(window).scroll(function(){ ... });
if(w > 768 && $(window).scrollTop() > 200){ ... }
http://jsfiddle.net/daveSalomon/qefoLdwa/9/
CSS
.hidden {
display: hidden;
}
.visible {
display: block;
}
#media (max-width:768px){
.js-quick-navbar {
display:none !important; // Added important since we may have the .visible class attached to it at times
}
}
}
JS
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 400) {
$('.js-quick-navbar').addClass('visible');
} else if($(this).width() < 768) {
$('.js-quick-navbar').addClass('hidden');
}
});
I have an h1 that is far down a page..
<h1 id="scroll-to">TRIGGER EVENT WHEN SCROLLED TO.</h1>
and I want to trigger an alert when the user scrolls to the h1, or has it in it's browser's view.
$('#scroll-to').scroll(function() {
alert('you have scrolled to the h1!');
});
how do I do this?
You can calculate the offset of the element and then compare that with the scroll value like:
$(window).scroll(function() {
var hT = $('#scroll-to').offset().top,
hH = $('#scroll-to').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT+hH-wH)){
console.log('H1 on the view!');
}
});
Check this Demo Fiddle
Updated Demo Fiddle no alert -- instead FadeIn() the element
Updated code to check if the element is inside the viewport or not. Thus this works whether you are scrolling up or down adding some rules to the if statement:
if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
//Do something
}
Demo Fiddle
Combining this question with the best answer from jQuery trigger action when a user scrolls past a certain part of the page
var element_position = $('#scroll-to').offset().top;
$(window).on('scroll', function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = element_position;
if(y_scroll_pos > scroll_pos_test) {
//do stuff
}
});
UPDATE
I've improved the code so that it will trigger when the element is half way up the screen rather than at the very top. It will also trigger the code if the user hits the bottom of the screen and the function hasn't fired yet.
var element_position = $('#scroll-to').offset().top;
var screen_height = $(window).height();
var activation_offset = 0.5;//determines how far up the the page the element needs to be before triggering the function
var activation_point = element_position - (screen_height * activation_offset);
var max_scroll_height = $('body').height() - screen_height - 5;//-5 for a little bit of buffer
//Does something when user scrolls to it OR
//Does it when user has reached the bottom of the page and hasn't triggered the function yet
$(window).on('scroll', function() {
var y_scroll_pos = window.pageYOffset;
var element_in_view = y_scroll_pos > activation_point;
var has_reached_bottom_of_page = max_scroll_height <= y_scroll_pos && !element_in_view;
if(element_in_view || has_reached_bottom_of_page) {
//Do something
}
});
I think your best bet would be to leverage an existing library that does that very thing:
http://imakewebthings.com/waypoints/
You can add listeners to your elements that will fire off when your element hits the top of the viewport:
$('#scroll-to').waypoint(function() {
alert('you have scrolled to the h1!');
});
For an amazing demo of it in use:
http://tympanus.net/codrops/2013/07/16/on-scroll-header-effects/
Inview library triggered event and works well with jquery 1.8 and higher!
https://github.com/protonet/jquery.inview
$('div').on('inview', function (event, visible) {
if (visible == true) {
// element is now visible in the viewport
} else {
// element has gone out of viewport
}
});
Read this https://remysharp.com/2009/01/26/element-in-view-event-plugin
Fire scroll only once after a successful scroll
Note: By successful scroll I mean when the user has scrolled to the desired
element or in other words when the desired element is in view
The accepted answer worked 90% for me so I had to tweak it a little to actually fire only once.
$(window).on('scroll',function() {
var hT = $('#comment-box-section').offset().top,
hH = $('#comment-box-section').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > ((hT+hH-wH)-500)){
console.log('comment box section arrived! eh');
// This detaches the scroll so doStuff() won't run more than once
$(window).off('scroll');
doStuff();
}
});
You could use this for all devices,
$(document).on('scroll', function() {
if( $(this).scrollTop() >= $('#target_element').position().top ){
do_something();
}
});
Intersection Observer can be the best thing IMO, without any external library it does a really good job.
const options = {
root: null,
threshold: 0.25, // 0 - 1 this work as a trigger.
rootMargin: '150px'
};
const target = document.querySelector('h1#scroll-to');
const observer = new IntersectionObserver(
entries => { // each entry checks if the element is the view or not and if yes trigger the function accordingly
entries.forEach(() => {
alert('you have scrolled to the h1!')
});
}, options);
observer.observe(target);
You can use jQuery plugin with the inview event like this :
jQuery('.your-class-here').one('inview', function (event, visible) {
if (visible == true) {
//Enjoy !
}
});
Link : https://remysharp.com/2009/01/26/element-in-view-event-plugin
This should be what you need.
Javascript:
$(window).scroll(function() {
var hT = $('#circle').offset().top,
hH = $('#circle').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
console.log((hT - wH), wS);
if (wS > (hT + hH - wH)) {
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 900,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
}
});
}); {
$('.count').removeClass('count').addClass('counted');
};
}
});
CSS:
#circle
{
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
float:left;
margin:5px;
}
.count, .counted
{
line-height: 100px;
color:white;
margin-left:30px;
font-size:25px;
}
#talkbubble {
width: 120px;
height: 80px;
background: green;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
float:left;
margin:20px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 15px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 20px solid green;
border-bottom: 13px solid transparent;
}
HTML:
<div id="talkbubble"><span class="count">145</span></div>
<div style="clear:both"></div>
<div id="talkbubble"><span class="count">145</span></div>
<div style="clear:both"></div>
<div id="circle"><span class="count">1234</span></div>
Check this bootply:
http://www.bootply.com/atin_agarwal2/cJBywxX5Qp
If you are looking for a javascript version. You can call this method on scroll event listener.
showScrollTop = () =>{
const currentScrollPosition = window.pageYOffset;
let elementID = 'service-selector'
const elementOffsetTop = document.getElementById(elementID).offsetTop
if ( currentScrollPosition > elementOffsetTop){
// place your logic here
} else {
// place your logic here
}
}
window.addEventListener('scroll', showScrollTop)
If you are doing a lot of functionality based on scroll position, Scroll magic (http://scrollmagic.io/) is built entirely for this purpose.
It makes it easy to trigger JS based on when the user reaches certain elements when scrolling. It also integrates with the GSAP animation engine (https://greensock.com/) which is great for parallax scrolling websites
Just a quick modification to DaniP's answer, for anyone dealing with elements that can sometimes extend beyond the bounds of the device's viewport.
Added just a slight conditional - In the case of elements that are bigger than the viewport, the element will be revealed once it's top half has completely filled the viewport.
function elementInView(el) {
// The vertical distance between the top of the page and the top of the element.
var elementOffset = $(el).offset().top;
// The height of the element, including padding and borders.
var elementOuterHeight = $(el).outerHeight();
// Height of the window without margins, padding, borders.
var windowHeight = $(window).height();
// The vertical distance between the top of the page and the top of the viewport.
var scrollOffset = $(this).scrollTop();
if (elementOuterHeight < windowHeight) {
// Element is smaller than viewport.
if (scrollOffset > (elementOffset + elementOuterHeight - windowHeight)) {
// Element is completely inside viewport, reveal the element!
return true;
}
} else {
// Element is larger than the viewport, handle visibility differently.
// Consider it visible as soon as it's top half has filled the viewport.
if (scrollOffset > elementOffset) {
// The top of the viewport has touched the top of the element, reveal the element!
return true;
}
}
return false;
}
I use the same code doing that all the time, so added a simple jquery plugin doing it.
480 bytes long, and fast. Only bound elements analyzed in runtime.
https://www.npmjs.com/package/jquery-on-scrolled-to
It will be
$('#scroll-to').onScrolledTo(0, function() {
alert('you have scrolled to the h1!');
});
or use 0.5 instead of 0 if need to alert when half of the h1 shown.
Quick and fast implementation,
let triggered = false;
$(window).on('scroll',function() {
if (window.scrollY > ($('#scrollTo').offset().top+$('#scrollTo').outerHeight()-window.innerHeight) & !triggered){
console.log('triggered here on scroll..');
triggered = true;
}
});
using global variable triggered = false makes it just to happen once, otherwise, every time crossing past the element, this action is triggered.