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 */
}
});

$(document).ready(function() with Meteor JS templates

I have a template I've deeply integrated with Meteor. It uses a scripts.js file that runs a bunch of commands after $(document).ready and $(window).load.
I put scripts.js inside of client/compatibility, and it works only if I do a hard refresh of the template. Otherwise, the template doesn't render and the functions don't execute.
Specifically, this code:
// Append .background-image-holder <img>'s as CSS backgrounds
$('.background-image-holder').each(function() {
var imgSrc = $(this).children('img').attr('src');
$(this).css('background', 'url("' + imgSrc + '")');
$(this).children('img').hide();
$(this).css('background-position', 'initial');
});
Much appreciated if you know how I should take it from here.

If you want a function to fire off when the DOM is loaded and all images, use this: (be forewarned, this is in ES6)
let imgCount;
let imgTally = 0;
Template.myTemplate.onRendered(function () {
this.autorun(() => {
if (this.subscriptionsReady()) {
Tracker.afterFlush(() => {
imgCount = this.$('img').length;
});
}
});
});
Template.myTemplate.events({
'load img': function (event, template) {
if (++imgTally >= imgCount) {
(template.view.template.imagesLoaded.bind(template))();
}
}
});
Then you just need to declare imagesLoaded which will get fired off when all images are done.
Template.myTemplate.imagesLoaded = function () {
// do something
};

Place this stuff in the onRendered function of the template.
Template.<name>.onRendered(function(){
//do your jquery business here!
});
For more info check the docs

Script not loaded in IE9

I've been troubleshooting this problem with no luck. I'm not sure why my jQuery code isn't loaded in IE9. It's quite huge but it just basically detects svg docs in the DOM and manipulate them. Basically, this is how my code looks:
jQuery(document).ready(function($) {
// init panzoom
initPanZoom();
function initPanZoom() {
// get svg containers for each main tab
var svgs = [$("#pcb").find("svg"), $("#gerber").find("svg")];
$(".schematic-sheet").each(function(){
svgs.push($(this).find("svg"));
});
var objPlaceholders = [];
$.map(svgs, function(obj, index){
objPlaceholders[index] = new PanZoom({
svg: obj[0],
viewportClass: "svgscale",
userViewport: $("#user-viewport")[0]
});
obj.closest("div").find('.zoom-in').on('click', function(e){
e.preventDefault();
objPlaceholders[index].handleMouseClick(1.5);
});
obj.closest("div").find('.zoom-out').on('click', function(e){
e.preventDefault();
objPlaceholders[index].handleMouseClick(-1.5);
});
obj.closest("div").find('.reset').on('click', function(e){
e.preventDefault();
objPlaceholders[index].handleMouseClick(0);
});
});
}
});
The weirdest thing is at first time you load it, initPanZoom() isn't called at all. After a few minutes, when you refresh, it's then called. So there must be something wrong I don't know. Please note that this only manifests in IE9.
UPDATE
I should also note that this code is loaded on a page that's inside an iframe. And I noticed that viewing the page directly in the browser sometimes resolves the issue.

As you are using jQuery(document).ready(function($) and later changing that to $ so, please change it to $ i.e $( document ).ready(function() {
Another thing you care calling that function into the $( document ).ready(function() { so you need to cut the whole function data out from the function initPanZoom() { } and use it directly. i.e.
$( document ).ready(function()
{
// get svg containers for each main tab
var svgs = [$("#pcb").find("svg"), $("#gerber").find("svg")];
$(".schematic-sheet").each(function(){
svgs.push($(this).find("svg"));
});
var objPlaceholders = [];
$.map(svgs, function(obj, index){
objPlaceholders[index] = new PanZoom({
svg: obj[0],
viewportClass: "svgscale",
userViewport: $("#user-viewport")[0]
});
obj.closest("div").find('.zoom-in').on('click', function(e){
e.preventDefault();
objPlaceholders[index].handleMouseClick(1.5);
});
obj.closest("div").find('.zoom-out').on('click', function(e){
e.preventDefault();
objPlaceholders[index].handleMouseClick(-1.5);
});
obj.closest("div").find('.reset').on('click', function(e){
e.preventDefault();
objPlaceholders[index].handleMouseClick(0);
});
});
});

random li (list) with jQuery before page get loaded

how I can random a list with jQuery before page get loaded?
i found this example on the web: http://whatanswered.com/websites-javascript/random-elements-using-jquery.php
(you must scroll down a bit to see)
but it works only after mouse press the button. *this is my problem, i need it to work atomatically before the page is getting loaded.
Any ideas?
I copied the code in this FIDDLE, if anyone would like to help, it might be usefull!
$(function() {
$('button').click(function() {
$("div.list").randomize("div.cat");
});
});
(function($) {
$.fn.randomize = function(childElem) {
return this.each(function() {
var $this = $(this);
var elems = $this.children(childElem);
elems.sort(function() { return (Math.round(Math.random())-0.8); });
$this.remove(childElem);
for(var i=0; i < elems.length; i++)
$this.append(elems[i]);
});
}
})(jQuery);

You can just call the randomize plugin when the page loads - be aware though the plugin needs to have been loaded before hand:
$(function() {
$("div.list").randomize("div.cat");
});
Updated fiddle: http://jsfiddle.net/yNChm/1/

The easiest way is to call the randomize() function after the document.ready event has fired:
$(document).ready(function() {
$("div.list").randomize("div.cat");
});

You should be able to accomplish this by doing a $(window).ready, or something along those lines:
$(function() {
console.log('Yo');
$("div.list").randomize("div.cat");
});
Make sure you register the plugin first!

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