simple jQuery function not working in some browsers - javascript

I'm building a site where a user has to agree to terms and conditions. The checkbox is enabled after scrolling to the end of the box. Here is the code:
<script type="text/javascript">
$(function() {
$('#rules_box').scroll(function () {
if ($(this).scrollTop() >= $(this)[0].scrollHeight - $(this).height() - 15 ) {
$('#iagree').removeAttr('disabled');
}
});
});
</script>
This works in most browsers. However some refuse to work. Even if I just have
$('#iagree').removeAttr('disabled');
by itself without scroll conditions. This page is running many other javascripts that are working.
Some said it didn't work on their Mobile, and one said it didn't work on Firefox although it worked on my Firefox.
Is jQuery too finicky to work? Does this mean I have to do it another way?
EDIT:
you're quick to mark as a dupe, but this question hasn't been answered yet.
Problem persists in same select browsers, see updated code
$(function() {
$('#rules_box').scroll(function () {
alert('something');
$('#iagree').prop("disabled", false);
});
});
Does not fire alert or change checkbox state

For checkbox elements, you should use .removeProp() instead of .removeAttr()
$('#iagree').removeProp('disabled');
Also see: https://api.jquery.com/removeAttr/ and https://api.jquery.com/attr/

Please use
$('#iagree').prop("disabled", false);

Use .prop('disabled',false) instead of removeAttr('disabled').
related question

Related

The animation scroll to top button does not work

