I'm using the scrollTo jquery library in a page I'm building, and it works with Chrome, Safari, and IE 8/9, but not with firefox. Firebug tells me,
TypeError: $("#wrapper").scrollTo is not a function
Here is the line that includes the scrollTo library
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
Here is the function where I use scrollTo
function scrollPage(currentpage,scrollpage) {
$(scrollpage).find('.text').fadeOut();
$(currentpage).find('.text').fadeOut( function(){
$('#wrapper').scrollTo( scrollpage, 1500, {
onAfter:function(){
$(scrollpage).find('.text').fadeIn();
}
});
});
}
Why would firefox not think scrollTo was a function, while all other browsers I've tried do?
EDIT: It seems that my files work on other computers, but not on my current install of firefox. I am going to re-install and see that helps.
SOLUTION:
Well, it seems a popup blocker caused a conflict! The OP found that Kaspersky installed a security add on in firefox, and was blocking scrollTo.
More: http://github.com/mootools/mootools-core/issues/2202
ORIGINAL POST:
I sometimes get that error when my jQuery code is not enclosed in a $(document).ready(function() {...your jquery statements here ...}); block.
Your function doesn't have to be inside doc ready but the statement that calls it should be.
Works for me (fiddle). Did you include jQuery in your html?
This is how you can do it (BEFORE your ScrollTo library, of course):
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
Instead of using scrollTo I used scrollIntoView and it worked in FireFox, Chrome and IE.
Example :
var element = document.querySelector('.navbar-brand');
element.scrollIntoView();
Related
I've got a weird problem. I'm using Bootstrap for a website that has to be optimized for IE8. When i test the html prototype in a real IE8 (no IE emulation) the javascript seems to be executed before the website is rendered.
To prevent this I placed the javascript at the bottom of the body and the script is surrounded by a window load function.
Do i miss something? I don't want to use a SetTimeout.
A short js code example.
$(window).load(function() {
// for example a function that resets the sliders offset
function reset_slider() {
$('.slider-main').css({'margin-top': '0px'});
}
reset_slider();
}
All Browsers beside IE8 execute this script after the site is rendered.
Thanks in advance
Marcus
Set your js function to load after the page has.
window.onload = yourfunction
or you could use:
<body onload="yourfunction();">
The following is a simple test case to demonstrate what I'm trying to do:
<html>
<head>
<title>Test</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(":target").css('color', 'red');
});
</script>
<ul>
<li id="one">One</li>
<li id="two">Two</li>
<li id="three">Three</li>
</ul>
</body>
</html>
The idea is to do something through jQuery/Javascript to the targetted item, when something is targetted (for example, test.html#two).
This works as I expect it to in Firefox and IE 10, but not in Chrome, Opera or Safari, which leaves me wondering if this is a bug in some browsers, if what I'm trying to do is somehow wrong, or if I've run afoul of an inadequately precise part of some specification or other.
If I change the jQuery code to do
alert($(":target").length);
it becomes apparent that Chrome, Opera and Safari can't find the :target element during document.ready(), but calling the same code later (via console or function attached to a click event) does find the elements.
When should :target become accessible to JS?
This was posted as a comment but was later removed, you can try waiting for the window load event:
$(window).on('load hashchange', function(){
$(':target').css('color', 'red');
});
This for me produced mixed results on Chrome, it worked when doing a page refresh (F5) but not when hitting enter in the address bar.
I don't know if there's any way to handle this correctly on page load using the :target selector but you could always get the hash value and use it as your selector:
$(window).on('load hashchange', function(){
var target = window.location.hash;
$(target).css('color', 'red');
});
UPDATE
I've been doing some research on the issue plus some tests and I have a couple of insights to share:
First off, we need to understand that when calling $(':target') jQuery internally makes use of querySelectorAll(':target') which means it's directly related to the CSS specification of the pseudo-class, but why isn't working inside document.ready()?
Well, I found that wrapping the code inside setTimeout(fn,0) actually makes the selector available:
$(document).ready(function(){
setTimeout(function(){
$(':target').css('color', 'red'); //THIS WORKS
},0);
});
You can read this answer for an explanation on how adding a zero-ms timeout actually makes a difference, but basically it allows the browser to complete other non-javascript related tasks (in which we would find making the actual CSS pseudo-class available for query). I believe Firefox somehow manages its internal processes differently and that's why the code works there without the need for a timeout.
Now I also discovered that jQuery's internal sizzle selector engine provides a fallback for browsers that do not support CSS :target pseudo-class, which you can use inside document.ready() without issue:
$(document).ready(function(){
$(':target()').css('color', 'red');
});
This works because instead of relying on the CSS class it is a javascript implementation that makes use of the hash property on the window.location object, internally it is defined as follows:
"target": function( elem ) {
var hash = window.location && window.location.hash;
return hash && hash.slice( 1 ) === elem.id;
}
The only think you should note is that this function will go through every element on the page if it's not passed a selector like :target(div), so I believe using the workaround I provided earlier would still be a better option than this.
Because the page is not been reloaded. You need bind it to hashchange:
$(window).on('hashchange', function(){
$(":target").css('color', 'red');
});
http://jsfiddle.net/sXsYx/
Notice that you have much more work to make it right, maybe combine it with $(document).ready
you can use css3 target selector for styling work
:target
{
color:red;
}
Since there is no specialized logic in your example (if statements or such), why don't you just do the styling in CSS? The :target pseudo-class is a CSS3 selector.
:target {
color: red;
}
Note that this will work in all modern browsers, and even some very old browsers (Chrome 1 and Firefox 1.3, for instance), but with Internet Explorer it is only supported starting from version 9.
You can also do it in both places if you wish (CSS and JavaScript), however the JavaScript would seem redundant unless you specifically need IE <= 8 compatibility.
I've noticed that you are using jQuery version 1.10.1, which retains support for IE <= 8. Is that important? If not you can also move to jQuery 2.0.2 (latest version at time of writing).
You should do like this
$("li:target")
This will select the element. This is the better way
Refer this please,
http://api.jquery.com/target-selector/
Or you should remove document ready and put the script at the end of the html document
I am using the .load() function like this:
<script>
$(document).ready(function() {
$.ajaxSetup({ cache: false });
$("#id").load('file.php');
var refreshId = setInterval(function() {
$("#id").load('file.php?randval='+ Math.random());
}, 4000);
});
</script>
It works perfectly in FF and Chrome. It also works perfectly in IE7.
BUT:
It displays an error message in the bottom bar of IE7 which says:
The object does not support this property or method.
I guess this is because IE7 doesn't support the .load() function.
Is there any way to get rid of this message? It looks really ugly and I'm not sure my boss will approve.
EDIT:
I found the reason!
It was because I used the online version of jQuery.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
It works fine if I switch to a local copy of jQuery.
<script type="text/javascript" src="custom/js/jquery-1.7.1.js"></script>
maybe check if your function is a function.
if(typeof $("#id").load == 'function')
or replace it with a $.get
$.get("file.php", function (data) {
like the following post jQuery's .load() not working in IE - but fine in Firefox, Chrome and Safari
I found the reason!
It was because I used the online version of jQuery.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
It works fine if I switch to a local copy of jQuery.
<script type="text/javascript" src="custom/js/jquery-1.7.1.js"></script>
Ok, I've looked through all the questions regarding this and I've tried several of the suggestions to no avail, so I'm hoping someone can shed more light on my problem.
OUTLINE OF THE ISSUE:
I'm running two Nivo sliders in a tabbed box. The code I have works in all the normal browsers, but some reason IE7 doesn't like the code I have and won't register the .click(function(e) when the tab is selected.
HERE IS THE CODE:
Part 1 - this loads the slider gallery on page load on the first tab:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Part 2 - this is one IE7 has an issue with. This is for the other tabs so the gallery won't load until the tab is clicked. For some reason IE7 doesn't like this:
<script type="text/javascript">
$(document).ready(function(){
$('#gallery3-link').click(function(e){
$('#gallery1').nivoSlider();
return false;
});
});
</script>
THIS IS WHAT I'VE TRIED SO FAR:
I've tried using the $("#ClickMe").live('click', function() which didn't work as well as the $("body").delegate("p", "click", function() which were the two main solutions I saw people using to get this to work in IE7. When I was debugging I also set an alert to make sure IE was registering the click function:
$('#target').click(function() {
alert('Handler for .click() called.');
});
This had no effect. When you clicked on the tab, it didn't alert which confirmed the click function wasn't working. I've spent quite a while digging around for a solution to this and am plum out of resources. I thought it might something with the code, or some other work around - most of the sites I referenced were from circa 2006 or 2007. Not that JS has changed that much, but I was hoping maybe someone found a simplier solution in the last 4 years.
any help would greatly be appreciated.
D
Without seeing what you're actually working with, possibly you could try preventDefault() instead of return false;
<script type="text/javascript">
$(document).ready(function(){
$('#gallery3-link').click(function(e){
e.preventDefault();
$('#gallery1').nivoSlider();
});
});
</script>
I am guessing it is an error before that, that is causing the issue. Are there any errors on the page? Have you tried putting a simple alert('test') where the click function is set? If so, does it work?
EDIT:
From the other things you reference which I see when I did a search is the person was using IETester and it worked fine in regular IE7 and IE8. Are you using a real version of IE7?
The best solution I found was to simply load all the galleries on page load using the:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
It does add some time to the page load time - just about a 1/2 second more, but it solves the problem in IE7.
Thanks for everybody's help in this.
D
I just ran into this same bug, none of the other answers here were satisfactory. I solved this myself by using
$('body').click(function() { ... });
I have a website using the prootype framework and I am looking to use a jquery plugin. Everything works just not in IE8. It works in ie7 which amazes me. Any idea what maybe wrong?
IE8 gives me object doesnt support this property or method where line jQuery.noConflict(); is
<script src="/my/docs/jquery.js" type="text/javascript"></script>
<script src="/my/docs/jquery.simplyscroll.js" type="text/javascript"> </script>
<script type="text/javascript">
jQuery.noConflict();
function OpenUp(sURL){
window.open(sURL,null,'height=560,width=820,status=yes,toolbar=yes,menubar=yes,location=yes,resizable=yes,scrollbars=yes',false);
}
jQuery(document).ready(function($) {
$("head").append("<link>");
css = $("head").children(":last");
css.attr({
rel: "stylesheet",
type: "text/css",
href: "/my/docs/jquery.simplyscroll.css"
});
$("#scroller").simplyScroll({
autoMode: 'loop',
framerate: 1,
speed: 1
});
});
</script>
I also tired the following: var $j = jQuery.noConflict(); var j = jQuery.noConflict();
everythig works just not in IE8 alone.
I've run into this also using jQuery-1.4.4.js. Everything works fine except in IE8. IE8 does not recognize jQuery() anything. I was able to resolve the problem by loading jQuery and running $.noconflict() prior to loading Prototype and it all runs fine on all my test browsers including IE8. This sequence is contrary to the jQuery documentation and therefore I'm nervous about it. Can't find anything on the jQuery site about it.
t22harris
The only way I was able to fix this, for IE8 (which was the only one with the problem) and other browsers was to put jQuery and the noConflict() call in the head immediately after initializing the other library. Like so:
<script type="text/javascript" src="/path/to/prototype.js"></script>
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript">var $j = jQuery.noConflict(); </script>
... followed by any other scripts that use either jQuery or Prototype.
I've been having a similar problem. The solution that I'm currently using is to save the $ variable in a temporary variable, loading jquery(I'm loading jquery from js code), running jquery dependent code (with jQuery.noConflict), the setting the $ variable back.
It's dirty, but it seem to have done the trick for me.
My function which adds jquery (if necessary) is:
function getJQueryAndGo(callback) {
var thisPageUsingOtherJSLibrary = false;
var tempDollar = $;
// Only do anything if jQuery isn't defined
if (typeof jQuery == 'undefined') {
if (typeof $ == 'function') {
thisPageUsingOtherJSLibrary = true;
}
loadToHead('script','http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js', function() {
if (typeof jQuery=='undefined') {
//alert('Super failsafe - still somehow failed...')
} else {
jQuery.noConflict();
(function($) {
callback($);
})(jQuery);
}
});
}
else
{ // jQuery was already loaded
jQuery.noConflict(); // This may not be necessary
(function($) {
callback($);
})(jQuery);
}
$ = tempDollar;
}
The loadToHead simply loads the script into the head tag somewhere and runs the callback function when the script is loaded.
Most of this code I have found online and tweeked it. Unfortunately I don't remember where to give the credit as of now.
Ive had a simular problem in the past and worked around it by using the emulate ie7 meta tag
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Im not sure if this is the best work around though.
Just had the same problem. IE 8 does not like:
var jQuery = jQuery.noConflict();
changed it to:
var jq = jQuery.noConflict();
worked fine.
I've had strange problems in the past with IE8 on machines with multiple versions of IE installed. In my case an error was popping when I tried to open a link in a new window via javascript. The same code worked fine on IE6 and 7, and a machine with only IE8 installed ran it fine as well.
This is an issue I also discovered. The way I fixed it was to upgrade my jQuery to 1.4. Version 1.3.2 fails with newer prototype on IE8. Sorry this answer is late.
I have the exact same error with 1.4.4 and 1.4.3 loading jquery after prototype and only in IE8, not even in Ie7 or Ie6
Jquery 1.4 solved this for me.