We Keep Coding

Toggle method without show/hide option

How to use .toggle() method but not for show and hide purposes?
For example, when I click on a certain div I would like to animate it's position
$(div).animate({"left":"+=50px"}); and then on the second click to return the div on the same position $(div).animate({"left":"-=50px"}).
I know there is other solution but I would like to achieve this with .toggle() without hiding an showing the div. Any ideas?

$("#myDiv").toggle(function() {
$(this).stop().animate({
left:"+=50"
}, 500);
}, function() {
$(this).stop().animate({
left:"-=50"
}, 500);
});
#myDiv{
background-color:black;
width:100px;
height:100px;
position:absolute;
left:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="myDiv"></div>
hope this answer your question. However, jQuery 1.9 and newer do not allow this feature.

there is no toggle function using click since 1.9 . But you can still doing this using two ways:
for more explaination
$(function(){
//basic method
var clicked = false;
$('#mydiv1').click(function(){
if(clicked){
clicked = false;
$(this).animate({"left":"+=50px"});
}else{
clicked=true;
$(this).animate({"left":"-=50px"});
}
});
//create new function like old built-in function
$.fn.clickToggle = function(func1, func2) {
var funcs = [func1, func2];
this.data('toggleclicked', 0);
this.click(function() {
var data = $(this).data();
var tc = data.toggleclicked;
$.proxy(funcs[tc], this)();
data.toggleclicked = (tc + 1) % 2;
});
return this;
};
$('#mydiv2').clickToggle(function(){
$(this).animate({"left":"+=50px"});
}, function(){
$(this).animate({"left":"-=50px"});
});
});
#mydiv1{
background-color: yellow;
width: 50px;
height: 50px;
position: absolute;
left: 100px;
}
#mydiv2{
background-color: blue;
width: 50px;
height: 50px;
position: absolute;
left: 200px;
top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="mydiv1"></div>
<div id="mydiv2"></div>
</div>

jquery change time interval on click and when click function is done reset back to default

I have a custom content slider where the slide happens every after 5 seconds.The slider also have Next and Prev functionalities.
Problems:
When I click next the slide doesn't happen immediately.
After clicking next/prev the slider starts to slide very fast.
What I want to do:
1.When I click next/prev I want the slider to slide immediately without waiting for the 5 seconds interval. And when the slide is done reset the time interval to default ie 5 seconds.
<div id="content-slide">
<div id="content-slide-container">
<div class="content content-1"><h2>1</h2></div>
<div class="content content-2"><h2>2</h2></div>
<div class="content content-3"><h2>3</h2></div>
<div class="content content-4"><h2>4</h2></div>
<div class="content content-5"><h2>5</h2></div>
<div class="content content-6"><h2>6</h2></div>
<div class="content content-7"><h2>7</h2></div>
<div class="content content-8"><h2>8</h2></div>
<div class="content content-9"><h2>9</h2></div>
<div class="content content-10"><h2>10</h2></div>
<div class="content content-11"><h2>11</h2></div>
<div class="content content-12"><h2>12</h2></div>
<div class="content content-13"><h2>13</h2></div>
<div class="content content-14"><h2>14</h2></div>
<div class="content content-15"><h2>15</h2></div>
<div class="content content-16"><h2>16</h2></div>
</div>
</div>
<div id="navigation">
<span id="prev-slide">Prev</span>
<span id="next-slide">Next</span>
</div>
css
#content-slide {
width: 200px;
height: 100px;
position: relative;
overflow: hidden;
margin: 0 auto;
}
#content-slide-container{
width: 3200px;
height: 100px;
}
.content {
width: 200px;
height: 100px;
background-color: #FF1493;
float: left;
}
.content h2{
font-size: 25px;
text-align: center;
}
#navigation{
width: 800px;
height: 20px;
margin: 0 auto;
}
#prev-slide{
width: 100px;
height: 20px;
float: left;
background-color: #000000;
text-align: center;
color: #FFFFFF;
cursor: pointer;
}
#next-slide{
width: 100px;
height: 20px;
float: right;
background-color: #000000;
color: #FFFFFF;
text-align: center;
cursor: pointer;
}
js
$(document).ready(function(){
var foo = {
content_width : 200,
box : $("#content-slide-container"),
interval : 0,
counter : 1,
pause : 5000,
bar : false
};
function startSlider(){
foo.interval = setInterval(function(){
// Next
if(foo.bar){
foo.box.animate({'marginLeft':'+='+(foo.content_width)});
foo.counter--;
if(foo.counter<= 1){
foo.bar = false;
}
// Prev
}else{
foo.box.animate({'marginLeft':'-='+(foo.content_width)});
foo.counter++;
if(foo.counter>=16){
foo.bar = true;
}
}
},foo.pause);
}
startSlider();
function pauseSlider(){
clearInterval(foo.interval);
}
foo.box.on('mouseenter',pauseSlider).on('mouseleave',startSlider);
$('#prev-slide').click(function(){
if(foo.counter>1){
foo.bar = true;
startSlider();
}
});
$('#next-slide').click(function(){
if(foo.counter<16){
foo.bar = false;
startSlider();
}
});
});
JSFIDDLE here