a couple of days ago i started working with my companies website. I saw it was missing something so I decided to make a scroll to top button with animation. I am a noob in programming so i decided to look on the Internet. There I found this example. I literally copied the whole code but it does not work.
the button in the html:
<i class="icon-chevron-up"></i>
and this is the jQuery:
$(window).scroll(function() {
if ($(this).scrollTop() >= 50) {
$('#return-to-top').fadeIn(200);
} else {
$('#return-to-top').fadeOut(200);
}
});
$('#return-to-top').click(function() {
$('body, html').animate({
scrollTop : 0
}, 500);
});
I dont know what the problem is because it works on the codepen. Does anyone know how to fix this?
Thanks in advance
There is not enough information but if you use the same code from codepen then maybe you need to include jQuery into your site header. (https://cdnjs.com/libraries/jquery/)
You should do something like this :
$('#return-to-top').click(function(e) {
e.preventDefault();
$('body, html').stop().animate({
scrollTop : 0
}, 500);
});
And first of all, check if you have include jQuery :
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
Which browser are you using?
Anyway, $(window).scrollTop(0); seems to be supported by all browsers, but if you want to animate the scroll, $('html,body').animate({scrollTop:0},500);, like you're using, if you can share your HTML and CSS code, maybe the problem is in the z-index or try to put the width and the height of the ".icon-chevron-up" also to the "#return-to-top".
Everything seems to be working, try to use the console.log('some string here'); to see if the code is running.
Also, check if you added the jquery script:
script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
Hope you solve it.
I noticed a lot of people were telling me to include the jquery library. I did add the library before but after I checked the answers I noticed that I added the wrong library. So now its fixed thanks a lot guys.

jquery fade out and redirect not working in IE

I have a website on which I have the following script intended to handle all links:
$(document).ready(function(){
$("body").css("display","none");
$("body").fadeIn(2000);
$("a").click(function(event){event.preventDefault();
linkLocation=this.href;
if(!linkLocation.contains("#")){$("body").fadeOut(1000,redirectPage);
}});
function redirectPage(){
window.location=linkLocation;}})
What it should do is, when a link is clicked to fade out and then to fade back in.
The issue I am facing is that in IE, links simply do not work.
Is it possible to edit my code in order for it to work?
If not, is there a way I can use a fallback code during this issue?
This issue is not present in chrome and I am using the latest IE
You should first check if your url contains the substring that you want to check with using indexOf() method. If it contains that character/substring then it'll return any 0 or positive value. Else it'll return -1 .
Try this way :
HTML :
ToogleFade
jQuery :
$(document).ready(function(){
$("body").css("display", "none");
$("body").fadeIn(2000);
$("a").on("click", function(e){
linkLocation = $(this).attr("href");
e.preventDefault();
if(linkLocation.indexOf('#') == -1){
$("body").fadeOut(3000, redirectPage);
}
});
function redirectPage()
{
window.location=linkLocation;
}
});
jsFiddle
Resources :
indexOf()
I found that the answer was to set the z-index. I have a stack of absolutely positioned divs and wanted to fade between them. The only way I could get IE8 to handle the fades nicely was to set the z-index of the element to be faded in higher than the element to be faded out.
$('#fadeoutdiv').css({zIndex:99}).fadeOut(2000);
$('#fadeindiv').css({zIndex:90}).fadeOut(2000);
and for redirect Check the Link Stackoverflow
I have gone through your code its almost correct you simply need to change something in your click function because preventDefault(); creating problem with the default functionality of <a></a> tag...
Also click on Allow block content when it ask you in IE.
Instead try this :-
<script>
$(document).ready(function(){
$("body").css("display","none");
$("body").fadeIn(2000);
$("a").click(function() {
linkLocation=this.href;
if(!linkLocation.contains("#"))
{
$("body").fadeOut(1000,redirectPage);
}
});
function redirectPage()
{
window.location=linkLocation;
}
});
</script>
I hope this will work for you..

jQuery mobile.navigate changes url, doesn't load new page

I've found a few similar posts through searches but none of their fixes seem to work for me.
I'm trying to change pages on swipe with jquery. The page url is getting updated on swipe, however it isn't bringing me to the new page. Instead it remains on the same page and only the url gets updated.
If anyone can take a quick look and suggest some possible fixes it'd be a huge help.
here's my code:
$(function(){
$( "div.sw_box" ).on( "swipe", swipeHandler );
function swipeHandler( event ){
$.mobile.navigate("/test2.php");
}
});
thank you!
There's an official example of swipe-to-navigate here: http://demos.jquerymobile.com/1.3.0/docs/examples/swipe/swipe-page.html
You should try $.mobile.changePage instead of $.mobile.navigate; that seems like the most significant difference between the docs and your code
$mobile.changepage is deprecated and will be removed by JQuery mobile 1.5.
This should work fine:
function swipeHandler( event ){
$(':mobile-pagecontainer').pagecontainer('change', 'page.html', {
transition: 'flip',
changeHash: false,
showLoadMsg: true
});
}
in your case you'll need to change 'page.html' to 'test2.php' or you can use '#pageID' if pages are in the same document.

$(window).load(function()-how it works with FF

I have a jquery code.
$(window).load(function() {
document.title = $("#myid").text(); //not working in FF
});
Here I have used $(window).load(function() because in the #myid I am getting value through another javascript, if I use ready(), its giving me error. so I am first loading the window then start reading value.
Now in IE, after the window loads itself , I am getting the value of document.title,
but for FF its coming as blank.undefined.
Why? any idea or alternate sln.
It might be a rendering/timing issue.
How are you setting the #myid text? Im assuming you are running this code on page load?
Personaly on another note, i like to use the shorthand version of jQuery DOM ready, this might also fix your problem too.
jQuery(function(){
document.title = jQuery("#myid").text();
});
And i would make sure that you call it at the end of the body or ideally in the head tag.
I think it is possible that firefox triggers ready and load at the same time when it loads quickly (localhost, small experiment page with one div, etc.)
Why not put the title setting in the ready function right after getting it? If You put it in a div, You can put it in the title too.
I didn't check this code and it isn't a good way, but maybe it help you...
If your code isn't working in Firefox only, you can check browser by Javascript and execute my code for Firefox only.
<script type="text/javascript">
var timerId = 0;
function checkElement() {
// If don't work: try .html() or $("#myid").text() != undefined or smth like this
if($("#myid").text()) {
document.title = $("#myid").text();
clearInterval(timerId);
}
}
$(document).ready(function() {
timerId = setInterval('checkElement()', 500);
});
</script>

Click event not worked in Firefox

I am using a jquery click function:
Button code
<input type="button" id="myButtton">
Jquery code
$(document).ready(function () {
$("#myButtton").click(function () {
alert("Mybutton");
});
});
This code works in Internet Explorer but does not work in Firefox.
What am I doing wrong?
In the code:
$(document).ready(function(){
$("#myButtton").click(function(){
alert("Mybutton");
});
I believe it's missing another closing brace:
$(document).ready(function(){
$("#myButtton").click(function(){
alert("Mybutton");
});
});
My best guess is that you have other input with the same ID? Try using classes instead, or use jQuery's CSS selector like $('input[type=button]') instead.
I'd also recommend installing FireBug plugin for FireFox if you haven't done so already (http://www.getfirebug.com/). It'll help you debug JavaScript issues like this, and a whole lot more.
Are you sure that element has an id attribute? Or does it have only a name attribute with a value of "myButton". In order to work cross browser the id attribute is mandatory, whereas name is optional (only IE and Opera AFAIK).
N.B.: My answer may seem idiot, but it was not the original poster that added the code example in the question (view edit history).

Categories