jQuery function not working in Firefox - javascript

I have a basic "scroll to top" jQuery function for use on my site. This function works as I would like in Chrome, Opera, and IE though not in my Firefox (37.0.2).
The function is as follows:
function scrollUp(){
$("#to-top").hide();
$(window).bind('mousewheel', function(){
var num = $(window).scrollTop();
if (num > 100){
$("#to-top").show(500);
};
if (num < 100){
$("#to-top").hide();
};
$("#to-top").click(function(){
$("#to-top").hide();
$('body,html').stop().animate({scrollTop:0},1200);
});
});
}
scrollUp();
I have checked the inspect element boxes in Firefox but no errors are appearing.
For this to work the HTML is:
<a id="to-top">
<center><p>^ ^ ^</p><p>Scroll To Top</p></center>
</a>
<script src="../scripts/toTop.js">scrollUp()</script>
located at the bottom of the page before the closing body tag.
The HTML is not showing anything in firefox which means that the first line of the jQ function must be working, though for some reason after that it doesn't.
I originally had .on() instead of .bind() they functioned the same in the other browsers buy not firefox....
Any help is appreciated, thanks guys!

Use the scroll event and bind using .on
$(document).on('scroll', function () { /* your mousewheel code here */ });
If memory serves, Firefox doesn't like the mousewheel event. I'm pretty sure the scroll event should work though.
Also, you don't need to run $(window).bind every time you scrollUp(). That only needs to be done on $(document).ready

Related

Using a window.load function in Internet Explorer

I want to run some code after everything on the target page is done loading AND rendering. It was suggested to me to use the Window.load function and it is working perfectly in Firefox and Chrome. I just can't get it to work in IE. Is there another way of doing this?
Edit: Ok so here is what I have:
appAPI.ready(function($) {
if (appAPI.isMatchPages("192.168.1.156/test/*"))
{
$("body").css("display","none");
if ( $('.welcome p').text().indexOf("user") >= 0 )
{
if ( $('h1').text().indexOf("header") >= 0 )
{
//alert("Found data");
$('td:contains("testdata")').text("newdata");
}
}
$(window).load(function () {
$("body").css("display","block");
});
}
});
Basically before there was code flickering, I could see the data being changed as the page loaded so I asked for some advice and the solution I got was to set the body style to display:none and use window.load to set it back to block once everything is loaded. This works perfectly in Firefox and Chrome but not in IE. The actual code that changes the data works in IE tho.
You should have no issue with this in IE, I use it frequently when I need to ensure all resources have been downloaded:
$( window ).load(function() {
// Run code
});
"Run a function when the page is fully loaded including graphics." ref: http://api.jquery.com/load-event/

javascript doesn't run in IE8/9 but does when viewing console

I have a script that works fine in everything but IE8/9. The weird thing is, when I open the developer tools and console in IE to deb, and then refresh the page as it says to, the script runs fine. What am I missing? Any idea what IE doesn't like about this script?
One other note - the script doesn't load until the window loads as I need to measure the height of images, so maybe that is part of the problem?
Thanks for any help
$(window).load(function(){
function offsetElement(element, container){
if ( $(window).width() > 767 ) {
$(element).each(function(index,value){
var snapImage = $(this),
snapImageHeight = snapImage.height(),
containerHeight = snapImage.closest(container).outerHeight(),
topOffset = (containerHeight - snapImageHeight) / 2;
$(this).css({ 'top' : topOffset });
});
}
}
offsetElement('.snapshot', '.event');
offsetElement('.dot', '.event');
function activeSnap(){ return offsetElement('.snapshot', '.event'); }
function activeDot(){ return offsetElement('.dot', '.event'); }
$(window).resize(function(){
activeSnap();
activeDot();
});
});
$(window).load() should be using the built in onload function so that shouldn't be the problem. It could be your jQuery version, jQuery 2.X does not support Internet Explorer 6, 7, or 8. Make sure you're using jQuery 1.X for compatibility
Use $(document).ready() instead of $(window).load().
which over of jQuery are you using? have you try using window.onload
see if IE works with it? – jasonslyvia 35 mins ago
Thanks #jasonslyvia, all I did was replace $(window).load for window.onload and it works fine now.

Android WebView JavaScript onClick Bug

I have some JavaScript which adds some CSS when a button is clicked using the onClick() event. This works perfectly in all the browsers that have tested (Safari, Firefox, Chrome etc), and also works on all mobiles including within the iOS UIWebView object.
However although it works perfectly in the Google Chrome browser on an android phone it does not work within the Android WebView object. Nothing happens at all.
Changing it from an onClick() event to a touchstart() event works.
Also adding alert() inside the onClick() works too, it just seems that the onClick() event is incapable of adding CSS styling inside the Android WebView object
What the hell is going on, is this some kind of bug, it seems to happen on every Android mobile I have test on, all with a different OS version :S
Here is the code I have been using
if (login) {
login.addEvent('click', function(e){
e.stopPropagation();
$('login_items_wrapper').setStyle('opacity', '0');
$('loading_content_login').show();
});
}
Can anyone help??
I tried this "duplicate version" in nature JS and it's work for me:
if (login) {
login.onclick = myFunc();
login.addEventListener('click', function() {
myFunc();
});
}
function myFunc() {
$('.login_items_wrapper').setStyle('opacity', '0');
$('.loading_content_login').show();
}
You need to change
$('login_items_wrapper').setStyle('opacity', '0');
$('loading_content_login').show();
to
$('.login_items_wrapper').setStyle('opacity', '0');
$('.loading_content_login').show();
or
$('#login_items_wrapper').setStyle('opacity', '0');
$('#loading_content_login').show();
As you are not correctly referencing the elements.

