Develop Reference

jQuery bind/on load not working in Edge or iOS

I have a preloader working fine in Chrome, FF and IE11 but I'm having no luck getting it to work in Edge or iOS. It behaves the same in both those browsers - it seems 'bind' isn't working so the preloader isn't removed and the opacity of #lightSlider doesn't change.
I tried 'on' but that didn't help, and none of the solutions to resolve a possible caching issue seemed to help either. It does feel like it must be a caching issue but I'm at a loss how to fix it.
if ($('#front-page-hero').length ) {
var bgUrl = $('.page-header').css('background-image');
bgUrl = bgUrl.replace('url("','').replace('")','');
var bgFilename = bgUrl.substring(bgUrl.lastIndexOf('/')+1);
var loading = $('<div class="loader">Loading...</div>');
$('#custom_html-1').prepend(loading);
var image = $('<img>').attr('src', bgUrl);
image.bind('load', function(data){
setTimeout(function(){
loading.remove();
$('#lightSlider').css({ 'opacity' : '1' },0);
}, 1000);
});
};
Any ideas?

Alternatives to CSS:hover for iPad

I have many 300x200px divs(.contentUser) rendering representing users.
contentUser:hover(over)
->shows another div(.contetnButtonWrap) sliding in with buttons.
contentUser:hover(out)
-> contentButtonWrap slides out again
This works fine with CSS on any device I have tested so far except iPad(no hover). I tried with :active but it didn't work
So on iPad instead of hover(over) I use onclick:
function alternativeHover() {
var userDivs = document.getElementsByClassName('contentUser');
[].forEach.call(userDivs, function(e){
e.onclick = function() {
var target = e.getElementsByClassName('contentButtonWrap');
e.style.backgroundSize='450px 300px';
e.style.outline='3px solid green';
target[0].style.left=0;
};
});
};
I have 3 questions:
Is this really the best that can be done in this case?
How to handle the hover(out), its a div so it doesn't grab focus so I can not use onblur! And I would not like to have to check pixels on mousemove or anything like that.
Why doesn't hover work on iPad if it works on Android smartphones and iPhones?

window.onload DOM loading in popup, browser compatibility

I have HTML popup window and i want add text after opening window with spec. function:
var win = window.open('private.php', data.sender_id , 'width=300,height=400');
win.window.onload = function() {
//function for add text
//chrome and firefox fire, IE and Opera not
};
This work perfectly with Chrome and Firefox, but Opera and IE9 won't working. Please tell me
best way to do that with IE and Opera.
I try with:
$(document).ready(function(){
//function for add text
});
but same thing.
I found solution, but i wont know is there better solution then setTimeout???
Instead onload event i use:
setTimeout(function(){
//add text
},200);

index.php
function callback() {
// ...
return xxx;
}
private.php
$(document).read(function() {
var text_to_insert = window.opener.callback();
})

You may try this (tested in chrome, FF, IE but don't know about opera)
var win = window.open('private.php', data.sender_id , 'width=300,height=400');
win[win.addEventListener ? 'addEventListener' : 'attachEvent']((win.attachEvent ? 'on' : '') + 'load', myFunction, false);
function myFunction(){
win.focus();
win.document.write('loaded...');
}​
You may also try DOMContentLoaded event, if it works.
DEMO.

jQuery event.target not working in firefox and IE?

I'm working on making an image slider that loads the image the user clicks on using jQuery. I have it working great in Chrome but when I tried it in firefox and IE it's not loading the image at all. Here's my code:
$("img.clickable").click( function() {
$("#image_slider").animate({opacity:1.0,left:200},"slow");
$("#image_container").attr("src",event.target.src);
ihidden = false;
});
When I try running this in firefox or IE it just doesn't load the image at all. Any ideas? :)

You need to define the event in the arguments.
$("img.clickable").click( function(event) {
$("#image_slider").animate({opacity:1.0,left:200},"slow");
$("#image_container").attr("src",event.target.src);
ihidden = false;
});
Otherwise it is going to use window.event.

try using $(this).attr('src') instead of event.target.src

Try this :
target = (window.event) ? window.event.srcElement /* for IE */ : event.target

$("img.clickable").click( function(e) {
$("#image_slider").animate({opacity:1.0,left:200},"slow");
$("#image_container").attr("src",$(e.target).attr('src'));
ihidden = false;
});
This should work just fine

assigning dynamic cursor style to element using jquery in Opera

I'm trying to dynamically change the cursor style when the mouse is over an element. The cursor should be either "move" or "default" depending on a boolean returned by a method.
The code is something like this:
$("#elemId").mousemove(function(event) {
if(cursorShouldBeMove()) {
$(this).css({'cursor':'move'});
} else {
$(this).css({'cursor':'default'});
}
}
This code works like a charm in IE8,FF3,Chrome and Safari.
Only Opera fails to handle it correctly.
I'm using Opera 9.6.4
Does anyone have an idea how to solve this?
I prepared a sample for testing;
var cursorStatus = true;
setInterval(function() { cursorStatus = !cursorStatus; }, 500);
function cursorShouldBeMove() {
return cursorStatus;
}
$(function() {
$("#elemId").mousemove(
function(event) {
$(this).css("cursor", cursorShouldBeMove() ? "move" : "default");
}
);
});
If you move your mouse from outside of #elemId to inside of it for a few times you will see that the cursor will change. But if you position your mouse in #elemId and move your mouse, cursor not changes.
The code is very simple. I think it's a bug of Opera.
I tested this code also with;
Firefox 3.5.1 (worked)
Internet Explorer 7 (worked)
Google Chrome 2.0 (worked)
Safari 3.2 (worked)
(Windows versions)

Opera is real funny with cursors. I find that you have to move the mouse over the element twice before it actually works.
Can see here that you need to hover over the Hello World twice to get the cursor to change.
Same issue described here