We Keep Coding

Fire event after scrolling to a specific div or id

I've searched a lot these days but i didn't manage to solve my problem.
I have the script below which is a simple counter, that counts some stats starting from 0. It starts when my page loads. I would like to fire this event when i scroll to a specific div or id, but only once. I saw a lot examples with .one() method etc. but i didn't find out the proper solution.
Here is my script.
<script type="text/javascript">
$.fn.jQuerySimpleCounter = function( options ) {
var settings = $.extend({
start: 0,
end: 100,
easing: 'swing',
duration: 500,
complete: ''
}, options );
var thisElement = $(this);
$({count: settings.start}).animate({count: settings.end}, {
duration: settings.duration,
easing: settings.easing,
step: function() {
var mathCount = Math.ceil(this.count);
thisElement.text(mathCount);
},
complete: settings.complete
});
};
$('.number1').jQuerySimpleCounter({end: 14,duration: 2899});
$('.number2').jQuerySimpleCounter({end: 350,duration: 3300});
$('.number3').jQuerySimpleCounter({end: 450,duration: 4000});
$('.number4').jQuerySimpleCounter({end: 7,duration: 2500});
</script>
So what should i add to trigger it after reaching a certain div or id...?

I managed to find a "good" solution that works for me. doing the below "not so good" thing. :) Thanks Nikolas for your help.
<script type="text/javascript">
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
var one = $('.tworow').position().top;
var two = $('.endrow').position().top;
if (scroll > one & scroll < two) {
$.fn.jQuerySimpleCounter = function( options ) {
var settings = $.extend({
start: 0,
end: 100,
easing: 'swing',
duration: 500,
complete: ''
}, options );
var thisElement = $(this);
$({count: settings.start}).animate({count: settings.end}, {
duration: settings.duration,
easing: settings.easing,
step: function() {
var mathCount = Math.ceil(this.count);
thisElement.text(mathCount);
},
complete: settings.complete
});
};
$('.number1').jQuerySimpleCounter({end: 14,duration: 2899});
$('.number2').jQuerySimpleCounter({end: 350,duration: 3300});
$('.number3').jQuerySimpleCounter({end: 450,duration: 4000});
$('.number4').jQuerySimpleCounter({end: 7,duration: 2500});
};
});
When the scroll reaches a certain div it starts, and after that i put another div where the event should end, controlling it with an if condition. Now the area of the page that triggers the event is a very small "area" between 2 divs.

This should give you the result you're looking for:
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
var one = $('element').position().top;
var count = 0;
if (scroll > one) {
var newCount = count + 1;
if (newCount === 1) {
//do something
};
};
});

Make Javascript event happen only when scrolled to

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

height set to "auto" not working with JS animate

I've tried to set the height to "auto" in the code below in order for the DIV to adapt its size based on the content. Unfortunately that doesn't work. (no issue if I set the height in px). Any idea why and how to fix this? Many thanks
Fiddle HERE.
JS
$("a").click(function () {
var page = $(this).data("page");
if ($('div:animated').id != page) {
var active = $(".fold.active");
// if there is visible fold element on page (user already clicked at least once on link)
if (active.length) {
active.animate({
width: "0"
}, 200)
.animate({
height: "0"
}, 200, function () {
// this happens after above animations are complete
$(this).removeClass("active");
})
// clicking for the first time
}
if (active.attr("id") != page) {
$("#" + page)
.addClass("active")
.animate({
height: "auto"
}, 1000, 'linear')
.animate({
width: "200px"
}, 400, 'linear')
}
}
});

you need to calculate the height for the jQuery animate() to take place
demo - http://jsfiddle.net/7hcsv5dn/
var el = $("#" + page)
autoHeight = el.height(),
$("#" + page)
.addClass("active")
.animate({
height: autoHeight
}, 1000, function () {
el.height('auto');
})
.animate({
width: "200px"
}, 400, 'linear')

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');
});

Dialog notification like in the facebook

I am trying to do a notification like the facebook:
when a friend posted something on your timeline,
a dialog is displayed in the left bottom of the page. it fades in, stay 4 seconds and then fades out.
if there are more then one dialog, the second will displayed above the previous one, the third above the second, etc..
In addition, I didn't succeed to do a dialog that seems like the dialog of facebook.
this is my jsfiddle: http://jsfiddle.net/alonshmiel/C7yNs/
html:
<div class="dialog"></div>
javascript:
function dialog(mytext) {
$(".dialog").text(mytext);
jQuery(".dialog").dialog({
autoOpen: true,
modal: false,
position: ['left', 'bottom'],
show: "fade",
hide: "fade",
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery('.dialog').dialog('close');
})
}
});
$("#message").fadeTo('slow', 50, function() {
$("#message").dialog('close');
});
}
$(document).ready(function() {
dialog('window1');
setTimeout(function(){dialog('window2')},3000);
});
and this is an example for a notification. it is displayed in the left bottom of the page:
any help appreciated!

Finaly i am ready :)
http://jsfiddle.net/dimitardanailov/hb7gf/3/
You need :
Create variable and asign dialog every time
In close function you must to delete this dialog. Because .dialog('close') only hide this dialog
Calculate and set top position
jQuery
var bottom = 545, top = 0, height = 150;
function dialog(mytext) {
var myDialog = $('<div/>');
myDialog.addClass('js-notice');
myDialog.text(mytext);
top = $('.js-notice').length * height;
myDialog.dialog({
autoOpen: false,
modal: false,
show: "fade",
hide: "fade",
open: function(){
var tempTop = bottom - top;
if (tempTop < 0) {
tempTop = 0;
}
$(this).parent().css({'top' : tempTop + 'px', 'border' : '1px solid red'});
setTimeout(function()
{
myDialog.dialog('close');
}, 4000);
},
close : function() {
top -= height;
if (top < 0) {
top = 0;
}
$(this).remove();
$('.js-notice').each(function(i) {
var tempTop = bottom - (i * height);
console.log($('.js-notice').length, tempTop);
if (tempTop < 0) {
tempTop = 0;
}
$(this).parent().css({'top' : tempTop + 'px', 'border' : '1px solid green'});
});
}
});
myDialog.dialog("option", "position", {at: "left bottom"});
myDialog.dialog('open');
}
$(document).ready(function() {
dialog('window1');
setTimeout(function(){dialog('window2')},3000);
setTimeout(function(){dialog('window3')},6000);
});