Well I made slight updates to your function which is as below:
See inline comments
DEMO
$(document).ready(function(){
var foo = {
content_width : 200,
box : $("#content-slide-container"),
interval : 0,
counter : 1,
pause : 5000,
bar : false
};
function startSlider(){
foo.interval = setInterval(function(){
// Next
if(foo.bar){
slideLeft()//keep sliding left in a separate function
// Prev
}else{
slideRight()////keep sliding right in a separate function
}
},foo.pause);
}
//2 new functions for slideLeft and slideRight
function slideLeft(){
foo.box.animate({'marginLeft':'+='+(foo.content_width)});
foo.counter--;
if(foo.counter<= 1){
foo.bar = false;
}
}
function slideRight(){
foo.box.animate({'marginLeft':'-='+(foo.content_width)});
foo.counter++;
if(foo.counter>=16){
foo.bar = true;
}
}
//end
startSlider();
function pauseSlider(){
clearInterval(foo.interval);
}
foo.box.on('mouseenter',pauseSlider).on('mouseleave',startSlider);
$('#prev-slide').click(function(){
if(foo.counter>1){
foo.bar = true;
pauseSlider(); //on click clear interval
slideLeft() //call slideLeft
startSlider() //start the slide again with interval
}
});
$('#next-slide').click(function(){
if(foo.counter<16){
foo.bar = false;
pauseSlider() //on click clear interval
slideRight() //slide Right
startSlider() //start it again
}
});
});

