nav bar on scrolling page. active link - javascript

Currently my website has the scrolling function with a fixed nav bar (page scrolls down when you click the differernt links on the navigation. I added the function that the page you are on the has an active link. The only issue is that when you click on a different link on the navigation bar, as it passes over the other pages those links highlight until you reach the page you want (for example if you are on contact and click home it highlights portfolio, then experience, then about, and then finally home once it reaches it. I don't want it to highlight the ones it passes over.
http://jsfiddle.net/gigi2233/e0jbvmyk/6/
HTML
<!--nav-->
<div id="icon">
<ul class="icon">
<li><img src="logo.jpg" alt="logo" class="icon"></li>
</ul>
</div>
<div id="nav">
<ul class="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>EXPERIENCE</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</div>
<!--home-->
<div id="home">
<img src="home-large.jpg" class="homeposition">
</div>
<!--about-->
<div id="about">
<img src="home-large.jpg" class="aboutposition">
</div>
<!--experience-->
<div id="experience">
<img src="experience-large.jpg" class="experienceposition">
<br><br>
DOWNLOAD PDF
</div>
<!--portfolio-->
<br>
<div id="portfolio">
<img src="home-large.jpg" class="portfolioposition">
</div>
<!--contact-->
<div id="contact">
<img src="home-large.jpg" class="contactposition">
</div>
</body>
</html>
jQuery
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
js/jquery-1.10.2.min.js
CSS
body{
font-size: 12pt;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
margin-left: auto;
margin: 0px;
padding: 0px;
}
.wrapper{
width: 400px;
margin: 0 auto;
position: relative;
padding: 28px 0 0 0;
}
.down{
text-align:center;
position:relative;
}
/* nav */
#nav ul{
margin-top: 0px;
width: 100%;
padding: 25px 0px;
background-color: #f2f2f2;
border-top:solid #8dacf9;
position: fixed;
margin-left: auto;
text-align: center;
z-index: 4;
}
#nav ul li{
display: inline-block;
}
#nav ul li a{
text-decoration: none;
padding: 25px 35px;
color: #000000;
background-color: #f2f2f2;
}
#nav ul li a:hover{
color: #8dacf9;
background-color: #ffffff;
}
#nav ul li a.active{
color: #8dacf9;
background-color: #ffffff;
}
/* icon */
.icon{
float: left;
height: 50px;
margin-top: 0px;
position: fixed;
z-index: 10;
}
#icon ul{
margin-top: auto;
padding: 10px 30px;
background-color: #f2f2f2;
border-top:solid #8dacf9;
position: fixed;
}
#icon ul li{
display: inline;
}
#icon ul li a{
color: #000000;
background-color: #f2f2f2;
margin-top: 0px;
}
/* links */
a:link{
color: #000000;
text-decoration: none;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
a:visited{
text-decoration: none;
color: #000000;
}
a:hover{
text-decoration: none;
color: #8dacf9;
}
a:active{
text-decoration: none;
color: #8dacf9;
}
/*home*/
#home{
height:auto;
position:relative;
color: #000000;
font-size:1em;
text-align: center;
margin-right: auto;
margin-left: auto;
width: auto;
}
.homeposition{
text-align:center;
margin-top:70px;
}
/* about */
#about{
height:auto;
position:relative;
color: #000000;
font-size:1em;
text-align: center;
}
.aboutposition{
text-align:center;
margin-top:70px;
}
/* experience */
#experience{
height:auto;
position:relative;
color: #000000;
text-align: center;
}
.experienceposition{
margin-top:70px;
}
.resume:link{
color: #8dacf9;
font-size: 1.2em;
text-decoration: none;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
.resume:visited{
text-decoration: none;
color: #8dacf9;
}
.resume:hover{
text-decoration: none;
color: #b4b3b3;
}
.resume:active{
text-decoration: none;
color: #b4b3b3;
}
/* portfolio */
#portfolio{
height:auto;
position:relative;
color: #000000;
font-size:1em;
text-align: center;
}
.portfolioposition{
text-align:center;
margin-top:70px;
}
/* contact */
#contact{
height:auto;
position:relative;
color: #000000;
font-size:1em;
text-align: center;
}
.contactposition{
text-align:center;
margin-top:70px;
}
JAVASCRIPT
$(document).ready(function () {
$(window).scroll(function () {
var y = $(this).scrollTop();
$('.link').each(function (event) {
if (y >= $($(this).attr('href')).offset().top - 10) {
$('.link').not(this).removeClass('active');
$(this).addClass('active');
}
});
});
});
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: (target.offset().top - 0)
}, 900);
return false;
}
}
});
});


I think you can remove the scroll function, and highlight the link only when clicking on it.
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Remove 'active' class from all links
$('.link').removeClass('active');
// Add 'active' class to the current link
$(this).addClass('active');
// And animation
if (target.length) {
$('html,body').animate({
scrollTop: (target.offset().top - 0)
}, 900);
return false;
}
}
});
});
I didn't test it, but something like this should work. I don't think you really need the window.scroll() function.

