I'm implementing infinity scrolling with jquery and here all list item is rendering data from database. everything is working well but my scroller not scrolling with animation its looks like its just jumping how could i make it animate not jumping!... please
[Jquery]
var item_width = $('.scroller li').outerWidth();
var left_value = item_width * (-1);
$('.scroller li:first').before($('.scroller li:last'));
$('.scroller').css({'left' : left_value});
$('#prev').click(function() {
var left_indent = parseInt($('.scroller').css('left')) - item_width;
$('.scroller').animate({'left' : '-='+left_indent}, 400, function(){
$('.scroller li:first').before($('.scroller li:last'));
$('.scroller').css({'left' : left_value});
});
return false;
});
$('#next').click(function() {
var left_indent = parseInt($('.scroller').css('left')) - item_width;
$('.scroller').animate({'left' : '+='+left_indent}, 400, function () {
$('.scroller li:last').after($('.scroller li:first'));
$('.scroller').css({'left' : left_value});
});
return false;
});
[Style]
*{margin: 0;padding: 0;list-style: none;}
.scroller{height:70px;overflow:hidden;}
.scroller li{float:left;display:inline-block;position:relative;border-bottom:1px solid #e8eef4;border-top:1px solid #e8eef4;border-right:1px solid #ddd;height:70px;width:25%;cursor:pointer;
background-image: -moz-radial-gradient(top, #fff, #ddd);}
.scroller li:nth-child(4),.scroller li:nth-of-type(4){border-right:0}
.scroller li a{display:block;margin-top:8%;height:90%;font-size:x-small;text-align:center;}
.scroller .active,.scroller li:hover{background-image:-moz-radial-gradient(top, #ddd, #fff)}
.scroller .active:before{content:'';height:0;position:absolute;top:-1px;width:0;left:42%;border: 10px solid transparent;border-top-color:#fff;z-index:100}
.scroller li a img{border:1px solid #ccc;width:80%;height:40%}
[Html]
<div>
<ul class="scroller">
<li class="item">01</li>
<li class="item">02</li>
<li class="item">03</li>
<li class="item">04</li>
<li class="item">05</li>
<li class="item">06</li>
<li class="item">07</li>
<li class="item">08</li>
<li class="item">09</li>
<li class="item">10</li>
</ul>
<p class="tar">‹›</p>
</div>
You can use lucid.js, they did a great job and i think it can save your time.
They have a nice API which let you choose what elements you want to scroll or even the whole page.
Please let me know if it helps you.
here is the link for documentations and demos : http://ataredo.com/morphology/lucidscroll/
Related
I have item group list
<div id="MainMenu">
<div class="list-group panel">
Menu 1
<div class="collapse" id="why">
Menu 1 a
Menu 1 b
Menu 1 c
Menu 1 d
Menu 1 e
Menu 1 f
</div>
Menu 2
<div class="collapse" id="joinus">
Menu 2 a
Menu 2 b
Menu 2 c
Menu 2 d
Menu 2 e
</div>
</div>
</div>
I want to change background of active list item, I Know how to change background, but I am unable to get which list is active, or inactive by JavaScript, tried lots of solution given on others but didn't woJrk.
JsFiddle
UPDATE:
Don't know why bootstrap isn't doing it, but here's some jQuery on a fiddle for you. The alert is displaying the href that is active.
Is that what you're after?
Update - 09/01/2022
Edited the old fiddle, here's the new one http://jsfiddle.net/dh7t3cbp/1/
$('.list-group').on('click', '> a', function(e) {
var $this = $(this);
$('.list-group').find('.active').removeClass('active');
$this.addClass('active');
alert($this.attr('href') + ' is active');
});
$('.list-group .collapse').on('click', '> a', function(e) {
var $this = $(this),
$parent = $this.parent('.collapse');
$parent.find('.active').removeClass('active');
$this.addClass('active');
alert($this.attr('href') + ' is active');
});
.list-group panel.active, .list-group panel.active a.active {
background-color: #030;
border-color: #aed248;
}
Add the following css in your code as :
.list-group-item[aria-expanded="true"]{
background-color: black !important;
border-color: #aed248;
}
Demo
What i does it assign and id to every link in list that is also the page name, and made a js function that is called on body load of the page. the function get the current file name from url and determines which page is this, then by js i made that link class active. this solve my problem. however i share this solution for others to improvement.
function get_current_page() {
var pathArray = window.location.pathname.split("/");
var current_page = pathArray[pathArray.length - 1];
current_page_array = current_page.split(".");
current_page = current_page_array[0];
if (
current_page == "students" ||
current_page == "my-profile" ||
current_page == "faqs" ||
current_page == "forecast-career"
) {
document.getElementById("joinuslist").className += " active";
document.getElementById("joinus").className += " in";
if (current_page == "students") {
document.getElementById("students").className += " active";
} else if (current_page == "faqs") {
document.getElementById("faqs").className += " active";
} else if (current_page == "forecast-career") {
document.getElementById("forecast-career").className += " active";
} else if (current_page == "my-profile") {
document.getElementById("my-profile").className += " active";
} else {
}
} else if (
current_page == "values" ||
current_page == "ambassadors" ||
current_page == "documentary"
) {
if (current_page == "values") {
document.getElementById("values").className += " active";
} else if (current_page == "ambassadors") {
document.getElementById("ambassadors").className += " active";
} else if (current_page == "documentary") {
document.getElementById("documentary").className += " active";
} else {
}
}
}
.list-group-item.active:hover {
background-color: #aed248 !important;
border-color: #aed248 !important;
}
.list-group-item.active,
.list-group-item.active:hover {
background-color: #007715 !important;
border-color: #aed248 !important;
}
#joinus .list-group-item.active,
.list-group-item.active:hover {
background-color: #adce1b !important;
border-color: #adce1b !important;
}
#whyptcl .list-group-item.active,
.list-group-item.active:hover {
background-color: #adce1b !important;
border-color: #adce1b !important;
}
.panel {
margin-bottom: 20px;
background-color: transparent !important;
border: 0px solid transparent;
border-radius: 5px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
<body onload="get_current_page()">
<div id="MainMenu">
<div class="list-group panel">
<a
id="whylist"
href="#why"
class="list-group-item"
data-toggle="collapse"
data-parent="#MainMenu"
>Menu 1</a
>
<div class="collapse" id="why">
<a
id="values"
href="values.html"
onclick="activate(this)"
class="list-group-item"
data-toggle="collapse"
data-parent="#SubMenu1"
>Menu 1 a</a
>
<a
id="ambassadors"
href="ambassadors.html"
onclick="activate(this)"
class="list-group-item"
>Menu 1 b</a
>
<a
id="documentary"
href="documentary.html"
onclick="activate(this)"
class="list-group-item"
>Menu 1 c</a
>
</div>
<a
id="joinuslist"
href="#joinus"
class="list-group-item"
data-toggle="collapse"
data-parent="#MainMenu"
>Menu 2</a
>
<div class="collapse" id="joinus">
<a
id="my-profile"
href="my-profile.html"
onclick="activate(this)"
class="list-group-item"
>Menu 2 a</a
>
<a
id="students"
href="students.html"
onclick="activate(this)"
class="list-group-item"
>Menu 2 b</a
>
<a
id="forecast-career"
href="forecast-career.html"
onclick="activate(this)"
class="list-group-item"
>Menu 2 c</a
>
<a
id="faqs"
href="faqs.html"
onclick="activate(this)"
class="list-group-item"
>Menu 2 e</a
>
</div>
</div>
</div>
</body>
The solution is simple but maybe not obvious.
You can pass this (the clicked element) to an onclick event handler and then set the active class on the selected menu.
var activate = function(el) {
var current = document.querySelector('.active');
if (current) {
current.classList.remove('active');
}
el.classList.add('active');
}
I created this Fiddle to answer your question
http://jsfiddle.net/Ltp9qLox/9/
The script can be greatly improved, this is just an example. I'm not aware of any non-JS way to achieve the same result.
You can also store the old activated element so you don't have to use query selector every time, in this way the script would be
var current;
var activate = function(el) {
if (current) {
current.classList.remove('active');
}
current = el;
el.classList.add('active');
}
Bu then you have to initialize currentwith the value of the starting element.
Adding Persistency
Of course any change to the style of an element can't survive after a refresh without implementing some kind of persistency that is something completely different than the simple implementation. Keep in mind that there are hundreds of different ways to achieve this, one of which is NOT refreshing at all the page.
Anyway if you prefer the quick and dirt way then using localStorage is probably the best solution. This is a simple implementation
var currentHref = localStorage.getItem("currentSelected");
var current = currentHref ? document.querySelector('[href="'+currentHref+'"]') : null;
function activate(el) {
if (current && current !== el) {
current.classList.remove('active');
}
current = el;
current.classList.add('active');
localStorage.setItem("currentSelected", current.getAttribute('href'));
}
Basically you save something that you can use to recognize the element that was selected, in this case i used the href attribute value because in our case that is unique, but you could also assign id or other attributes to the elements and use that.
Then on load i read the localStorage to retrieve the saved href and if found i get the element inside the page using a simple querySelector.
Just remember that copy-pasting this kind of solution doesnt help you building better websites, you should read articles on the internet and implement what solution is best for your own use case.
Just to change the active item background color, (I've changed to grey from default - blue) add this to your css:
.list-group-item.active {
background-color: grey;
border-color: grey; }
You can add these Bootstrap classes;
.list-group-item-dark
.list-group-item-success
.list-group-item-warning
.list-group-item-primary
.list-group-item-danger
.list-group-item-secondary
.list-group-item-info
My code looks like this:
<div id="arrow">
<a class="next"></a>
<a class="previous"></a>
</div>
<section id="first">
...
</section>
<section id="second">
...
</section>
<section id="third">
...
</section>
The element #arrow has position: fixed, and I'm trying to make the window scroll to the next section when a.next is clicked.
Ex: The first time a.next is clicked, the window scrolls to section#first, the second time, the window scrolls to section#second, etc. The same thing happens to a.previous.
Does someone know how to solve this problem?
Thanks a lot!
EDIT
My JS code:
$('#arrows a.previous').click(function() {
$.scrollTo($(this).closest('section').prev(),800);
});
$('#arrows a.next').click(function() {
$.scrollTo($(this).closest('section').next(),800);
});
You will need to handle to 3 events in this case:
Current page position - updated each time.
User scrolls manualy the page.
User clicks the prev or next button.
2, 3 need to use the current page position and update him according to the direction that the page is scrolling.
My quick demos : Vertical Version jsFiddle --- Horizontal Version jsFiddle
Vertical Version snippet :
$(function(){
var pagePositon = 0,
sectionsSeclector = 'section',
$scrollItems = $(sectionsSeclector),
offsetTolorence = 30,
pageMaxPosition = $scrollItems.length - 1;
//Map the sections:
$scrollItems.each(function(index,ele) { $(ele).attr("debog",index).data("pos",index); });
// Bind to scroll
$(window).bind('scroll',upPos);
//Move on click:
$('#arrow a').click(function(e){
if ($(this).hasClass('next') && pagePositon+1 <= pageMaxPosition) {
pagePositon++;
$('html, body').stop().animate({
scrollTop: $scrollItems.eq(pagePositon).offset().top
}, 300);
}
if ($(this).hasClass('previous') && pagePositon-1 >= 0) {
pagePositon--;
$('html, body').stop().animate({
scrollTop: $scrollItems.eq(pagePositon).offset().top
}, 300);
return false;
}
});
//Update position func:
function upPos(){
var fromTop = $(this).scrollTop();
var $cur = null;
$scrollItems.each(function(index,ele){
if ($(ele).offset().top < fromTop + offsetTolorence) $cur = $(ele);
});
if ($cur != null && pagePositon != $cur.data('pos')) {
pagePositon = $cur.data('pos');
}
}
});
section { min-height:800px; }
#arrow {
position:fixed;
right:0;
top:0;
background-color:black;
color:white;
}
#arrow a{
display:inline-block;
padding:10px 20px;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="arrow">
<a class="next">next</a>
<a class="previous">prev</a>
</div>
<section style="background-color:green">...</section>
<section style="background-color:blue">...</section>
<section style="background-color:red">...</section>
All you need, to allow the user to use both arrows and scrollbar:
var $sec = $("section");
$(".prev, .next").click(function(){
var y = $sec.filter(function(i, el) {
return el.getBoundingClientRect().bottom > 0;
})[$(this).hasClass("next")?"next":"prev"]("section").offset().top;
$("html, body").stop().animate({scrollTop: y});
});
*{margin:0;padding:0;}
#arrow{
position:fixed;
width:100%;
text-align:center;
}
#arrow a{
display:inline-block;
background: tomato;
padding:6px 15px;
border-radius:3px;
cursor:pointer;
}
section{
height:1200px;
border:3px solid #444;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="arrow"><a class="prev">↑</a><a class="next">↓</a></div>
<section>1</section>
<section style="height:500px;">2</section>
<section>3</section>
<section style="height:600px;">4</section>
<section>5</section>
To explain the jQuery a bit:
// Cache your selectors
var $sec = $("section");
// On any of both arrows click
$(".prev, .next").click(function(){
// We need to get current element
// before defining the `.next()` or `.prev()` element to target
// and get it's `offset().top` into an `y` variable we'll animate to.
// A current element is always the one which bottom position
// (relative to the browser top) is higher than 0.
var y = $sec.filter(function(i, el) {
return el.getBoundingClientRect().bottom > 0;
})[$(this).hasClass("next")?"next":"prev"]("section").offset().top;
// (Line above:) if the clicked button className was `"next"`,
// target the the `.next("section")`, else target the `.prev("section")`
// and retrieve it's `.offset().top`
$("html, body").stop().animate({scrollTop: y});
});
i have tried to do with .closest("section") but it only works when the section is a parent of the element you clicked so this is the best way i got
sections=$("section");
s=0;
$(".next").click(function() {
if(s<sections.length-1){
s++;
$('html, body').animate({
scrollTop: sections.eq(s).offset().top
}, 500);
}});
$(".previous").click(function() {
if(s>0){
s--;
$('html, body').animate({
scrollTop: sections.eq(s).offset().top
}, 500);
}});
section{
background-color:#bbb;
width:100%;
height:700px;
border-bottom:2px solid #eee;
}
#arrow{
position:fixed;
}
#first{
background-color: red;
}
#second{
background-color:green;
}
#third{
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="arrow">
<a class="next">next</a>
<a class="previous">prev</a>
</div>
<section id="first">
...
</section>
<section id="second">
...
</section>
<section id="third">
...
</section>
converting this UL to dropdown
<ul class="list-group showdiv">
<li class="list-group-item {{{ (Request::is('developmentService') ? 'active' : '') }}}">Bespoke Software Development</li>
<li class="list-group-item {{{ (Request::is('UserExperienceService') ? 'active' : '') }}}">User Experience Design</li>
<li class="list-group-item {{{ (Request::is('StaffService') ? 'active' : '') }}}">Staff Augmentation</li>
<li class="list-group-item {{{ (Request::is('TestingService') ? 'active' : '') }}}">Testing and Validation</li>
<li class="list-group-item {{{ (Request::is('GamingService') ? 'active' : '') }}}">Gaming</li>
</ul>
To convert Dropdown
Converting ul by this script.
<script type="text/javascript"> $(function() {
$('ul.showdiv').each(function() {
var $select = $('<select />');
$(this).find('a').each(function() {
var $option = $('<option />');
$option.attr('value', $(this).attr('href')).html($(this).html());
$select.append($option);
});
$(this).replaceWith($select);
});
$('select').on('change', function (e) {
var valueSelected = this.value;
window.location.href = valueSelected; }); });
How to enable the "active" item to "selected=true" in dropdown in the pages.
** its always getting selected the first item in the dropdown list
Maybe something like this works: (inside the each loop)
$('ul.showdiv').each(function() {
var $select = $('<select />');
$(this).find('a').each(function() {
var $option = $('<option />');
$option.attr('value', $(this).attr('href')).html($(this).html());
if($(this).children().hasClass('active')){
$option.prop('selected', true);
}
$select.append($option);
});
$(this).replaceWith($select);
});
What about something like this? I know it changes your code a bit, but it works. Just change the filenames accordingly.
Example of a filename that should be used: "userExperienceDesign.html" in order to make sure that the navigation menu works correctly
Just erase the following line when running it from your own files: filename = "item3.html";
jsfiddle
//URL to id to select active link
var href = window.location.href;
var filename = href.split('/').pop();
filename = "item3.html";
//Example of a filename that should be used: "staffAugmentation.html" in order to make sure that the navigation menu works correctly
filename = filename.replace(/\..+$/, '');
$("#nav_" + filename).children("*").addClass("active");
if ($("#nav_" + filename).parent().parent("li")) {
$("#nav_" + filename).parent().parent().children("*").addClass("active");
}
//Fix subMenu widths: min width same as parent nav item and if right side of subMenu item surpasses parent ul's width, left offset compensates
var navWidth = $("#nav").width();
var navLeft = $("#nav").offset().left;
var navTotal = navWidth + navLeft;
var subMenus = $("#nav").children("li").children("ul");
for (var i = 0; i < subMenus.length; i++) {
var subMenu = subMenus.eq(i);
subMenu.parent().children("span").css({"padding-right":30+"px"});
subMenu.parent().addClass("hasSubMenu");
subMenu.children("li").css({
"min-width": subMenu.parent().width() - 5 + "px"
});
var subMenuWidth = subMenu.width();
var subMenuLeft = subMenu.offset().left;
var subMenuTotal = subMenuWidth + subMenuLeft;
if (navTotal < subMenuTotal) {
var newOffsetLeft = navTotal - subMenuTotal;
subMenu.css({
"left": subMenuLeft + newOffsetLeft + "px"
});
}
}
$("#nav").click(function () {
if ($(this).find("span").length > 0) {
$(this).find("ul").toggle();
}
});
html, body {
padding:0px;
margin:0px;
background-color:grey;
}
#nav {
position:absolute;
list-style-type:none;
padding:0px;
margin-left:5px;
margin-top:5px;
background-color:white;
font-size:20px;
white-space:nowrap;
}
#nav * {
-webkit-user-select: none;
/* Chrome all / Safari all */
-moz-user-select: none;
/* Firefox all */
-ms-user-select: none;
/* IE 10+ */
/* No support for these yet, use at own risk */
-o-user-select: none;
user-select: none;
}
#nav>li {
display:inline-block;
position:relative;
margin:-5px;
padding:0px;
}
#nav>li.hasSubMenu:after {
content:"\25BE";
display:inline-block;
position:absolute;
right:14px;
bottom:13px;
z-index:2;
font-size:15px;
}
#nav li>* {
display:block;
color:black;
text-decoration:none;
padding:10px;
background-color:white;
text-align:center;
cursor:pointer;
}
#nav>li>* {
padding-right:15px;
}
#nav li>a:hover, #nav li>span:hover{
color:white;
background-color:#bbb;
}
#nav ul {
display:none;
position:absolute;
list-style-type:none;
padding:0px;
margin-left:0px;
background-color:white;
font-size:18px;
white-space:nowrap;
}
.active {
background-color:#789abc !important;
color:bbb;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav" class="list-group showdiv">
<li id="nav_bespokeSoftwareDevelopment">Bespoke Software Development
</li>
<li id="nav_userExperienceDesign">User Experience Design
</li>
<li id="nav_staffAugmentation"><span>Staff Augmentation</span>
<ul>
<li id="nav_item1">Item 1
</li>
<li id="nav_item2">Item 2
</li>
<li id="nav_item3">Item 3
</li>
</ul>
</li>
<li id="nav_testingAndValidation">Testing and Validation
</li>
<li id="nav_gaming">Gaming
</li>
</ul>
So I'm in the process of creating a pretty simple jQuery/CSS slideshow for a course of mine. It's about ten pages long, and right now it works fine if you want to just go from beginning to end in that order, but if you need to refresh the page for any reason, it sends you back to the first page. Since it's on the longer end, I'd like to be able to "click" to a certain page... is this possible without getting too complicated?
Here's my jQuery
function checkNav() {
if ($('.active-slide').hasClass('first')) {
$('.prev').hide();
$('.next').show();
} else if ($('.active-slide').hasClass('last')) {
$('.next').hide();
$('.prev').show();
} else {
$('.next').show();
$('.prev').show();
}
}
var main = function() {
checkNav();
$('.next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next('.slide');
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
//if nextslide is last slide, go back to the first
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.fadeOut(500).removeClass('active-slide');
nextSlide.fadeIn(1100).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
checkNav();
});
//prev slide function
$('.prev').click(function() {
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev('.slide');
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
//if prevslide is last slide, go back to the first
if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
checkNav();
});
};
$(document).ready(main);
And here's a rough markup of what the HTML looks like
<div class="slide active-slide first">
<div class="content">
<p>First Slide</p>
</div>
</div>
<div class="slide">
<div class="content">
<p>second slide</p>
</div>
</div>
<div class="slide last">
<div class="content">
<p>third slide</p>
</div>
</div>
<div class="slider-nav">
<div class="prev">prev</div>
<ul class="dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<div class="next">next</div>
</div>
Here's the jsFiddle ... I'd like to be able to click on one of the bullets and go to that corresponding slide....
$('ul.dots li').click(function(){
var num = $(this).index();
var currentSlide = $('.active-slide');
var nextSlide = $('.slide:eq('+num+')');
var currentDot = $('.active-dot');
var nextDot = $(this);
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
checkNav();
});
Add IDs to the divs. For instance:
<div class="slide active-slide first" id="1">
<div class="content">
<p>First Slide</p>
</div>
</div>
<div class="slide" id="2">
<div class="content" >
<p>second slide</p>
</div>
</div>
<div class="slide last" id="3">
<div class="content">
<p>third slide</p>
</div>
</div>
Then you can target specific slides using something like:
<ul class="dots">
<li class="dot active-dot"><a onclick="goto(1)">•</a></li>
<li class="dot"><a onclick="goto(2)">•</a></li>
<li class="dot"><a onclick="goto(3)">•</a></li>
</ul>
<script>
function goto(slide){
$(".slide").removeClass("active-slide");
$("#"+slide).addClass("active-slide");
$("#"+slide).show();
}
We need a way to "index" these items, I will do it by child so add a parent div class called slider:
<div id="slider">
...slides here...
</div>
You need to use localStorage (used to save data between pages) to keep track of both what slide you are on and what dot you are on in the nav bar. This can save data even when we leave the page (when it refreshes), making it so we still know our last page we where on. I will use this to keep track of the current index of each slide. So when the page loads we need to check that if our localStorage item exist:
// If we have saved data add it's index to active-slide
if(localStorage.getItem("activeSlide")) {
$("#slider div.slide")
.eq(localStorage.getItem("activeSlide"))
.addClass("active-slide");
$('.dots li.dot')
.eq(localStorage.getItem("activeSlide"))
.addClass("active-dot");
} else { // Otherwise make them both 0
$("#slider div.slide")
.eq('0')
.addClass("active-slide");
$('.dots li.dot')
.eq('0')
.addClass("active-dot");
}
Then when we move to the next slide next or the last slide prev we update the localStorage item to the current index of the item in active-slide:
// Make the current index of the item in active slide our updated variable
localStorage.setItem( "activeSlide",
$("#slider div.slide").index($(".active-slide")) );
Here is a working example
This way when the page refreshes we stay on the last slide we where looking at before.
<!doctype html>
<html>
<head>
<style>
body{
text-align: center;
}
#slideshow{
margin:0 auto;
width:600px;
height:450px;
overflow: hidden;
position: relative;
}
#slideshow ul{
list-style: none;
margin:0;
padding:0;
position: absolute;
}
#slideshow li{
float:left;
}
#slideshow a:hover{
background: rgba(0,0,0,0.8);
border-color: #000;
}
#slideshow a:active{
background: #990;
}
.slideshow-prev, .slideshow-next{
position: absolute;
top:180px;
font-size: 30px;
text-decoration: none;
color:#fff;
background: rgba(0,0,0,0.5);
padding: 5px;
z-index:2;
}
.slideshow-prev{
left:0px;
border-left: 3px solid #fff;
}
.slideshow-next{
right:0px;
border-right: 3px solid #fff;
}
</style>
</head>
<body>
<div id="slideshow">
«
<ul>
<li><img src="1.jpg" alt="photo1" /></li>
<li><img src="2.jpg" alt="photo2" /></li>
<li><img src="3.jpg" alt="photo3" /></li>
<li><img src="4.jpg" alt="photo4" /></li>
</ul>
»
</div>
<!--
We use Google's CDN to serve the jQuery js libs.
To speed up the page load we put these scripts at the bottom of the page
-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
//an image width in pixels
var imageWidth = 600;
//DOM and all content is loaded
$(window).ready(function() {
var currentImage = 0;
//set image count
var allImages = $('#slideshow li img').length;
//setup slideshow frame width
$('#slideshow ul').width(allImages*imageWidth);
//attach click event to slideshow buttons
$('.slideshow-next').click(function(){
//increase image counter
currentImage++;
//if we are at the end let set it to 0
if(currentImage>=allImages) currentImage = 0;
//calcualte and set position
setFramePosition(currentImage);
});
$('.slideshow-prev').click(function(){
//decrease image counter
currentImage--;
//if we are at the end let set it to 0
if(currentImage<0) currentImage = allImages-1;
//calcualte and set position
setFramePosition(currentImage);
});
});
//calculate the slideshow frame position and animate it to the new position
function setFramePosition(pos){
//calculate position
var px = imageWidth*pos*-1;
//set ul left position
$('#slideshow ul').animate({
left: px
}, 300);
}
</script>
</body>
</html>
On my website I've got a sticky header with several different nav items on it that when clicked will scroll down to find that section on the page. I was wondering how one would go about setting it up so the nav items change colour when the view is on the section it corresponds to. In other words, if the viewer is on section 'x', 'x' on the nav bar will change color.
Update: heres the code for the nav bar im using
<div class = 'nav-container'>
<nav>
<div id = 'nav-items-container'>
<ul class='nav-items'>
<li class='nav-item'><a href='#what'>what</a></li>
<li class='nav-item'><a href='#how'>how</a></li>
<li class='nav-item'><a href='#why'>why</a></li>
<li class='nav-item'><a href='#who'>who</a></li>
<li class='nav-item'><a href='#where'>where</a></li>
</ul>
</div>
</nav>
</div>
some css
.nav-container{
background-color:black;
height:50px;
width:410px;
font-size: 120%;
position:absolute;
}
a:link{
color:white;
}
a:visited{
color:#58ACFA;
}
#nav-items-container ul li{
display:inline;
}
#nav-items-container ul li a{
padding: 20px;
text-decoration:none;
}
#nav-items-container ul{
margin:0;
padding:0;
list-style-type: none;
text-align: center;
padding-top:15px;
}
If you can use jquery you can do something like:
<script type="text/javascript">
$(function() {
var sections = [],
anchors = $('#nav-items-container a[href^="#"]'), // anchor links with hash tags
docHeight = $(document).height(),
currentOffset,
setNavActive;
// handler to update the class
setNavActive = function(hash){
anchors.removeClass('current-section');
anchors.filter('a[href="' + hash + '"]').addClass('current-section');
};
// building our hash/start/end position map
$.each(anchors, function(i, item) {
currentOffset = $(item.hash).offset().top;
if (i > 0) {
sections[i-1].end = currentOffset;
}
sections[i] = {
hash: item.hash,
start: (i == 0 ? 0 : currentOffset),
end: docHeight
};
});
// on scroll event, check which map fits,
// find the hash and set the class
$(document).scroll(function() {
currentOffset = $(document).scrollTop();
for (var i = 0; i < sections.length; i++) {
if (sections[i].start <= currentOffset && sections[i].end > currentOffset) {
setNavActive(sections[i].hash);
}
}
});
});
</script>
I added a new style but you can make it nested or whatever:
.current-section {background:pink; }
jsFiddle
http://jsfiddle.net/fstreamz/krb6Q/3/
There is not enough information here to give the best answer. I can give one that works though.
Chang your headers to look like this:
<li class='nav-item' id = "nav_what"><a href='#what'>what</a></li>
<li class='nav-item' id = "nav_how"><a href='#how'>how</a></li>
<li class='nav-item' id = "nav_why"><a href='#why'>why</a></li>
<li class='nav-item' id = "nav_who"><a href='#who'>who</a></li>
<li class='nav-item' id = "nav_where"><a href='#where'>where</a></li>
then in the body of each page put
<script>
document.getElementById('nav_what').style.backgroundColor = "gray";
</script>
You would have to switch it out on each page with the correct id. Its more traditionally done manually with inline styles if the header is not loaded externally.
Add another CSS declaration as below and apply active style to the current page.
#nav-items-container ul li.active a {
color:red;
}
Apply the above style like this...
<li class='nav-item active'><a href='#what'>what</a></li>
jsFiddle Demo