Develop Reference

How to stop 'tap' event firing on the same object

I have a problem I need help with as I am a bit new to Jquery, what I have is a button which is half hidden at the left side of the screen and a menu which is completely hidden from view also at the left side, what I am trying to achieve is, on mobile the user would 'tap' the button which would slide from the side to reveal the full button for which then you would tap the button again which would then slide the menu out from its hidden position on the left. The problem I am having is no matter which approach I take, whenever I tap the half hidden button, it will slide out but then the menu slides out straight away without having to tab the button a second time so if any of you kind folk could point me in the right direction I would really appreciate it.
Here is my code:
$( "#catbutt" ).on("tap",function(e) {
$( "#catbutt" ).animate({left: "0px"},300,'swing');
});
$( "#catbutt" ).on("tap",function(e) {
$( "#categories" ).animate({left: "0px"});
});

Maybe something like this, where you check the #catbutt element's left position, and if it's already 0px, slide out the #categories element, otherwise, just slide out the #catbutt element (heh. catbutt.) :
$( "#catbutt" ).on("tap",function(e) {
if($(this).css('left') == '0px') {
$( "#categories" ).animate({left: "0px"});
}
else {
$(this).animate({left: "0px"}, 300, 'swing');
}
});
You're still going to have to get it to close, too. Here's a Fiddle with it having three stages... the first is the button expanding, the second is the menu expanding, and the third is both the button and menu collapsing: https://jsfiddle.net/wcvg3nby/
Here's the pertinent code from the Fiddle:
CSS
#catbutt {
width: 100px;
height: 20px;
position: fixed;
left: -80px;
background-color: red;
}
#categories {
width: 100px;
position: fixed;
left: -100px;
}
HTML
<div id='catbutt'></div>
<div id='categories'>
<div>Cat 1</div>
<div>Cat 2</div>
<div>Cat 3</div>
<div>Cat 4</div>
</div>
JS
$('#catbutt').on('click', function() {
if($(this).offset().left < 0) {
$(this).animate({'left':'0px'});
}
else if($(this).offset().left == 0) {
$(this).animate({left: '100px'});
$('#categories').animate({left: '0px'});
}
else {
$(this).animate({left: '-80px'});
$('#categories').animate({left: '-100px'});
}
});

jQuery div animate from left to right and comes back after pause

I'm trying to slide a div from the left to the right side when the 'submit' button is clicked. After a little pause, the div would automatically slides back to it's original position. Currently it goes to the right side but it isn't coming back to the left corner.
CSS
#mainform{
position: absolute;
display: block;
padding-top:20px;
font-family: 'Fauna One', serif;
}
HTML
<div id="mainform">
<!-- Required div starts here -->
<form id="form">
<h3>Contact Form</h3>
<div class="hello"></div>
<input type="button" id="submit" value="Send Message"/>
</form>
</div>
JS
$(document).ready(function() {
$('#submit').click(function(e) {
reslide();
function reslide() {
$('#mainform').delay().animate({width: '510px', left: '1050'}, 600).delay(5000).animate({width: '510px', right: '1000px'}, 200, function() {
setTimeout(reslide, 3000);
});
}
$('.hello').fadeIn(1500);
$("<b>Successfully send</b>").appendTo(".hello");
$('.hello').fadeOut(2500);
});
});

When you give feedback to the user after/before submiting, try to use CSS3 Transform instead of actually moving/resizing the object.
function slide($obj) { // jQuery object of element
$obj.css("transform", "translateX (50px)");
setTimeout(function(){
$obj.css("transform", "none");
}, 5000);
}
To make it smooth (real animation) apply CSS3 Transition property.
<style>
.object {
transition: transform 0.6s;
}
</style>
Or you can shorten, if you're sure everything'd go smoothly.
function slide($obj) { // jQuery object of element
$obj.animate("transform", "translateX (50px)")
.delay(600).
.animate("transform", "translateX (0px)");
}
PS; in my expirience jQuery.delay(); wasn't always working with queueing animations, i'm not entirely sure why. As a matter of fact, this happened only sometimes. Sometimes tought it wasn't working
// not working
$("smth").animate({"rule":"val"}).delay(500).animate("rule":"val");
// working
$("smth").animate({"rule":"val"})
setTimeout(function(){
$("smth").animate({"rule":"val"})
}, 1000);

