Develop Reference

Transition logo only when it slides left not when it goes back to original position

I'm building my homepage with a custom theme in wordpress.
I placed my logo in the middle of the page and I need it goes fixed when I scroll to it. I achieved it with this code:
var stickyLogo = jQuery('.logo_centered').offset().top;
jQuery(window).scroll(function() {
if (jQuery(window).scrollTop() > stickyLogo) {
jQuery('.logo_centered').addClass('fixato');
}
else {
jQuery('.logo_centered').removeClass('fixato');
}
});
and it works.
I also added a transition when click on it to hide it and open the slidein menu.
jQuery('.logo_centered').on('click', function(){
jQuery('.logo_centered').toggleClass('hideme')
})
While this is the menu opening
jQuery('.centrato').on('click', function(){
jQuery('.overlay').toggleClass('overlay--active')
})
jQuery('.overlay').on('click', function(){
if(jQuery('.overlay').hasClass('overlay--active')){
jQuery('.overlay').removeClass('overlay--active')
}
})
jQuery('.overlay').on('click', function(){
jQuery('.logo_centered').toggleClass('pushme');
})
jQuery('.overlay').on('click', function(){
if(jQuery('.logo_centered').hasClass('hideme')){
jQuery('.logo_centered').removeClass('hideme')
jQuery('.logo_centered').removeClass('pushme')
}
})
But, as you can see on my demo website:
http://arioldigioielleria.it/test/
the animation is triggered also when it goes fixed and back.
How can I avoid this?

You can disable the transition when scrolling by making your transition specific to horizontal movement:
.logo_centered {
transition:left 0.5s;
}
By the way, this is now possible using only CSS with position:sticky. You might find it more maintainable than JavaScript:
A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent.
-MDN

difficulties with div following cursor

I'm trying to show a tooltip whenever the person hovers over an image, I've also made the tooltip follow the mouse, and the tooltip will disappear whenever the person leaves the area where the image is located. This works fine and all, but when I move the cursor to the right when the tooltip is following it, it'll start flickering. I know that the cause of this is because the cursor is leaving the image area and entering the tooltip area for a little amount of time. Got no idea how to fix this. Have a look at my code:
HTML:
<img id="mainImage" src="https://i1.wp.com/historiek.net/wp-content/uploads-phistor1/2015/09/Het-nieuw-logo-van-Google-e1441130561430.jpg?fit=663%2C282&ssl=1">
<div id="toolTip">This is the logo of google</div>
JS:
$('#mainImage').hover (
$('#mainImage').on('mousemove', function(e) {
$('#toolTip').css({
'left' : e.pageX,
'top' : e.pageY,
'display' : 'block'
});
}),
$('#mainImage').on('mouseout', function() {
$('#toolTip').css('display', 'none');
})
);
Thanks in advance.

In your CSS for this page, set pointer-events: none on your tooltip:
#toolTip {
pointer-events: none;
}
This will cause click and hover events to be ignored, so the tooltip will no longer steal the hover event from the element underneath it.

trying to make a div slide down and up from top of page using - top positioning and jquery animate upon click

basically when a user clicks the .selector element the div .dropDown should slide up -100px and when they click again it should slide down to top: 0px.
$(document).ready(function(){
var orig = $(".dropDown").outerHeight(); // 104
var top = $(".dropDown").css("top");
if(top == "0px"){
$(".selector").on("click", function(e){
$(".dropDown").animate({top : "-100px"}, 400,
function(){
var top = $(".dropDown").css("top");
alert(top);
})
})
}
// else{
// $(".selector").on("click", function(e){
// $(".dropDown").animate({top : "0px"}, 400);
// $("body").css({"background-color" : "green"})
// })
// }
if($(".dropDown").css("top") == "-100px"){
$(".selector").on("click", function(e){
$(".dropDown").animate({top : "0px"}, 400);
$("body").css({"background-color" : "green"})
})
}
});
logic: if the dropDown div's top position is zero that means that the div is open(visible). when the user clicks the button to hide the dropDown div the div goes to -100px(hidden). then if the user wants to see the div again they click the button and the div goes back down to top: 0.
Im having problem when the top is at -100px and when i click the button the dropdown doesnt slide down. please help with that. Thanks.
while I was setting up the jsfiddle I realised that what I have so far works in FF but not in chrome. that is weird to me, if you can help me solve that problem too that would be also great.

You can achieve this by laying out your div as it should appear while expanded, and set display:none, but take the clickable tab out as a child element so that it is always visible. Then you can simplify your javascript quite a bit by using slideToggle. The 300 value just specifies how fast you want it to slide.
Example:
$(document).ready(function(){
$('.selector').click(function () {
$('.dropDown').slideToggle(300);
});
});
updated jsFiddle
Edit
Maintaining the border at this point is just styling, you can add a container div that holds your Information tab, and just give that a top-border. Here is a further updated jsFiddle.

Animate showing and hiding login box

I am trying to create a jquery animated loginbox.
I am a total javascript/jquery noob.
I have a div that contains the loginbox. That div is about 150px in height, and it is placed at the top of the page, so that only the bottom 15px of the div are visible when the page is loaded.
I am trying to slide down the div so that the rest of the login box is revealed on click, and make it slide back up when the bottom part of the div is clicked again.
Now, I am doing:
$('#showLogin').click(function(e){
$('#formContainer').animate({top: "+=135px"} , 1500)
e.preventDefault()
})
What this does is animate the slide down of the div. But how can I check if it has already been slided down so I can slide it back up?
Should I check for the position of the div and decide if it should move up or down, or is there a better way to do it?
The website is here

I think you are looking for .slideToggle(). An example: http://jsfiddle.net/FL4zZ/

Try this jsFiddle example. It animates a div with a form within it on click, and retracts it once it's fully extended.
The basic jQuery is:
$('div').click(function() {
var pos = $(this).css('top')
if (!$(this).is(':animated')) {
if (parseInt(pos, 10) == 0) {
$(this).animate({'top': '-35px'}); // anim up
}
else {
$(this).animate({'top': '0px'}); //anim down
}
}
});

mouseout set previus returns previous bg image of div

all.
I have.
<div id="imagecontainer" class="header-image-container"> </div>
BG image are specified in css for ich page according on parent class.
.category-1 #imagecontainer {
background: url(_/images/1.jpg);
}
And i have menu. I want to chage BG image ommouse over, and on mouse out return image specified in css for this page according on parent class. I think it could be real using JQuery. For example we have opened category-3 page and move mouse on category-1 menu item and see catefory-1 BG image in #imagecontainer, and then we move mouse out see again category-3 BG image.

I think this will do you want:
$('#menu').mouseenter(function() {
$('#imagecontainer').css({'background':'blue'});
}).mouseleave(function() {
$('#imagecontainer').removeAttr('style');
})
You can see it in action here: http://jsfiddle.net/Cdzk8/
If you have other inline styles on your imagecontainer, it will also remove those on mouseleave. In that case, you will have do something more like what mblase75 is recommending.

Store the current background image as data before swapping it out, and retrieve it from there when you want to swap it back.
$('#imagecontainer').mouseover(function() {
$(this).data('bgimg') = $(this).css('background-image');
$(this).css('background-image','url(my/new/url.jpg)');
}).mouseout(function() {
$(this).css('background-image', $(this).data('bgimg'));
});