Related

Sliding CSS Javascript bar

Is it possible to have the blue bar under the list items shrink to the size of the list item clicked and position itself directly underneath it? Additionally, if the opposite list item is clicked, the bar would slide underneath it. Is this possible with just pure CSS or Vanilla JavaScript? Anything helps, cheers.
.buttons {
list-style-type: none;
margin:0px auto 0;
padding:0;
cursor: pointer;
width:100%;
text-align:center;
}
.buttons li {
float:left;
margin:0;
padding:0;
border-right:1px solid white;
line-height:45px;
font-size: 14px;
font-family:Verdana;
font-weight:bolder;
-moz-box-sizing:border-box;
color:#005bab;
background-color:#e2ecf6;
display:inline-block;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:50%;
}
.buttons li:last-child {
border-right: none;
}
.buttons li:hover{
color: #005bab;
background-color: #d2e2ef;
}
.bottombar1{
content: "";
display:block;
height:0.5em;
width:100%;
background-color:#00688B;
}
#panelCanada,#panelInternational {
display: none;
}
<div class="topnav">
<ul class="buttons">
<li class="flip"> Canada</li>
<li class="flip">International</li>
</ul>
</div>
<br style="line-height:49px;"/>
<div class="bottombar1"></div>

You can use absolute positioning and alter the position and width of the bar based on the offsetLeft and offsetWidth of the li you clicked on.
var flip = document.getElementsByClassName("flip"),
bb = document.getElementById("bottombar1");
function clickHandler(el) {
el.addEventListener("click", function() {
var left = this.offsetLeft, width = this.offsetWidth;
bb.style.left = left + "px";
bb.style.width = width + "px";
});
}
for (var i = 0; i < flip.length; i++) {
clickHandler(flip[i]);
}
body {
margin: 0;
padding: 2em;
}
.topnav {
position: relative;
}
.buttons {
list-style-type: none;
margin: 0px auto 0;
padding: 0;
cursor: pointer;
width: 100%;
text-align: center;
overflow: auto;
}
.buttons li {
float: left;
margin: 0;
padding: 0;
border-right: 1px solid white;
line-height: 45px;
font-size: 14px;
font-family: Verdana;
font-weight: bolder;
-moz-box-sizing: border-box;
color: #005bab;
background-color: #e2ecf6;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 50%;
}
.buttons li:last-child {
border-right: none;
}
.buttons li:hover {
color: #005bab;
background-color: #d2e2ef;
}
.bottombar1 {
height: 0.5em;
width: 100%;
background-color: #00688B;
position: absolute;
top: calc(100% + 5px);
transition: left .5s, width .5s;
left: 0;
}
.topnav {
position: relative;
}
<div class="topnav">
<ul class="buttons">
<li class="flip"> Canada</li>
<li class="flip">International</li>
</ul>
<div class="bottombar1" id="bottombar1"></div>
</div>

The more flexible way would be using JS, but yeah,
CSS, why not...
Use hidden <input type="radio" id="" name=""> and than use CSS's nearest sibling ~ to target any desired next-near sibling element selector.
The elements to trigger the :checked state change are the <label for=""> elements that need to be placed inside the LI elements:
/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}
ul.buttons {
padding: 0;
display: flex;
list-style: none;
}
ul.buttons li {
flex: 1;
text-align: center;
color: #005bab;
background-color: #e2ecf6;
}
ul.buttons li label{
display: block;
padding: 16px;
cursor: pointer;
}
ul.buttons li:hover {
color: #005bab;
background-color: #d2e2ef;
}
.bottombar{
position: relative;
height: 0.5em;
background: #00688B;
width:100%;
left: 0;
transition: 0.6s;
}
/* don't show radio buttons switchers
and content */
input[id^=switch],
[id^=switchContent]{
display:none;
}
/* when :checked, target the nearest sibling bottombar */
#switch1:checked ~ .bottombar{
width: 50%;
left:0;
/*transform: translateX( 0% );*/
}
#switch2:checked ~ .bottombar{
width: 50%;
left: 50%;
/*transform: translateX( 100% );*/
}
/* Show content */
#switch1:checked ~ #switchContent1{
display: block;
}
#switch2:checked ~ #switchContent2{
display: block;
}
<div class="topnav">
<ul class="buttons">
<li><label for="switch1">Canada</label></li>
<li><label for="switch2">International</label></li>
</ul>
</div>
<input id="switch1" type="radio" name="sw_1">
<input id="switch2" type="radio" name="sw_1">
<div class="bottombar"></div>
<div id="switchContent1"><h1>CANADAAA</h1></div>
<div id="switchContent2"><h1>INTERNATIONALLL</h1></div>