You shoul move your code to setPrev and setNext functions. They should bee on the same level with startSlider function. Also you should clear interval after $('#prev-slide').click(function(){ and $('#next-slide').click(function(){

Alternate z-index between 2 divs on click?

I'm not great with JS so been using trial and error to try and figure out how to get 2 divs to swap z-index on the click of a trigger (button).
I currently have 2 drawers that technically are on top of each other and slide out from the right. On click of 'Buy' the #QuickShopDrawer should open and on click of 'Cart' or 'Add to Cart' the #CartDrawer should open.
Link to my test store.
My code so far is making the open with the #CartDrawer on top with a higher z-index.
JS:
Drawer.prototype.init = function () {
$(this.config.open).on('click', $.proxy(this.open, this));
$('.js-drawer-open-right-two').click(function(){
$(this).data('clicked', true);
});
if($('.js-drawer-open-right-two').data('clicked')) {
//clicked element, do-some-stuff
$('#QuickShopDrawer').css('z-index', '999');
} else {
//run function 2
$('#CartDrawer').css('z-index', '999');
}
this.$drawer.find(this.config.close).on('click', $.proxy(this.close, this));
};
I've tried this which is more of what I want but it's only firing once?
$('.js-drawer-open-right-two').click(function() {
var i = $(this).index();
$('.drawer--right').hide();
$('.drawer--right-two' + (i+1)).show();
});
Any help would be greatly appreciated!

You need to swap the z-index of the elements on button click. Also, you can disable the button on click so that user cannot click it continiously.
Demo
$(document).ready(function() {
$('#buy').on('click', function(e) {
var myZindex = $('#QuickShopDrawer').css('z-index');
$('#QuickShopDrawer').css('z-index', $('#CartDrawer').css('z-index'));
$('#CartDrawer').css('z-index', myZindex);
$(this).prop('disabled', true).siblings('button').prop('disabled', false);
});
$('#addToCart').on('click', function(e) {
var myZindex = $('#CartDrawer').css('z-index');
$('#CartDrawer').css('z-index', $('#QuickShopDrawer').css('z-index'));
$('#QuickShopDrawer').css('z-index', myZindex);
$(this).prop('disabled', true).siblings('button').prop('disabled', false);
});
});
button {
position: absolute;
top: 150px;
left: 0;
clear: both;
}
#addToCart {
margin-left: 50px;
}
.red {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
left: 20px;
top: 20px;
z-index: 1;
}
.green {
position: absolute;
width: 100px;
height: 100px;
background-color: green;
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div>
<div id="QuickShopDrawer" class="red">fdsafdsafdsa</div>
<div id="CartDrawer" class="green">fdsafdsafdsa</div>
</div>
<button id="buy">Buy</button>
<button id="addToCart">Add To Cart</button>

Ionic Event-LIsteners on-hold/on-tab Parent/Child Issue

In an cordova/ionic app there is a parent-div on which on-hold-listener is attached and a child-div which subscribed for on-tab events like so:
<div on-hold="doSomething()">
<div on-tap="doSomething2()">...</div>
</div>
From time to time it works but there have been situations in what on-tab was executed instead of on-hold when pressing time was bigger than 500ms.
Might this be done in a better way? Please take into consideration that child-div fills out parent completely and it should remain so.
Thanks in advance.

When you have a div parent of another div the events are propagated.
You can try by yourself here:
.c2 {
width: 200px;
height: 200px;
background-color: red;
}
.c1 {
width: 220px;
height: 220px;
background-color: yellow;
}
<div class="c1" onclick="alert('squareParent');">
<div class="c2" onclick="alert('squareChild');">
</div>
</div>
To avoid this you need to stop the propagation:
document.getElementById("c1").addEventListener('click', function(e) {
alert("c1");
}, false);
document.getElementById("c2").addEventListener('click', function(e) {
alert("c2");
e.stopPropagation();
}, false);
#c2 {
width: 200px;
height: 200px;
background-color: red;
}
#c1 {
width: 220px;
height: 220px;
background-color: yellow;
}
<div id="c1">
<div id="c2">
</div>
</div>
You could check more about javascript bubble if you want more information.

After experimenting with stopPropagation I came up with following answer that needs setTimeout to check for mouse/cursor is being holded.
When just clicking on the child-div(red) doSomething2 is alerted whereas holding onto child-div alerts doSomething of parent instead:
var holding = false;
var secondFunctionCall = false;
document.getElementById("c1").addEventListener('mousedown', function(e) {
holding = true;
setTimeout(function(){
if(holding){
secondFunctionCall = false;
alert("calling doSomething()");
}
},500);
}, false);
document.getElementById("c2").addEventListener('mousedown', function(e) {
holding = true;
secondFunctionCall = true;
}, false);
document.getElementById("c2").addEventListener('mouseup', function(e) {
holding = false;
if(secondFunctionCall){
alert("calling doSomething2()");
}
}, false);
#c2 {
width: 200px;
height: 200px;
background-color: red;
}
#c1 {
width: 220px;
height: 220px;
background-color: yellow;
}
<div id="c1">
<div id="c2">
</div>
</div>
When transfering this code into a cordova-app mouse-event types have to be replaced by touch-event types as it is answered here.

Drop Down Animate Contact Box

I have been looking all day for a way to make a contact form similar to the one on this site: http://45royale.com/
If you click on the contact button a black background fades in and the from drops down using an ease function. I have been picking through the code trying to see what to do but I am stuck and I have also been looking and other javascript pop ups but so far it seems they only use php for the form however this one calls a html.
Any suggestions?

Here is something like the form in the example: http://jsfiddle.net/ep39v/3/.
And the source:
HTML
<div class="form"></div>
<button id="showFormBtn">Show form</button>
​
JavaScript
var form = $('.form');
$('#showFormBtn').click(function () {
fadeBackground(showForm);
});
(function () {
form.css({
top: -form.height(),
left: ($(document.body).width() - form.width()) / 2
});
}());
function fadeBackground(callback) {
var background = $('<div class="background"></div>');
$(document.body).append(background);
background.fadeTo(300, 0.5, function () {
if (typeof callback === 'function') {
callback();
}
});
}
function showForm() {
var form = $('.form');
form.animate({ top: 10 }, 1500, 'easeOutElastic');
}
​
CSS
.form {
width: 30%;
height: 40%;
background: black;
position: absolute;
}
body {
height: 100%;
}
.background {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
background: black;
opacity: 0;
}​
May be you need to change only the easing.