We Keep Coding

How to animate transitions triggered by links

I found this useful jQuery for a navigation that highlights as linked content scrolls. I think I understand how this works, however I'm having trouble including transitions / animations for clicked items. I want the sections to smoothly transition when triggered by the navigation.
I have tried adding this to the CSS
.section {
transition: transform .5s ease-in-out;
}
and also to jQuery
$('#navigation').click(function(){
$('.section').animate('slow');
});
I'd really appreciate an explanation of what I am doing wrong in this particular example.
Here is the code and https://jsfiddle.net/r040p7oa/
<div id="navigation">
<ul>
<li>Section 1</li>
<li>Section 2</li>
</ul>
</div>
<div id="sections">
<div id ="section1" class="section">I'm section 1</div>
<div id ="section2" class="section">I'm section 2
</div>
#sections {
position: absolute;
top: 0;
left: 120px;
}
#navigation {
position: fixed;
top: 0;
left: 0;
}
.active {
background: red;
}
.section {
padding-bottom: 400px;
}
-
$(window).scroll(function() {
var position = $(this).scrollTop();
$('.section').each(function() {
var target = $(this).offset().top;
var id = $(this).attr('id');
if (position >= target) {
$('#navigation > ul > li > a').removeClass('active');
$('#navigation > ul > li > a[href=#' + id + ']').addClass('active');
}
});
});
https://jsfiddle.net/r040p7oa/

$('a').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
Working fiddle :) Code from here

This should do it:
$('a').click(function(e) {
e.preventDefault();
$('body, html').animate({scrollTop:$($(this).attr("href")).offset().top});
});
Here is the JSFiddle demo

Jquery hover out halting script

I have this script:
$(document).ready(function () {
var $navToggle = $('.nav-toggle');
$(".navbtn").click(function () {
if ($navToggle.hasClass('active')) {
$('#menu').multilevelpushmenu('collapse');
$navToggle.removeClass('active');
$(this).addClass('active');
}
else {
$('#menu').multilevelpushmenu('expand');
$navToggle.addClass('active');
$(this).removeClass('active');
}
});
$(".navbtn").hover(function () {
$('.nav-toggle').addClass('hover');
});
});
this works great but the hover is incomplete because whenever I add the removeClass line to it , it stops working ? Like so:
$(".navbtn").hover(function () {
$('.nav-toggle').addClass('hover');
$('.nav-toggle').removeClass('hover');
});
please can someonne help I am only trying to reset a hover class.

