We Keep Coding

Javascript function is not working sometimes at certain level

I have this Javascript function for hover items. İt has to work under 958px but its not working. so how can I control that.
But when I resize page up and down, JS stops working.
What's wrong with my function? I am unable to figure it out.
$(document).ready(() => {
if ($(window).width() >958){
$('#group-subscription .owl-item').on('mouseenter', function(){
$(this).nextAll().addClass('has-positive-translate')
$(this).prevAll().addClass('has-negative-translate')
}).on('mouseleave', function() {
removeHasClasses()
})
function removeHasClasses() {
$('#group-subscription .owl-item').removeClass('has-negative-translate has-positive-translate slider-hover-bigger')
}
}
})

Your code is not related to resizing event, it only one time execute when a page is loaded and it is ready, All in all, you should use resize event instead of the ready event.
$(window).on('resize', function(){
var winx = $(this);
if (winx.height() >= 958) {
/* use your code here */
}
});

Call user defined jQuery function with JS

I use a jQuery window libray https://github.com/humaan/Modaal
which triggers events this way $("class of element").modaal({arg1, arg2,...});
--- I updated my question here to make it more general and used an iframe / Html instead of an external svg ---
To trigger an element e.g. in an external Html which is loaded within an iframe, I applied the following code to the iframe:
<iframe src="External.html" id="mainContent" onload="access()"></iframe>
which calls this function:
function access() {
var html = document.getElementById("mainContent").contentDocument.getElementById("IDofDIVelement");
html.addEventListener('click', function() {clicker();});
}
function clicker()
{
// console.log('hooray!');
$("#mainContent").contents().find("IDofDIVelement").modaal({});
//return false;
}
Actually it will only work on every second click. Any idea what I did not consider properly?
Best

You do not need to wait windows loading but iframe only:
$(function() {
$("#mainContent").bind("load",function(){
var myIframeElement = $(this).contents().find(".modaal");
myIframeElement.modaal({
content_source: '#iframe-content',
type: 'inline',
});
});
});