This is Luddens Desirs answer in Vanilla Javascript. It requires a bit more manual labor, so for the slight performance boost using CCS3 animations for such a simple effect, it would be better to go with the other javascript animation answers.
// store relevent elements
var can = document.getElementById('can');
var int = document.getElementById('int');
var botBar1 = document.getElementsByClassName('bottombar1')[0];
can.addEventListener("click", function() {
// replace classes with first class name
botBar1.className = botBar1.className.split(" ")[0];
// add class
botBar1.className += ' toCanada';
});
int.addEventListener("click", function() {
// replace classes with first class name
botBar1.className = botBar1.className.split(" ")[0];
// add class
botBar1.className += ' toInternational';
});
.buttons {
list-style-type: none;
margin:0px auto 0;
padding:0;
cursor: pointer;
width:100%;
text-align:center;
}
.buttons li {
float:left;
margin:0;
padding:0;
border-right:1px solid white;
line-height:45px;
font-size: 14px;
font-family:Verdana;
font-weight:bolder;
-moz-box-sizing:border-box;
color:#005bab;
background-color:#e2ecf6;
display:inline-block;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:50%;
}
.buttons li:last-child {
border-right: none;
}
.buttons li:hover{
color: #005bab;
background-color: #d2e2ef;
}
.bottombar1{
content: "";
display:block;
height:0.5em;
width:100%;
background-color:#00688B;
-webkit-transition: all 1s; // Chrome
-moz-transition: all 1s; // Mozilla
-o-transition: all 1s; // Opera
transition: all 1s;
}
.toInternational{
transform: translate(25%, 0px) scaleX(.5);
}
.toCanada{
transform: translate(-25%, 0px) scaleX(.5);
}
<script src="https://unpkg.com/jquery#3.1.0/dist/jquery.min.js"></script>
<div class="topnav">
<ul class="buttons">
<li id = "can" class="flip"> Canada</li>
<li id = "int" class="flip">International</li>
</ul>
</div>
<br style="line-height:49px;"/>
<div class="bottombar1"></div>

How To Code A Hovering Navigation Bar To Appear Only When You Start Scrolling

I would like to have my hovering/sticky navigation bar appear when a reader/web visitor has scrolled passed the blog header, instead of the navigation bar appearing at all times, as it currently does. I'm not entirely sure how to achieve this affect as I have done research on this but to no avail, but I am certain it is completely doable. I have seen this effect on two blogs, one of which is hosted on Blogger, the URL of these sites are as follows : http://www.theweekendattic.com/ and http://mediamarmalade.com/. The URL to my own blog is as follows : http://www.blankesque.com
The CSS and HTML coding for the hovering navigation bar currently on my site is detailed below :
#wctopdropcont{
width:100%;
height:45px;
display:block;
padding: 5.5px 0 0 0;
z-index:100;
top:-2px;
left: 0px;
position: fixed;
background:#f5f5f5;
border-bottom: 1px solid #f0f0f0;
}
#wctopdropnav{
float: left;
width:97%;
height:7px;
display:block;
padding:0px;
}
#wctopdropnav li{
float:left;
list-style:none;
line-height:13px;
padding: 10px 6.5px 6.5px 6.5px;
background:#f5f5f5;
}
#wctopdropnav li a, #wctopdropnav li a:link{
color:#494949;
float: left;
display:block;
text-transform: uppercase;
font-size: 10.5px!important;
font-family: karla, arial!important;
padding: 5px;
text-decoration:none;
font-weight: normal!important;
letter-spacing : 0.09em;
}
#wctopdropnav li:first-child a {
font-weight: bold!important;
margin-left: 20px;
}
#wctopdropnav li a:hover, #wctopdropnav li a:active, #wctopdropnav .current_page_item a {
color: #a6a6a6;
font-weight: normal;
padding: 5px;
background: #f5f5f5;
}
#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{
font-size: 10.5px;
background:#f5f5f5;
color: #494949;
width: 90px;
margin: 0px;
padding: 0;
line-height: 15px;
position: relative;
}
#wctopdropnav li li a:hover, #wctopdropnav li li a:active {
color: #a6a6a6;
background: #f5f5f5;
filter: #f5f5f5;
}
#wctopdropnav li:hover, #wctopdropnav li.sfhover{
position:static
}
#socialmediabuttons {
display: block;
float: right;
position: relative;
margin: 0.9% -1% 0 0;
}
#socialmediabuttons a {
padding: 0 0 0 18px;
}
#socialmediabuttons a:hover {
opacity: 0.4;
filter: alpha(opacity=40);
}
</style>
<div id='wctopdropcont'>
<div id='wctopdropnav'>
<li><a href='http://www.blankesque.com'>Home</a></li>
<li><a href='http://www.blankesque.com/search/label/Advice'>Advice</a></li>
<li><a href='http://www.blankesque.com/search/label/Beauty'>Beauty</a></li>
<li><a href='http://www.blankesque.com/search/label/Fashion'>Fashion</a></li>
<li><a href='http://www.blankesque.com/search/label/Lifestyle'>Lifestyle</a></li>
<li><a href='http://www.blankesque.com/search/label/Skin & Hair'>Skin & Hair</a></li>
<div id='socialmediabuttons'>
<a href='https://www.pinterest.com/blankesque' target='_blank'><img height='20px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/91F98FB1-242C-428E-A472-50F7D511C38E_zpsaiuhz6yb.gif' width='20px'/>
</a>
<a href='https://www.twitter.com/' target='_blank'><img height='20px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/923FF7F8-5AA7-4676-935F-2CB5FF465122_zpsmctqg100.gif' width='20px'/></a>
<a href='http://www.bloglovin.com/blogs/blankesque-14431777' target='_blank'><img height='20px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/7CC1080E-1911-4D0B-B99F-55109C044D54_zps2ky5dfgt.gif' width='20px'/></a>
<a href='https://instagram.com/' target='_blank'><img height='20px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/C6567CDB-FB01-4F2D-A2FD-D0D875A30B80_zps5mgdqong.gif' width='20px'/></a>
</div>
</div></div>

