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?
Related
I noticed that in IE11 that mouseout isn't activating my desired functionality. It works fine in Chrome, Firefox and Safari. Does anyone know why this is and what the solution could be?
wheel[segment].mouseout( myHoverOut.bind(null, segment) )
icon[segment].mouseout( myHoverOut.bind(null, segment) )
Full Code: https://jsfiddle.net/8aue977o/
Working Wheel: (scroll to wheel) https://www.uk-cpi.com/services/innovation-integrator
Could use Pure JS, It's very simple : http://jsfiddle.net/qHfJD/76/
<script>
var myDiv = document.getElementById('foo');
myDiv.onmouseout = function() {
alert('left');
}
</script>
I am using video.js,
I am rendering video in two different browsers.
Chromium : Version 31.0.1650.63 Ubuntu 13.04 and
Mozilla Firefox : 26.0
I have given option of autoplay of video
HTML markup and Jq code is as below.
<script type="text/javascript">
$("video").on("ended", function(){
var vid = videojs($(this).attr("name"));
vid.controlBar.hide();
vid.bigPlayButton.show();
});
$("video").on("pause", function()
{
var vid = videojs($(this).attr("name"));
vid.bigPlayButton.show();
});
$("video").on("play", function(){
var vid = videojs($(this).attr("name"));
vid.controlBar.show();
vid.bigPlayButton.hide();
});
</script>
While video playing ends - firefox browser shows some spinner while chromium shows rectangular box to click to re play video.
Please tell why there is difference between behavior ?
How we can overcome this ?
You can try it with the videojs events by doing something like:
var activePlayers = videojs.players;
$.each( activePlayers, function(key,value) {
value.on('ended', function() {
this.controlBar.hide();
this.bigPlayButton.show();
this.loadingSpinner.hide();
});
});
This is rather quick and may a bit of tweaking mainly with using $.each vs a for( x in obj) and if jquery wraps value in a jquery object.
Aside: I know using anonymous functions inside loops is frowned upon, but this is to give you the idea.
I'm trying to disable an input with JavaScript or jQuery
//document.getElementById("monto").disabled=true;
$(document).ready(function(){
$("#monto").attr("disabled", "disabled");
});
The code works fine in chrome, Firefox, and some versions of IE, but doesn't work with IE 8,
also tried with Hide/show but doesn't work too.
I know the best solution is to upgrade, but my boss thinks our clients are too dumb to do that.
try this article from stackoverflow :)
var disableSelection = function(){
$("#elementId").prop("disabled", true);
};
var enableSelection = function(){
$("#elementId").prop("disabled", false);
};
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
In my website I have this javascript code, adding a vertical offset when in the url a specific section of the page is specified (#):
if (!!window.location.hash)
window.scrollBy(0,-60);
However this only works in Firefox... I'm pretty sure window.location.hash works in all browsers, that is, the symbol "sharp" is correctly detected in the url.
However, the -60 offset only works in Firefox... this is the url, could you give me some insight ?
http://patrickdiviacco.co.cc/#432
thanks
It seems to me that the default behavior is applied in a different order. So your code runs first, then the browser aligns the window according to the #hash. Push it to the event queue to run it afterwards.
if (typeof window.location.hash == "string") {
setTimeout(function(){ window.scrollBy(0, -60); }, 1);
}
I tested it in IE 7 and it works, also in FireFox and Chrome...
If this really don't work try using this:
function jumpScroll(amount) {
document.body.scrollLeft += amount;
}
jumpScoll(100);
or value which you want...