Develop Reference

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);

Jquery mouseover and mouseout and show div at the current position

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?

Adding off click and esc to close slideToggle

I've got a panel that slides up and pushes content upwards. I'd like to be able to close it using an off click or pressing esc. I've tried adding e.stopPropagation(); and if (e.keyCode == 27) {
EDIT Fiddle: https://jsfiddle.net/pqc77g1f/2/
Here is a fiddle that has off click: http://jsfiddle.net/yKhfP/
$("#toggle").click(function(e) {
if (e.keyCode == 27) { // esc keycode
if ($('#panel').css('display') == 'block') {
var height = '-=' + $('#panel').height();
} else {
var height = '+=' + $('#panel').height();
}
e.stopPropagation();
$("#panel").slideToggle((2300), "easeOutQuint");
$(".project_wrap").animate({
bottom: height
}, (2300), "easeOutQuint")
$('html, body').toggleClass('no-scroll');
});

for escape:
$(document).keyup(function(e) {
if (e.keyCode == 27) {
if($('#panel').css === 'block'){
$('#panel').hide(200)
}
}
});
Look into perhaps $.blur for the "off click"

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;
}
});

Swipe Events in Mobile Safari Intermittently Breaking

I'm trying to set up swipe events for a site I'm working on. Basically, when someone swipes the content container, child div elements of that will change content depending on the page one is on. The actual div "contentwrapper" that I am attaching the swipe listeners to does not change.
To do some animations, I have a previous and next page container that stores content. I removed the ajax function where I populate these for simplicity.
This works when going forwards but when going backwards, I seem to lose the preventDefault behavior and the whole page moves with my finger swipe. This problem only happens intermittently and aways when going backwards.
// Slightly modified code by Dave Dunkin
// http://rabblerule.blogspot.com/2009/08/detecting-swipe-in-webkit.html
function addSwipeListener(el, listener)
{
var startX;
var dx;
var direction;
function cancelTouch()
{
el.removeEventListener('touchmove', onTouchMove);
el.removeEventListener('touchend', onTouchEnd);
startX = null;
startY = null;
direction = null;
}
function onTouchMove(e)
{
if (e.touches.length > 1)
{
cancelTouch();
}
else
{
dx = e.touches[0].pageX - startX;
var dy = e.touches[0].pageY - startY;
if (direction == null)
{
direction = dx;
}
else if ((direction < 0 && dx > 0) || (direction > 0 && dx < 0) || Math.abs(dy) > 400)
{
cancelTouch();
}
}
}
function onTouchEnd(e)
{
cancelTouch();
if (Math.abs(dx) > 30)
{
listener({ target: el, direction: dx > 0 ? 'right' : 'left' });
dx = 0;
}
}
function onTouchStart(e)
{
e.preventDefault();
e.stopPropagation();
if (e.touches.length == 1)
{
startX = e.touches[0].pageX;
startY = e.touches[0].pageY;
el.addEventListener('touchmove', onTouchMove, false);
el.addEventListener('touchend', onTouchEnd, false);
}
}
el.addEventListener('touchstart', onTouchStart, false);
}
Add Swipe Listener
addSwipeListener(document.getElementById("contentwrapper"), function(e) {
swipePageChange(e);
});
function swipePageChange(e) {
if(e.direction == "left") {
moveforward();
}
if(e.direction == "right") {
movebackward();
}
}
Page Movement Events
function moveforward() {
$("#previouspagecontainer").css("z-index","20");
$("#newpagecontainer").css("z-index","40");
$("#previouspage").html($("#circular").html())
$("#newpagecontainer")[0].style.webkitAnimationName = 'flippageright';
$("#newpagecontainer")[0].addEventListener('webkitAnimationEnd', function() {
$("#currentpagecontainer").css("z-index","30");
$("#newpagecontainer")[0].style.webkitAnimationName = '';
$("#circular").html($("#nextpage").html());
});
return false;
}
function movebackward() {
$("#previouspagecontainer").css("z-index","40");
$("#currentpagecontainer").css("z-index","30");
$("#newpagecontainer").css("z-index","20");
$("#previouspagecontainer")[0].style.webkitAnimationName = 'flippageleft';
$("#previouspagecontainer")[0].addEventListener('webkitAnimationEnd', function() {
$("#previouspagecontainer")[0].style.webkitAnimationName = '';
$("#circular").html($("#previouspage").html());
});
return false;
}

The problem was caused by an unrelated element being removed from the DOM. I'm not quite sure why this resulted in breaking the swipe events but stopping this practice fixed my issue.