.on() jQuery click function won't work? - javascript

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.

Related

hover trigger called just after multilevelpushmenu first toggle

i use jquery, bootstrap, fa, normalize and jquery.multilevelpushmenu.js v2.1.4 that provide side-menu multi level, i'm tring to combined hover operation with that menu, and the hover call just after first toggle menu, never seen this behavior before.
<script>
$(document).ready(function () {
$('.content gallery-item').hover(function () {
$(this).find('.content img-title').fadeIn(300);
}, function () {
$(this).find('.content .img-title').fadeOut(0);
});
});
</script>
Here what i have tried:
isolate to minimum script / JS-libs
tried to call to dest hover tag with more specific css selector
This is the JSFiddle of the complete scenario.
How can i make it work onload?
CSS way to fix the issue is to give the element a lower z-index. As the menu container is overlapping it that's why it is unable to target the element properly.
This code should fix it.
.multilevelpushmenu_wrapper{
min-width: auto;
}

jQuery to Remove Class Surrounding HTML Elements Not Working

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.

Fading a content when hover a menu <li> issues

I'm with a problem, and I need your help.
So, I'm trying to make a menu that show the content when you do a mouse hover in a li tag. And the first content need to be always showing when you do a mouse over on the first li option, or when no one li is hovered.
I tried to make this, and you can see a demo here: https://jsfiddle.net/sqftzuja/
As you can see, it's isn't work so fine and some times it show more than one content.
My script
$(document).ready(function() {
$("#nav3 li:first-child").addClass("tab-active");
$('#nav3 li').click(function() {
var section4 = $(this).attr('data-id');
$("#nav3 li").removeClass("tab-active");
$(this).addClass("tab-active");
$('.tv-corporativa').hide();
$(section4).fadeIn(800);
});
});
If anyone can help me improve it it will help me a lot!
Thanks in advance!
jquery hover takes two arguments, one is for the pointer entering the element and the other is for when it leaves the element.
e.g.
$('selector').hover(one_function, two_function)
you can either use hover and call the second function or use the onmouseover event.
here's the fiddle for onmouseover https://jsfiddle.net/sqftzuja/1/
You code is correct. You just need to stop the running animation.
$(section4).stop( true, true ).fadeIn(800);
This will solve you problem in the old code.
you must stop fade in animation.when you fade in it effects after given interval.i updated fiddle as well
$(document).ready(function() {
$("#nav3 li:first-child").addClass("tab-active");
$('#nav3 li').hover(function() {
//console.info( $(this).attr('href') );
var section4 = $(this).attr('data-id');
$("#nav3 li").removeClass("tab-active");
$(this).addClass("tab-active");
$('.tv-corporativa').stop().hide();
$(section4).fadeIn(800);
});
});

Set focus to element after slideToggle removes display:hidden attribute with jQuery

So I have looked at a bunch of examples and still cannot seem to figure this one out. I have an element that I am hiding "display:none" until it is expanded by a link using jQuery slideToggle. Working but I need the focus to go to the new element div. I've tried a bunch of examples and nothing seems to be working so I'll post it here.
Here is the fiddle:
JS FIDDLE
So on click of this link here:
<div><p>Blah Blah <a id="whyDivLink" class="staticLinkHelper" title="Wblah blah bl title" style="color: #8f0222; text-decoration: underline">Click Me?</a></p>
</div>
I am trying to do two things, well three but two would be marvelous.
1. Scroll to this DIV which is just a bit further down the page.
2. Focus on the text that is now showing.
Apparently because the node is hidden, then it will not focus to it or something to that affect and it has nothing to scrollTo or when I have tried it just scrolls all the way to the top. But I have a fixed header so that does not work because then it is just hidden. So what I have now is basically working and scrolling to the div and from what I can tell... focusing on it. But I need to set it a ways from the top and when I try it breaks the scrolling. Any one see what I am doing wrong?
$(function() {
$("#whyDivCloser").click(function () {
$("#whyDiv").slideToggle("slow");
});
});
$(function() {
$('#whyDivLink').click(function (evt) {
$("#whyDiv").slideToggle("slow");
});
});
Any help would be appreciated
Looks like when you apply display:none initially to the div, clicking on the a link won't lead user to the targeted div anymore. To fix this, you can try using code to hide the div initially using slideToggle, of course the initial state of the div is display:block, slideToggle will hide it for you instead of setting display:none initially while clicking on the link will work expectedly (jump to the targeted div).
JS:
$(function() {
$("#whyDiv").slideToggle("slow"); //add this line to hide it initially
$("#whyDivCloser").click(function () {
$("#whyDiv").slideToggle("slow");
});
});
$(function() {
$('#whyDivLink').click(function (evt) {
//append .focus() to focus the text
$("#whyDiv").slideToggle("slow").focus();
});
});
Updated Demo.

jQuery function to only run on the element clicked

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);
});
});

Categories