The reason it's not working is that, while you add right to the element, you also keep left with its original value, thus the element will not "come back". Add left: '', to the 2nd animate function and you should be good to go:
function reslide() {
$('#mainform').delay().animate({
width: '510px',
left: '1050'
}, 600).delay(5000).animate({
width: '510px',
left: '',
right: '1000px'
}, 200, function () {
setTimeout(reslide, 3000);
});
}
Here is a fiddle you can play with: http://jsfiddle.net/bv8dwaq2/

How to slide a div by hovering over another div with jquery?

I have some code here and cannot find out how to make this work because I am still really new to javascript and jquery. I will have a demo below so you can see what I have going on. In the demo there is div positioned left:-60px so it is hidden, this div also has class of 'show' which positions the div to left:0 There is also the long black box which is another div. I want to make it so when you hover over the long black box, it will activate the 'show' property of the other div. Here is my code:
var $showSidemenu = $('#sidemenu');
var $sidemenuShowButton = $('#sidemenuShowButton');
function(showSidemenu){
$showSidemenu.onmouseover($sidemenuShowButton).addclass('show');
}
#sidemenuShowButton {
width:60px;
height:100%;
background:#000000;
top:0;
left:0;
position:fixed;
}
#sidemenu {
width: 60px;
height:100%;
background-color: #383D3F;
position: fixed;
top: 0;
left:-60px;
float: left;
z-index:0;
}
#sidemenu.show {
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sidemenuShowButton"></div>
<div id="sidemenu"></div>

try this jQuery:
var $showSidemenu = $('#sidemenu');
var $sidemenuShowButton = $('#sidemenuShowButton');
$(document).ready(function(){
$sidemenuShowButton.on('mouseover',function(){
$('#sidemenu').addClass("show");
});
$sidemenuShowButton.on('mouseout',function(){
$('#sidemenu').removeClass("show");
});
// to make the showed div stay while the mouse is still over it
$('#sidemenu').on('mouseover',function(){
$(this).addClass("show");
});
$('#sidemenu').on('mouseout',function(){
$(this).removeClass("show");
});
});
if you want a little animation, you can use CSS3 Transition for that, like this one:
#sidemenu {
transition: 1s;
}
HERE'S A WORKING DEMO

Use JQuery's show and hide functions. If you set your #sidemenu to display: none;. And then use this this function it will work:
$('#sidemenu').mouseenter(function(){
$("#sidemenuShowButton").show();
}).mouseleave(function(){
$("#sidemenuShowButton").hide();
});
No classes are needed in this way.

Your JS should looks like this:
var $showSidemenu = $('#sidemenu');
var $sidemenuShowButton = $('#sidemenuShowButton');
$sidemenuShowButton.on('mouseover', function(){
$showSidemenu.addClass('show')
});
First of all you are using function which never used and cannot be used since it have no name. Second, there is no onmouseover method in jQuery (read the manual ;-). Third you have to pass there a callback function which will be involved when 'mouseover' event occurs.
And if you wanna hide your div when mouse leaves add
$showSidemenu.on('mouseleave', function(){
$showSidemenu.removeClass('show')
});
You should use $showSidemenu in this case instead of $sidemenuShowButton because when $showSidemenu apears mouse leaves $sidemenuShowButton and enters $showSidemenu. But if you wanna use css3 animation - it's better to make appearing div nested to control div and use event bobbling.
And jsfiddle

Solution:Use mouseover and mouseout events to add and remove class "show"
I have intentionally added mouseout event on showSidemenu as when it slides in it goes over sidemenuShowButton div and comes on top of it, so attaching mouseout to sidemenuShowButton will cause flickering effect.
http://api.jquery.com/category/events/mouse-events/
$sidemenuShowButton.mouseover(function(){
$showSidemenu.addClass("show");
}
);
$showSidemenu.mouseout(function(){
$showSidemenu.removeClass("show");
}
);
Working JS Fiddle Example: http://jsfiddle.net/2cjjdm7j/1/

