We Keep Coding

Run function() if appear in viewport ? jquery-viewport-checker

I use anime-js for create an animation. But, It is far in the page. I would like to launch my animation function when the section in which the item to be animated appears on the screen.
I tried a plugin that I like to use (jquery viewportchecker) but it does not seem to do that.
Can you help me ?
Thank you

I found a solution. The problem with your method is that the function repeats itself to infinity.
I create a little function for check if element is visible. With that, no plugin needed.
function checkVisible( elm, evale ) {
var evale;
evale = evale || "object visible";
var viewportHeight = $(window).height(), // Viewport Height
scrolltop = $(window).scrollTop(), // Scroll Top
y = $(elm).offset().top,
elementHeight = $(elm).height();
if (evale == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
if (evale == "above") return ((y < (viewportHeight + scrolltop)));
}
I also created a variable var counter = 0;. And as soon as the function is called, I increment by 1.
$(window).on('scroll',function() {
if (counter == 0){
if (checkVisible($('.frontend'))) {
// Your function here
}
}
}
At the first time the function will be called, counter will be 1, and thus, the function will not repeat. Thank you for your help !

jQuery.appear
This plugin implements custom appear/disappear events which are fired when an element became visible/invisible in the browser viewport.
https://github.com/morr/jquery.appear
$('someselector').on('appear', function(event, $all_appeared_elements) {
// this element is now inside browser viewport
});
$('someselector').on('disappear', function(event, $all_disappeared_elements) {
// this element is now outside browser viewport
});
Also this plugin provides custom jQuery filter for manual checking element appearance.
$('someselector').is(':appeared')

Have you tried using JQuery's on load method?
Something like
$(document).on('load', '.exampleClass', function() { //do stuff } )

onresize doesn't seem to work when in a loop (javascript)

I'm trying to call a function based on screen size inside a loop'.
The function works fine when the page is loaded, however, the content doesn't change when the window is resized.
Here's an example:
https://jsfiddle.net/celine305/BaNRq/27/
Any help would be much appreciated.
for (var i = 0; i < 2; i++) {
function red() {
$('#' + i + '').css('background', '#B60C0C')
.text('Screen Size RED');
}
function orange() {
$('#' + i + '').css('background', '#EBAE10')
.text('Screen Size ORANGE');
}
function green() {
$('#' + i + '').css('background', '#83ba2b')
.text('Screen Size GREEN');
}
var widths = [0, 500, 850];
function resizeFn() {
if (window.innerWidth >= widths[0] && window.innerWidth < widths[1]) {
red();
} else if (window.innerWidth >= widths[1] && window.innerWidth < widths[2]) {
orange();
} else {
green();
}
}
resizeFn();
window.onresize = resizeFn();
}

Move your functions outside of the for loop
Merge 3 functions to one
Use a jQuery listener instead of JavaScript since you're using jQuery already
// You could also assign classes and use $(".className") instead of loop
function changeColor(color) {
for(var i=0; i<2; i++){
$('#'+i+'').css('background',color).text('Screen Size' + color);
}
}
var widths = [0, 500, 850];
function resizeFn() {
if (window.innerWidth>=widths[0] &&window.innerWidth<widths[1]) {
changeColor('#B60C0C');
} else if (window.innerWidth>=widths[1] && window.innerWidth<widths[2]) {
changeColor('#EBAE10');
} else {
changeColor('#83ba2b');
}
}
resizeFn();
$(window).resize(function() {
console.log("resize");
resizeFn();
})
JSFiddle renders the content inside a div so your code was never detecting the resize. I added a container to detect the resize, but otherwise you should use $(window).
Fiddle: https://jsfiddle.net/BaNRq/29/

The whole point of your loop seems to be selecting the elements. You can do this much simpler by selecting all your elements with one query:
$("#1, #2")
Because you're doing EVERYTHING in the loop, you are redefining functions and are assigning the resize-function multiple times.
Oh, and by the way, you are not really assigning a function to the window.onresize event handler, but the return value of a function. Try assigning it without the trailing braces.

If you want to use the current code, you will likely have to move the function declarations outside of the for loop. See this article.
As a side note though, I would recommend moving away from javascript for handeling these style changes. CSS offers a good way to handle style changes for predetermined sizes in the form of media queries.

jQuery addClass not working on DOM fired from JS

Basically I have a menu HTML code that is injected into the DOM via a jQuery function, i.e.
$.get("/clients/nav_menu.html", function(data) {
$("nav").html(data);
$('#side-menu').metisMenu(); //menu plugin for Bootstrap
});
However, after changing the loading of menu to the above script, the Bootstrap distribution package (sb-admin-2) that came with the below lines of code failed during load only (resize continues to work fine) for the code marked (*******) below:
$(function() {
$(window).bind("load resize", function() {
topOffset = 50;
width = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width;
if (width < 768) {
$('div.navbar-collapse').addClass('collapse'); // *******
topOffset = 100;
} else {
$('div.navbar-collapse').removeClass('collapse');
}
height = ((this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height) - 1;
height = height - topOffset;
if (height < 1) height = 1;
if (height > topOffset) {
$("#page-wrapper").css("min-height", (height) + "px");
}
});
var url = window.location;
var element = $('ul.nav a').filter(function() {
return this.href == url;
}).addClass('active').parent().parent().addClass('in').parent();
if (element.is('li')) {
element.addClass('active');
}
});
The piece of code marked (*******) above fires during load and resize, and div.navbar-collapse resides in the menu HTML code that was injected as mentioned above. I just don't understand why it fails to modify the DOM element during load, but once I resize the screen width, the class 'collapse' gets added to the div.
What I've tried:
made sure that each time I reload the page, the screen size is less than 768px - didn't work;
bringing the code marked (*******) to the end of all my js scripts - didn't work;
bringing the code marked (*******) into the $.get callback right after the menu was loaded - didn't work;

Initializing a plugin AFTER a foreach loop

So I'm trying to implement stellar.js but it must be initialized after an each loop is finished. The loop must add data attributes to the images that are going to be made parallax by the plugin.
The images are in a list:
<ul>
<li class="item">
<div class="item-image" data-stellar-background-ratio="0.7" data-image="http://picjumbo.picjumbocom.netdna-cdn.com/wp-content/uploads/IMG_7706-1300x866.jpg"></div>
</li>
...
</ul>
I must add data-stellar-vertical-offset attribute to each of them that will offset the image by half of its height, so it can be vertically centered initially.
Here is the JS:
/* Inserting the background image */
$('.item-image').each(function () {
var $this = $(this);
$this.css('background-image', 'url(' + $this.data('image') + ')');
})
/* Creating loop that will run as many times as items are in there */
var items = $('.item-image').length;
var currentItem = 0;
$('.item-image').each(function () {
var $this = $(this);
/* Taking the origin height, halving it and putting it as offset so the image can be vertically aligned */
var img = new Image();
img.src = $(this).data('image');
img.onload = function () {
var H2 = this.height;
$this.attr('data-stellar-vertical-offset', -(H2 / 2));
}
currentItem++;
/* Initializing the plugin after every item is looped */
if (currentItem >= items) {
$.stellar();
}
})
However when the plugin is initialized it isn't using the data attribute. If it's put in a timeout like this:
if (currentItem >= items) {
setTimeout(function () {
$.stellar();
}, 10)
}
.. it works but it seems to me like an ugly hack. Is there a better way for this to be done?
Here is a jsfiddle: http://jsfiddle.net/9f2tc/1/

I believe what you want is to initialize stellar once after all the images have been downloaded. The simplest approach is to check each time in the onload handler:
img.onload = function () {
var H2 = this.height;
$this.attr('data-stellar-vertical-offset', -(H2 / 2))
if (++currentItem === items) {
$.stellar();
}
}
jsfiddle: http://jsfiddle.net/X6e9n/2/
However, there are issues with the onload event not firing for images in certain cases. See the caveats section on the jQuery page: http://api.jquery.com/load-event/ The problems listed apply to the load event itself not just jQuery's .load() See Javascript callback for knowing when an image is loaded for solutions. The first answer notes the handler should be attached before the src attribute is set, which you don't do here, but it doesn't seem to be a problem for me in this case.

JavaScript/jQuery onmouseover problem

I want that when mouse is over an image, an event should be triggered ONCE, and it should be triggered again only after mouse is out of that image and back again, and also at least 2 seconds passed.
My current function is called continuously (refreshcash) if I leave the mouse over my image
<img src="images/reficon.png" onmouseover="refreshcash()" onmouseout="normalimg()" id="cashrefresh"/>
function refreshcash() {
$("#showname").load('./includes/do_name.inc.php');
$("#cashrefresh").attr("src","images/reficonani.gif");
}
function normalimg() {
$("#cashrefresh").attr("src","images/reficon.png");
}
code update
This code seems to have a bug,but the algorithm is kinda logical
<script type="text/javascript">
var canhover = 1;
var timeok = 1;
function redotimeok() {
timeok = 1;
}
//
function onmenter()
{
if (canhover == 1 && timeok == 1)
{
enter();
canhover = 0;
}
}
//
function onmleave()
{
leave();
canhover = 1;
setTimeout(redotimeok(), 2000);
leave();
}
//
$('#cashrefresh').hover(onmenter(),onmleave());
function enter(){
$("#showname").load('./includes/do_name.inc.php');
$("#cashrefresh").attr("src","images/reficonani.gif");
}
function leave(){
$("#cashrefresh").attr("src","images/reficon.png");
}
</script>

Try the hover:
$('#cashrefresh').hover(function(){
$("#showname").load('./includes/do_name.inc.php');
$("#cashrefresh").attr("src","images/reficonani.gif");
}, function(){
$("#cashrefresh").attr("src","images/reficon.png");
});
And your image should look like:
<img src="images/reficon.png" id="cashrefresh"/>
Update:
Modify your code like this:
var e = null;
var l = null;
$('#cashrefresh').hover(function(){
e = setTimeout(enter, 2000)
}, function(){
l = setTimeout(leave, 2000)
});
function enter(){
$("#showname").load('./includes/do_name.inc.php');
$("#cashrefresh").attr("src","images/reficonani.gif");
clearTimeout(e);
}
function leave(){
$("#cashrefresh").attr("src","images/reficon.png");
clearTimeout(l);
}

Do you have the images cached in some way? If you replace them by their src attribute without specifying width/height elsewhere (best would be CSS) or having them readily available then the hovered box (img element) will collapse into a smaller (or no) box until the image has been loaded far enough for the browser to know the correct dimensions of the image to resize the box (which may affect other elements being adjusted to the image). The exact effect depends on the browser but you may lose the hover state causing the call of your mouseout function.
I assume that both images are the same size, so if you didn't already, you could try adding the dimensions to your CSS for #cashrefresh and see if that fixes the problem.
For the delay I would recommend using the jQuery timers plugin (or a similar one) which eases handling of timers compared to doing it on your own. You would probably want to give your timers names and try to stop older ones before you add the next one.