Guys i'm trying to do a jQuery toggle on click of a link. Basically, show/hide a div on click of a link. It's not working when i put the class or ID, but it works when i directly put a in it.
Here's a link which has both ID and class.
<a id="gachlkx" class="gachlk btn btn-warning btnApply">#T("gaperfreport-apply")</a>
And a div which has a graph
<div id="gachwrap" class="chartsContainer">
Contains Graph
</div>
Not working with ID -
<script>
$(document).ready(function () {
$("#gachlkx").click(function () {
$('#gachwrap').toggle('slow');
});
});
</script>
Not working with class -
<script>
$(document).ready(function () {
$(".gachlk").click(function () {
$('#gachwrap').toggle('slow');
});
});
</script>
Works only with a
<script>
$(document).ready(function () {
$("a").click(function () {
$('#gachwrap').toggle('slow');
});
});
</script>
I tried all the combinations. Keeping only ID or keeping only class. Doesn't work. Works only with a. Any solution?
If you're using a style template, some of them removing id's and class.
Verify by inspecting the dom when the page is loaded.
Solutions :
Use the id / class generate by your library.
Or
You can try to include your own id / class with jquery after the page is loaded.
Check this. Works well with class and id.
With id in this sample:
https://jsfiddle.net/9gydyb2o/
$(document).ready(function() {
$("#gachlkx").click(function() {
$('#gachwrap').toggle('slow');
});
});
The error should be on other place. Have you checked the console log?
Please try this, it works fine if you have added anchor or div dynamically to DOM.
$(document).ready(function() {
$(document).on('click',"#gachlkx",function() {
$('#gachwrap').toggle('slow');
});
});
Related
I need some div's to work as a clickable link. I already found the solution for jquery. Unfortunately this solution is always window.location or window.open. This is not suitable for us, since we have a lot of div's and the urls are already defined with _blank or same window.
I have to admit, that I am not sure, how I can look for the function that I need, since I have almost no knowledge of Javascript and the functions of it.
This is the code for the script, that I found:
$(document).ready( function () {
$(".textlink").click(function () {
window.location = $(this).find("a:first").attr("href");
return false;
});
});
and this is one box with target=_blank
<div class="textlink texticon texticon-top">Text in DIV</div>
The expected result would be, that the whole div is clickable but the target will be taken from the href of the div and not predefined in the script.
You just need to trigger click on found anchor tag instead of setting its href to window.location
$(document).ready( function () {
$(".textlink").click(function () {
$(this).find("a:first").click();
});
});
You can do:
$('.textlink a:first').click(function() {
window.location.replace($(this).attr('href'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="textlink texticon texticon-top">Text in DIV</div>
I have links which change content on click. I want one of the links to be cliked on page load and stay as active. Looks like it works in the below fiddle but when I add it on website this one is loaded :
http://jsfiddle.net/0e91svrr/
I think I have some mistake in JS:
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
$('a[class^=question]').click(function(e){
e.preventDefault();
var id = $(this).attr("class").replace("question","")
$('.new_member_box_display').html($('#answer' + id).html());
})
document.getElementById("modal").click();
});//end of ready
</script>
The code you have written is perfectly fine. I would just suggest try JQuery's trigger click.
$('#modal').trigger('click');
First of all don't used Pure JS with JQuery mixed up, it look so messy :D also I sugest you think about your tags class and ids :)
Try first add event to links and then call click in document ready like this.
$('a[class^=question]').click(function(e){
e.preventDefault();
var id = $(this).attr("class").replace("question","")
$('.new_member_box_display').html($('#answer' + id).html());
})
$(document).ready(function() {
$("#modal").click();
});
I have a tiny script I'm working on :)
The idea is if the span tag just contains autocompleteitem and not autocompleteitem autocompleteitemwithcontainer then it'll display the word hello. Right now it displays hello for both :(
Demo: https://jsfiddle.net/L33mqqtp/
$(document).ready(function() {
$(document).on('click','.autocompleteitem',function(){
$("div").show();
});
});
How do I update my code to do this?
Try this
'click','.autocompleteitem:not(.autocompleteitemwithcontainer)'
They both have .autocompleteitem class! To obtain what you want, use a different selector, which only applies to first one:
$(document).ready(function() {
$(document).on('click','.autocompleteitem:not(".autocompleteitemwithcontainer")',function(){
$("div").show();
});
});
try this
$(document).ready(function() {
$("span").on('click', function(){
if(this.className == "autocompleteitem")
$("div").show();
});
});
Use the attribute selector syntax. That will allow you to directly match an entire attribute. This way you don't have to make a bunch of different combinations for each thing that you don't want to be selected.
Example selector: jQuery('[class="autocompleteitem"]')
Working Example:
$(document).ready(function() {
$(document).on('click','[class="autocompleteitem"]',function(){
$("div.containertoshow").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Should work<br>
Should not work
<div class="containertoshow" style="display:none;">That button does toggle me on/off!</div>
I am running a Wordpress on twenty fifteen child theme. I found a Script to toggle menu on mouseover. I really like that feature.
But I want to add following option:
When the user is on childpage of parent1, I want the menu to be open on this point, as it is by default in twentyfifteen. You can see it here:
http://johannabaschke.de/impressum/
I now want that also with the script I found:
<script>
var $ =jQuery.noConflict();
$(document).ready(function () {
$('.sub-menu').hide();
$('.menu-item-has-children').hover(function() {
$(this).children('.sub-menu').stop().slideToggle(200);
});
});
</script>
It toggles menu on mousover, but when clicking child-page, the menu isnt open, like here:
http://johannabaschke.de/transeuropa-2015/
I am not good in coding, thats why I only modify WP-themes with CSS which I am good at, but Javascript is not my bet practice. Maybe someone has a simple idea to solve this?
Would be super glad and thx for your help!
54v4nn4h
Please try like this:
<script>
var $ =jQuery.noConflict();
$(document).ready(function () {
$('.sub-menu').hide();
$('.menu-item-has-children').click(function() {
$(this).children('.sub-menu').stop().slideToggle(200);
});
});
</script>
Could you please try following code:
<script>
var $ =jQuery.noConflict();
$(document).ready(function () {
$('.sub-menu').hide();
$('.menu-item-has-children').hover(function() {
$(this).children('.sub-menu').stop().slideToggle(200);
});
//code to keep open respective menu open on page load
$("a[href='"+window.location.href+"']").closest('.sub-menu').stop().slideToggle(200);
});
</script>
I need some script.
To hide a div by clicking anywhere on the page
To hide a div by clicking on button, images or particular script
To hide a div by clicking anywhere on the page ( when div contain any other script)
I am currently using
<script>
$(document).ready(function () {
$("#div").click(function () {
document.getElementById('div').style.display = 'none';
});
});
</script>
This working fine why div contain images, but it not working when div contain script like advertisement script such as chitika, adsense or any other
Please tell how to do.
Try this use this this selector is used to hide the clicked div
$("#div").click(function () {
$(this).hide();
});
To hide it, you would do some javascript and
Also you need to include Jquery library
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
$("#YourDivID").click(function (){ //inspect the ID might differ.
$(this).hide();
});
This code answers to your first and third question:
$( document.body ).click(function() {
document.getElementById(name of your div).style.display = 'none';
});
And the second question:
<div id="testdiv">test</div>
<script>
function hidediv(){
document.getElementById("testdiv").style.display = 'none';
}
</script>
<input type=button value="Click me" onclick="hidediv()">