Stackoverflow like error display

see this Fiddle
What i have is few button and div of same class.
When i click a button of a class the div of same class gets scrollIntoView and the .log appears beside the div on its right side.
PROBLEMS
OnClick button the scroll does not happen
The .log does not appear beside div
The small triangle pointer does not appear beside .log
Additions(The thing i want but dont know how do i do it!)
Whenever the .log appears i want it to shake little upand down
which continues to do untill mouseover
After mouseout i want the .log to fadeOut(2000)
FOR downvoters
<button class="a1">Div1</button>
<button class="a2">Div2</button>
<button class="a3">Div3</button>
<button class="a4">Div4</button>
<button class="a5">Div5</button>
<button class="a6">Div6</button>
<div id="container">
<div class="a1">This is div1</div>
<div class="a2">This is div2</div>
<div class="a3">This is div3</div>
<div class="a4">This is div4</div>
<div class="a5">This is div5</div>
</div>
<div class="log">Your have a fatal error.</div>
#container div {
height:250px;
width:250px;
border:2px solid #000;
margin:15px;
}
#container {
margin:20px;
}
.log {
z-index: 1;
display: none;
color: #fff;
background-color: #c04848;
text-align: left;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
max-width:270px;
font-size:15px;
padding:10px;
position: absolute;
}
.log:after {
top: 0;
left: -9px;
border-top: 9px solid #c04848;
border-left: 9px solid transparent;
}
$('button').click(function(){
var c = $(this).attr('class');
var div = $('#container div.'+c);
$(document).scrollTo(div, 1000);
log.css({
top : div.position().top + div.height()/2,
left : div.position().left + 20
}).show();
});

Fixed it
$('button').click(function(){
var c = $(this).attr('class');
var div = $('#container div.'+c);
$(document).scrollTop(div.offset().top);
$('.log').css({
top : div.position().top + div.height()/2,
left : div.position().left + 20
}).show();
});
What I did is changed the scrollTo to scrollTop. I have added a selector to log class because most likely you forgot it.
Shaky effect
var inter;
function bounceOn(){
var pos = $('.log').position().left;
$('.log').animate({left: pos+50},500, function(){$('.log').animate({left: pos},500)})
setTimeout(bounceOn, 1000);
}
Try and make something out it maybe?
http://jsfiddle.net/h76jg/6/