How can I tell if a page has jumped to the anchor (#) in JavaScript?

I have some JavaScript that can appear on many different pages. Sometimes those pages have been accessed via a URL containing an anchor reference (#comment-100, for instance). In those cases I want the JavaScript to delay executing until after the window has jumped. Right now I'm just using a delay but that's pretty hackish and obviously doesn't work in all cases. I can't seem to find any sort of DOM event that corresponds to the window "jump".
Aside from the simple delay, the only solution I've come up with is to have the JS look for the anchor in the URL and, if it finds one, watch for changes in scrollTop. But that seems buggy, and I'm not 100% sure that my script will always get fired before the scrolling happens so then it would only run if the user manually scrolled the page. Anyhow, I don't really like the solution and would prefer something more event driven. Any suggestions?
Edit to clarify:
I'm not trying to detect a hash change. Take the following example:
Page index.php contains a link to post.php#comment-1
User clicks the link to post.php#comment-1
post.php#comment-1 loads
$(document).ready fires
Not long later the browser scrolls down to #comment-1
I'm trying to reliably detect when step 5 happens.
You can check window.onhashchange in modern browsers. If you want cross compatible, check out http://benalman.com/projects/jquery-hashchange-plugin/
This page has more info on window.onhashchange as well.
EDIT: You basically replace all anchor names with a similar linking convention, and then use .scrollTo to handle the scrolling:
$(document).ready(function () {
// replace # with #_ in all links containing #
$('a[href*=#]').each(function () {
$(this).attr('href', $(this).attr('href').replace('#', '#_'));
});
// scrollTo if #_ found
hashname = window.location.hash.replace('#_', '');
// find element to scroll to (<a name=""> or anything with particular id)
elem = $('a[name="' + hashname + '"],#' + hashname);
if(elem) {
$(document).scrollTo(elem, 800,{onAfter:function(){
//put after scroll code here }});
}
});
See jQuery: Scroll to anchor when calling URL, replace browsers behaviour for more info.
Seems like you could use window.onscroll. I tested this code just now:
<a name="end" />
<script type="text/javascript">
window.onscroll = function (e) {
alert("scrolled");
}
</script>
which seems to work.
Edit: Hm, it doesn't work in IE8. It works in both Firefox and Chrome though.
Edit: jQuery has a .scroll() handler, but it fires before scrolling on IE and doesn't seem to work for Chrome or Firefox.
To detect when the element appears on the screen, use the appear plugin:
$('#comment-1').appear(function() {
$(this).text('scrolled');
});

jQuery iframe scroll event (IE)

Can't listen to the scroll event in Internet Explorer 7.
I've tried:
$("#myIframe").scroll(function() { alert('hi'); })
Works for FF:
$($("#myIframe").contents().get(0)).scroll(function() { alert('hi'); })
Getting keypresses work:
$($("#myIframe").contents().get(0)).keydown(function() { alert('hi'); })
As much as I love jQuery. I can't get this to work. However, I tried this in plain old javascript and it worked just fine in IE, FF,Safari and Chrome.
<script type="text/javascript">
window.onload = function() {
var frm = document.getElementById("myIframe").contentWindow;
frm.onscroll = function(){
alert("EUREKA");
}
}
</script>
EDIT: The following works in FF, Safari and Chrome when using window.load(). When using document.ready it only works in FF. For whatever reason it doesn't work in IE8 in either event.
$(window).load(function(){
$($('#myIframe').contents()).scroll(function(){
alert('frame scrolled in jquery');
});
});
I know it's an old thread, but some people could find it useful.
$(document).scroll() can be replaced by $(window).scroll(), and it has worked for me so far.
Try this:
2 things must happen before you can traverse the dom of a nested browsing context.
You need to know that the iframe exists, taken care of with the document ready event.
And you need to make sure that the iframe has loaded.
ie:
$(document).ready(function(){
// #page is the id of the iframe
$('#page').load(function(){
// $(this)[0].contentWindow is the window of your nested browsing context/ iframe
$($(this)[0].contentWindow).scroll(function(){
console.log($(this).scrollTop());
});
});
});
One thing to note is that this will definitely not work cross browser in Firefox.
Put this on the parent:
var childScrollHandler = function () {
alert('Scrolling going on');
}
And then put this on the iframe content:
$(document).bind('scroll', function(ev){
parent.childScrollHandler(ev);
});
replace $(document) by whatever element you are trying to listen into.

Categories