Jquery mouseover and mouseout and show div at the current position - javascript

I basically wanted to show div at the current position of the mouse on mouseover. I searched most of the answers on stack exchange and came up with the solution.
// JavaScript Document
$(document).ready(function(e) {
function onmouseover (value, e)
{
var mouseX = e.pageX;
var mouseY = e.pageY;
$('.box').hide();
$('.box').css({'top':mouseY,'left':mouseX});
$('.box').toggle();
}
function onmouseout (value) {
$('.box').hide();
}
//Get the message ID
$(document).on ({
click: function (e) {
if (e.target.nodeName == "A")
{
e.stopPropagation();
//e.preventDefault();
}
else
{
console.log($(this).children('#msgid').text());
}
},
mouseover: function (e) {
if (e.target.nodeName == "A")
{
var value = ($(e.target).attr('href'));
onmouseover(value, e);
}
},
mouseout: function (e) {
if (e.target.nodeName == "A")
{
var value = ($(e.target).attr('href'));
onmouseout (value, e);
}
}
}, ".comment-item");
I can see the div on mouseover, but it's not at the position of the mouse.
<div class="box"><iframe src="#" width = "50px" height = "50px"></iframe></div>
This is the all solution that I have found, But it,s not working for me.
What have I missed?

Related

How to scroll horizontally with mouse drag?

I am working on a task like kanban board. Everything is working fine but when I click on vertical scroll bar it hides and I am not able to scroll up and down.
I am using below code for horizontally scrolling on drag
$('.at-priortyboxsholder').mousedown(function (event) {
$(this)
.data('down', true)
.data('x', event.clientX)
.data('scrollLeft', this.scrollLeft)
.addClass("dragging");
$(this).css('overflow','hidden')
return false;
}).mouseup(function (event) {
$(this)
.data('down', false)
.removeClass("dragging");
}).mousemove(function (event) {
if ($(this).data('down') == true) {
this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
}
}).mouseout(function() {
$(this).css('overflow','auto')
});
I have solved my issue by updating code
$('.at-priortyboxsholder').mousedown(function (event) {
$(this)
.data('down', true)
.data('x', event.clientX)
.data('scrollLeft', this.scrollLeft)
.addClass("dragging");
}).mouseup(function (event) {
$(this)
.data('down', false)
.removeClass("dragging");
}).mousemove(function (event) {
if ($(this).data('down') == true) {
$(this).css('overflow','hidden')
this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
}
}).mouseout(function() {
$(this).css('overflow','auto')
});

How To add automatic scrolling in slider

I want to add automatic scrolling time to my slider code but unable to do it can you please suggest me something to help me out with the code to make this slider slide automatic with a set interval of time.
'use strict';
$(document).ready(function () {
var $slides = $('.con__slide').length,
topAnimSpd = 650,
textAnimSpd = 1000,
nextSlideSpd = topAnimSpd + textAnimSpd,
animating = true,
animTime = 4000,
curSlide = 1,
nextSlide,
scrolledUp;
setTimeout(function () {
animating = false;
}, 2300);
//navigation up function
function navigateUp() {
if (curSlide > 1) {
scrolledUp = true;
pagination(curSlide);
curSlide--;
}
}
//navigation down function
function navigateDown() {
if (curSlide < $slides) {
scrolledUp = false;
pagination(curSlide);
curSlide++;
console.log(curSlide);
}
}
$(window).on('load', function () {
$('.con__slide--1').addClass('active');
});
//pagination function
function pagination(slide, target) {
animating = true;
// Check if pagination was triggered by scroll/keys/arrows or direct click. If scroll/keys/arrows then check if scrolling was up or down.
if (target === undefined) {
nextSlide = scrolledUp ? slide - 1 : slide + 1;
} else {
nextSlide = target;
}
////////// Slides //////////
$('.con__slide--' + slide).removeClass('active');
setTimeout(function () {
$('.con__slide--' + nextSlide).addClass('active');
}, nextSlideSpd);
////////// Nav //////////
$('.con__nav-item--' + slide).removeClass('nav-active');
$('.con__nav-item--' + nextSlide).addClass('nav-active');
setTimeout(function () {
animating = false;
}, animTime);
}
// Mouse wheel trigger
$(document).on('mousewheel DOMMouseScroll', function (e) {
var delta = e.originalEvent.wheelDelta;
if (animating) return;
// Mouse Up
if (delta > 0 || e.originalEvent.detail < 0) {
navigateUp();
} else {
navigateDown();
}
});
// Direct trigger
$(document).on("click", ".con__nav-item:not(.nav-active)", function () {
// Essential to convert target to a number with +, so curSlide would be a number
var target = +$(this).attr('data-target');
if (animating) return;
pagination(curSlide, target);
curSlide = target;
});
// Arrow trigger
$(document).on('click', '.con__nav-scroll', function () {
var target = $(this).attr('data-target');
if (animating) return;
if (target === 'up') {
navigateUp();
} else {
navigateDown();
}
});
// Key trigger
$(document).on("keydown", function (e) {
if (animating) return;
if (e.which === 38) {
navigateUp();
} else if (e.which === 40) {
navigateDown();
}
});
var topLink = $(".con__slide--4-top-h-link"),
botLink = $(".con__slide--4-bot-h-link");
$(".con__slide--4-top-h-link, .con__slide--4-bot-h-link").on({
mouseenter: function mouseenter() {
topLink.css('text-decoration', 'underline');
botLink.css('text-decoration', 'underline');
},
mouseleave: function mouseleave() {
topLink.css('text-decoration', 'none');
botLink.css('text-decoration', 'none');
}
});
});
Hope you understand the above code if you have any query in it feel free to ask me and please help me out as soon as possible.
Added setInterval in your code.
setInterval(() => {
if (curSlide >= $slides){
if (animating) return;
pagination(4, 1);
curSlide = 1;
}
else
navigateDown();
}, 10000);
Check updated fiddle.
update below navigateDown code.
//navigation down function
function navigateDown() {
if (curSlide < $slides) {
scrolledUp = false;
pagination(curSlide);
curSlide++;
console.log(curSlide);
}else{
curSlide=1;
pagination(4,1)
}
}
Add this below line
setInterval(navigateDown,7000);

Open link in new tab with cmd-key?

I'm using this to click on an element to open a link. Is there a way to make it open a new tab when I hold the cmd-key down (and whatever that reflects in other OS)?
$(document).on('click', '.row', function(e) {
e.preventDefault();
window.location = '?id=' + $(this).data('id');
});
Basically the way a normal <a> works but via JS.
Try this:
$(document).on('click', '.row', function(e) {
e.preventDefault();
if (cmd) window.open('?id=' + $(this).data('id'), "_blank");
else window.location = '?id=' + $(this).data('id');
});
var cmd = false;
$(document).keydown(function(e) {
var key = e.which || e.keyCode;
if (key == 91 || key == 93 || key == 17 || key == 224) cmd = true;
});
$(document).keyup(function(e) {
cmd = false;
});
.row { border: 1px #000 solid }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">Click Me</div>
Sure, you just need to keep track of whether your target key(s) are being pressed in addition to your click handler:
document.querySelector('#test').addEventListener('click', function(e) {
if(cmdPressed) {
console.log('new tab');
// window.open('');
} else {
console.log('redirect');
// location.href = '';
}
})
// keeps track of whether user is pressing cmd key
var cmdPressed = false;
document.body.addEventListener('keydown', function(e) {
cmdPressed = e.which === 91;
});
document.body.addEventListener('keyup', function(e) {
cmdPressed = false;
});
<div id="test">
Click or CMD+Click me
</div>
or with jQuery:
$(document).on('click', '#test', function(e) {
e.preventDefault();
if(cmdPressed) {
console.log('new tab');
// window.open('');
} else {
console.log('redirect');
// location.href = '';
}
});
// keeps track of whether user is pressing cmd key
var cmdPressed = false;
$(document).on('keydown', function(e) {
cmdPressed = e.which === 91;
});
$(document).on('keyup', function(e) {
cmdPressed = false;
});

Disable mouse right click and don't change cursor position In Javascript

I want to disable mouse right click and don't change cursor position In Javascript. Here is my code example:
<input id="PhoneNumber" style="width: 160px;" />
$('#PhoneNumber').mousedown(function (e) {
if (event.which > 1) {
e.preventDefault();
} else {
//Do some work
}
});
But This doesn't work. When i am clicking with right mouse button, it changes caret position.
[UPDATED]
Works on chrome. Doesn't working on IE
You need to subscribe to the mouseup event also:
$('#PhoneNumber').on('mousedown mouseup', function (e) {
if (event.which > 1) {
e.preventDefault();
} else {
//Do some work
}
});
You should use the contextmenu event and return false:
$('#PhoneNumber').on("contextmenu", function(e) {
return false;
});
you can use contextmenu:
$('#PhoneNumber').contextmenu(function (e) {
e.preventDefault();
});
Working Demo
$('#PhoneNumber').bind("cut copy paste contextmenu", function (e) {
e.preventDefault();
var pos = ($(this).getCursorPosition());
var index = $('#PhoneNumber').val().length;
if (index < 5) {
index = 5;
}
$(this).caretTo(index);
});
$('#PhoneNumber').click(function () {
var pos = ($(this).getCursorPosition());
var index = $('#PhoneNumber').val().length;
if (index < 5) {
index = 5;
}
$(this).caretTo(index);
});
$('#PhoneNumber').on('mousedown mouseup', function (e) {
if(event.which!=1) {
e.preventDefault();
e.returnValue = false;
}
});

calling a jquery function and passing it an object on arrow keypress

Trying to call a function "clickEvent()" and pass it an obj with attributes on arrow-keyUp using jQuery. But Im not reaching the function. Here is the code. Thanks.
Please Note: Im forking existing code, but adding my arrowPress events to it. So everything should remain as is expect for the document ready if (direction != null) area.
$(document).ready(function() {
$('body').keyup(function(event) {
var direction = null;
// handle cursor keys
if (event.keyCode == 37) {
// slide left
direction = 'prev';
} else if (event.keyCode == 39) {
// slide right
direction = 'next';
}
if (direction != null) {
//alert($('.'+ direction).attr('rel'));
//need to pass the alert above as an obj to the function clickEvent() below.
}
});
}); //end $(document).ready
//function on external .js src
(function($) {
function clickEvent(obj) {
alert(obj.attr("rel"));
}
$.fn.slidingPage = function(options) {
$el = $(this);
}
})(jQuery); //end ext js scr
If you need to wrap your code into anonymous function to prevent global variable pollution, then your event and function code should be put in the same scope.
You probably need to trigger click event on .prev and .next.
$(document).ready(function() {
$('body').keyup(function(event) {
var direction = null;
// handle cursor keys
if (event.keyCode == 37) {
// slide left
direction = 'prev';
} else if (event.keyCode == 39) {
// slide right
direction = 'next';
}
if (direction != null) {
$('.'+ direction).click()
}
});
}); //end $(document).ready
The function clickEvent is inside another function's scope, put them into the same scope, or higher scope:
function clickEvent(obj) {
alert(obj.attr("rel"));
}
$.fn.slidingPage = function(options) {
var $el = $(this);
};
(function($) {
$('body').keyup(function(event) {
var direction = null;
// handle cursor keys
if (event.keyCode == 37) {
// slide left
direction = 'prev';
} else if (event.keyCode == 39) {
// slide right
direction = 'next';
}
if (direction != null) {
clickEvent( $('.'+ direction) );
}
});
});
There is no reason for the clickEvent and slidingPage declarations to be inside a document ready handler.
Thanks to Andrey Kuzmin...
if (direction != null) {
$('.'+ direction).click();
}

Categories

Resources