We Keep Coding

How to reset scrollTop() div positioning when scrolling back up?

I have a fixed nav and I'm changing the size of the logo at 155px scroll height and changing the positioning of the li's. Everything is working perfectly but it doesn't reset when I scroll back up. Do I need to make a greater than function for that? Any suggestions welcome, thanks :)
Here's the jquery:
$(document).scroll(function(){
if ($(this).scrollTop()>155){
$('.logo-nav').stop().animate({ height: 70 },20);
} else {
$(".menu li").addClass("nav-scroll");
$('.logo-nav').stop().animate({ height: 145 },20);
}
});
Here's the css:
li {
display: inline-block;
margin: 0;
position: relative;
top: 45px;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.nav-scroll {
top: auto;
}

Use $(window) rather than $(document):
$(window).scroll(function() {
if ($(this).scrollTop() > 155){
$('.logo-nav').stop().animate({ height: 70 },20);
} else {
$(".menu li").addClass("nav-scroll");
$('.logo-nav').stop().animate({ height: 145 },20);
}
});
And make sure you enclose it within $(document).ready() function.

How to add css transitions to js scroll in header?

I have a header that appears when the page scrolls down. I am trying to add css transitions to make it fade in and out because I've read that using javascript for fading is not as efficient.
.header-wrapper {
top:0;
left:0;
right:0;
position: fixed;
display:none;
height: 60px;
border-top: 1px solid #000;
background: red;
z-index: 1;
}
.header-wrapper.active {
display:block;
}
.header {
background-color:#000;
height:80px;
}
Here is the js fiddle
$(window).scroll(function () {
var y = $(window).scrollTop();
// if above 300 and doesn't have active class yet
if (y > 300 && !$('.header-wrapper').hasClass('active')) {
$('.header-wrapper').addClass('active');
// if below 300 has still has active class
} else if(y <= 300 && $('.header-wrapper').hasClass('active')) {
$('.header-wrapper').removeClass('active');
}
});

Transitions are added with the css3 property transition.
One common reason for confusion: you can only transition properties that accept numeric values. Thus, you can't transition between display: block and display: none.
However you can transition between opacity: 0 and opacity: 1 with:
transition: 0.5s opacity
That would look something like this:
.bottomMenu {
...
opacity: 0;
transition: 0.5s opacity;
...
}
.bottomMenu.active {
opacity: 1;
}
For your particular case, I might recommend transitioning the height between 0 and 60px.
For that you can use:
transition: 0.5s height
So:
.bottomMenu {
...
height: 0;
transition: 0.5s height;
...
}
.bottomMenu.active {
height: 80px;
}

To animate the opacity the element must be visible. So remove the display:none and make it fully transparent (opacity:0). You can then use CSS transitions to animate the opacity when the classname changes:
.bottomMenu {
...
display:block;
opacity: 0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.bottomMenu.active {
opacity:1
}
http://jsfiddle.net/oL9ro4gL/6/
Furthermore, you're not restricted to just animating the opacity:
.bottomMenu {
...
transition: all .25s ease-in-out;
}
.bottomMenu.active {
opacity:1;
height: 60px;
background-color: blue;
transform:rotate(180deg);
color:white;
font-size:40px;
etc...
}
http://jsfiddle.net/oL9ro4gL/8/

Unfortunately, you can't animate the display property. See this question and its suggestions for workarounds.

Cant link my pages in HTML

I made a vertical drop down menu and the menu hides with Jquery, the problem is now that I can not link my pages with my menu in my li items my #href is not clickable, but the link is there.
Thanks in advance
http://68625.glr-imd.nl/motiongraphic.html# <---- url webpage
HTML:
<a id="arrow" href="#"></a>
<div id="sidemenu" class="sidemenu">
<img id="side_menu_img" src="styling/img/logo_no_letters.png" width="auto" height="40" style="margin-left:40px; margin-top:250px;">
<ul id="side_menu" class="menu">
<li style="margin-top:10px;">A b o u t
</li>
<li style="margin-top:10px;"> <a id="portfolio" href="#">P o r t f o l i o</a>
<ul>
<li style="font-size:12px; margin-top:10px;">Web-Design
</li>
<li style="font-size:12px;">Brand Identity's
</li>
<li style="font-size:12px;">Projects
<ul>
<li style="font-size:10px; margin-top:10px;">For the birds: The story continues
</li>
<li style="font-size:10px;">Gia - The biography
</li>
<li style="font-size:10px;">Glr Viral
</li>
<li style="font-size:10px;">The Round Interface
</li>
<li style="font-size:10px; margin-bottom:10px;">Shang Xia - Coming Soon
</li>
</ul>
</li>
<li style="font-size:12px;">+ Motion Graphic Design
</li>
<li style="font-size:12px;">3D Illustration
</li>
</ul>
</li>
<li style="margin-top:10px;"> O f f - B o o k s
<ul class="depth2">
<li style="font-size:12px;">Photography
</li>
<li style="font-size:12px;">Drawings + Paintings
</li>
</ul>
<li style="margin-top:10px;">c o n t a c t
</li>
</li>
</ul>
<div class="iconbar">
<img class="icon" src="styling/Icons/facebook.png">
<img class="icon" src="styling/Icons/linkedin.png">
<img class="icon" src="styling/Icons/tumblr.png">
<img class="icon" src="styling/Icons/Youtube.png">
<img class="icon" src="styling/Icons/meel.png">
</div>
</div>
CSS:
.menu {
width: 300px;
height: 152px;
padding: 0;
position: absolute;
top: 50%;
margin-top: -76px;
margin-left: 25px;
text-transform: uppercase;
}
.menu li {
margin:0;
}
.menu li {
display:block;
color:#000;
overflow:hidden;
}
.menu li a {
display:block;
padding:5px;
text-decoration:none;
font-family:'quicksandlight';
font-weight:900;
color:#000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
cursor:auto;
}
.menu li > ul {
display:none;
overflow:hidden;
padding:10;
}
.menu p ul.depth2 li a {
color:#fff;
display:block;
}
.menu li a:hover {
display:block;
padding:5px;
text-decoration:none;
font-family:'quicksandlight';
font-weight:900;
color:#999;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sidemenu {
position:fixed;
height:100%;
left:0px;
top:0;
z-index:1500;
width:375px;
background-color:#FFF;
margin-left:-375px;
}
::-webkit-scrollbar {
width: 0px;
}
#arrow {
width:30px;
height:100px;
background-image:url(../img/arrow_l.png);
position:fixed;
left:0;
top:50%;
margin-top:-50px;
z-index:2000;
margin-left:0px;
rotateZ:0;
}
#font-face {
font-family:'quicksandlight';
src: url('../fonts/quicksand-light-webfont.eot');
src: url('../fonts/quicksand-light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/quicksand-light-webfont.woff') format('woff'), url('../fonts/quicksand-light-webfont.ttf') format('truetype'), url('../fonts/quicksand-light-webfont.svg#quicksandlight') format('svg');
font-weight:normal;
font-style:normal;
}
.iconbar {
height:32px;
width:auto;
position:absolute;
top:100%;
margin-top:-32px;
left:25px;
}
.iconbar img {
width:auto;
height:16px;
margin-right:15px;
opacity:0.5;
}
.iconbar img:hover {
opacity:1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
JS:
<script>
$("#portfolio").click(function() {
if ($("#side_menu").css("margin-top") == "-76px") {
$("#side_menu").animate({
"margin-top": "-166px"
}, 2500);
} else {
$("#side_menu").animate({
"margin-top": "-76px"
}, 500);
}
});
$("#portfolio").click(function() {
if ($("#side_menu_img").css("margin-top") == "250px") {
$("#side_menu_img").animate({
"margin-top": "160px"
}, 2500);
} else {
$("#side_menu_img").animate({
"margin-top": "250px"
}, 500);
}
});
$("#arrow").click(function() {
if ($("#sidemenu").css("margin-left") == "0px") {
$("#sidemenu").animate({
"margin-left": "-375px"
}, 500);
} else {
$("#sidemenu").animate({
"margin-left": "-0px"
}, 500);
}
});
$("#arrow").click(function() {
if ($("#arrow").css("margin-left") == "0px") {
$("#arrow").animate({
"margin-left": "335px"
}, 500);
} else {
$("#arrow").animate({
"margin-left": "-0px"
}, 500);
}
});
swfobject.registerObject("FLVPlayer");
</script>

Looking at the source code on your website, below code prevents you from clicking a link inside your menu:
$('.menu a').click(function( e ){
//e.preventDefault(); // disable this to click enable the links
$(this).parent('li').find('ul:first').slideToggle();
});
What you better do, is refine your selector $('.menu a') to a better one, in order to select the items that need to toggle a submenu. about and contact for example needs to remain an ordinary link if I have understood you correctly.
HTML:
<li>
P o r t f o l i o
<!-- optionally add a class or data-attribute here to properly select in jquery -->
<!-- $('.menu ul') -->
<ul>
<li>Brand Identity's</li>
<li>Projects
</ul>
</li>
JS:
Find all the a elements prior to the ul elements inside .menu.
This should avoid selecting about and contact so they keep their default behavior to answer your question.
$('.menu ul').prev("a").click(function(e){
e.preventDefault();
// continue
});
some hints to clean up your code:
On te jquery part, don't select the same items twice and don't bind it twice to the same event. Sounds like overkill, don't you think?
$("#portfolio").click() // 3 times
$("#arrow").click() // 2 times
On the css + jquery part, instead of animating margin-top you might want to try the height of the .submenu or switch to a toggle function in jquery. Submenus are positioned fixed so it's better to avoid margin here and use top, bottom, left, right to adjust the position.
example of improvement
var mainmenu = $("#sidemenu"), // confuses with #side_menu so -> mainmenu
arrow = $("#arrow");
arrow.click(function () {
var mainmenuleft = parseInt(mainmenu.css("left"), 10),
arrowleft = parseInt(arrow.css("margin-left"), 10);
mainmenuleft = mainmenuleft === 0 ? -375 : 0;
arrowleft = arrowleft === 0 ? 335 : 0;
mainmenu.animate({ left: mainmenuleft }, 500);
arrow.animate({ marginLeft: arrowleft }, 500);
});
FIDDLE:
http://jsfiddle.net/tive/ez7WG/

Drop down menu hiding menus

I'm building a drop down menu for a project I'm working on, but I don't get it working entirely as is should. I want it to show the sub-menus when I hover the root-level menus, and then close again after a short delay when the menu or sub-menu is not hovered anymore. Most of it works; the sub-menus are showed when root-level items are hovered and it is hidden when I stop hovering the root-level item. The problem is that the sub-menus are also hidden when I move my cursor from the root-level item to a sub-menu item other than the first and hover that. This is obviously not good, so help would be appreciated.
I created a JSFiddle with the code which shows the issue more clearly.
So, here's my code:
menu.htm
<div id=m_wrapper>
<ul id=menu>
<li onMouseOver="show_sub_menu('0')" onMouseOut="start_timer()">Item 1
<div id=s0 onMouseOver="show_sub_menu('0')" onMouseOut="start_timer()">
<a href=#>Item 1.1</a>
<a href=#>Item 1.2</a>
<a href=#>Item 1.3</a>
</div>
</li>
</ul>
</div>
menu.css
#m_wrapper {
position:relative;
display:table;
}
#menu {
position:relative;
}
#menu li {
width:100px;
position:relative;
float:left;
list-style-type:none;
}
#menu div {
position:absolute;
visibility:hidden;
display:inherit;
width:100%;
z-index:30
}
#menu div a {
position:relative;
display:block;
z-index:35;
}
menu.js
var countdown = 300;
var timer = null;
var menu_item = null;
window.show_sub_menu = function(cath) {
if (menu_item) {
menu_item.style.visibility = 'hidden'; //Make sure to show one menu at a time
}
menu_item = window.document.getElementById("s" + cath);
menu_item.style.visibility = 'visible'; //Show menu
if (timer) {
window.clearTimeout(timer); //Reset timer, so menu is kept open
timer = null;
}
};
window.start_timer = function() {
timer = window.setTimeout(close_sub_menu, countdown);
};
window.close_sub_menu = function() {
menu_item.style.visibility = 'hidden';
};

