We Keep Coding

Dynamically positioning element on scroll

Goal
To have the page navigation positioned lower on the page when initially loaded. So that it looks like pictured below.
Background
I created a navigational element that is using Headroom.js to control its position. The point of the library is that it moves the desired navigational item out of view when a user is scrolling down so that you can see more content. Then the item shows up when you scroll back up to make it convenient to click on a link if that is what you needed to do.
Current State
I have this current demo on codepen.
That navigational item is at the top of the page but on a lower z-index. So not initially visible.
when you scroll down the element is out of view.
But when you scroll up, it is where it needs to be
Code
HTML
<nav id="page-menu" class="link-header header--fixed slide slide--reset" role="banner">
<ul>
<li>Products</li>
<li>Features</li>
<li>Testimonials</li>
<li>Cases</li>
</ul>
</nav>
CSS
#page-menu {
background-color: #BA222B;
list-style-type: none;
width: 100%;
z-index:10;
}
#page-menu ul {
list-style-type: none;
margin: 0;
position: absolute;
bottom: 5px;
right: 10px;
}
#page-menu ul li {
display: inline-block;
margin-left: 10px;
}
#page-menu ul li a {
text-decoration: none;
color: #fff;
}
.link-header {
background-color:#292f36;
height: 100px;
}
.header--fixed {
position:fixed;
z-index:10;
right:0;
left:0;
top:0px;
}
jQuery
(function() {
new Headroom(document.querySelector("#page-menu"), {
tolerance: 5,
offset : 150,
classes: {
initial: "slide",
pinned: "slide--reset",
unpinned: "slide--up"
}
}).init();
}());
Full demo on codepen.

Goal :
From what you are describing, you want the read navigation to appear as such on page load:
And move with the gray bar, but and down, as the user scrolls, until it cutoff point reaches the bottom of the gray bar. Then you want things to kick in, and have the red bar slide up and out of view, and then up and down depending on scroll. You want the transition to be smooth.
Method:
The thing to keep in mind for a smooth transition is that you have two states: A top state and a bottom state. You have to design both, you have to figure out the exact height to change over, and you have to make sure that they will be identical at that spot, so appear seamless.
Top State:
We don't need any sort of extra positioning here. We want it to be static in fact, as odd as that might sound.
Bottom State:
We want fixed positioning here. Since we want the changeover to occur right when the red bar touches the top of the window, your CSS in fixed-header is perfect already.
Changeover Height:
The header and the gray nav bar combined are 180px, so that number will be our change over.
Code:
1. Statechange
Lets work backwards and take the state change first. You will need to change from 150px to 180px in a lot of places. For example, your JS code:
Existing JS:
if ($(window).scrollTop() >= 150) {
...
(function() {
new Headroom(document.querySelector("#page-menu"), {
tolerance: 5,
offset : 150,
New JS:
if ($(window).scrollTop() >= 180) {
...
(function() {
new Headroom(document.querySelector("#page-menu"), {
tolerance: 5,
offset : 180,
And your header will need an updated height, or a removal of height entirely.
Existing CSS:
header {
height:150px;
position: relative;
z-index:30;
}
New CSS:
header {
position: relative;
z-index:30;
}
2. Top State
The big thing here messing you up is that for some reason the library you are using is applying .header--fixed and link-header on page load. I don't know how to prevent this, but we can just neutralize is by removing them from your CSS.
Remove This CSS:
.link-header {
background-color:#292f36;
height: 100px;
}
.header--fixed {
position:fixed;
z-index:10;
right:0;
left:0;
top:0px;
}
Second, we need to tweak the ul inside your red nav.
Existing CSS:
#page-menu ul {
list-style-type: none;
margin: 0;
position: absolute;
bottom: 5px;
right: 10px;
}
New CSS:
#page-menu ul {
list-style-type: none;
margin: 0 auto;
padding:0;
width:960px;
max-width:100%;
text-align:right;
}
3. Bottom State
Everything works really well here aleady, except that the fixed-header class is getting added to the gray nav as well. We need to tweak our jQuery selector bit.
Existing JS:
if ($(window).scrollTop() >= 180) {
$('nav#page-menu').addClass('fixed-header');
}
else {
$('nav#page-menu').removeClass('fixed-header');
}
NewJS:
if ($(window).scrollTop() >= 180) {
$('header nav').addClass('fixed-header');
}
else {
$('header nav').removeClass('fixed-header');
}
4. Misc Cleanup
Everything looks really good here, except that the lis inside our two navs don't line up. We need to fix some margin-right to bring them into line.
Existing CSS:
#page-menu ul li {
display: inline-block;
margin-left: 10px;
}
New CSS:
#page-menu ul li {
display: inline-block;
margin-left: 10px;
margin-right: 10px;
}
Finally, I noticed that there's a missing closing bracket in your HTML, in the gray nav. It's not hurting much, but it could:
<nav>
<ul>
<li>Dentists</li>
<li>Labs</li>
<li>Patients</li>
<ul> <--- ( Should be </ul> )
</nav>
End Result:
http://codepen.io/anon/pen/qIrhx

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/

Display only one list item at the center of the <div> with overflow:hidden

I'm trying out a vertical ticker that displays a few text list items one after the other, but I need some help in positioning them.
You'll see a web ticker with two items. To display only one item at a time, I have to set 'overflow:hidden' in #tickerContainer.
However, the text in the ticker is not being positioned at the center of the ticker(As you see it is sitting at the bottom).
Also, when I remove 'overflow:hidden' from #tickerContainer, which is the whole ticker moving away from the top of the page?
Please help me fix this.
http://jsfiddle.net/nodovitt/NYhY4/2/
<div id="tickerContainer">
<ul id="ticker" class="js-hidden">
<li class="news-item">Item Number 1</li>
<li class="news-item">Item Number 2</li>
</ul>
</div>
The jQuery function:
<script>
function tick() {
$('#ticker li:first').slideUp(1000, function () {
$(this).appendTo($('#ticker')).slideDown(1000);
});
}
setInterval(function () {
tick()
}, 2000);
</script>
The CSS:
#tickerContainer {
background-color:white;
border-radius:15px;
text-align:center;
margin:10px;
box-shadow:0 0 8px black;
color:#2B7CD8;
font-size:50px;
width:500px;
height:100px;
overflow:hidden;
}
.news-item {
font-family:Times New Roman;
font-style:oblique;
}
#ticker li {
list-style-type:none;
}

You haven't put any specifications on your ticker id. So something like this http://jsfiddle.net/NYhY4/10/
#ticker {
padding:0px;
margin:0px;
padding-top:20px;
height:55px;
overflow:hidden;
}

Here is my answer as requested by OP
Add this css to your #ticker
#ticker {
margin: 0;
padding: 0;
line-height: 100px;
}
NOTE The line-height will always have to be the height of the #tickerContainer
You can see it here http://jsfiddle.net/NYhY4/3/

#ticker li {
list-style-type:none;
position: relative;
bottom:20px;
}

I didn't like the current item being hidden by seemingly "nothing" (the blank part of li box above the text) so I used this approach:
Remove the margins from the '#ticker'
set '#ticker' padding-top (.5em worked best for me)
set '#ticker li' padding-bottom to push the next item out of view (I used '1em' to be safe but '.5em' worked too)
The words didn't look perfectly centered so
set '#ticker li' line-height to '1em'
#ticker {
margin: 0;
padding-top: .5em;
}
#ticker li{
line-height: 1em;
padding-bottom: 1em;
list-style-type: none;
}
http://jsfiddle.net/JvuKU/2/
Note This depends on the font-size of the '#tickerContainer'. If you change the height or font-size of the '#tickerContainer', just adjust the values of '#ticker' padding-top and '#ticker li' padding-bottom.

