Make Javascript event happen only when scrolled to - javascript

I currently have a JavaScript creating small pop ups when the page loads. I would like to make them appear only when the user scrolls down to where they appear (over a photo).
Is this possible?
Here is the code:
jQuery(function(){
// initialize of labels
$('.labels a#label1').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
$('.labels a#label2').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
$('.labels a#label3').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
$('.labels a#label4').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
$('.labels a#label6').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
$('.labels a#label5').fadeIn(100).effect('bounce', { times:3 }, 300);
});
});
});
});
});
// dialog close
$('.dialog .close').click(function() {
$(this).parent().fadeOut(500);
return false;
});
// display dialog on click by labels
$('.labels a').click(function() {
$('.dialog p').html( $(this).find('p').html() ).parent().fadeIn(500);
return false;
});
// close dialog on click outside
$('.container').click(function() {
$('.dialog').fadeOut(500);
});
});

Check out this question: How to animate this when scrolled
Here is the basic code you want to use:
<script>
$(window).scroll(function() {
$('.labels').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow + 400) {
$(this).fadeIn(100).effect('bounce', { times:3 }, 300);
}
});
});
</script>
You will also want to call the function on page load to initialize any elements that are visible without having to scroll
The OP in the question above links to a page with lots of cool animations you can use as well

Related

Issue with jQuery-based carousel and window resize

I have a weird bug in my code that is causing my carousel to act funny if the window is resized.
I haven't been able to pin-point what may be causing the issue, but if you run the code and then resize the window, the carousel will start to move back and forth rapidly, avoiding the 10-second timer that I have placed on it.
Here is a link to my example fiddle: https://jsfiddle.net/zeropsi/ufvLn25b/
Any thoughts?
The trouble is when window is being resized, the window.resize gets triggered a number of times and because of that carousel keeps sliding rapidly. I searched for 'jquery window resize trigger once complete' and found help. This is how I modified your code from the fiddle.
<script>
$(document).ready(function() {
$(document).on("click", ".carousel-indicators li", function() {
$(".carousel-indicators li").removeClass("active");
var a = $(this).data("slide");
$(this).addClass("active");
$("div#billboards").animate({
"left": (a * -100) + "%"
});
$(".billboard").removeClass("active");
$(".billboard[data-billboard='" + a + "']").addClass("active");
return false;
});
// var resizeTimer;
//
// $(window).on("resize", function() {
// console.log("window resized");
//
// clearTimeout(resizeTimer);
// resizeTimer = setTimeout(function() {
// // run code here, resizing has stopped
// BillboardCarousel.init();
// },10000);
//
// });
var id;
$(window).on("resize", function() {
clearTimeout(id);
id = setTimeout(doneResizing, 500);
});
function doneResizing(){
BillboardCarousel.init();
}
if ($("section#carousel").length === 1) {
BillboardCarousel.init();
}
});
var BillboardCarousel = {
init: function() {
BillboardCarousel.resize();
},
imagesLoaded: function() {
var imagesLoaded = 0;
$(".billboard").each(function() {
var image = new Image();
image.src = $(this).data("image");
image.onload = function() {
imagesLoaded++;
if (imagesLoaded === $(".billboard").length) {
BillboardCarousel.startCarousel();
}
};
});
},
startCarousel: function() {
var interval = parseInt($("div#billboards").data('interval'));
window.setInterval(function() {
BillboardCarousel.timer();
}, 10000);
},
resize: function() {
var a = $(".billboard").length;
var b = $(window).width();
$(".billboard").css({
"width": b + "px",
"float": "left",
"display": "inline-block"
});
$("div#billboards").css({
"width": a * 100 + "%",
"left": "0%"
});
$("div#billboards").attr("data-interval", 10000);
BillboardCarousel.imagesLoaded();
},
timer: function() {
var a = $(".billboard.active").data("billboard");
a++;
if (a >= $(".billboard").length) {
a = 0;
}
$(".billboard").removeClass("active");
$(".carousel-indicators li").removeClass("active");
$(".billboard[data-billboard='" + a + "']").addClass("active");
$(".carousel-indicators li[data-slide='" + a + "']").addClass("active");
$("div#billboards").animate({ "left": (a * -100) + "%" });
}
};
</script>
These are a few helpful links -
JQuery: How to call RESIZE event only once it's FINISHED resizing?
http://jsfiddle.net/Zevan/c9UE5/1/
https://css-tricks.com/snippets/jquery/done-resizing-event/