you don't have to make it that complex.
ofcourse you can do same through javascript, but see how easy, readable and simple it is through jQuery.
See this DEMO
Just use following script
$('#menu li').hover(
function(){
$(this).stop().animate({height: '100px'},1000,function(){});
$(this).find('div').show(600);
}//gets called upon mousehover
,
function(){
$(this).stop().animate({height: '20px'},1000,function(){});
} //gets called upon mouseout
); //hover ends
and also, I don't know why you have written tonns of CSS. Just use these:
#menu
{
list-style:none;
}
#menu li
{
width:100px;
border:1px Solid #CCC;
text-align:Center;
cursor:pointer;
height:20px;
overflow:hidden;
}
#menu li div
{
border:1px Solid #CCC;
}
#s0
{
height:auto;
}
#s0 a
{
display:block;
}
There's plenty you can do through it, like selected dropdown item. selection through arrow key and what not. jQuery makes it simple for you.

first of all You should avoid <div> in <li> tags, because is not semantic.
Quite good is multi level menu build only with html and css styles.
HTML
<div id=m_wrapper>
<ul id=menu>
<li>Item 1
<ul>
<li><a href=#>Item 1.1</a></li>
<li><a href=#>Item 1.2</a></li>
<li><a href=#>Item 1.3</a></li>
</ul>
</li>
<li>Item 2</li>
</ul>
</div>
CSS STYLES
#m_wrapper, #menu, #menu li {
position:relative;
}
#m_wrapper {
display:table;
}
#menu li {
float:left;
width:100px;
list-style-type:none;
}
#menu li ul {
display: none;
}
#menu li:hover ul {
display: block;
margin: 0 10px;
padding: 0;
}

