I am trying to make a site that counts each time the user has clicked their mouse. I have that part down, but I also need to include a reset button that, after the user clicks it, starts the mouse click counter back from 0.
I cannot figure it out - if I move the var = 0 about the doc ready, it resets, but after the button is clicked, the counter never goes past 1. I am not sure what to do.
My script -
$(document).ready(function(){
console.log("Here");
$(document).click(function(e) {
$('#location').append("("+e.clientX+", "+e.clientY+")<br>");
});
var counter = 0;
$(document).click(function(e) {
counter++;
$("#mouseclick").text("Total mouse clicks: " + counter);
});
$('button').click(function(e) {
e.stopPropagation(); // stop the event from propagating up the visual tree
$('#location').text("");
$("#mouseclick").text("Total mouse clicks: 0");
});
$('button')
});
I need them to be able to click 'button' and the count will reset. Any advice?
You're not resetting the counter. See this fiddle
$(document).ready(function(){
console.log("Here");
$(document).click(function(e) {
$('#location').append("("+e.clientX+", "+e.clientY+")<br>");
});
var counter = 0;
$(document).click(function(e) {
counter++;
$("#mouseclick").text("Total mouse clicks: " + counter);
});
$('button').click(function(e) {
e.stopPropagation(); // stop the event from propagating up the visual tree
$('#location').text("");
counter = 0;
$("#mouseclick").text("Total mouse clicks: 0");
});
Just add counter=0 in $('button').click() event.
$('button').click(function(e) {
counter=0;
e.stopPropagation(); // stop the event from propagating up the visual tree
$('#location').text("");
$("#mouseclick").text("Total mouse clicks: 0");
});
Related
I have a issue where the .click from the div where my cancel button is nested in triggers when I click the button. This causes both the slideUp and slideDown to trigger at the same time, which results in the div staying visible. I've tried adding a state to prevent the div from sliding down again, but this does not have the desired effect.
$(add).click(function () {
var inputDiv = Polymer.dom(root_root).querySelector("#inputDiv");
if(state == 0){
$(inputDiv).slideDown(300);
}
state = 1;
});
$(cancel).click(function () {
var inputDiv = Polymer.dom(root_root).querySelector("#inputDiv");
$(inputDiv).slideUp(300);
state = 0;
});
https://jsfiddle.net/kkdoneaj/2/
Does anyone know how to work around this issue?
Use Event.stopPropagation() to stop the click from bubbling from the #cancel button to the parent #add div:
$("#cancel").click(function(e) {
e.stopPropagation();
...
});
https://jsfiddle.net/kkdoneaj/3/
you should put stop
Stop the currently-running animation on the matched elements.
$(add).click(function () {
var inputDiv = Polymer.dom(root_root).querySelector("#inputDiv");
$(inputDiv).stop().slideDown(300);
});
$("#cancel").click(function (e) {
var inputDiv = Polymer.dom(root_root).querySelector("#inputDiv");
$(inputDiv).stop().slideUp(300);
e.stopPropagation();
});
Others have commented with stopPropagation(), but you can also not expand #inputDiv unless it's already visible, like so:
$(function(){
$("#add").click(function () {
if($("#inputDiv").css('display') == 'none'){
$("#inputDiv").slideDown(1000);
}
});
$("#cancel").click(function () {
$("#inputDiv").slideUp(1000);
});
});
I have a map with some pinpoints that, if you click on them show some information. The plan was, that I can click a Icon and it shows a div, if I now click the same icon the div will disapear.
As long as i got show() it works but if I put in fadeIn() it reapears on the second click.
Here my script so far
<script type="text/javascript">
jQuery(document).ready(function() {
$(".icon-location").on('click', function(event){
$('[id^="ort-box-"]').fadeOut('slow');
});
var mouseX;
var mouseY;
$(document).ready(function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
$(".icon-location").on('click', function(event){
var currentId = $(this).attr('id');
$("#ort-box-"+currentId).show().css({position:"absolute", top:event.pageY, left: event.pageX, "z-index":"998"});
});
});
</script>
EDIT:
Thanks to Max I got something startet but there is some logic mistake I must have made.
$(".icon-location").on('click', function(event){
$('[id^="ort-box-"]').fadeOut('slow');
if(!$(this).hasClass('ortActive')){
var currentId = $(this).attr('id');
$("#ort-box-"+currentId).fadeIn('slow').css({position:"absolute", top:event.pageY, left: event.pageX, "z-index":"998"});
$(this).addClass('ortActive');
}else {
$(this).removeClass('ortActive');
}
});
You're attaching 2 eventhandlers on the same DOM element.
So if you click on it, both handlers will fire the event and both functions will be called.
Maybe use something like
$(this).addClass('active');
if you trigger the event for the first time, check when you press again with
if($(this).hasClass('active')){ ...
$(this).removeClass('active');
}
This way you can be sure, that you can trigger only the wanted parts of the event handlers.
how to show toolbar (and hide current) when i click on next similar element? in my code, when i click on next similar element, toolbar doesn't disappear, he disappears only if i firsly click on body and then on element, how to remove toolbar without clicking to body to show next toolbar? thx!
http://jsfiddle.net/wwL8fgr1/1/
$(".element").on('mouseup', function(e){
$('[el-button]').click(function(e){
e.preventDefault();
});
var toolbar = $('<div class="dm-popover"></div>');
if ( !$('.dm-popover').hasClass('in') ) {
setTimeout(function(){
toolbar.addClass('in');
},100);
$('body').prepend(toolbar);
}
toolbar.addClass('dm-link-frontend-control-top');
toolbar.css({
left: $(this).offset().left,
top: $(this).offset().top - toolbar.height() - 10
});
setTimeout(function(){
$('body').on('mouseup', function(e){
if($(e.target).closest(toolbar).length == 0){
$('body').unbind('click', arguments.callee);
toolbar.removeClass('in');
toolbar.remove();
}
});
}, 100);
e.stopPropagation();
});
You can try this
$(".element").on('mouseup', function(e){
$('[el-button]').click(function(e){
e.preventDefault();
});
if ( !$('.dm-popover').hasClass('in') )
{
var toolbar = $('<div class="dm-popover"></div>');
setTimeout(function(){
toolbar.addClass('in');
},100);
$('body').prepend(toolbar);
}
else
{
var toolbar = $('.dm-popover');
}
toolbar.addClass('dm-link-frontend-control-top');
toolbar.css({
left: $(this).offset().left,
top: $(this).offset().top - toolbar.height() - 10
});
setTimeout(function(){
$('body').on('mouseup', function(e){
if($(e.target).closest(toolbar).length == 0){
$('body').unbind('click', arguments.callee);
toolbar.removeClass('in');
toolbar.remove();
}
});
}, 100);
e.stopPropagation();
});
See the JSFiddle http://jsfiddle.net/wwL8fgr1/3/
The code responsible for removing the toolbar is here:
$('body').on('mouseup', function(e){
if($(e.target).closest(toolbar).length == 0){
$('body').unbind('click', arguments.callee);
toolbar.removeClass('in');
toolbar.remove();
}
});
Note this registers a mouseup handler on body. That's why you need to click on body to remove the toolbar. You can attach this handler to the second element, if that's what you expect.
EDIT
My guess is that you wanted to achieve something like in this fiddle. Note that is is suitable for 2 elements only, if you need more similar elements, you'd probably need to make a function to generate id's for you instead of storing them in data- attributes.
My opinion:
Your code seems overly complex - you're using timeouts, swapping css, mouseup instead of click, creating div elements on each click, preventing handler's propagation... Try to make it simpler by removing unnecessary stuff.
I have a list of links in a div with overflow. What I want to happen is that the user can navigate in this menu of links with an up and down button. I want the div to scroll up or down by the height of 1 link element every time the user clicks the corresponding button. I tried out some code but I can't seem to figure out how to make it scroll the right amount in both directions. Can anyone help me out?
All the links have the same class.
Edit:
I have already managed to scroll up and down. Now I just need to scroll in little steps of the height of 1 link.
$(function() {
var ele = $('#scroller');
var speed = 10, scroll = 5, scrolling;
$('.scroller-btn-up').click(function() {
// Scroll the element up
scrolling = window.setInterval(function() {
ele.scrollTop( ele.scrollTop() - scroll );
}, speed);
});
$('.scroller-btn-down').click(function() {
// Scroll the element down
scrolling = window.setInterval(function() {
ele.scrollTop( ele.scrollTop() + scroll );
}, speed);
});
$('.scroller-btn-up, .scroller-btn-down').bind({
click: function(e) {
// Prevent the default click action
e.preventDefault();
},
mouseleave: function() {
if (scrolling) {
window.clearInterval(scrolling);
scrolling = false;
}
}
});
});
That should be easy enough using your current code, all you have to do is get rid of the interval to stop it from scrolling repeatedly. Then you won't need the mouseleave function either, you can set the scroll variable to the same value of the height of a link tag e.g. 20 for a 20px high link tag:
$(function() {
var ele = $('#scroller');
var scroll = 20;
$('.scroller-btn-up').click(function() {
// Scroll the element up
ele.scrollTop(ele.scrollTop() - scroll);
});
$('.scroller-btn-down').click(function() {
// Scroll the element down
ele.scrollTop(ele.scrollTop() + scroll);
});
$('.scroller-btn-up, .scroller-btn-down').bind({
click: function(e) {
// Prevent the default click action
e.preventDefault();
}
});
});
How can I continuously get the position of the mouse whilst its button is being held down?
I know I can do:
<element onclick="functionName(event)"></element>
<script>
function functionName(e){
e.pageX
e.pageY
//do stuff
}
</script>
and I know you can use the onmousedown event, but how would I continuously get the position while the button is still held down?
Oddly I couldn't find this anywhere I looked.
Anyway, I'd suggest using mousemove event with check if which event property equals 1 (i.e. left mouse button pressed):
$("element").on("mousemove", function(e) {
if (e.which == 1) {
console.log(e.pageX + " / " + e.pageY);
}
});
DEMO: http://jsfiddle.net/HBZBQ/
Here is a JSFiddle for you. You need to store the state of the mouse button in a variable.
jQuery:
$(document).ready(function() {
$(document).mousedown(function() {
$(this).data('mousedown', true);
});
$(document).mouseup(function() {
$(this).data('mousedown', false);
});
$(document).mousemove(function(e) {
if($(this).data('mousedown')) {
$('body').text('X: ' + e.pageX + ', Y: ' + e.pageY);
}
});
});
Here, I'm storing the mouse button's up or down state in document using $(document).data(). I could have used a global variable, but storing it this way makes the code a little cleaner.
In your $.mousemove() function, only do what you want if the mouse is down. In the code above, I'm simply printing the mouse's position.