How to make slow the Scroll-Top Speed

ScrollTop is a jquery plugin (go to top of page), trying to make slow Scroll Speed, but not working. I have changed scrollSpeed : 'fast', to scrollSpeed : 'slow', but it still fast, nothing change.
JS:
$.fn.extend({
addScrollTop: function(options) {
var defaults = {
useObjWindow : false,
scrollSpeed : 'fast',
zIndex: '99'
}
var options = $.extend(defaults, options);
if($('body').find('.scrollTop-btn').length == 0) {
$('body').append('<div class="scrollTop-btn" style="display:none;"><i class="fa fa-chevron-up"></i></div>');
}
if(options.useObjWindow) {
var parentWindow = this;
var scrollWindow = this;
}
else {
var parentWindow = window;
var scrollWindow = 'html, body';
}
$(document).ready(function() {
$('.scrollTop-btn').on('click', function() {
$(scrollWindow).animate({scrollTop:0}, options.scrollSpeed);
});
$(parentWindow).scroll(function() {
$('.scrollTop-btn').hide();
var aTop = $('.scrollTop-btn').height() + 20;
if($(this).scrollTop() >= (aTop + 20)) {
$('.scrollTop-btn').css('z-index', options.zIndex);
$('.scrollTop-btn').show();
}
else {
if($('.scrollTop-btn').is(":visible")) {
$('.scrollTop-btn').hide();
}
}
});
});
}
});
Call:
jQuery(document).ready(function() {
jQuery("body").addScrollTop();
});
How to make it slower or smoother, when it go to top?
use jquery animate()
$('html,body').animate({ scrollTop: 0 }, 'slow');
refer this stack overflow question
Only with CSS:
html {
scroll-behavior: smooth;
}
Using jQuery
If you want you can customize how much time you would like the "scrolling" to last. Or do something else when scroll effect is finished.
I have a: <a href="#" class="scrollToTop">
And want to scroll to an element with class "beginning"
$('.scrollToTop').on('click', function(event){
event.preventDefault();
$('html, body').stop().animate({scrollTop: $('.beginning').offset().top}, 500);
});
The last part where you have the 500. You can set there how much time you want the effect to last. In milliseconds.
http://api.jquery.com/animate/
Replace 'slow' with - Ex. 1000, 5000, 10000
$('html,body').animate({ scrollTop: 0 }, <milliseconds>);
// Scroll 2 sec
$('html,body').animate({ scrollTop: 0 }, 2000);
// Scroll 5 sec
$('html,body').animate({ scrollTop: 0 }, 5000);

Jquery dialog sliding

http://jsfiddle.net/G5RP3/
I have made a div be a dialog through jQuery UI. It is empty at the moment, but what I want to do is make it slide from left to center, from outside the window. What it does instead, is it slides like a drawer is opened. I think I am close, but not sure how to do it.
JS
var speed = 2000;
$(document).ready(function () {
$('#loginmenu').dialog({
show: {
effect: 'slide',
direction: 'left',
speed: speed
},
hide: {
effect: 'slide',
direction: 'left',
speed: speed
},
modal: true
});
});
HTML
<div id="loginmenu"></div>
CSS
#loginmenu {
}
Here's a simple solution:
http://jsfiddle.net/MsS9z/1/
var speed = 2000;
$(document).ready(function () {
$('#loginmenu')
.on("dialogopen", function() {
var widget = $(this).dialog("widget");
var offset = widget.offset();
widget
.css("left", -widget.outerWidth() + "px")
.animate({ left: offset.left }, { duration: speed });
})
.dialog({
modal: true
});
});
When the dialog opens, this code will shift it outside of the screen, then animate the dialog back into place.
If you want to slide the dialog to the right on close, things get a bit more complicated:
http://jsfiddle.net/MsS9z/2/
var speed = 2000;
$(document).ready(function () {
$('#loginmenu')
.on("dialogopen", function() {
var widget = $(this).dialog("widget");
var offset = widget.offset();
widget
.css("left", -widget.outerWidth() + "px")
.animate({ left: offset.left }, { duration: speed });
})
.on("dialogbeforeclose", function() {
var dialog = $(this);
var widget = dialog.dialog("widget");
if (widget.data("dialog-closing") || widget.is(":animated")) {
widget.data("dialog-closing", false);
return true;
}
widget.data("dialog-closing", true);
var origOverflow = $("html").css("overflow-x");
$("html").css("overflow-x", "hidden");
widget.animate({ left: $(window).width() }, {
duration: speed,
complete: function() {
dialog.dialog("close");
$("html").css("overflow-x", origOverflow);
}
})
return false;
})
.dialog({
modal: true
});
});
Here we have to cancel the original dialog close, then trigger the animation, then allow the dialog to close normally. We also have to set the document's overflow-x to hidden so that the horizontal scrollbar doesn't appear.