This can quite easily be achieved with HTML and CSS alone. Using CSS transitions we can make the menu fade when we hover off.
Example
I have also put this on JsFiddle
HTML
<nav>
<ul id="menu">
<li>
Home
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
CSS
#menu li
{
position: relative;
display: inline;
list-style: none;
padding-left: 15px;
}
#menu ul
{
margin: 0;
padding: 0;
list-style: none;
opacity: 0;
position: absolute;
top: 20px;
left: 5px;
// Transitions for our fade effect.
-webkit-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-ms-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
}
#menu ul li
{
display: block;
}
#menu li:hover > ul
{
opacity: 1;
// This stops the transition from happening on hover.
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}

A pure CSS drop down menu
http://jsfiddle.net/steelywing/GANeX/8/
.nav {
background-color: #def;
height: 20px;
}
.nav * {
transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
}
li {
display: inline-block;
height: 20px;
}
.dropdown li {
display: block;
}
.dropdown ul {
visibility: hidden;
opacity: 0;
margin-top: -2px;
}
.dropdown:hover ul {
visibility: visible;
opacity: 1;
}

Remember that.. if You decide to implement the fade version, You should use crosbrowser opacity, like this:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;

Can I dynamically add text next to the mouse cursor via javascript?

Right now I changed the cursor image if any ajax is in a process using this javascript code
$(function(){
$("html").bind("ajaxStart", function(){
$(this).addClass('busy');
}).bind("ajaxStop", function(){
$(this).removeClass('busy');
});
});
and below css
html.busy, html.busy * {
cursor: wait !important;
}
Now I want to add some text next to the cursor too. And remove it when the ajax finishes. How is that possible without using any jQuery plugin?

