I have a header navigation listed below, and the class added to the li creates an icon.
When scrolling down I want to be able to remove the class completely and when scrolling back to the top of the page I want to be able to tell which class belongs to which item and add that same class back.
I am thinking I probably need to store them into variables. Keep in mind these menu items are dynamic and can change if it's deleted.
HTML
<ul id="menu-left-main-nav" class="main-left-nav nav-bar hide-for-small">
<li id="menu-item-37" class="customicon-shop">Shop</li>
<li id="menu-item-35" class="customicon-contact">Account</li>
<li id="menu-item-36" class="customicon-apps">Apps & Entertainment</li>
</ul>
<ul id="menu-right-main-nav" class="main-right-nav nav-bar hide-for-small">
<li id="menu-item-61" class="customicon-about">About</li>
<li id="menu-item-62" class="customicon-support">Support</li>
<li id="menu-item-63" class="customicon-why">Why?</li>
</ul>
jQuery
var nav = $(".nav");
var pos = nav.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top) {
nav.css({
'position': 'fixed'
}).addClass("sticky");
} else {
nav.css({
'position': 'relative'
}).removeClass("sticky");
}
});
If you look at the code, the id's will be dynamic but the classes will not be.
Don't combine jquery .css and .addClass when you can do this all within the class rule.
You only need 1 class, and that is .sticky to apply the position: fixed; and top: 0; to the <ul> element.
Use .toggleClass to add .sticky, no need to add any css or classes for position: relative; or when they scroll up the page, just remove the class .sticky
$(window).scroll(function() {
var pos = $(".nav").position();
$(".nav").toggleClass('sticky', $(window).scrollTop() > pos.top);
});
and use CSS for the class of .sticky:
.sticky {
position: fixed;
top: 0;
}
So, with this approach, it will just add the sticky class when the page gets scrolled down, when they scroll up it will remove the class automatically.
It is not clear what $(".nav") represents in your jQuery code above. If you are referring to the HTML 5 <nav> element, than the code above should work, if you remove the . from everywhere it says $(".nav"), so it would become $("nav")
You can store arbitrary data in any element with jQuery's data function
HTML
<ul id="menu-left-main-nav" class="main-left-nav nav-bar hide-for-small">
<li id="menu-item-37" class="customicon-shop" data-icon="customicon-shop">Shop</li>
<li id="menu-item-35" class="customicon-contact" data-icon="customicon-contact">Account</li>
<li id="menu-item-36" class="customicon-apps" data-icon="customicon-apps">Apps & Entertainment</li>
</ul>
JS, when you're scrolling back to top
jQuery('#menu-left-main-nav li, #menu-right-main-nav li').each(function() {
var originalclass = jQuery(this).data('icon');
jQuery(this).addClass(originalclass);
});
You could add a custom data attribute to the li tags that will contain the appropriate class name and then add and remove it as follows.
HTML
<ul id="menu-left-main-nav" class="main-left-nav nav-bar hide-for-small">
<li id="menu-item-37" data-icon-class="customicon-shop">Shop</li>
<li id="menu-item-35" data-icon-class="customicon-contact">Account</li>
<li id="menu-item-36" data-icon-class="customicon-apps">Apps & Entertainment</li>
</ul>
<ul id="menu-right-main-nav" class="main-right-nav nav-bar hide-for-small">
<li id="menu-item-61" data-icon-class="customicon-about">About</li>
<li id="menu-item-62" data-icon-class="customicon-support">Support</li>
<li id="menu-item-63" data-icon-class="customicon-why">Why?</li>
</ul>
JS
var $listItems = $('.nav-bar li'),
itemIconClass = $listItem.attr('data-icon-class');
// add class
$listItem.addClass(itemIconClass);
// remove class
$listItem.removeClass(itemIconClass);
Related
i have html menu with submenu for ex:
<li id="item-3" class="menu-item has-children-3">
<span>Auto</span>
<ul class="sub-menu fadeOut animated fast" id="cpx" style="">
<li id="menu-item-9" class="menu-item"><span>Reno яхту</span></li>
<li id="menu-item-6" class="menu-item"><span>Audi</span></li>
</ul>
</li>
When i make mouseover on menu Auto, i need to replace for ul fadeOut to fadeIn and add to style="display:block" and after mouseout add to style="display:none" and to class add fadeOut to ul element?
You can try to achieve this only with css and element+element selector
https://www.w3schools.com/cssref/sel_element_pluss.asp
eg:
.sf-with-ul:hover + .sub-menu {
display: block;
opacity: 1;
}
however this might not be the effect you want as the moment you mouse out of anchor element with class sf-with-ul trying to click on some of the sub menu items the whole sub menu will go back to "display:none; state"
maybe better apply this to the whole parent li like
.menu-item.has-children-3:hover .sub-menu {
display: block;
opacity: 1;
}
I have created a <ul> element and what I am trying to do is to highlight the list elements from a certain child and all the way up. However, because of the nested children, when I highlight a parent also all its children are highlighted (while I want to highlight only the text of the parents).
https://jsfiddle.net/zcfvuh6h/3/
In this example, I should get the nodes Four12, Four1 and Four highlighted.
Any suggestions? Thank you.
EDIT:
Okay, so after understanding what the actual problem you are trying to solve is, it took a bit of work, but I got a working solution.
Working DEMO
A few things to note
1. All of your text in your <li>need to be in a container of some sort, a <span> is fine. You had some in spans and some not, so I put them all in spans for you.
2. This cannot be done with background-color on the <li> or <ul> because it spans multiple lines if it has children. You have to use a css pseudo-element in order to get the desired effect.
3. The demo I have posted also dynamically sets the background of the element and parents based on which element you click on. You must click on a list item in order for the backgrounds colors to show up.
4. Your d3 code that you included is all obsolete at this point. It can be done with 7 toal lines of jQuery.
5. Enjoy!
HTML
...
<li id="i6"><span class="listItem">Four</span>
<ul>
<li id="i7" class="listItem"><span class="listItem">Four1</span>
<ul>
<li id="i71" class="listItem"><span class="listItem">Four11</span>
<ul>
<li id="i4111" class="listItem"><span class="listItem">Four111</span></li>
<li id="i4112" class="listItem"><span class="listItem">Four112</span></li>
</ul>
</li>
<li id="i12" class="listItem"><span class="listItem">Four12</span></li>
</ul>
<li class="listItem"><span class="listItem">Five</span></li>
</ul>
</li>
...
Javascript
$(function () {
$(".listItem:not(li)").on("click", function () {
var parentListItem = $(this).parent();
$("#menu1 .highlight").removeClass("highlight");
parentListItem.addClass("highlight").parents("li").addClass("highlight");
});
});
CSS
.highlight {
position: relative;
}
.highlight > * {
position: relative;
z-index: 100;
}
.highlight::before {
content: ' ';
background-color: cyan;
width: 100%;
height: 15px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
I have an issue I was hoping someone could kindly help me with. I'm currently building a webiste, and tried to use a jquery plugin for the first time to create a sticky navigation bar (http://stanhub.com/scroll-to-top-then-fixed-navigation-effect-with-jquery-and-css-free-download/).
When I assign an #ID to the nav tag, and change the CSS rule accordingly to apply just on this specific nav, the plugin stops working. The problem is that I would like to have a few navs on my page and I don't see another option.
Any suggestions?
Thanks!
And here is a link to the full code:
http://codepen.io/anon/pen/gbQBOo
HTML:
<section id="screen1">
<p>Scroll down</p>
<nav id="main-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Team</li>
<li>Contact</li>
</ul>
</nav>
</section>
<section id="screen2"></section>
<section id="screen3"></section>
CSS:
/* Navigation Settings */
#main-nav {
position: absolute;
bottom: 0;
width: 100%;
height: 70px;
background: #fff;
}
JS:
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 70;
if ($(window).scrollTop() > navHeight) {
$('#main-nav').addClass('fixed');
}
else {
$('#main-nav').removeClass('fixed');
}
});
});
In CSS, #main-nav is more precise than .fixed, so it takes precedence.
You could:
1) change .fixed into #main-nav.fixed
2) set the position from .fixed to fixed!important
3) not use an id but a specific class for your nav, and make sure .fixed is defined after that new class
I tried different plugins like bootstrap-paginator and bootstrap-pagination-js to make pagination through dynamically generated <li> elements , so that they don't exceed one line.
The wanted result : One line of dates with next and previous buttons respectively in the right and in the left .
The plugins that I've tried have not been useful to me .
My code looks like this:
<div class="row">
<div class="col-md-12 column">
<ul class="nav nav-pills center-pills text-center">
<li class="active">
<a href="#">
<span class="text-center badge pull-right span-list">1</span>
1 Mars
</a>
</li>
<li class="">2 Mars</li>
<li class="">3 Mars</li>
<li class="">4 Mars</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
<li class="">etc</li>
</ul>
</div>
</div>
The code fiddle .
Your suggestions will be very welcome .
Are you having a problem with styling? If so...
I've set the row height to fixed, and made overflow hidden, so that you get just one row of buttons.
.row{overflow:hidden;height:42px;}
I've added a prev and next button, and made them float left and right respectively. I hope this doesn't violate your pagination framework. Please let me know if you want an example of how to programmatically add these elements.
HTML
<li class="next">Next</li>
<li class="prev">Previous</li>
CSS
li.next{float:right;}
li.prev{float:left;}
I believe this gives the desired result... please let me know if I've missed your intention.
Disclaimer: I've only tested this in Opera 19.0. I don't have access to Firefox/Chrome/IE at the moment.
Example: http://jsfiddle.net/nickg1/5ELfQ/2/
Updated: Updated to remove horizontal scrollbar. - http://jsfiddle.net/nickg1/5ELfQ/3/
I have had success with Bootstrap pagination. If you are generating too many elements to fit in your desired space, you need to either figure out a way to generate less or use css to limit the size of your pagination space and "cut off" the overflowing elements.
What you can do is .prepend() a left li and .append() a right li:
$(document).ready(function () {
$('.nav').prepend('<li class="left"><a>Left</a></li>');
$('.nav').append('<li class="right"><a>Right</a></li>');
});
Although there has little browser compatibility and styling issues in this solution. But I hope this will give you an idea to start.
My CSS:
.nav.nav-pills {
width:auto;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
position: relative;
padding-right: 38px;
display: inline-block;
}
.nav-pills > li {
display: inline-block !important;
float: none !important;
}
.nav-pills > li.last {
position: absolute;
right: 0;
}
As display:inline; is applied to .nav, so for centering use text-center class in wrapping div. i.e.
<div class="col-md-12 column text-center">
Apply jQuery for previous/next buttons and resizing issues.
$(document).ready(function () {
$('.nav').prepend('<li>«</li>');
$('.nav').append('<li class="last">»</li>');
var ulWidth = $('.nav').width();
var screenWidth = document.body.clientWidth;
if (screenWidth < ulWidth ){
$('.nav').css('width', '100%');
}
$(window).resize(function(){
screenWidth = document.body.clientWidth;
screenWidth < ulWidth == true ?
$('.nav').css('width', '100%') :
$('.nav').css('width', 'auto');
});
});
I am messing around with this scroll menu and I want each li to change to different colours instead of the same one.
var colorOver = '#31b8da';
var colorOut = '#1f1f1f';
But this changes the colour of all of them.
The html looks like this:
<div id="sidebar">
<ul id="menu">
<li id="first">blog <span> / 2012</span></li>
<li id="second">me <span> / 2012</span></li>
<li id="third">etc <span> / 2012</span></li>
<li id="fourth">etc <span> / 2012</span></li>
</ul>
</div>
I assume you just tell it an id ...
Hopefully I've given enough info.
Thanks for any help.
link to the demo and download
you could modify your css to set the colorOver and colorOut classes for each li like:
.first.colorOver { background-color: #31b8da; }
.first.colorOut { background-color: #1f1f1f; }
and use Francois Wahl's toggleClass option:
$("#sidebar ul#menu li").on("hover", function(){
$(this).toggleClass("colorOver", "colorOut");
});
then you can set colors for each li easily.