Develop Reference

I want to add transitions to sticky header to my store

I want to add transitions to sticky header to my store. I want to stciky header to show from the top when the scroll is > 50. The scrollheader and coverheader classes works fine. But transitions not worked. The header just jumps to above as sticky header is enabled. The logo part is resized in sticky header by almost 80px than normal header.
Here is the code of Javascript.
(function enableStickyHeader() {
var stickyHeader = document.querySelector('header').dataset.sticky;
var scrollHeader = $("header.scrollheader");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50 && stickyHeader == 'true') {
scrollHeader.removeClass('scrollheader').addClass("coverheader");
} else {
scrollHeader.removeClass("coverheader").addClass('scrollheader');
}
});
})();
And through css I am applying css transition property. I have tried to get the results by applying height and line height to headers. But that also not works.
.coverheader {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
position: fixed;
}
header {
width: 100%;
line-height: 50px;
top: 0;
z-index: 150;
}
.scrollheader {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
position: relative;
}
And Html code for the case is this.
<header class="header-section scrollheader" data-section-id="header" data-section-type="header-section" data-sticky="true">
<p>logo and menu is there</p>
</header>

For the effect you give to work, the values ​​on which css is based must change.
I prepared the following example to give you an idea.
Please note: To make it easy to understand, I have slightly extended the animation time. And I made the background black and the header white.
(function enableStickyHeader() {
var stickyHeader = document.querySelector('header').dataset.sticky;
var scrollHeader = $("header.scrollheader");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 82 && stickyHeader == 'true') {
scrollHeader.removeClass('scrollheader').addClass("coverheader");
} else {
scrollHeader.removeClass("coverheader").addClass('scrollheader');
}
});
})();
html {
height: 10000px;
background: black;
}
html,
body {
padding: 0;
margin: 0;
}
.coverheader {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
position: fixed;
bottom: 100%;
transform: translateY(100%);
}
header {
display: flex;
width: 100%;
line-height: 50px;
z-index: 150;
background: white;
}
.scrollheader {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
position: relative;
transform: translateY(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="header-section scrollheader" data-section-id="header" data-section-type="header-section" data-sticky="true">
<p>logo and menu is there</p>
</header>

Sliding div's and stacking them (JavaScript)

I'm in the middle of making my website and I got a little road bump. This is how my code looks right now, and what I want to do is have the "About" box right below the "Home" box and have the above box slide down with the description that comes when you click the "Home" box. How may I do that?
This is the code to my JS file.
$(document).ready(function (event) {
var clicked=false;
$(".one").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"top": -40}); //Slides upwards 40pixels
}
else
{
clicked=true;
$(".two").css({"top": 0}); //Slides righ under "one"
}
});
var clicked2=false;
$(".three").on('click', function(){
if(clicked2)
{
clicked2=false;
$(".four").css({"top": -100}); //Slides upwards 40pixels
}
else
{
clicked2=true;
$(".four").css({"top": 0}); //Slides righ under "one"
}
});
});
On a complete side note, how could I get the boxes to start from the top of the page and how could I make he box be a huge box rater than a tiny strip of color?

