I have a <div> with a class of fouc that surrounds most of my main HTML elements. I have set this to display: none and would like to remove it as soon as the page finishes loading. However, this is not working as expected. Thank you for your help.
CSS:
.fouc {
display: none;
}
JS:
$(window).on('load', function () {
$('body').removeClass('fouc');
});
Try the following snippet
$(window).on('load', function () {
$('.fouc').show();
});
Hope it helps
You need to select the element in your JS which has the class fouc. In your case you are selecting the $('body') - which means your are telling the browser to remove the fouc class from body, which actually didn't exist.
You can find and remove the class, just like:
$('body').find('.fouc').removeClass('fouc');
But this isn't a good practice to do.
Related
I'm having a hard time finding any information that helps with this issue. I've tried several other options that worked for other people on here, but it doesn't seem to be working.
I have a div set up like this:
<div class="dynamic-content">
<div class="button"></div>
<div class="content"></div>
</div>
What I'm trying to do is apply a CSS animation to .dynamic-content when .button is clicked, by adding a specific class, and then removing that animation by clicking .button again and removing the specific class.
Here is my jQuery:
$(".button").on('click', function() {
if ($(".dynamic-content").hasClass('open')) {
$(".dynamic-content").removeClass('open'));
} else {
$(".dynamic-content").addClass('open'));
}
}
If I don't include the .removeClass() part, the addClass works perfectly. However, as soon as I put in the .removeClass, in the inspector, I can see .dynamic-content lighting up, as if targeted and acted on by JS, but nothing happens, not even .addClass is working.
That is because you have error in your code at line:
$(".dynamic-content").removeClass('open'));
//^Remove extra brace
Remove extra spaces and you are good to go.
You can also optimize your code by using .toggleClass():
$(".button").on('click', function() {
$(".dynamic-content").toggleClass('open');
});
JS:
$(".button").on('click', function() {
if ($(".dynamic-content").hasClass('open')) {
$(".dynamic-content").removeClass('open');
} else {
$(".dynamic-content").addClass('open');
}
});
Does the conditional work? Because ".dynamic-content" is a class, jQuery will get the first one it finds. Maybe there's another one on the page, which plays with your condition?
Another thing that may happen, as people have said, is that your extra ")" is breaking your function.
Either way, I would try toggleClass instead, it does exactly what your condition does:
$(".button").on('click', function() {
$(".dynamic-content").toggleClass("open")
}
If the class is there, it removes it, if not, it adds it.
I have to following code snippet. My understanding is that, the following code fires, when <li class="topics">Topics</li> is clicked on. However, what I am observing is that, the click function doesn't fire.
$(".li .topics").click(function () {
}
However, if I am removing the .li ,
$(".topics").click(function () {
}
Then the click function works fine, anything I am doing wrong here? Please advise
li is not a class, it is an element. what you can do is remove the period from the .li and have something like this:
$("li.topics").click(function () {}
Also, when you have a space between the classes, it looks for the second class to be nested inside of the first, however, when you remove the space, it looks for that element which has that class.
If you have a class "li" then this should also work
$(".li, .topics").click(function(){
alert("clicked");
});
I'm trying to implement a simple click function into my jsfiddle but it isn't working.
Here is my javascript/jquery:
$(document).on("click", "#introPic", function () {
$("#introduction").addClass("hide")
$("#q1").removeClass("hide")
});
I don't understand because it works if i take the element in question (#introPic) out of the divs it is nested in and place it at the top of the document. This isn't a solution because it ruins all the html/css formatting.
Does .on()only work for un-nested IDs?
Here is the jsfiddle - http://jsfiddle.net/JosephByrne/HdPq4/2/
And here is the amended version with the #introPic moved to the top of the html - http://jsfiddle.net/JosephByrne/kRudM/
Your code is fine. The problem is the #introduction is put behind the body element because of z-index:-99 you set on the #content which is the container of the #introduction. So clicking on any element in #content will actually click on the body element. Just remove the z-index and it should work fine.
The interesting thing here is the background of the body should cover the #content but it happens only when you specify some background for the html element.
Try this:
<script>
$(function(){
$(document).on("click", "#introPic", function () {
$("#introduction").addClass("hide");
$("#q1").removeClass("hide");
});
});
</script>
Your code does not work cuz you've forgot to terminate lines with semicolons.
I've embedded a custom ggl map within a container div using javascript (not the google iframe), and a div to display the map within the first/original container div. I need to deactivate all links within either div so that the links in the embedded map are not clickable.
I've tried the following JQuery solution but it doesn't seem to work:
<script>
$("#map_canvas a").click(function(e) {
e.preventDefault();
});
</script>
Then I've tried the following CSS solution but it blocks the user's ability to pan the map.
pointer-events: none;
How can I enable user interactivity with the map while preventing anchor links from working within the embedded map? Thanks!
I would guess your first problem is that those links are created dynamically. So, when you call $("#map_canvas a"), there are no a elements to bind to. You might try the delegated syntax of bind(). Assuming #map_canvas exists when your script is called (and I would recommend putting your code in a ready block):
$( function() {
$('#map_canvas').on('click', 'a', function() {
// return false will preventDefault and stopPropagation in jQuery
return false;
});
});
You should use the following code, if there are elements nested inside the tag. Otherwise they will be removed aswell.
$(document).ready(function() {
$("#map_canvas a").removeAttr("href");
});
Or you can do something like this.
$('#map_canvas a').click(function () {return false;});
This will remove the <a> elements themselves. I don't know if that's what you want:
$("#map_canvas a").remove();
But as has already been said, you have to wait for the DOM to be ready because those links are probably automatically generated and are not part of the initial, static layout, and therefore are not bind to the DOM.
So, this could do the trick (it will be executed only when the DOM is ready) :
$(document).ready(function() {
$("#map_canvas a").remove();
});
If you dont want to remove the <a> elements in themselves and just deactivate them, try:
$(document).ready(function() {
$("#map_canvas a").on('click', 'a', function() {
return false;
});
});
I'm trying to implement an accordian style box on some content. However there are 4-6 of these boxes on 1 template, all with different classes for obvious reasons. However I want to try and make the code as easy to read as possible and I don't want to duplicate the code for each class name. I'm assumung jQuerys (this) method would work but i'm not 100% sure how to use it.
Here is my JS code:
<script type="text/javascript">
$(document).ready(function(){
$(".block-50_hoverHeader").click(function (){
//alert("clicked");
$(".scrollText").slideToggle(1000);
});
});
</script>
So the .scrollText class is the div that holds all the content which needs to be displayed after the onClick function. But currently when I click the header all the .scollText divs appear on the page. So i want it to only appear on the parent header div that is being clicked.
Here the HTML:
<div class="block-50 left textHoverWrapOne">
<img src="" alt="" /> (Image working as BG Image)
<div class="block-50_hoverHeader"><p>This is a header!</p></div>
<div class="block-50_textHoverOne trans_click scrollText">
This is the content that needs to be displayed after the
</div>
</div>
Find the scrollText relative to the clicked block-50_hoverHeader element. In this case it is the next sibling, so you can use .next()
Inside the event handler this points to the element in which the handler is registered, in this case it is the block-50_hoverHeader element, so we can find the next scrollText using $(this).next()
jQuery(function ($) {
$(".block-50_hoverHeader").click(function () {
$(this).next().slideToggle(1000);
});
});
Demo: Fiddle
There are a number of ways to accomplish this. I prefer to grab the shared parent and then use find as I find this is a bit less likely to break due to minor modifications to the html structure.
$(".block-50_hoverHeader").click(function (){
$(this).closest(".textHoverWrapOne").find(".scrollText").slideToggle(1000);
});
Why not targeting the whole div??
jQuery(function ($) {
$(".block-50").click(function () {
$(this).find('.scrollText').slideToggle(1000);
});
});