I need to resize my search bar based on the window resizing and I need make a function for the search bar resizing code

I want to using the code that gets the screen size with the code that resizes the search bar together. At the moment all its doing is resizing the search bar on the biggest resolution. Here's a link to an example http://www.jsfiddle.net/1eddy87/R7kSA. You need to keep changing the size of the separator and running the code at different sizes to see the difference which is the issue but I just thought I should mention it.
this code gets the screen size:
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
this code gives me the size upon resizing the window:
$(document).ready(function(){
$(window).resize(function(){
window.x = x;
});
});
this code re sizes the search bar based on the screen size. I need to put this code that's doing the resizing into a function so I don't have keep reusing code.
if (window.x >= 1200) {
$('#search_bar_box').focus(function () {
$(this).animate({
width: '600px'
}, 500, function () {
// Animation complete.
});
});
$('#search_bar_box').blur(function () {
$(this).animate({
width: '100%'
}, 0.1, function () {
// Animation complete.
});
});
} else if (window.x >= 992 && window.x < 1200) {
$('#search_bar_box').focus(function () {
$(this).animate({
width: '350px'
}, 500, function () {
// Animation complete.
});
});
$('#search_bar_box').blur(function () {
$(this).animate({
width: '100%'
}, 0.1, function () {
// Animation complete.
});
});
} else if (window.x >= 768 && window.x < 992) {
$('#search_bar_box').focus(function () {
$(this).animate({
width: '100px'
}, 500, function () {
// Animation complete.
});
});
$('#search_bar_box').blur(function () {
$(this).animate({
width: '100%'
}, 0.1, function () {
// Animation complete.
});
});
} else {
//default
}
You need to execute your search-bar resize code on window resize() event, that's how I got your code working. See this jsiffdle: jsfiddle.net/R7kSA/3/
$(document).ready(function () {
$(window).resize(function () {
/* winWidth() is the function for getting the screen size.
set() is the function that handles the search bar resize and
accepts the argument value for 'x'
*/
set(winWidth());
}).trigger('resize');
});

The function starting too early

I'm building a contact system usin jQuery ajax. form's div has a height, so I thought that it will be nice if when you click on the input (OnFocus), the div will become bigger and when you will scroll up or down the div will return to it's regular height. The problem is that after clicking, the div become bigger and then immediately returns to it's regular height. here is my code:
var big = false,
lastpalce = "",
position = "";
function contectboxreturn() {
if (big) {
$("#contact").animate({
"height": "515px"
}, 400);
$("#showclosebutton").hide(fast);
big = false;
}
}
function contectboxresize() {
if (!big) {
big = true;
lastpalce = $(this).scrollTop();
position = $("#contact").offset();
$("html, body").animate({
scrollTop: position.top + "px"
}, 400);
$("#contact").animate({
"height": "100%"
}, 400);
$("#showclosebutton").show(fast);
$(function () {
$(window).scroll(function () {
if (position.top != $(this).scrollTop()) {
contectboxreturn();
}
});
});
}
}
Set Big to TRUE as a callback of your animation. Like so.
$("#contact").animate({
"height": "100%"
}, 400, function(){
big = true;
});
updated fiddle
Try placing your scroll event OUTSIDE your contectboxresize() function like this:
var big = false,
lastpalce = "",
position = "";
$(function () {
$(window).scroll(function () {
if (position.top != $(this).scrollTop()) {
contectboxreturn();
}
});
});
function contectboxreturn() {
if (big) {
$("#contact").animate({
"height": "515px"
}, 400);
$("#showclosebutton").hide(fast);
big = false;
}
}
function contectboxresize() {
if (!big) {
big = true;
lastpalce = $(this).scrollTop();
position = $("#contact").offset();
$("html, body").animate({
scrollTop: position.top + "px"
}, 400);
$("#contact").animate({
"height": "100%"
}, 400);
$("#showclosebutton").show(fast);
}
}

Categories