Change div color on mouse over

I have a line of text (a link) within a div. I'd like the div color to change on mouse over the link. I tried various things without success. You can see my current code here: http://jsfiddle.net/Grek/D3TzM/ Note that I'm not necessarily looking for a jquery solution. Tks for your help
CSS
.source-title-box a{
color:#467FD9;
display:inline-block;
}
.source-title-box a:hover{
color:#666666;
}
.source-title-box hover{background:#cb2326;}
JS:
$('a').hover(function(){
$(this).parent().toggleClass('hover');
});​

you can select below a pseudo class like :hover. No need for javascript at all for this.
http://jsfiddle.net/7bFKq/
.source-title-box:hover{
background-color:#467FD9;
}
.source-title-box:hover a{
color:#FFFFFF;
}
​
If you must do it with a hover on a, you will need javascript.
http://jsfiddle.net/7wwdb/
$('a').hover(function(){
// .closest will get you to the div regardless of what might
// be in between. With .parent you get to the absolute parent, which
// in your case is a span
$(this).closest('.source-title-box').toggleClass('hover');
});​
css is basically the same, just :hover to .hover
.source-title-box.hover{
background-color:#467FD9;
}
.source-title-box.hover a{
color:#FFFFFF;
}

jsFiddle DEMO
Just look for the closest div, the immidiate .parent() was a <span> tag (which aren't automatically block elements by nature, unless you make them that way).
$('.activity-title a').on('mouseover', function () {
$(this).closest('div').toggleClass('hover');
});
$('.activity-title a').on('mouseout', function () {
$(this).closest('div').toggleClass('hover');
});

Changes this:
.source-title-box a
{
color:#467FD9;
display:block;
text-decoration:none;
}
to:
.source-title-box a
{
color:#467FD9;
display:block;
text-decoration:none;
padding:15px;
}
And this:
.source-title-box
{
color: #000;
background: #fff;
padding: 15px;
width: 200px;
position: relative;
margin-top:10px;
border: 1px dotted #666;
}
to:
.source-title-box
{
color:#000;
background:#fff;
width:230px;
position:relative;
margin-top:10px;
border:1px dotted #666;
}
DEMO
No JS required.

Keep the JavaScript you have, and add this CSS class:
.hover {
background-color: #f00;
}
http://jsfiddle.net/RLjvB/

Greg,
There are 2 points:
1) The jquery .hover() function expects two handlers as argument.
One for handlerin (mouse over) and one for handlerout (on mouse out). Giving only one argument uses the argument as an In-Out handler, i.e the same handler for both mouse events.
2) Make sure that the script that you have written (js) is included at the bottom of the page. ie, just before closing the "body" tag.
This is because : the html element may not be loading when the script executes.
...Your HTML Code...
<script>
$('a').hover(function(){
$(this).parent().toggleClass('hover');
});​
</script>
</body>
Hope this helps.

