We Keep Coding

Highlight active menu items as page scrolls divs (Sidebar onscroll menu)

This JSFiddle by Gaurav Kalyan works well in Chrome, but in Safari and Firefox it activates the wrong menu item. Instead of highlighting the menu item clicked, it highlights the menu item before. So, for example, if you click on "Punkt 4", "Punkt 3" is highlighted instead. I haven’t been able to fix this. Can someone help? I've been trying to solve this for two weeks.
HTML
<section id="main">
<div class="target" id="1">TARGET 1</div>
<div class="target" id="2">TARGET 2</div>
<div class="target" id="3">TARGET 3</div>
<div class="target" id="4">TARGET 4</div>
</section>
<aside id="nav">
<nav>
Punkt 1
Punkt 2
Punkt 3
Punkt 4
</nav>
</aside>
CSS
* {
margin: 0;
padding: 0;
}
#main {
width: 75%;
float: right;
}
#main div.target {
background: #ccc;
height: 400px;
}
#main div.target:nth-child(even) {
background: #eee;
}
#nav {
width: 25%;
position: relative;
}
#nav nav {
position: fixed;
width: 25%;
}
#nav a {
border-bottom: 1px solid #666;
color: #333;
display: block;
padding: 10px;
text-align: center;
text-decoration: none;
}
#nav a:hover, #nav a.active {
background: #666;
color: #fff;
}
JavaScript
$('#nav nav a').on('click', function(event) {
$(this).parent().find('a').removeClass('active');
$(this).addClass('active');
});
$(window).on('scroll', function() {
$('.target').each(function() {
if($(window).scrollTop() >= $(this).offset().top) {
var id = $(this).attr('id');
$('#nav nav a').removeClass('active');
$('#nav nav a[href=#'+ id +']').addClass('active');
}
});
});

This works fine as is if the viewport height (the inner height of the browser window) is <= 400px. That is because when you click on the a link in the nav element, with an href of #4, the default browser behavior kicks in and the element with id="4" is scrolled to the top (as much as is possible).
When the viewport is the same height or smaller than the element being scrolled to, then when your scroll handler gets triggered, the if($(window).scrollTop() >= $(this).offset().top) condition evaluates as true, because the scrollTop will be exactly equal to the offset().top of the #4 div.
However, when the viewport is bigger than the content div (in your case, > 400px), when the browser tries to scroll the last div into view, it can completely do so whilst still displaying part of the bottom half of the previous div. Which means that the 3rd div will pass your scroll handler if check, not your fourth. (The offset top of the last div will not be <= the scrollTop of the window).
So what's the solution?
I would make it so that each target div is at least the same height as the viewport. You can achieve this on modern browsers using min-height: 100vh; (100% of the viewport height). That means when the last one is scrolled into view, it will completely fill the viewport, and the correct div will pass your scroll logic check correctly.
See here for a working fork.
Bonus tip
There is a number of things you can do to improve performance of this code. Cache the creation of jQuery variables, avoid the repeated work happening 4 times on every scroll event (which can happen very often), etc. It works okay for now, but it may become a bottleneck later.

Collapsible menu changes position of the element

I have a menu menu structure which show three level of menu but menu doesnt function properly when when i click over different level 3 menus to open or collapse the menu.
Example http://jsfiddle.net/Ed9nk/21/
Parent One have multi level of menus
Example you follow this sequence you will notice the problem
Step 1: Hover over Parent One > Click on Child One
Step 2: Click on Child Two or Child Three menu and hover over the Grand Child x menu you will notice that Green box changes the postion.
Step 3: Now if you will click on Child One of Parent One to collapse this menu & then hover over Grand Child xx of Child Two or Child Three menu you will notice that Green box shows up correctly.
Green box keeps change position i want it to show on top of the div . I am not sure what is causing this
Jquery Code
$('.dropdown .has-panel ul').hide(function () {
});
$('.dropdown .has-panel').css('display', 'none');
//$('.dropdown .has-panel').css('height','0px');
$('.dropdown .has-panel').parent().click(function () {
$('.dropdown .has-panel').css('display', 'block');
//$("ul", this).show("normal");
$("ul", this).toggle("normal");
});
CSS which is use to position the green box always at top
ul.nav > li > .dropdown.has-panel li:nth-child(1) > .dropdown.has-panel .dd-panel {
margin-top: -10px;
background-color:green !important;
}
ul.nav > li > .dropdown.has-panel li:nth-child(2) > .dropdown.has-panel .dd-panel {
margin-top: -54px;
background-color:green !important;
}
ul.nav > li > .dropdown.has-panel li:nth-child(3) > .dropdown.has-panel .dd-panel {
margin-top: -154px;
background-color:green !important;
}
I would appreciate help in this regard.
UPDATE:
For now i have found temporary work around i have found it hard to automatically calculate the margin-top position for the green box when one randomly click on the menus and hover over level 3 menus. manual margin which i have specified only works if one clicks in sequence for first time Hover Parent One > Click Child One > Click Child Two >Clich Child Three in this sequence if one hover over any level 3 menus then green box always show up a top of the container div. but when i close either Child One or Child Two then green box always takes -ve margin which where set manually, and show green box outside menu on from top position.
The work around which i found is to only keep One of the Level 3 menus open at all time this way margin will work ul.nav > li > .dropdown.has-panel li:nth-child(1) > .dropdown.has-panel .dd-panel
Temporary solution http://jsfiddle.net/Ed9nk/43/