The reason why it did not work was that the iframe was not completely loaded, while jQuery tried to attach the function. As $(document).ready(function(){} did not work, the workaround was to initialize it with
$( window ).on( "load",function() {
$("#mainContent").contents().find("IDofDIVelement").modaal({});
});
This worked properly to attach the functionallity to an element within the iframe.
Actually modaal will vanish the envent handler after the overlay was opened and closed again.
So maybe someone wants to trigger an iframe element for modaal, too, here is a setup which would solve this issue.
(It can be optimised by #SvenLiivaks answer):
$(window).on("load", function() {
reload();
});
function reload() {
var length = $("#iframeID").contents().find("#IDofDIVelement").length;
// The following check will return 1, as the iframe exists.
if (length == 0) {
setTimeout(function() { reload() }, 500);
} else {
$("#iframeID").contents().find("#IDofDIVelement").modaal({
content_source: '#modalwrapper',
overlay_close: true,
after_close: function reattach() {
reload();
}
});
}
}

Functionality breaks when using toggle with 'slow' option

The problem is that when i use the toggle function without any options i.e default options the 'is(':visible')' on the item returns me the correct state.
However when i use toggle("slow"), it reveals incorrect state and always shows the item operated upon by the toggle as visible false. Of course i am checking that inside the callback function so as to be sure that the animation is complete.
please look at the below code
jQuery(document).ready(function () {
var h3 = jQuery("#myAccordion").find('h3');
jQuery("#myAccordion").find('h3').find('span').addClass("ui-state-active ui-icon");
jQuery.each(h3, function () {
jQuery(this).bind('click', function () {
jQuery(this).next('div').toggle("slow", "swing", callback);
});
});
});
function callback () {
if (jQuery(this).next('div').is(':visible')) {
alert('visible--' + jQuery(this).next('div').is(':visible'));
jQuery(this).find('span').removeClass("ui-state-default ui-icon").addClass("ui-state-active ui-icon");
}
else {
alert('visible--' + jQuery(this).next('div').is(':visible')); // always goes into this 'else' even though the item is visible.
jQuery(this).find('span').removeClass("ui-state-active ui-icon").addClass("ui-state-default ui-icon");
}
}
However the same works perfectly fine when not using the "slow" option with toggle.
Update 2:
Check this out here http://jsfiddle.net/tariquasar/7xt7D/2/
Any pointers...
Update 1: This is the fiddle http://jsfiddle.net/tariquasar/7xt7D/

The context this is not extended to the callback function too. You could try doing this. I have updated the jsfiddle (click here). Ill paste the same here.
jQuery(document).ready(function () {
var h3 = jQuery("#myAccordion").find('h3');
jQuery("#myAccordion").find('h3').find('span').addClass("ui-state-active ui-icon"); // first the item is visible
jQuery.each(h3, function () {
jQuery(this).bind('click', function () {
console.log(this);
jQuery(this).next('div').toggle("slow","swing",callback(this));
});
});
});
function callback (that) {
setTimeout( function () {
console.log(jQuery(that).next('div').is(':visible'));
if (jQuery(that).next('div').is(':visible')) {
alert('visible--' + jQuery(that).next('div').is(':visible'));
jQuery(that).find('span').removeClass("ui-state-default ui-icon").addClass("ui-state-active ui-icon");
}
else {
alert('visible--' + jQuery(that).next('div').is(':visible'));
jQuery(that).find('span').removeClass("ui-state-active ui-icon").addClass("ui-state-default ui-icon");
}
}, 1000);
}
I have added a SetTimeout to get the result you wanted. The callback function is called after the animation completes. Yes. But not after the CSS changes to display:none. CSS change happens a few millisecs later.
However the same works perfectly fine when not using the "slow" option with toggle.
I'm not really sure about how you got it working with options other than slow

jQuery custom slider previous next navigation jumping multiple steps

I am a jQuery (and general programming) learner and rather than using a plug-in I am trying to build my own Image slider/cycle, both to keep the code small, and to aid in learning.
My function cycles through the li items adding a '.show' class, then after a delay removes the class and adds to the next slide. This seems to work fine.
I have been struggling for a few days to add navigation which will either move previous or next and stop the timer.
As it stands, if I click the navigation immediately as the script starts the navigation will work as expected, but once the automatic function to show another slide has started the navigation will jump multiple steps and I have no idea why this is. I imaging somehow jQuery is caching the previous divs which have had a '.show' class perhaps?
I have simplified my code and presentation to illustrate this working up in a CodePen: codepen.io/MattyBalaam/pen/vuhyJ
Here is the complete script:
function gallery(galleryContainer) {
$.fn.nextOrFirst = function(selector) {
var next = this.next(selector);
return (next.length) ? next : this.prevAll(selector).last();
};
$.fn.prevOrLast = function(selector) {
var prev = this.prev(selector);
return (prev.length) ? prev : this.nextAll(selector).last();
};
galleryContainer.parent().prepend('<div class="previous">previous</div><div class="next">next</div>');
var crossFade = function (){
var slideTimeout;
function slideWait() {
galleryContainer.find('.show').removeClass('show').nextOrFirst().addClass('show');
slideTimeout = setTimeout(crossFade, 800);
}
function checkForClicks() {
$('div.previous').on('click', function(){
galleryContainer.find('.show').removeClass('show').prevOrLast().addClass('show');
window.clearTimeout(slideTimeout);
});
$('div.next').on('click', function(){
galleryContainer.find('.show').removeClass('show').nextOrFirst().addClass('show');
window.clearTimeout(slideTimeout);
});
}
checkForClicks();
slideWait();
};
galleryContainer.children(':first-child').addClass('show');
setTimeout(crossFade, 800);
}
gallery($('ul'));

The problem is, that you are calling function checkForClicks multiple times (in each animation iteration) and the event listener is added to buttons multiple times, so on each click you move forwards/backwards not just once, but once for each animation step, that was already displayed. Move the checkForClicks outside the crossFade function and it will be ok.
see the code:
http://codepen.io/anon/pen/ptkea
working code:
function gallery(galleryContainer) {
$.fn.nextOrFirst = function(selector) {
var next = this.next(selector);
return (next.length) ? next : this.prevAll(selector).last();
};
$.fn.prevOrLast = function(selector) {
var prev = this.prev(selector);
return (prev.length) ? prev : this.nextAll(selector).last();
};
galleryContainer.parent().prepend('<div class="previous">previous</div><div class="next">next</div>');
var slideTimeout;
var crossFade = function (){
function slideWait() {
galleryContainer.find('.show').removeClass('show').nextOrFirst().addClass('show');
slideTimeout = setTimeout(crossFade, 800);
}
slideWait();
};
galleryContainer.children(':first-child').addClass('show');
setTimeout(crossFade, 800);
function initButtonEvents() {
$('div.previous').on('click', function(){
galleryContainer.find('.show').removeClass('show').prevOrLast().addClass('show');
window.clearTimeout(slideTimeout);
});
$('div.next').on('click', function(){
galleryContainer.find('.show').removeClass('show').nextOrFirst().addClass('show');
window.clearTimeout(slideTimeout);
});
}
initButtonEvents();
}
gallery($('ul'));

see my script:
http://codepen.io/anon/pen/asvGc
If you declare the var's outside the functions it works fine.

Number, hover (etc) effect not work after Ajax Load More

I'm using Drupal 7 and get my content with View module on page. And my pager Views Load More module. And my thumbnail effect hover, shadow etc. Image hover using this code:
var hoverImg = '<div class="hoverimg"></div>';
$(".thumb").each(function(){
$(this).children("div").each(function(){
$(this).find("a").append(hoverImg);
});
});
$(".thumb div").hover(function() {
$(this).find(".hoverimg").animate({ opacity: 'toggle' });
});
$(".thumb").hover(function() {
$(this).find("div").each(function(){
$(this).find(".shadow").fadeOut(500);
});
});
And getting number on my current thumbnail. This code:
var c = '';
var d = '';
$('.view-content div.views-row').each(function(){
c = 0;
d = 0;
var i = 1;
d = $(this).find('.thumbimg').length;
$(this).find('.thumbimg').each(function(){
sayi=i++;
$(this).append('<div class="img_no">0'+sayi+'</div>');
});
});
Everything is OK. All effects on start page. But when click Load More button, my effects can't work another page.
How do i solve this problem? Thanks.

The reason why it stops working is due to the hover function (and your other scripts/functions) only works on existing elements. So if you add something with ajax, it wont apply to that unless you reload the script after the ajax load.
Another option is to use live() or on() (for the hover part. On is the new version of live, added in jQuery 1.7).
Live and on listens for any existing or future elements.
A live script would look something like this:
$(".yourElement").live({
mouseenter:
function () {
// Do something
},
mouseleave:
function () {
// Do something
},
mousemove:
function () {
// Do something
}
});