You can use jQuery fadein/fadeout in scroll event:
$(document).ready(function(){
$(".navbar").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('.navbar').fadeIn();
} else {
$('.navbar').fadeOut();
}
});
});
});

How do you assign li items different classes depending on what is selected on dropdown menu?

I have a webpage that allows the user to select a category from a dropdown menu, then type into an input box. When they hit enter on the input box, a list item is created.
My goal: Based on what category they chose from the dropdown, the list item is assigned a different class. In the CSS, the class would have specifications about positioning (right now, it only has specific background colors for each). Final result would be that each list item is grouped in a different position on the page based on which category the user chose. (For example, all list items of category 1 will be on the bottom-left of the page, and all list items of category 2 will be on the bottom-right of the page, etc, etc...)
In the JS file I have indicated the place where I think the relevant code should go, but as for what to put there I am rather lost.
Fiddle:
http://jsfiddle.net/mlynn/jyrbepyz/3/
HTML:
<section id="heady">
<div style="text-align: left;padding:25px 70px;display:inline-block;float:left;"><b>Site</b></p></div>
<div style="text-align: right;padding:25px 70px;display:inline-block;float:right;">
Home |
Generic |
Elements |
Sign Up
</div>
</section>
<section id="wrapper">
<br><br>
<img src="images/blacksquare.png" width="525" height="197"></img>
<br><br><br>
<div>
<div style="vertical-align:top;display:inline-block;float:left;">
<ul class="navbar cf">
<!-- <li>item 2</li> -->
<li style="width:200px;">
#
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</li>
</ul>
</div>
<div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" id="todo" placeholder="Enter a To-do and hit enter">
</form>
<br>
<!-- <ul class="active">
<li>Work X</li>
<li>Sleep X</li>
<li>Repeat X</li>
</ul> -->
</div>
<div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
<ul class="active">
<li>Work X</li>
<li>Sleep X</li>
<li>Repeat X</li>
</ul>
</div>
</div>
<div class="Category1">
<!--list items that user assigned "1" from dropdown menu would be placed in this div-->
</div>
<div class="Category2">
</div>
<div class="Category3">
</div>
<div class="Category4">
</div>
<div class="Category5">
</div>
<div class="Category6">
</div>
<div class="Category7">
</div>
</section>
<section id="feety">
I believe I exist
</section>
CSS:
/*adder*/
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);
* {
padding:0;
margin:0;
}
html {
background:teal;
}
body {
/*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}
a {
color: #D9D9D9;
text-decoration: none;
}
a:active, a:hover {
text-decoration: underline;
}
#heady {
text-align: center;
width:100%;
height:75px;
background-color:#222; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
color:white;
position:relative;
}
#wrapper {
text-align: center;
width:1000px;
height:1000px;
margin-left:auto;
margin-right:auto;
background-color:teal; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
position:relative;
}
#feety {
text-align: center;
width:100%;
height:100px;
background-color:darkslateblue; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
color:white;
position:relative;
}
.Category1 {
background:blue;
}
.Category2 {
background:green;
}
.Category3 {
background:yellow;
}
.Category4 {
background:orange;
}
.Category5 {
background:purple;
}
.Category6 {
background:gold;
}
.Category7 {
background:maroon;
}
/* clearfix */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
.cf {
* zoom: 1;
}
ul.navbar {
background:white;
border-style:solid;
border-color:gray;
border-width:1px;
width: 200px;
border-radius: 4px;
}
.ActiveListItem:after {
content: "\25BC\00a0\00a0"; /*carat and spaces*/
float:right;
font-weight:900;
padding: 0px 0px;
font-size:100%;
line-height:20px; /*keeps carat in center of text*/
}
ul.navbar li a.ActiveListItem {
background:white !important;
color:black;
border-style:solid;
border-color:white;
border-radius:4px;
padding:3px 5px !important;
font-weight:normal !important;
margin-left:14px;/* got the activeitem centered with the list text this way*/
margin-right:0px;
}
ul.navbar li {
position: relative;
}
ul.navbar li a {
display: block;
color: white;
padding:10px 5px;
text-decoration:none;
transition: all .2s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
background:#a6d0e1; /*Leaving for now, but keep in mind things bold slowly when you change this to gradient*/
color: #333;
font-weight:900;
}
ul.navbar li ul {
margin-top: 1px;
position: absolute;
background: #222;
font-size: 14px;
min-width: 200px;
display: none;
z-index: 99;
box-shadow: inset 0 2px 3px rgba(0,0,0,.6),
0 5px 10px rgba(0,0,0,.6);
}
ol, ul { list-style: outside none none; }
.hidden { display: none; }
/*Lister*/
.container {
width: 60%;
margin: 0px auto;
}
form { }
input,
ul {
background: #eee;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
font-family:"Tahoma";
}
input {
padding: 10px 10px 10px 20px;
border: 1px solid #ccc;
}
.lister ul {
list-style: square inside;
padding: 10px;
}
.active { border: 1px solid #ccc; }
.inactive { display: none; }
.lister li {
padding: 10px;
font-weight: 600;
color: #34495e;
}
.lister li:nth-child(odd) {
background: #dadfe1;
border-radius: 5px;
}
.lister li > a {
float: right;
text-decoration: none;
color: #22313f;
font-weight: bold;
transition: all .2s ease-in-out;
}
.lister li > a:hover {
font-size: 110%;
color: #c0392b;
}
.lister li:before {
content: "#"; /*carat and spaces*/
float:left;
font-weight:900;
padding: 0px 0px;
font-size:100%;
line-height:20px; /*keeps carat in center of text*/
}
JS:
// sub menus identification
$(function() {
$('.navbar ul li a').click(function(){
$('.navbar > li:first-child > a').text($(this).text());
$('.navbar > li > ul').addClass('hidden');
$('.navbar li ul').slideToggle(100);
});
$('.navbar > li').mouseenter(function(){
$(this).find('ul').removeClass('hidden');
});
$('.ActiveListItem').click(function(){
$('.navbar li ul').slideToggle(300);
});
});
//newList
$(document).ready(function() {
var ul = $('.lister ul'),
input = $('input');
input.focus();
$('form').submit(function () {
if (input.val() !== '') {
var inputVal = input.val(),
activeNumber = $('.ActiveListItem').text();
if (activeNumber == "1") {
/*I guess the fantasy code goes here...?*/
}
ul.append('<li>' + activeNumber + ' ' +inputVal + 'X</li>');
if (ul.hasClass('inactive')) {
ul.removeClass('inactive')
.addClass('active');
}
};
input.val('');
return false;
});
ul.on('click', 'a', function (e) {
e.preventDefault();
$(this).parent().remove();
if (ul.children().length == 0) {
ul.removeClass('active')
.addClass('inactive');
input.focus();
}
});
});
Fiddle:
http://jsfiddle.net/mlynn/jyrbepyz/3/

You could set a data attribute on the dropdown li element with the class name.
<li>1</li>
<li>2</li>
...
Move data attrbute from li to .ActiveListItem:
$('.navbar ul li a').click(function() {
var newClass = $(this).attr('data-newclass');
$('.ActiveListItem').attr('data-newclass', newClass);
...
});
On form submit you get the data attribute. Like this:
$('form').submit(function () {
var inputVal = input.val();
var activeNumber = $('.ActiveListItem').text();
var newClass = $('.ActiveListItem').attr('data-newclass');
...
});
Now you can set the class to any element you want by using .addClass().

How would you switch focus to an input text upon clicking an item on a dropdown menu?

I have a website that has a dropdown menu and an input box. For user comfort, I am thinking it would be nice to have it so that when the user clicks on an option in the dropdown menu, the mouse cursor is immediately focused inside the input box so that they can begin typing right away, rather than having to click into it every time.
How can this be achieved?
Here is my Jsfiddle: http://jsfiddle.net/mlynn/jyrbepyz/3/
Thank you.
HTML
<section id="heady">
<div style="text-align: left;padding:25px 70px;display:inline-block;float:left;"><b>Site</b></p></div>
<div style="text-align: right;padding:25px 70px;display:inline-block;float:right;">
Home |
Generic |
Elements |
Sign Up
</div>
</section>
<section id="wrapper">
<br><br>
<img src="images/blacksquare.png" width="525" height="197"></img>
<br><br><br>
<div>
<div style="vertical-align:top;display:inline-block;float:left;">
<ul class="navbar cf">
<!-- <li>item 2</li> -->
<li style="width:200px;">
#
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</li>
</ul>
</div>
<div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" id="todo" placeholder="Enter a To-do and hit enter">
</form>
<br>
<!-- <ul class="active">
<li>Work X</li>
<li>Sleep X</li>
<li>Repeat X</li>
</ul> -->
</div>
<div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
<ul class="active">
<li>Work X</li>
<li>Sleep X</li>
<li>Repeat X</li>
</ul>
</div>
</div>
<div class="Category1">
<!--list items that user assigned "1" from dropdown menu would be placed in this div-->
</div>
<div class="Category2">
</div>
<div class="Category3">
</div>
<div class="Category4">
</div>
<div class="Category5">
</div>
<div class="Category6">
</div>
<div class="Category7">
</div>
</section>
<section id="feety">
I believe I exist
</section>
CSS
/*adder*/
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);
* {
padding:0;
margin:0;
}
html {
background:teal;
}
body {
/*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}
a {
color: #D9D9D9;
text-decoration: none;
}
a:active, a:hover {
text-decoration: underline;
}
#heady {
text-align: center;
width:100%;
height:75px;
background-color:#222; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
color:white;
position:relative;
}
#wrapper {
text-align: center;
width:1000px;
height:1000px;
margin-left:auto;
margin-right:auto;
background-color:teal; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
position:relative;
}
#feety {
text-align: center;
width:100%;
height:100px;
background-color:darkslateblue; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
color:white;
position:relative;
}
.Category1 {
background:blue;
}
.Category2 {
background:green;
}
.Category3 {
background:yellow;
}
.Category4 {
background:orange;
}
.Category5 {
background:purple;
}
.Category6 {
background:gold;
}
.Category7 {
background:maroon;
}
/* clearfix */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
.cf {
* zoom: 1;
}
ul.navbar {
background:white;
border-style:solid;
border-color:gray;
border-width:1px;
width: 200px;
border-radius: 4px;
}
.ActiveListItem:after {
content: "\25BC\00a0\00a0"; /*carat and spaces*/
float:right;
font-weight:900;
padding: 0px 0px;
font-size:100%;
line-height:20px; /*keeps carat in center of text*/
}
ul.navbar li a.ActiveListItem {
background:white !important;
color:black;
border-style:solid;
border-color:white;
border-radius:4px;
padding:3px 5px !important;
font-weight:normal !important;
margin-left:14px;/* got the activeitem centered with the list text this way*/
margin-right:0px;
}
ul.navbar li {
position: relative;
}
ul.navbar li a {
display: block;
color: white;
padding:10px 5px;
text-decoration:none;
transition: all .2s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
background:#a6d0e1; /*Leaving for now, but keep in mind things bold slowly when you change this to gradient*/
color: #333;
font-weight:900;
}
ul.navbar li ul {
margin-top: 1px;
position: absolute;
background: #222;
font-size: 14px;
min-width: 200px;
display: none;
z-index: 99;
box-shadow: inset 0 2px 3px rgba(0,0,0,.6),
0 5px 10px rgba(0,0,0,.6);
}
ol, ul { list-style: outside none none; }
.hidden { display: none; }
/*Lister*/
.container {
width: 60%;
margin: 0px auto;
}
form { }
input,
ul {
background: #eee;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
font-family:"Tahoma";
}
input {
padding: 10px 10px 10px 20px;
border: 1px solid #ccc;
}
.lister ul {
list-style: square inside;
padding: 10px;
}
.active { border: 1px solid #ccc; }
.inactive { display: none; }
.lister li {
padding: 10px;
font-weight: 600;
color: #34495e;
}
.lister li:nth-child(odd) {
background: #dadfe1;
border-radius: 5px;
}
.lister li > a {
float: right;
text-decoration: none;
color: #22313f;
font-weight: bold;
transition: all .2s ease-in-out;
}
.lister li > a:hover {
font-size: 110%;
color: #c0392b;
}
.lister li:before {
content: "#"; /*carat and spaces*/
float:left;
font-weight:900;
padding: 0px 0px;
font-size:100%;
line-height:20px; /*keeps carat in center of text*/
}
JS
// sub menus identification
$(function() {
$('.navbar ul li a').click(function(){
$('.navbar > li:first-child > a').text($(this).text());
$('.navbar > li > ul').addClass('hidden');
$('.navbar li ul').slideToggle(100);
});
$('.navbar > li').mouseenter(function(){
$(this).find('ul').removeClass('hidden');
});
$('.ActiveListItem').click(function(){
$('.navbar li ul').slideToggle(300);
});
});
//newList
$(document).ready(function() {
var ul = $('.lister ul'),
input = $('input');
input.focus();
$('form').submit(function () {
if (input.val() !== '') {
var inputVal = input.val(),
activeNumber = $('.ActiveListItem').text();
if (activeNumber == "1") {
/*I guess the fantasy code goes here...?*/
}
ul.append('<li>' + activeNumber + ' ' +inputVal + 'X</li>');
if (ul.hasClass('inactive')) {
ul.removeClass('inactive')
.addClass('active');
}
};
input.val('');
return false;
});
ul.on('click', 'a', function (e) {
e.preventDefault();
$(this).parent().remove();
if (ul.children().length == 0) {
ul.removeClass('active')
.addClass('inactive');
input.focus();
}
});
});

You're using var ul = $('.lister ul')
Go take a look where is your .lister and the child ul in your HTML
I mean you probably want to target the needed DROPDOWN UL anchors
using the right selector:
$(".navbar.cf li ul li").on("click", "a", function(e){
e.preventDefault();
input.focus();
});
http://jsfiddle.net/jyrbepyz/5/

How can I get li items to slide and/or fade into view on this jQuery list?

Okay, so I have an input textarea that when you hit enter on it, a list item with your word appears. When you hit X on the list item, it slides up out of view (I was able to figure that out).
But I can't figure out how to make the list items slide down into view when you hit enter -- instead, they just appear really suddenly, which I think looks bad.
How do I make the list items gracefully slide into view when you hit enter?
http://jsfiddle.net/mlynn/vxzc6z6y/
HTML
<!DOCTYPE html>
<!--
-->
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="css/styletime.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/init.js"></script>
</head>
<body>
<section id="heady">
<div style="width:1000px;margin-left:auto;margin-right:auto;">
<div style="text-align: left;padding:25px 0px;display:inline-block;float:left;font-size:28px;"><b></b></p></div>
<div style="text-align: right;padding:25px 00px;display:inline-block;float:right;">
<!--Home |
Generic |
Elements | -->
</div>
</div>
</section>
<section id="wrapper">
<br><br>
<!--<img src="images/blacksquare.png" width="525" height="197"></img>-->
<div style="float:left;padding:0px 0px;font-size:14px;">Left...</div>
<div style="float:right;padding:0px 0px;font-size:14px;">...Right</div>
<br><br>
<div class="LeftPanel">
<div style="vertical-align:top;display:inline-block;float:left;">
<ul class="navbar cf">
<!-- <li>item 2</li> -->
<li style="width:200px;">
Category
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</li>
</ul>
</div>
<div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" class="clearable" placeholder="Type a task and hit enter..." autocomplete="off">
</form>
<!-- <ul class="active">
<li>Work X</li>
<li>Sleep X</li>
<li>Repeat X</li>
</ul> -->
</div>
<div class="InterestContainer mousescroll">
<div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 0px;">
<ul class="active">
<!--
<li>Work X</li>
<li>Sleep X</li>
<li>Repeat X</li>
-->
</ul>
</div>
</div>
</div>
<div class="RightPanel">
<div style="float:right;vertical-align:top;width:450px;height:400px;background:white;border-color:#ccc;border-width:1px;border-style:solid;border-radius:4px;">
New div goes here??
</div>
</div>
</section>
<section id="feety">
Footer
</section>
</body>
</html>
CSS
/*adder*/
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);
* {
padding:0;
margin:0;
}
html {
background:#FFFFFF; /*Back Colors*/
}
body {
/*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}
a {
color: #34495e;
text-decoration: none;
}
a:active, a:hover {
text-decoration: underline;
}
#heady {
text-align: center;
width:100%;
height:75px;
background-color:#FFFFFF; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
color:#000000;
position:relative;
/*background:url('http://wallpaperupdate.com/Images/product/plaid-wallpaper-kxeo-l.jpg');*/
}
#wrapper {
text-align: center;
width:1000px;
height:1000px;
margin-left:auto;
margin-right:auto;
background-color:#FFFFFF; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
position:relative;
}
#feety {
text-align: center;
width:100%;
height:100px;
background-color:darkslateblue; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
color:white;
position:relative;
}
.LeftPanel{
float:left;
width:465px;
}
.RightPanel{
float:right;
width:465px;
}
.InterestContainer{
height:374px;
width:460px;
background:none;
vertical-align:top;
/*border-color:#000;
border-width:1px;
border-style:solid;
border-radius:4px;*/
}
.mousescroll {
overflow-x:hidden;
overflow-y:auto;
}
/*
.mousescroll {
overflow:hidden;
}
.mousescroll:hover {
overflow-y:scroll;
}*/
/* clearfix */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
.cf {
* zoom: 1;
}
ul.navbar {
background:white;
border-style:solid;
border-color:#ccc;
border-width:1px;
width: 130px; /*Widthchanger1*/
border-radius: 4px;
margin-left:0px;
margin-right:0px;
font-size:14px;
height:33px;
}
.ActiveListItem:after {
content: "\25BC"; /*carat and spaces \00a0*/
float:right;
font-weight:900;
padding: 0px 0px;
font-size:100%;
line-height:17px; /*keeps carat in center of text*/
}
ul.navbar li a.ActiveListItem {
background:white !important;
color:black !important;
padding:3px 5px !important;
font-weight:normal !important;
margin-left:10px; /*Widthchanger2, got the activeitem centered with list text this way*/
margin-right:0px;
margin-top:5px;
margin-bottom:6px;
width:100px; /*kinda messes with width of text*/
}
ul.navbar li {
position: relative;
width:130px; /*Changes width of actual list*/
}
ul.navbar li a {
display: block;
color: white;
padding:10px 5px;
text-decoration:none;
transition: all .2s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
background:#dadfe1;
color: #34495e;
font-weight:900;
}
ul.navbar li ul {
margin-top: 0px; /*Controls space from listdropdown to listchooser*/
position: absolute;
background: #222;
font-size: 14px;
/* min-width: 200px; */
display: none;
z-index: 99;
box-shadow: inset 0 2px 3px rgba(0,0,0,.6),
0 5px 10px rgba(0,0,0,.6);
}
ol, ul { list-style: outside none none; }
.hidden { display: none; }
/*Lister*/
.container {
}
form { }
.lister input {
border-radius: 5px;
width:278px; /*width of todo input box*/
height:33px;
padding-left:10px;
padding-right:10px;
border: 1px solid #ccc;
float:left;
margin-bottom:20px;
font-size:14px;
font-family:"Tahoma";
}
.lister ul {
/*list-style: square inside;*/
padding: 10px; /* padding for outside area of list*/ /* This is what's visible when not in use*/
width:419px;
background: #eee;
border-radius: 5px;
/* width: 100%; */
font-family:"Tahoma";
}
.active { border: 1px solid #ccc; }
.inactive { display: none;}
.lister li {
padding: 10px; /*controls height of list items*/
font-size:16px; /*font size of list items*/
font-weight: 600;
color: #34495e;
text-align:left;
}
.lister li:nth-child(odd) {
background: #dadfe1;
border-radius: 5px;
}
.lister li > a {
float: right;
text-decoration: none;
color: #22313f;
font-weight: bold;
transition: all .2s ease-in-out;
}
.lister li > a:hover {
font-size: 110%;
color: #c0392b;
}
/*.lister li:before {
content: "";
float:right;
font-weight:900;
padding: 0px 0px;
font-size:100%;
line-height:20px;
}
.CategoryIcon {
float:right;
color:red;
padding:40px 40px;
} */
/*Clearable*/
.clearable {
background: #fff;
background:url(http://s3.amazonaws.com/redditstatic/award/1_year_club-40.png);
background-repeat: no-repeat;
background-size: 10px 10px;
background-position:right -15px center;
transition: background 0.4s;
}
.clearable.x { background-position: right 5px center; }
.clearable.onX { cursor: pointer; }
JS
// sub menus identification
$(function() {
$('.navbar ul li a').click(function(){
$('.navbar > li:first-child > a').text($(this).text());
$('.navbar > li > ul').addClass('hidden');
$('.navbar li ul').slideToggle(100);
});
$('.navbar > li').mouseenter(function(){
$(this).find('ul').removeClass('hidden');
});
$('.ActiveListItem').click(function(){
$('.navbar li ul').slideToggle(300);
});
});
//newList
$(document).ready(function() {
var ul = $('.lister ul'),
input = $('input'),
CategoryIcon;
input.focus();
$(document).on('click', 'input.onX', function()
{
//alert(1);
if (input.val() !== '') {
var inputVal = input.val(),
activeNumber = $('.ActiveListItem').text();
if (activeNumber == "1") {
CategoryIcon = '<img src="https://cdn1.iconfinder.com/data/icons/appicns/513/appicns_iTunes.png" width="15" height="15"></img>';
} else {
CategoryIcon = '<img src="http://images.clipartpanda.com/question-mark-black-and-white-Icon-round-Question_mark.jpg" width="15" height="15"></img>';
}
ul.append('<li>' + CategoryIcon + " " + inputVal + 'X</li>');
if (ul.hasClass('inactive')) {
ul.removeClass('inactive')
.addClass('active');
}
};
input.val('');
return false;
});
$('form').submit(function () {
if (input.val() !== '') {
var inputVal = input.val(),
activeNumber = $('.ActiveListItem').text();
if (activeNumber == "1") {
CategoryIcon = '<img src="https://cdn1.iconfinder.com/data/icons/appicns/513/appicns_iTunes.png" width="15" height="15"></img>';
} else {
CategoryIcon = '<img src="http://images.clipartpanda.com/question-mark-black-and-white-Icon-round-Question_mark.jpg" width="15" height="15"></img>';
}
ul.append('<li>' + CategoryIcon + " " + inputVal + 'X</li>');
if (ul.hasClass('inactive')) {
ul.removeClass('inactive')
.addClass('active');
}
};
input.val('');
return false;
});
ul.on('click', 'a', function (e) {
e.preventDefault();
$(this).parent().slideUp();
if (ul.children().length == 0) {
ul.removeClass('active')
.addClass('inactive');
input.focus();
}
});
});
//clearable
jQuery(function($) {
// /////
// CLEARABLE INPUT
function tog(v){return v?'addClass':'removeClass';}
$(document).on('input', '.clearable', function(){
$(this)[tog(this.value)]('x');
}).on('mousemove', '.x', function( e ){
$(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');
}).on('click', '.onX', function(){
$(this).removeClass('x onX').val('').change();
});
});
Thank you.

Instead of appending the li by calling append on th ul:
ul.append('<li>' + CategoryIcon + " " + inputVal + 'X</li>');
You can select this new li to a jQuery object, hide it, append to the ul and then call slideToggle:
$('<li>' + CategoryIcon + " " + inputVal + 'X</li>').hide().appendTo(ul).slideToggle(1000);

Categories