There is a image and another div.
<img src="clock.jpg" id="date"/>
<div id="toggleDIV"> toggleDIV </div>
How do I make #toggleDIV' show every time the button is clicked but to toggle view when it's touched? So on a touch device I want the button to work as and ON/OFF button but on none touch devices I want it to work only as ON.
$("#date").click(function(){
if ($('#toggleDIV').css('display')=='none')
$('#toggleDIV').fadeIn();
});
Try something like this:
$("#date").click(function(){
$('#toggleDIV:hidden').fadeIn();
});
$("#date").on("touchstart", function(){
$("#date").off("click");
$('#toggleDIV').fadeToggle();
});
How it works: When you click the button the div will always show, but when you touch the button, the click event handler will be removed from the button and it will instead run the touch handler.
JSFiddle
Note: See #Rory's comment why not to use browser sniffing.
Related
I want to trigger a function if a user clicks anywhere on the page, even clicking on no element or link. Is it possible?
The extension runs only on youtube.com so I can't add every element on the page to the trigger and I assume that every page has different element's ids.
Emmanouil Chountasis is correct, you can use the code at "Detect left mouse button press" to detect a left mouse click crossbrowser.
To the heart of your question, I think what you're looking for is Event Delegation. In jQuery,
// Select a wrapper for the events
$('body')
// Whenever any element in the <body> is clicked
.on('click', '*', function (evt) {
// Emmanouil Chountasis's suggestion would be called right here
if (isLeftClick(evt)) {
// ... do stuff
}
});
See http://learn.jquery.com/events/event-delegation/
Reed's answer works fine, but it triggers the action multiple times. I found this solution that only works on left mouse triggers and executes once per click.
$("body").unbind().click(function() {
//Do Stuff
});
I have a div that appears and disappears through the use of a jquery toggle. When yuo click a link the div appears or disappears.
Is there a way to make it so if javascript is disabled and a user clicks the link they are taken to a page instead?
Is there anything I should do when using a toggle to ensure it doesn't encounter problems?
Make the link take the user where you want them to go if js is disabled by default. Then use jQuery's preventDefault() on the click event (where you are probably defining your toggling behavior).
So the link should work on its own:
<a id="functioning-link" href="/js_disabled_page">Toggle my div</a>
Your jQuery should grab the click event to toggle your div, which will only work if jQuery/js is enabled:
$(function(){
$("#functioning-link").click(function(e){
e.preventDefault();
$("div").toggle();
});
});
You can use both href and onClick for this.
If the javascript is disabled, href fires up
else onClick!
For example:
Click to toggle
Javascript:
toggle = function() {
// Your code here
return false;
}
I am making an image slider. I want to make it so when the user clicks on the image it should get hidden and i.e text which is behind the image should be visible.
In my image's OnClick event I have written code to hide the image, but what to do if I want it to be visible again when the user clicks again on that or any other option?
You can use jquery SlideToggle() or show() and hide() method like this:
<div id="yourid"></div>
$(document).ready(function(){
$('#btnid').click(function(){
$('#divid').show();
});
$('#btnid2').click(function(){
$('#divid).hide();
});
});
In your onclick event you can create a one time click event on document which will show image again.
This will display image when user clicks outside also.
Make sure that click event on document is one time only to avoid unnecessary action.
Similar to fadeToggle you can just use toggle(speed). This will switch between display none and block.
$(document).on('click','#imageContainer',function(){
$('#image').toggle();
)};
I am making a small image area in my clients site, WHere I have some buttons under a big image. The big image changes onclick of bottom buttons. Now what I need is to make an effect of the selected button. It means Active effect. I can do this with a onclick function but it stays intact even if I click on other buttons.
So, Basically What I need is if you can tell me a way so that I can remove the onclick effect from image/button 1 when another image/button is clicked.
You can see the page here :
http://goo.gl/S1oVS
Use $('.class-selector').off('click'); to unbind click event on all elements with class 'class-selector' (or whatever selector you might have).
You can also do it in implementation of your click event as following:
$('.button').on('click', function() {
// Do something here...
// Disable on click for this particular button, instead of all buttons.
$(this).off('click');
});
I have a textbox and a div below it. I want to hide the div when the user clicks outside the textbox or div.
Is there any other way other than document.click to handle that user has clicked outside. Because in some of the controls, event.stoppropagation is given, which on click wont trigger the document click event.
Thanks
// This means if you click anywhere on the document once, it'll hide the div
$(document).one("click", function() {/*Do stuff, hide div*/});
// This overrides the previous line for just the textarea and div, therefore making this block of code only apply to everything but the textarea and div
$('textbox, div').click(function(){return false;});
Since you mentioned you have event.stopPropagation() at different sections of the page on click event so document.click will not work to hide the textbox.
Why don't you use document.mousedown? It will work fine.
$(document).mousedown(function(){
$('textboxSelector').hide();
});
Make sure you stop the mousedown event propagation from textbox and its containing div.
Create an overlay div (see other questions) and then add a click event to the overlay div that hides the div below the text box and destroys the overlay div.
<script type="text/javascript">
hideDiv()
{
document.getElementById("divId").style.display = "none";
}
</script>
<input type="text" onblur='javascript:hideDiv()'>
I think this should work.