you can try this one:
.container {
overflow:hidden;
}
.one {
position: relative;
top: 0;
background-color: #FFC300;
z-index: 1;
cursor:pointer;
}
.two {
position: relative;
top: -40px;
background-color: yellow;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
.three{
position: relative;
top: 0;
background-color: #E9A1B9;
z-index: 1;
cursor:pointer;
}
.four {
position: relative;
top: -18px;
background-color: #02C9C9;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
DEMO HERE

I would use a negative margins and toggle a simple .open class on the .one and .three divs :
$(".one, .three").click(function(){
$(this).toggleClass('open');
});
CSS :
.one, .three {
margin-bottom: -40px;
-webkit-transition: margin-bottom 1s;
-moz-transition: margin-bottom 1s;
-o-transition: margin-bottom 1s;
transition: margin-bottom 1s;
}
.open {margin-bottom: 0}
jsFiddle demo

You can simplify this a bit by using the jQuery toggle() function to do the work for you. (edit: you could also use slideToggle() for a different effect)
$(selector).toggle(speed,callback);
The optional speed parameter can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after toggle() completes.
html
<div class="container">
<div class="one">Main</div>
<div class="two" style="display: none">Welcome to my page!</div>
<div class="three">About</div>
<div class="four" style="display: none">All about me</div>
</div>
css
.one {
background-color: #FFC300;
cursor:pointer;
}
.two {
background-color: yellow;
}
.three{
background-color: #E9A1B9;
cursor:pointer;
}
.four {
background-color: #02C9C9;
}
js
$(document).ready(function (event) {
$(".one").on('click', function(){
$(".two").toggle("slow");
});
$(".three").on('click', function(){
$(".four").toggle("slow");
});
});
DEMO:
https://jsfiddle.net/qbuatjrm/4/

Trigger opacity transition on mouse in and out

I want to trigger a opacity transition. If an element is hovered by the cursor, the cursor shall fade out, change its background-image and then fade in again. I wanted to achieve that by adding and removing a css class. It's not working, what is wrong?
js fiddle
HTML
<div class="wrapper">
<div class="cursor">
</div>
<div id="grey">
</div>
</div>
CSS
.wrapper {
width: 100%;
height: 100%;
background-color: lightgrey;
padding: 60px;
cursor: none;
}
#grey {
width: 100px;
height: 100px;
background: grey;
}
.cursor {
position: fixed;
width: 20px;
height: 20px;
pointer-events: none;
opacity: 0;
-webkit-transition: opacity .3s; /* Safari */
transition: opacity .3s;
}
.red {
background: red;
opacity: 1;
}
.green {
background: green;
opacity: 1;
}
JS
$('.wrapper').on('mousemove', function(e){
$('.cursor').css('left', e.clientX-10).css('top', e.clientY -10);
if ($.contains($('.wrapper')[0], e.target)){
$('.cursor').removeClass('green').addClass('red');
}else{
$('.cursor').removeClass('red').addClass('green');
}
});

DEMO HERE
Ok, here you go. You need to keep track of 2 things here which you already achieved partially and also wait for fadeOut to complete and add a callback for adding and removing respective class
Whether cursor has entered element
Whether cursor has left element
Below is how you could actually do it.
var entered=false;//global variables to show the position of cursor
var left=false;
$('.wrapper').on('mousemove', function(e){
$('.cursor').css('left', e.clientX-10).css('top', e.clientY -10);
if ($.contains($('.wrapper')[0], e.target)){
if(!entered)
{
//just to do it once and not on every mousemove you need to check here whether
//it has already entered and moving inside the element
entered=true;
left=false;//to check the vice versa operation
$('.cursor').fadeOut('fast',function(){
//callback function after fadeOut completes
$(this).removeClass('green').addClass('red');
}).fadeIn('fast');
}
}else{
if(!left)
{
left=true;
entered=false;
//same goes here too
$('.cursor').fadeOut('fast',function(){
$(this).removeClass('red').addClass('green');
}).fadeIn('fast');
}
}
});

you have to change background color , not opacity ( opacity is always 1 )
CSS
.cursor {
position: fixed;
width: 20px;
height: 20px;
pointer-events: none;
opacity: 0;
-webkit-transition: background-color .3s; /* Safari */
transition: background-color .3s ;
}
.red {
background-color: red;
opacity: 1;
}
.green {
background-color: green;
opacity: 1;
}

So you said your question is wrong, it is "no, I just made it easier for hier, in reality it is an background image" - so you transition between two background-images.
Here is how you do it:
You can not do it with CSS transition in ONE element/div
You will have to make two divs wich one background each
Increase the zIndex of the div you want to fade out in by one
Fade out div, while the new div stays at opacity: 1

jQuery - Mouseleave not firing when moving mouse quickly

There are a few answers to similar questions, but none that are working for me while still giving me the desired effect, or none that I understand. So any help or guidance would be great
Here's a fiddle: http://jsfiddle.net/csoh1vzb/
Essentially what happens is when you hover over the cells quickly, the mouseleave function doesn't run and I'm left with the active state.
I've "half fixed" this, but it's still not as I would like it to be.
Adding this to mouseenter fixes the problem on the next hover:
$('.cell .hover').fadeOut();
$('.cell span').animate({ "marginTop" : "500px" });
(Not really a fix)
Any help would be great!

The problem is not the not fired mouseleave, the problem you are facing is that the animation takes 400ms (the default animation duration) to complete, which means that the animation is overriding the mouseleave css change directly after it has been applied when you leave the field within say 300ms
To avoid this, you need to stop the animation.
$('.cell span').stop();
$('.cell .hover').fadeOut();
Should do the trick.
As a Sidenote, if you're doing animations with javascript, better change to velocity.js which is far faster than jQuery's animate.

Whenever possible, it is always better to avoid the use of javascript and prefer using css rules.
You can easily replace your html generation and your fade animation using basic html and css, as you can see on this jsfiddle
Writing fully your html :
<a href="" class="cell cell-01" title="ONE">
<div class="hover"><span>ONE</span></div>
</a>
<a href="" class="cell cell-02" title="TWO">
<div class="hover"><span>TWO</span></div>
</a>
And defining most of the rules in your css :
.cell {width: 200px; height: 200px; background: #f00; float: left; display: block; overflow: hidden;}
.cell:hover .hover {
display:inline-block;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.hover {
display:inline-block;
width: 200px;
height: 200px;
background: #000;
text-align: center;
opacity: 0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.hover span {display: inline-block; padding: 10px 20px; font: bold 12px arial; font-style: italic; text-transform: uppercase; background: #222; border: 2px solid #fff; color: #fff;}
And you can easily reduce the size of your javascript, making the entire thing more stable and fast.
(function ($) {
$('.cell').on('mouseenter', function (){
var $this = $(this);
$(this).find('span').stop(true, false).animate({ "marginTop" : ($(this).innerHeight() / 2 - 19) + "px" });
}).on('mouseleave', function (){
var $this = $(this);
$(this).find('span').animate({ "marginTop" : "500px" });
});
}(jQuery));

Personally the first answer above is probably simpler and thus a better answer. But I like this because the code seems a bit cleaner overall.
HTML:
<div class="cell"> <span>ONE</span>
</div>
<div class="cell"> <span>TWO</span>
</div>
CSS:
.cell {
width: 200px;
height: 200px;
background: #f00;
float: left;
display: block;
overflow: hidden;
position:relative;
}
.hover {
width: 200px;
height: 200px;
background: #000;
text-align: center;
position: absolute;
top:-200px;
}
.hover span {
display: inline-block;
padding: 10px 20px;
font: bold 12px arial;
font-style: italic;
text-transform: uppercase;
background: #222;
border: 2px solid #fff;
color: #fff;
}
JavaScript:
(function ($) {
$('.cell').on('mouseenter', function () {
$(this).find('span').stop().animate({
"marginTop": ($(this).innerHeight() / 2 - 19) + "px"
});
$(this).find('.hover').stop().animate({
"top": 0
});
}).on('mouseleave', function () {
var $this = $(this);
$(this).find('.hover').stop().animate({
"top": "-200px"
});
$(this).find('span').animate({
"marginTop": "0px"
});
});
}(jQuery));

How to make a navigation which reveals on hover

I would like to create a navigation that reveals on hover however I am not sure how to go about doing it. I would like to do it how they have done it in the top left hand corner when you hover on the name: http://higz.ghosted.net/
I would like it to be just like the example and the menu which display to be a list so <ul> <li>

Here is an example related to what you are looking at- still there some issue you have to fix, but i have giving you the quick start.
final result -
http://jsbin.com/parok/4/edit?html,css,js,output
HTML -
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id='navigation'>
<div class='logo'></div>
<div class='menus'>
<ul>
<li><a href='#'>Home page</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Service</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS -
body {margin:0; padding: 0;}
#navigation {
width: 500px;
height: 100px;
background: wheat;
border-radius: 5px;
}
.logo {
width: 100px;
height: 100px;
background: red;
border-radius: 50px;
float:left;
margin-right: 20px;
font-size: 20px;
text-align:center;
color: white;
display: block;
}
.logo p {
margin-top: 30px;
}
.menus {
position: relative;
opacity: 0;
top: 40px;
}
.logo:hover {
cursor: pointer;
}
.menus a:link, .menus a:visited {color: darkgray; text-decoration: none; text-transform: uppercase;}
.menus ul {
list-style:none;
}
.menus ul li {
display: inline-block;
padding-right: 15px;
}
jQuery -
$(function(){
$('.logo').mouseover(function(){
//console.log('foo');
$('.menus').animate({
'opacity': 1,
'left': '20px'
}, 500);
}).mouseout(function(){
//console.log('bar');
$('.menus').animate({
'opacity': 0,
'left': '0px'
}, 500);
});
});

Use jquery and ajax if you want to do it Asynchronously. I prefer do it by calculating the navigation at run time using ajax provided they are not static pages. (depends on server side language you are using)
Otherwise just use jquery to do this.
With the hover event of jQuery you show the navigation and on just hide it :
$("#id").hover(function(){
$("#id").show();
});
$("#id").mouseleave/blur(function(){
$("#id").hide();
});
and do paste your code where you want to achieve it. Otherwise we can only put up theory here. We are not supposed to write entire code.

This is not a hard task to achieve..
Lets get started:
Step 1) Build a sample html content to be displayed on hover
<div class="toggle-display">
Your HTML
</div>
Step 2) Lets give it some css
.toggle-display {
opacity: 0.1; /*set to 0.0 to hide it completely */
width: 200px;
height: 50px;
border: 1px solid #333;
/* transitions */
-o-transition: all .3s linear;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
transition: all .3s linear;
}
.toggle-display:Hover {
opacity: 1.0;
}
3) Put it all together
<html>
<head>
<style>
.toggle-display {
opacity: 0.1; /*set to 0.0 to hide it completely */
width: 200px;
height: 50px;
border: 1px solid #333;
/* transitions */
-o-transition: all .3s linear;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
transition: all .3s linear;
}
.toggle-display:Hover {
opacity: 1.0;
}
</style>
</head>
<body>
<div class="toggle-display">
Your content
</div>
</body>
</html>
Here is a sample
Tried and works fine,
Hope this helped you (If so, mark this answer as ok please),
Best regards.
Alberto

Use Jquery:
$('.blog_title').on('mouseenter', function(){
$('ul').show();
});
In reality you want to animate and not just show(). It looks like the menu fades in and moves from the left.
Also you want to give your ul a class name otherwise this code will affect all the ul's in the HTML.
And you do the reverse on 'mouseleave'.