All parts of my answer are shown in this JFiddle
In terms of scrollTo, you were probably looking for scrollTop. Try something like this:
scrollTop: div.offset().top
instead of:
$(document).scrollTo(div, 1000);
Although, Just going by what your writing there, I am going to assume you wanted some sort of smooth transition to the div, correct? Try this instead:
$('html, body').animate({
scrollTop: div.offset().top
}, 1000);
This will create a smooth scroll to the div instead of just moving to it.
For the log section, you forgot to reference the log class. Instead, you tried to reference it like a variable, so the interpreter got confused. Try putting the log css call in a reference, like this:
$('.log').css({...
Hope these help!
Edit: Were you intending something like This for the bounce? (up and down?). Either Case, #Dharman has the right idea with his code. You would just want to add another animation (similar to the scrolling), but put a timeout on the end (so the method will continually repeat)

Since i cannot accept anyone's answer coz i dont like em but thanks for an idea of bounce animation that did worked...
now i have created my own Fiddle And it worked perfetly!
$('button').click(function () {
var c = $(this).attr('class');
var div = $('div.' + c);
$('html, body').animate({
scrollTop: div.offset().top
}, 1000); //thanks to Dylan Corriveau
console.log(div.position().left);
$('.log').css({
top: div.position().top + div.height() / 2,
left: div.position().left + div.width() + 50
}).show();
clearTimeout(inter);
setTimeout(bounceOn, 500);
});
$('.log').mouseover(function () {
clearTimeout(inter);
}).mouseout(function () {
$(this).fadeOut(3500);
});
var inter;
//here is the magic!
function bounceOn() {
var pos = $('.log').position().left;
$('.log').animate({
left: pos + 15
}, 50, function () {
$('.log').animate({
left: pos
}, 50)
})
inter = setTimeout(bounceOn, 215);
}

Animation synching, cursor and highlight

So I almost have my code working how I want, but can't get my animation synched together just right. I am trying to animate a cursor highlighting text, and then clicking on a button. The problem is that the cursor is either too slow or too fast. I am trying to make this dynamic so that no matter how long the text is I can still have the animation synch. I know that it is probably just a math issue, but can't quite get my head around it. Something about trying to match pixels with milliseconds is making my head spin. Please help before I pull out all my hair. Thanks.
Here is the html
<p><span id="container">I need to be highlighted one character at a time</span>
<input id="click" type="button" value="click me"/></p>
<img src="http://dl.dropbox.com/u/59918876/cursor.png" width="16"/>
Here is the CSS
#container{
font-size: 16px;
margin-right: 10px;
}
.highlight{
background: yellow;
}
img{
position: relative;
top: -10px;
}
And the javascript
function highlight(){
var text = $('#container').text(); //get text of container
$('#click').css('border','none'); //remove the border
$('img').css('left', '0px'); //reset the cursor left
$('img').animate({left: $('#container').width() + 40}, text.length*70); //animation of cursor
$('#container').html('<span class="highlight">'+text.substring(0,1)+'</span><span>'+text.substring(1)+'</span>'); //set the first html
(function myLoop (i) {//animation loop
setTimeout(function () {
var highlight = $('.highlight').text();
var highlightAdd = $('.highlight').next().text().substring(0,1);;
var plain = $('.highlight').next().text().substring(1);
$('#container').html('<span class="highlight">'+highlight+highlightAdd+'</span><span>'+plain+'</span>');
if (--i) myLoop(i);// decrement i and call myLoop again if i > 0
}, 70)
})(text.length);
setTimeout(function () {
$('#click').css('border','1px solid black');
}, text.length*85);
}
highlight();
var intervalID = setInterval(highlight, $('#container').text().length*110);
//clearInterval(intervalID);
Here is a link to the fiddle I have been playing around in.

This will probably get me down voted but maybe you will get some better idea...
Fiddle Here
$(document).ready(function() {
$('p').click(function(){
$('span').animate({'width':'100'},1000);
$('.cursor').animate({marginLeft: 100},1000);
});
});

Thanks to Dejo, I was able to modify my code to make this work exactly as I wanted. It was much easier to increase the width of one span rather than trying to expand one span while shrinking another. This also allowed me to have both the cursor moving and the span width increasing animations run in sync.
The HTML
<p><span id="highlight"></span><span id="container">I need to be highlighted one character at a time</span><input id="click" type="button" value="click me"/></p>
<img id="cursor" src="http://dl.dropbox.com/u/59918876/cursor.png" width="16"/>
The CSS
p{
position: relative;
font-size: 16px;
}
#highlight{
position: absolute;
background-color:yellow;
height:20px;
z-index:-50;
}
#cursor{
position: relative;
top: -10px;
}
#click{
margin-left; 10px;
}
And the javascript
function highlight(){
var textLength = $('#container').text().length;
$('#click').css('border','none'); //remove the border
$('#cursor').css('left', '0px'); //reset the cursor left
$('#highlight').width(0);
$('#highlight').animate({width: $('#container').width()}, textLength * 70);
$('#cursor').animate({left: '+='+$('#container').width()} , textLength * 70, function(){
$('#cursor').animate({left: '+=30'} , textLength * 20);
});
setTimeout(function () {
$('#click').css('border','1px solid black');
}, textLength*100);
}
highlight();
var intervalID = setInterval(highlight, $('#container').text().length*120);
//clearInterval(intervalID);

I realize it's quite a bit late, but here's a bit of help (for future reference).
The JQuery animate function is, by default, set an easing of swing, which means that the speed of the animation will vary throughout (see here).
To (kind of) fix the problem, I added the linear option to the animate method for the cursor, and increased its speed slightly.
You can see this new version at JSFiddle.
However, since the setTimeout loop can be slowed for some reasons, the animation may not be in sync.