JavaScript add and remove class function on click

Basically I have this problem. I have an accordion that toggles one heading open at a time and I am having a problem adding in the open/close image that sits to the right of the heading.
I have it so far so that once you click a heading it removes the 'open' image and toggles another class for the 'close' image. Now I need to basically swap out these classes again so that if you toggle another heading it removes the other image and goes back to the original.
Here is the code I am using.
JavaScript
<SCRIPT>
$("#accordion > li").click(function () {
$("#accordian li").removeClass("faq-header");
$(this).addClass("faq-header2");
if (false == $(this).next().is(':visible')) {
$('#accordion > ul').slideUp(250);
$('#accordion > ul').addClass('faq-header');
$(this).removeClass("faq-header");
}
$(this).next().slideToggle(300);
});
$('#accordion > ul:eq(0)').show();
</SCRIPT>
CSS
#accordion {
list-style: none;
margin-left:-38px;
}
#accordion ul:eq {
background-image:url(../img/faq-open.gif);
background-repeat:no-repeat;
background-position:right;
padding-right:20px;
}
#accordion li{
display: block;
background-color: #FFF;
font-weight: bold;
cursor: pointer;
}
.faq-header {
text-align:left;
background-image:url(../img/faq-close.gif);
background-repeat:no-repeat;
background-position:right;
margin-right:20px;
}
.faq-header2 {
text-align:left;
background-image:url(../img/faq-open.gif);
background-repeat:no-repeat;
background-position:right;
margin-right:20px;
}
#accordion ul {
list-style: none;
display: none;
}
#accordion ul li{
font-weight: normal;
cursor: auto;
background-color: #fff;
border-bottom:1px solid #999;
margin-left:-38px !important;
}
I have removed one class and added another class as you can see $("#accordian li").removeClass("faq-header"); and added the following $(this).addClass("faq-header2");
But I need to now remove .faq-header2 and add back .faq-header after it is no longer the section selected. It doesn't seem too hard to me but i just can't figure out how to code it. Should be a basic if function I would think...

The jQuery UI accordion is a well proven cross browser widget, and does images on open and close (by default on the left, but one change of CSS will put them on the right)
as per here
if you don't won't to use it, I would persue an option with toggleClass, here
EDIT
Thanks for posting your HTML, I didn't necessarily mean the whole page, just the HTML for you accordion functionality, but hey thats cool
First point though, your HTML seems a bit heavy for just doing an accordion. Its also not entirely valid to put a ul inside a ul (they tend to go inside li, as in a drop down menu style). Further more it doesn't seem to be much point in all those ul and li as each ul only has one li anyway, just seems like a lot more tags than you would really need. ul and li tend to come with a lot of default styling (bullet points, margins, padding, indents etc), which can mean a lot more CSS than need to make them display how you want. I would have gone with a simpler structure, makes it easier to write your jQuery. A bit more like this
<div id="accordion">
<h3>First header</h3>
<div>First content</div>
<h3>Second header</h3>
<div>Second content</div>
</div>
Anyway, that was just a comment from my experience. To your problem at hand, this worked for me
$("#accordion > li").click(function () {
var self = $(this);
self.next('ul').slideToggle(300, function () {
if ($(this).is(':visible')) {
self.removeClass('faq-header').addClass('faq-header2')
}
else {
self.removeClass('faq-header2').addClass('faq-header')
}
});
self.siblings().removeClass('faq-header2').addClass('faq-header').next('ul').slideUp(250);
});
toggleClass, although useful, in your circumstance as to how you want classes to be added and removed, may not be as useful as I would have thought

I think that toggle() function is a bit not intuitive. I usually use my pwn method replaceClass() to do as you want:
void replaceClass(Object classList, String surrogateClass, String classToReplace);
defined as follow
function replaceClass(elementClassList, firstClass, secondClass) {
if(elementClassList.contains(firstClass)){
{
elementClassList.remove(firstClass);
elementClassList.add(secondClass);
}
}