I use disqus in my news site for comments, i put disqus div as display:none, i want that the user have to do click in a button for show and hide this div.
I did a script in jQuery doing toggle in this button, and I can hide and show the div, but when it shows, does not focus on the div, but this is where the button.
This is not useful since pressing the button should take the user to the section where comment, but does not.
script:
$(document).ready(function(){
$('.gn-icon-bubble').attr("href","#foot").click(function(){
$('.disqus_thread').toggle('swing');
});
});
.gn-icon-bubble is the button and as you know, .disqus-thread is the div's class; #foot is my anchor, are in the main page's footer, but still don't works.
I've tried using anchors, but gives the same, still focus comments. I really appreciate your help.
Use Event Delegation for dynamically change element ,use preventDefault to stop default action
$(document).ready(function(){
$('.gn-icon-bubble').attr("href","#foot");
$(document).on("click", ".gn-icon-bubble[href=#foot]" , function(event){
// event.preventDefault(); If you want to stop default anchor tag click action
$('.disqus_thread').toggle('swing');
});
});
Try this:
$('.gn-icon-bubble').click(function() {
$('.disqus_thread').toggle('swing',function() {
$('#foot').focus();
});
return false;
});
Related
I have an element with fixed sidebar with onclick function. When it is clicked at bottom page, the other element as content back to top of page. How I can stop this problem?
Here is my jquery function :
$(document).ready(function(){
$("#sidebarCollapse").on('click', function(e){
e.stopPropagation();
$('#sidebar').toggleClass('show-side-nav');
e.stopPropagation();
$('#user').toggleClass('d-none');
e.stopPropagation();
$('#navbar').toggleClass('show-side-nav');
});
Regards!
Guessing it's either a button which will reload the page, or <a href="#"> which will go to top. You need to use preventDefault(). You may not even need stopPropagation() in this instance, but if you do you only need it once. Also when you're toggling the same class on two elements, you can select them together.
$("#sidebarCollapse").on('click', function(e){
e.preventDefault();
e.stopPropagation();
$('#sidebar, #navbar').toggleClass('show-side-nav');
$('#user').toggleClass('d-none');
});
I use Jquery toggle method to view a div when a button is clicked
$("button").click(function(){
$("#divId").toggle();
});
Works fine but the initial value is set to be viewed or as the css property display:block so when the page initially loads the div is viewed and I have to click the button to close it.
what other answers suggested is that I change the css property but I do not want that as that will hide the div and if the user had their javascript not working for any reason, that would not be good.
So I want to hide the div initially with javascript and then comes Jquery's toggle method working normally. I tried document.getElementById(divId).style.dsplay="none" and put it right before the toggle method, but that makes the toggle not work and just hides the div.
You may set initial value to hide the div by this way:
$(document).ready(function(){
$("#divId").hide();
$("button").click(function(){
$("#divId").toggle();
});
});
After you click the button. it will toggle to open the page.
Try this to hide div on page load:
$(document).ready(function(){
$("#divId").hide(); //or .toggle()
});
[UPDATE]
Or if you have more advanced logic on click event and you want it to also run on load:
$(document).ready(function(){
$("button").trigger('click');
});
An arrow button for moving a slider ended up inside an anchor element.
Now when the button is clicked the anchor link is activated.
The button is part of a dinamically created content on page load by 3rd party slider scripts.
Need to keep the anchor to link to the post. And prevent the anchor from working, only when the button is clicked on.
By the way it´s meant for Wordpress.
Thank you.
var jq=jQuery.noConflict();
jq(document).ready(function(){
jq(document).on("click", 'button.next' , function() {
jq('a').defaultPrevented();
});
});
Try this:
jq(document).on("click", 'button.next' , function(event) {
event.preventDefault();
});
i have link and on link hover display div when leave cursor form div and link hide div using jQuery. i have code for display it, how can i hide it while i leave cursor from these link and div.this is my html code.
2 items
<div id="dropcart">contents</div>
<script type="text/javascript">
$(document).ready(function(){
$("#show_div").hover(function(){
$("#dropcart").fadeIn();
});
});
$("#show_div").hover(function(){
$("#dropcart").fadeIn();
});
$("#dropcart").mouseleave(function(){
if($("#show_div").is(':hover') === false)
$("#dropcart").fadeOut("fast");
});
demo
EDIT: (For the downvoters and OP)
I misunderstood the question. My suggestion, then, would be to use timeouts.
.hover(function(){ clearTimeout(window["timeoutVar"]); $("#dropcart").fadeIn(); },function(){window["timeoutVar"]=setTimeout(function(){ $("#dropcart").fadeout(); },50);});
Then apply that .hover to the div, also. That way, the div will fade out after a 50-millisecond delay IF the user does not hover over it, which will cancel the timeout (and prevent the fadeout).
I used the methods in this question:
change div class onclick on another div, and change back on body click
So here's my jQuery function:
jQuery('.checkbox_wrapper').on('click', function(e){
jQuery(this).parent()
.toggleClass('not_selected')
.toggleClass('selected');
});
However it doesn't seem to be working properly. It takes multiple clicks before the class changes.
See my jsfiddle:
http://jsfiddle.net/7A3vw/
I cut it down to the bare essentials thinking it might be conflicting javascript, but even with the single function it takes multiple clicks before the class actually changes. Because the production environment has 1 click toggle a hidden checkbox, multiple clicks is not reasonable.
Could someone help me figure out what's causing this issue?
The click function fires twice, once for the image, and once for the input, as both will bubble to the parent element, and firing twice reverts the classes again (proof).
Just target the image instead, as that is what you're really trying to click, not the parent :
jQuery('.deck_card img').on('click', function (e) {
jQuery(this).closest('div').parent().toggleClass('not_selected selected')
});
FIDDLE
i guest you need the checkbox checked together with the toggling of your div.
$(document).ready(function(e) {
$('.checkbox_wrapper').on('click', function(e){
var checked = $(this).find('input[type="checkbox"]').is(":checked");
if(checked){
jQuery(this).parent().addClass('selected').removeClass('not_selected');
}else{
jQuery(this).parent().addClass('not_selected').removeClass('selected');
}
});
});
Your code is triggering click event twice. So use .preventDefault()
This makes the default action of the event will not be triggered.
$('.checkbox_wrapper').on('click', function(e){
$(this).parent()
.toggleClass('not_selected')
.toggleClass('selected');
e.preventDefault(); // prevent the default action to be
}); // triggered for next time
Check this JSFiddle
try this
jQuery(document).on("click",'.checkbox_wrapper', function(e){
jQuery(this).parent()
.toggleClass('not_selected')
.toggleClass('selected');
});
Multiple Clicks are getting triggered because you are using class selector. You need to use not to exclude extra elements :
jQuery("div.checkbox_wrapper :not('div.checkboxdiv')").on('click', function(e){
jQuery(this).parent()
.toggleClass('not_selected selected')
});
Here is a FIDDLE.