Worked on this for quite a long time...
Problem:
You have your span in the same div as your menu option so it normally it should appear on the same line as the menu item but in your code it doesn't... In order for you to have it appear on top, you will have to use negative margin.
Code cleanup:
This part was causing the green box to grow on each mouseenter event...
Remove:
var $this = $(this).find(".dropdown ul li");
var ulHeight = $this.parent().height();
var captionHeight = $(this).find('.media-caption').height();
var height = Math.max(ulHeight, captionHeight);
$this.closest('.dd-panel').height(height);
$this.parent().find(".dd-panel").css("height", height - 20 + "px");
You can change:
if ($(this).find(".dropdown").hasClass("has-panel")) {} else {
$(this).find(".dropdown").removeClass("dropdown-last");
}
To:
if (!$(this).find(".dropdown").hasClass("has-panel")) {
$(this).find(".dropdown").removeClass("dropdown-last");
}
Solution:
In .dropdown ul ul .dd-panel, change:
top:-10px;
To:
top:0;
You can now manually change the margin-top and assign negative margin to the second and third child to make them appear on top.
ul.nav > li > .dropdown.has-panel li:nth-child(1) > .dropdown.has-panel .dd-panel {
margin-top:-30px;
background-color:green !important;
}
ul.nav > li > .dropdown.has-panel li:nth-child(2) > .dropdown.has-panel .dd-panel {
margin-top:-120px;
background-color:green !important;
}
ul.nav > li > .dropdown.has-panel li:nth-child(3) > .dropdown.has-panel .dd-panel {
margin-top:-220px;
background-color:green !important;
}
Change margin-top according to your needs...
JSFiddle Demo
P.S: I did some code cleanup in the fiddle but I believe, I covered everything important in this post.

Chaining this effect sequentially

This is probably really simple to do. Everything works, this is a horizontal slider that slides one image after another. The issue is, one image slides up, but once that image has slide up, then starts the previous one. My questions is. How do you chain this so that one, slides up but you see the other slide up after the last one.
This function moves the completed slide at the end of the last LI.
function cloneView(){
$('.complete').each(function(){
$(this).clone().insertAfter('.slide_img ul li:last').addClass('slides',function(){
//$('.slides').css({display : "block"});
}).removeClass('complete');
$('.complete').first().remove();
});
}
This function checks how many LI's there are(totalSlides). It also slidesup the current li and sets it as class="complete" (which is how the cloneView knows to move it).
$(function () {
var slideS = $('.slide_img ul li');
var comp = $('.slide_img ul li.viewing');
slideHeight = $('.slide_img').height();
totalSlides = slideS.length;
slideLength = totalSlides * slideHeight;
slideS.addClass('slides').css({
display: "none"
});
slideS.first().addClass('viewing').removeClass('slides').css({
display: "block"
});
slideS.last().addClass('last_img').removeClass('slides');
slideInterval = setInterval(function () {
$('.viewing').delay(1000).slideUp("slow", function () {
$(this).addClass('complete').removeClass('viewing');
$(this).next('li').addClass('viewing', function () {
$(this).removeClass('slides').effect('slide', {
direction: 'down',
mode: 'show'
});
cloneView();
});
});
}, 10000);
});
I plan to turn this into a plugin (even though I am sure there are hundreds of them).
Here is a jsfiddle.