You can call .hover with two arguments, first argument is for a mouse enter callback, the second is for mouse leave
$(".navbtn").hover(function () {
$('.nav-toggle').addClass('hover');
},function(){
$('.nav-toggle').removeClass('hover');
});
Demo
$(".navbtn").hover(function () {
$('.nav-toggle').addClass('hover');
},function(){
$('.nav-toggle').removeClass('hover');
});
.nav-toggle {
background:#FFF;
transition:all 1s;
}
.nav-toggle.hover {
background:#FF0;
color:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navbtn">My Nav</div>
<div class="nav-toggle">Toggle</div>
Note that if the element you want to trigger a css transition on has some relation to the hovered element you can just use css. So if for instance .nav-toggle was a sibling or child of .navbtn you can use the :hover psuedo class
.navbtn:hover .nav-toggle {
background:#FF0;
}
CSS Demo
Assumes .nav-toggle is a sibling of .navbtn
.nav-toggle {
background:#FFF;
transition:all 1s;
}
.navbtn:hover ~ .nav-toggle {
background:#FF0;
color:black;
}
<div class="navbtn">My Nav</div>
<div class="nav-toggle">Toggle</div>

Creating A Dropline Style Menu

I am trying to create a dropline style menu.
Please see my fiddle here - http://jsfiddle.net/oampz/38c6q/
The issue i'm having is, i don't want the brown menu - or for it to drop down/fade in.. I'm trying to get the sub menu items to simply appear in the grey coloured sub DIV.
$('#main-nav > li').hover(function(){
if(!$(this).find('.main-link').hasClass('active')){
$("#main-nav > li a.active").removeClass("active");
$(this).find('.main-link').addClass("active");
if($(this).find('li').length){
//$("#main-nav li a.close").stop().fadeIn();
//There is no .close
var that = this;
$("#sub-link-bar").stop().animate({ height: "40px"}, function(){
$(that).find(".sub-links").show();
});
}
else {
$(this).find(".sub-links").stop().fadeOut( function(){
$(this).css('opacity','1');
$("#sub-link-bar").stop().animate({height: "1px"});
});
}
}
}, function(){
if($(this).find('li').length){
$(this).find(".sub-links").stop().hide( function(){
$(this).css('opacity','1');
});
}
$("#sub-link-bar").stop().animate({height: "1px"});
$(this).find('.main-link').removeClass('active');
});
Any help appreciated.

I've updated the code http://jsfiddle.net/38c6q/1/
replaced this
$("#sub-link-bar").stop().animate({ height: "40px"}, function(){
$(that).find(".sub-links").show();
});
with
$('#sub-menu').html( $(that).find(".sub-links").html() )
To have them float next to each other, you can add this CSS
.sub-menu li{
display:block;
padding:0;
margin:0;
float:left;
}
And to add some colors and backgrounds to links, add some CSS like this
.sub-menu a{
display:block;
margin:0 5px;
padding:5px;
text-decoration:none;
Color:#333;
}
.sub-menu a:hover{
background:#333;
color:#fff;
}
updated Demo at
http://jsfiddle.net/38c6q/4/

Transform CSS { ul li:hover a } in JQUERY .hover

I want to now if there's a way to transform this css properties in a jquery .hover, or control this by javascript to change the colour dynamically.
CSS:
ul li:hover a {
color: #FFF;
}
Can anyone Help ?
EDIT:
My problem is:
I have a drop down menu and i want that when I hover the menu the text color change and when I hover the submenu the hover state stays for both.
JQuery:
$("ul li").hover(function () {
$(this).stop().animate({ backgroundColor: "white"}, 500);
}, function () {
$(this).stop().animate({ backgroundColor: "black"}, 400);
});
To animate background color on hover in menu and submenu.
For example if the text are black I want to make the text white on hover. For this I use:(Submenu example, for menu change the selector of course)
$('ul.submenu li a').hover(function () {
$(this).css({color:'#FFFFFF'});
}, function () {
$(this).css({color:'#00FF00'});
});
All This works fine, but when I hover the submenu the menu returns to the original state(because the mouseleave is activated on hover out). All I want is that when I hover submenu the hover state in menu stays active as well.
I've tried many things but all give me problems, only thing that works is css, but I need to control the text colours dynamically too.
HTML Structure:
<ul class="menu">
<li>text</li>
<li>text
<ul class="submenu">
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
</li>
<li>text</li>
</ul>

Please let me know if this is along the right track of what you're asking.
I haven't got it working fully, but give this a look and see if it helps:
my JSFiddle
Here's the code so far:
$(document).ready(function() {
var sm; // submenu
var delay = 500; // delay before applying changes
var tID; // timeout id
var color_on = '#fff'
, color_off = '#000';
var oPrev;
$('ul.menu > li > a').hover(
function() {
if (tID && $(this) === oPrev) {clearTimeout(tID);}
oPrev = $(this);
sm = $(this).next('.submenu');
if(sm){sm.stop(true, true).fadeIn('slow');}
},
function() {
if (tID) {clearTimeout(tID);}
tID = setTimeout(
function() {
sm.stop(true, true).fadeOut('slow');
}, delay);
}
);
$('.submenu > li > a').hover(
function() {
if (tID) {clearTimeout(tID);}
oPrev.css('color',color_on);
$(this).stop(true, true).fadeIn('slow');
},
function() {
if (tID) {clearTimeout(tID);}
sm = $(this);
tID = setTimeout(
function() {
oPrev.css('color','');
sm.closest('ul').stop(true, true).fadeOut('slow');
}, delay);
}
);
});
And CSS:
a
{
color : #000;
text-decoration : none;
}
a:hover
{
color : #fff;
}
ul li
{
background : orange;
border : 1px solid black;
display : inline-block;
padding : 0 1em;
vertical-align : top;
}
.menu
{
background : #ccc;
border : 1px solid black;
display : inline-block;
padding : .25em 1em;
vertical-align : top;
}
.submenu
{
border : 1px solid black;
border-width : 1px 0 0 0;
display : none;
}
.submenu li
{
background : red;
border-width : 0;
}
.submenu li a:hover
{
color : #fff;
}
Note: I'm not saying this is the best answer, nor is it a complete solution, but maybe something in here will assist someone in finding the correct solution.

$("ul li a").hover(function() {
$(this)
.data("color", $(this).css("color"))
.css("color", "#FFF");
}, function() {
$(this).css("color", $(this).data("color"));
});
$("ul li").hover(function() {
$(this).find("a")
.data("color", $(this).css("color"))
.css("color", "#FFF");
}, function() {
$(this).find("a").css("color", $(this).data("color"));
});
Update:
Assuming that the first selector (ul li a:hover) is superfluous, we can simplify the code considerably:
$("li").hover(function() {
$(this).find("a").css("color", "#FFF");
}, function() {
$(this).find("a").removeAttr("style");
});
This updated code should work also (under the condition that you don't have additional CSS code inside the style attribute of the ANCHOR elements).
Update:
An alternative solution would be this:
$("li").hover(function() {
$(this).toggleClass("hover", $(this).is(":hover"));
});
with this CSS code:
ul li.hover a {
color: #FFF;
}
I highly recommend this alternative solution!

$('li').hover(
function(){
$(this).css({color:'white'}); //mouseover
},
function(){
$(this).css({color:'black'}); // mouseout
}
);

Try this (now tested: http://jsfiddle.net/nathan/J7HLV/):
$('ul li a, ul li').hover(function () {
$(this).add($(this).children('a')).filter('a').css('color','#fff');
},function () {
$(this).add($(this).children('a')).filter('a').css('color','');
});

Sure, simply use the hover binding.
$("ul li a").bind("hover", function () {
$(this).css("color", "#FFF");
});
$("ul li").bind("hover", function () {
$(this).children("a").css("color", "#FFF");
});
Note that this code won't reset the CSS properties when you mouse out. To do that you would need to store the original color values.
It is probably worth it to set that a element to display: block so it expands to the entire parent li element. Then you only need to hover on one of them.

Bind a hover function for the li tag. Whenever mouseover/mouseout is on the <a> tag the event will bubble up to the <li>
$(function(){
$("ul li").hover(function(){
$(this).css("color", "#fff");
},function(){
$(this).css("color", "#000000");
});
});
See a working demo
If you can achieve the effect using CSS then why go for javascript solution.

Detecting is Div Out Of Screen

I coded dropdown menu via javascript(w/ jQuery) and CSS. Dropdown menu works fine but if dropdown menu located at corner for example rightmost or leftmost of user screen then if user opens the dropdown menu, it overflows to unseen area of window and causes horizontal scroll-bar.
How can I stop overflowing ?
HTML
<ul class="dropdown">
<li class="headlink">
Menu <img src="/static/images/mini/sort_down.png" />
<ul class="arrowlist invisible">
<li>Hello 1</li>
<li>Hello 2</li>
<li>Hello 3</li>
</ul>
</li>
</ul>
CSS
.dropdown {z-index: 1}
.dropdown .headlink{border:1px solid #C7C9CF;padding:4px 6px;}
.dropdown li{}
.dropdown a{outline:none}
.dropdown ul{z-index:100;border:1px solid #C7C9CF;-moz-border-radius: 4px; -webkit-border-radius: 4px;border-radius:4px;behavior: url(/static/css3pie.php);background: #FFF url("/static/images/grey_fade_back.png") repeat-x scroll bottom;padding:8px;position:absolute;top:-1px;left:-4px}
.dropdown ul li{margin:2px;white-space:nowrap}
JS
$('.dropdown li.headlink')
.click(function() {
$(this).css('position', 'relative');
$('ul', this).slideDown(100);
});
$('.dropdown li.headlink')
.mouseleave(function(){
var headlink = this;
$('ul', this).slideUp(100, function(){
$(headlink).css('position', 'static');
})
});

I found a solution:
$('.dropdown li.headlink')
.click(function() {
$(this).css('position', 'relative');
if($('ul', this).width() + 10 > $(window).width() - $(this).offset().left) $('ul', this).css('left', 'auto').css('right', '-1px');
else $('ul', this).css('left', '-4px').css('right', 'auto');
$('ul', this).slideDown(80);
});

I think you may need to store in a var the height in px of your drop down and check its y-offset. This post might be able to point you in the right direction How to see if an element in offscreen I wish I could provide you with working code.

Try this
replace:
.dropdown .headlink{border:1px solid #C7C9CF;padding:4px 6px}
with
.dropdown .headlink{border:1px solid #C7C9CF;padding:4px 6px;position:relative}
and replace
.dropdown ul {
z-index:100;
border:1px solid #C7C9CF;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
behavior:url(/static/css3pie.php);
background:#FFF url(/static/images/grey_fade_back.png) repeat-x scroll bottom;
position:absolute;
top:-1px;
left:-4px;
padding:8px;
}
with
.dropdown ul {
z-index:100;
border:1px solid #C7C9CF;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
behavior:url(/static/css3pie.php);
background:#FFF url(/static/images/grey_fade_back.png) repeat-x scroll bottom;
position:absolute;
left:-4px;
padding:8px;
}
Hope it helps

The general solution to a problem like this is to, using either CSS or JavaScript, add a class to the first or last dropdown menu element so that it's alignment is corrected. In this specific case, with absolute positioning, changing the left and right property should do.
A simple example, for when the menu is right aligned and the right-most dropdown protrudes out of the screen, is to add a class with JavaScript which will shift the menu from the been aligned to the left side of the menu item to the right:
.dropdown ul {
left: 0;
}
.dropdown ul.last {
right: 0;
left: auto;
}
A simple demo of this can be found here: http://www.jsfiddle.net/yijiang/HyXuy/1/