Try this:
Demo with start / stop functions and changing text
http://jsfiddle.net/SY4mv/18/

See http://jsfiddle.net/PbAjt/show/:
CSS:
#cursorText{
position:absolute;
border:1px solid blue; /* You can remove it*/
}
JavaScript:
document.body.onmousemove=moveCursor;
var curTxt=document.createElement('div');
curTxt.id="cursorText";
curTxt.innerHTML="Hello!"; /* Or whatever you want */
document.body.appendChild(curTxt);
var curTxtLen=[curTxt.offsetWidth,curTxt.offsetHeight];
function moveCursor(e){
if(!e){e=window.event;}
curTxt.style.left=e.clientX-curTxtLen[0]+'px';
curTxt.style.top=e.clientY-curTxtLen[1]+'px';
}
Depending on what you want you can change
curTxt.style.left=e.clientX-curTxtLen[0]+'px';
into
curTxt.style.left=e.clientX+'px';
and
curTxt.style.top=e.clientY-curTxtLen[1]+'px';
to
curTxt.style.top=e.clientY+'px';

CSS:
#tooltip {
position: fixed;
background-color: black;
color: white;
padding: 2px;
opacity: 0;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
html.busy #tooltip { opacity: 1 }
html.busy, html.busy * {
cursor: wait !important;
}
HTML:
<div id="tooltip">Message</div>
JS:
$(function() {
$("html").bind("ajaxStart", function() {
$(this).addClass('busy');
$(this).bind('mousemove', function(event) {
$('#tooltip').css({
top: event.pageY - $('#tooltip').height() - 5,
left: event.pageX
});
});
}).bind("ajaxStop", function() {
$(this).removeClass('busy');
$(this).unbind('mousemove');
});
});
Event DOC: http://api.jquery.com/mousemove/
​
DEMO: http://jsfiddle.net/RGNCq/1/