Here is a much easier way of doing what you want
http://jsfiddle.net/LCDXj/3/
Made sure that only the .current-slide class is visible via CSS:
.slide_img {
height: 445px;
overflow: hidden;
position: fixed;
text-align: center;
top: 60px;
width: 100%;
}
.slide_img ul li img {
width: 100%;
}
.slide_img ul li{
position: relative;
display: none;
}
.slide_img > ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
.slide_img ul li.current-slide
{
display: block;
}
Set the first element in the slider to be .current-slide
Every X seconds, slide the current slide up then append it to the back of
the list
Immediately after queueing up the action to slide the first
slide up, also queue up the action to slide the next slide in the
DOM structure down.
$(function()
{
var slideS = $('.slide_img ul li');
slideHeight = $('.slide_img').height();
totalSlides = slideS.length;
var imgSize = $('.slide_img ul li img').height();
slideLength = totalSlides * slideHeight;
slideS.first().addClass('current-slide');
slideInterval=setInterval(function()
{
slideS.filter('.current-slide').slideUp(function()
{
$(this).appendTo($(this).parent()).removeClass('current-slide');
}).next().slideDown().addClass('current-slide');;
}, 5000);
});
The key thing to note that I am doing that you were not is that I am not waiting for the first slide to finish sliding up to start sliding the next one down.
Additionally, by simply appending the element to the end of the <ul /> afterwards, we don't need to worry about any kind of fancy cloning.

Change opacity of other tab when I hover current tab

I create a dropdown menu. I need when I hover to a tab, the opacity of other tabs in menu are change except the current tab I hover.
Example: when I hover to Home Tab, state of Home tab and list item is not changed (yellow color, opacity=1) but other tabs (Tutorial, Article, Inspiration) are changed (grey color, opacity=0.5)
<code>http://jsfiddle.net/dennisho/6fX42/2/</code>

There is no sibling selector that will select all siblings to help select the other menu elements but you can use the :not selector
nav > ul:hover li:not(:hover) {
opacity:0.5;
}
JSFiddle Demo

You could do something like this.
nav ul li {
background-color: yellow;
}
nav ul li:first-of-type {
border-top-left-radius:25px;
border-bottom-left-radius:25px;
}
nav ul li:last-of-type {
border-top-right-radius:25px;
border-bottom-right-radius:25px;
}
nav > ul li:hover{
opacity:1;
}
nav > ul li:not(:hover){
opacity:0.5;
}
But please include relevant code in your question so it is helpful for other people, too.

slide bottom border in from left on hover

i have this css for my menu:
#menu {
display:inline;
float:right;
}
#menu > ul > li {
display:inline-block;
margin-right:20px;
min-width:70px;
}
#menu > li {
display:inline-block;
list-style:none;
margin-left:auto;
margin-right:auto;
}
#menu > li:hover {
color:#000000;
}
#menu li a {
display:block;
padding-top:25px;
border-top:4px solid #FFFFFF;
color: #FFFFFF;
text-decoration:none;
text-align: center;
}
#menu li a:hover {
border-color:#000000;
color:#000000;
}
i want to be able to make a bottom border (like the top one but on the bottom) slide in from the side on link hover
here is a fiddle: http://jsfiddle.net/2w6NB/

Position your element you want coming from the left to be
left: -200px; //or however much it takes to hide the element completely or partially
Then here is some sample code that you might be able to successfully use to model your functionality:
$( "#item" ).hover(function() {
$( "#item" ).stop().animate({
left: "-1" //shows item
}, 400);}, function() {
$( "#item" ).stop().animate({
left: "-160" //this determines how far back the item goes after hovering
}, 400);
});
Let me know if you have questions or if it works.

I believe this link will help you: Sliding with CSS and Affect Other Element on Hover
The goal here is to slide a line/boarder from an "overflow:hidden;" div using either CSS webkit transition or a javascript function. You cannot have this happen on the same object as the menu links, but you can set it so that there is a div directly underneath it that will let the bar slide in.
(An example of this is setting "right:200px;position:absolute;width:200px;border-top:solid black 5px;" to the inside object and the div surrounding it to "overflow:hidden;width:200px;". Then you use the transition on a css hover event or a javascript function to move over the object back into the div so that it can display.
I hope that helps!