I want to know if it's possible to change my "selected" li class based on the movements of the horizontal scroll. So when you start moving the scroll to the right, the selected li class would change to 2, 3, 4 .. and so on.
Any hints or points to start from are appreciated.
My code:
<div id="scroller">
<ul id="ulscroller">
<li value="1" class="selected">1</li>
<li value="2">2</li>
<li value="3">3</li>
<li value="4">4</li>
<li value="5">5</li>
<li value="6">6</li>
<li value="7">7</li>
<li value="8">8</li>
<li value="9">9</li>
<li value="10">10</li>
<li value="11">11</li>
<li value="12">12</li>
<li value="13">13</li>
<li value="14">14</li>
<li value="15">15</li>
<li value="16">16</li>
<li value="17">17</li>
<li value="18">18</li>
<li value="19">19</li>
<li value="20">20</li>
</ul>
</div>
CSS:
li {float:left; padding:10px; cursor: pointer;}
div#scroller {width:300px; height:70px; overflow-x: scroll;}
ul#ulscroller {list-style: none outside none; margin: 0;
padding: 0; width:655px;}
ul#ulscroller li.selected {border:1px solid #000;}
Fiddle: http://jsfiddle.net/7uCS8/
Basic idea:
var scroller = document.getElementById("scroller"),
lis = scroller.getElementsByTagName("li"),
divisionsWidth = lis[0].offsetWidth - 2,
current = 0,
scroller.onscroll = function(){
var selected = Math.floor(scroller.scrollLeft/divisionsWidth);
if (current!==selected) {
lis[current].className="";
lis[selected].className="selected";
current = selected;
}
};
It can be tweaked to change the selection, but it should be a good starting point.
I'm guessing that maybe, since the li's have a defined width you can get the current scroll in pixels with each scrolling event (easily done with jQuery) and if the scroll position is within any position to change the class name, change it. I'd rather use an id value for each li element to identify it easily with JavaScript and a class for group removing the class. Something like this:
$(document).scroll(function() {
var scrollPosition = $(document).scrollLeft();
if (scrollPosition >= 0 && scrollPosition < 300) {
$("li.scroller_children").removeClass("selected");
$("li#1").addClass("selected");
} elseif (scrollPosition >= 300 && scrollPosition < 900) {
$("li.scroller_children").removeClass("selected");
$("li#2").addClass("selected");
} elseif ....
});
I
Using jQuery you could do something like this.
$(window).scroll(function (scrolledTo) {
$("li:[value=" + scrolledTo).addClass("selected");
$("li.selected").removeClass("selected");
});
Unfortunately I do not know how to get where the window was scrolled to (scrolledTo) from the event and it doesn't appear to be in the jQuery documentation. However, you said you wanted a starting point, so I thought this would at least provide you with that.
You can try this, need some modifications...
$("#scroller").scroll(function () {
$(".selected").removeClass("selected").next().addClass("selected");
});
Related
I have an RSS blog feed (hidden overflow) with buttons on the top and bottom of the div which will smoothly scroll through-out the feed. I'm looking for a way so that on each button click, it will scroll to the top of the next 'rss-item' (class). The div looks like this:
So what I'm trying to achieve is so each time you click the down arrow (or up) the scroll will stop when each 'rss-item' is at the top of the div.
I explored many similar questions but couldn't quite achieve what I wanted.
Here is the function used to smooth scroll within the div:
$(document).ready(function() {
var scrollTime = 900;
$('#upClick').click(function() {
$('#homeBlogs').animate({
scrollTop: $('#homeBlogs').scrollTop() + 200
}, scrollTime);
});
$('#downClick').click(function() {
$('#homeBlogs').animate({
scrollTop: $('#homeBlogs').scrollTop() - 200
}, scrollTime);
});
});
Here is a screen grab of the generated source html:
Ok, so I re-created this as best I could in a jsfiddle. Here is the HTML structure. I've tried to build this according to the screenshot so they should be similar. Note: I've added a CSS class of "active" to the first "rss-item". This should only be applied in HTML to the first item and needs to stay here in order for the Javascript portion to function correctly.
<div id="blogSection">
<div class="row" id="scrollUp">
<button class="scrollButton" id="upClick">Scroll Up</button>
</div>
<div id="homeBlogs">
<div class="rss-box">
<p class="rss-title"></p>
<ul class="rss-items">
<li class="rss-item active">
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
</li>
<li class="rss-item">
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
</li>
<li class="rss-item">
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
</li>
<li class="rss-item">
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
</li>
<li class="rss-item">
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
</li>
<li class="rss-item">
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
<p>ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</p>
</li>
</ul>
</div>
</div>
<div id="scrollDown" class="row">
<button class="scrollButton" id="downClick">Scroll Down</button>
</div>
</div>
Next, here is the CSS I used. This is purely to support the demo. I set it up so whichever "rss-item" has the "active" class will be highlighted in red. This should hopefully provide a visual cue as to what's going on when a button is clicked.
button {
display: block;
width: 100%;
background-color: black;
color: white;
height: 50px;
cursor: pointer;
}
#scrollUp {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#scrollDown {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
.active {
color: red;
}
Finally, here is the Javascript I used in order to get things done. I've changed it a lot to help make things more efficient and to correct some errors.
$(document).ready(function() {})
//we can use one single event and modify the behavior based on the direction that was clicked
.on('click', '.scrollButton', function() {
var scrollTime = 900,
direction = $(this).attr('id'),
$currentItem = $('.rss-item.active'),
$newItem;
switch (direction) {
case 'upClick':
$newItem = $currentItem.prev('.rss-item');
break;
case 'downClick':
$newItem = $currentItem.next('.rss-item');
break;
}
//if we aren't at the top or bottom of the list already
if ($newItem.length > 0) {
//since we know we can now change the active item, we need to remove this class so we can apply it to the new item
$('.rss-item').removeClass('active');
$newItem.addClass('active');
}
//Now that the logic is out of the way, we can run the scroll animation
//Also, I think you will want to use 'html, body' as a selector so the page itself moves
$('html, body').animate({
scrollTop: $('.rss-item.active').offset().top - 200 //this will keep content positioned correctly, but you shouldn't need both a '+ 200' and '- 200' here. Adjust this value as needed.
}, scrollTime);
});
Finally, here is the jsfiddle: https://jsfiddle.net/sm1215/sebgbnr4/
I have trouble in writing a script to change the appearance of the clicked tab in a webpage navigation list. In other words, I want to make the clicked tab appear as the selected (in code). I tried to do that by changing its id to selected_link and restoring the id of the previously selected tab.
EDIT: Following jamespaned's suggestion, I replaced element IDs with classes.
My tabs appear like in this picture:
So, when I click to "bio", I want it to appear as "home" and "home" to appear as the other tabs.
As I'm a newbie in JavaScript coding, I didn't managed to accomplish that. Here is what I've done:
The HTML code for the (inline) navigation list:
<nav>
<ul id="navlist">
<li class="selected"> home </li>
<li class=""> bio </li>
<li class=""> publications </li>
<li class=""> software </li>
<li class=""> contact </li>
</ul>
</nav>
its respective CSS:
nav ul {
list-style:none;
padding:0;
margin:0;
}
nav li {
background-color:black;
display:inline;
border:solid;
border-width:1px 1px 0 1px;
margin:0 5px 0 0;
}
nav li a {
color:white;
padding:0 10px;
}
.selected {
background-color:white;
padding-bottom: 1px;
}
.selected_link{
color:blue;
}
and the JavaScript which I've designed to accomplish this task, but it didn't worked:
function changeSelected(clickedId)
{
var ulist = document.getElementById("navlist");
var elems = ulist.getElementsByTagName("class");
for (var i = 0; i < elems.length - 1; i++)
{
var sel = elems[i].getAttribute("class");
if (sel == selected)
{
var selli = elems[i];
break;
}
}
selli.setAttribute("class", "");
selli.lastElementChild.setAttribute("class", "");
var clicked = document.getElementById(clickedId);
clicked.setAttribute("class", "selected_link");
clicked.parentNode.setAttribute("class", "selected");
}
How could I do that using only plain JavaScript?
This Javascript will do what you want:
function changeSelected(clickedId)
{
var selli = document.getElementById("selected");
var sela = document.getElementById("selected_link");
sela.setAttribute("id", "");
selli.setAttribute("id", "");
var clicked = document.getElementById(clickedId);
clicked.setAttribute("id", "selected_link");
clicked.parentNode.setAttribute("id", "selected");
}
That said, here are some ideas that might help your Javascript education:
You are using Javascript to set your IDs, but the Javascript won't work on the next page after you've clicked on one of the links. You'll probably need to do some backend (PHP/Ruby, etc) coding to get your styles to change.
IDs are normally used to refer to a unique element on the page that doesn't change, such as a #header or #sidebar_banner. You might want to use a class instead, such as ".selected_link".
You don't need both #selected_link and #selected. You could do ".selected" and ".selected a" to change the CSS so you only need to change one element.
Hope that helps!
Is it possible to add a class to a link inside a li element when a certain part of the page is active?
I have a one page website and would like to change the color of the link when that specific part of the page is reached via scroll.
Here's my HTML:
<header id="header">
<section class="container">
<nav>
<a class="logo" href="index.html">Logo</a>
<div id="menu">
<ul id="links">
<li>Services</li>
<li>About</li>
<li>Clients</li>
<li class="last">Contact</li>
</ul>
</div>
</nav>
</section>
</header>
And here's the CSS:
#menu li a {
color:#7a7a7a;
text-decoration: none;
font-size: 12px;
margin-right:20px;
}
#menu li.last a {
color:#7a7a7a;
text-decoration: none;
font-size: 12px;
margin-right:0px;
}
#menu li.current a {
color: #0086be;
}
What I would like to do is to add the class .current to the link inside the li element whenever that specific part of the page is reached.
I believe this is only possible with Javascript, can anyone point me the right path to achieve this?
Thanks in advance
I think you want something like scrollspy in bootstrap,
you can use it or you can find https://gist.github.com/pascaldevink/2380129 bypascaldevink
or here is the fiddle http://jsfiddle.net/ia_archiver/Kb7xq/
You will require jquery for this,
$.fn.scrollspy = function ( option ) {
return this.each(function () {
var $this = $(this)
, data = $this.data('scrollspy')
, options = typeof option == 'object' && option
if (!data) $this.data('scrollspy', (data = new ScrollSpy(this, options)))
if (typeof option == 'string') data[option]()
})
}
$.fn.scrollspy.Constructor = ScrollSpy
$.fn.scrollspy.defaults = {
offset: 10
}
$(function () {
$('[data-spy="scroll"]').each(function () {
var $spy = $(this)
$spy.scrollspy($spy.data())
})
})
}(window.jQuery);
Using hover function you can achieve this.i.e. on hover of specific part of the page you add the class to the link present inside the li. e.g.
$('#specificPartOfPageId').hover(function(){
$('#links').children().children('a').addClass('current');
});
This would add .current class to every link present inside that UL element.
Hope this helps.
If I have understood correctly, I guess this is what you require: jsFiddle. The CSS and the HTML code remains the same and this is the jQuery code which I've used:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 500) {
$("#links li:first-child").addClass("current");
}
if (scroll > 750) {
$("#links li:first-child").removeClass("current");
$("#links li:nth-child(2)").addClass("current");
}
var scrollBottom = $(window).scrollTop() + $(window).height();
if (scroll < 500) {
$("#links li:first-child").removeClass("current");
}
if (scroll < 750) {
$("#links li:nth-child(2)").removeClass("current");
}
});
Basically what happens is that when you scroll down to 500px, the li:first-child is automatically assigned the current class. You can modify the jQuery to suit your needs by adding more if queries as per your needs. You can target different <li>'s in your list using different child-selectors like li:first-child, li:nth-child(2) etc.
I want to activate the menu item when I get to it's corresponding section. I got inspired by this previous SO question: Change Active Menu Item on Page Scroll? .
but the difference is that in my menu I have a little image over each menu item, that shows only if I hover the menu item, and hides when don't.
HTML
<nav>
<ul id="pics">
<li id="text-what"><img src="images/what.png" id="pic-what" class="vishid"><p>item1</p></li>
<li id="text-training"><img src="images/training.png" id="pic-training" class="vishid"><p>item2</p></li>
<li id="text-testi"><img src="images/trait.png" id="pic-testi" class="vishid"><p>item3</p></li>
<li id="text-contact"><img src="images/contact.gif" id="pic-contact" class="vishid"><p>item4</p></li>
</ul>
</nav>
CSS
.vishid{
visibility: hidden;
}
.visvis{
visibility:visible;
}
JAVASCRIPT (to show and hide images when hovering items)
$(document).ready(function(){
$("#text-what").hover(function(){
$("#pic-what").addClass('visvis');
},function(){
$("#pic-what").removeClass('visvis');
});
$("#text-training").hover(function(){
$("#pic-training").addClass('visvis');
},function(){
$("#pic-training").removeClass('visvis');
});
$("#text-testi").hover(function(){
$("#pic-testi").addClass('visvis');
},function(){
$("#pic-testi").removeClass('visvis');
});
$("#text-contact").hover(function(){
$("#pic-contact").addClass('visvis');
},function(){
$("#pic-contact").removeClass('visvis');
});
});
I want to show the image when I am at it's corresponding section. How can I do that with javascript?
There is a lot going on here. Your HTML should technically be corrected. href's should not encapsulte LI's. Instead your href should be set to block - width and height 100% - within the LI. Let's also move the class of .vishid to the parent LI. That way if you want it to effect anything else - besides just the images - in the future, it would be easy to add. So that would look like:
<nav>
<ul id="pics">
<li id="text-what" class="vishid"><img src="images/what.png" id="pic-what"><p>item1</p></li>
<li id="text-training" class="vishid"><img src="images/training.png" id="pic-training"><p>item2</p></li>
<li id="text-testi" class="vishid"><img src="images/trait.png" id="pic-testi"><p>item3</p></li>
<li id="text-contact" class="vishid"><img src="images/contact.gif" id="pic-contact"><p>item4</p></li><
</ul>
</nav>
Then you need to adjust your CSS to correct for the "non-block" level href.
#pics li a {
display: block;
width: 100%;
height: 100%;
}
.vishid img {
visibility: hidden;
}
.visvis img {
visibility: visible;
}
Finally, I am going to assume that you are using "articles" in your HTML for the sections. Doesn't have to be, but that is what my example will assume.
var clickScroll = false,
triggerHighlight = 80; // distance from the top to trigger action
$(window).scroll(function () {
var y = $(this).scrollTop(),
yCatch = y + triggerHighlight;
// Let's wrap in a variable check. Set this to tru is clicking on navigation
// false if simply scrolling
if (!clickScroll) {
$('article').each(function (i) {
var whichArticle = $(this).attr('id');
if ($(this).position().top < yCatch) {
var currentArticle = "#" + whichArticle;
adjustSubNav(currentArticle);
}
});
}
});
function adjustSubNav(l) {
$('#pics a').each(function (i) {
if ($(this).attr('href') == l) { // Add active class to the corresponding menu item
$(this).parent('li').removeClass('vishid').addClass('visvis');
} else {
$(this).parent('li').removeClass('visvis').addClass('vishid');
}
});
}
I am making a CSS based menu, with submenu items that pop up when the root element is hovered. the problem I have is that I want the CSS menu to close when I click an item in the list, but at that point I am still technically hovering over the top element, so I figured I had to use javascript to hide the menu. But when I set the display property, I set it forever and it overrides the hover selector of the parent node. And so the submenu doesn't show up anymore.
This must be pretty common, but I can't find any answers...
Any help much appreciated!
html:
<ul class="level1">
<li>one
<ul class="level2">
<li id="test">two</li>
<li>three</li>
</ul>
</li>
</ul>
css:
.level1 li:hover > ul {
display: inline;
}
.level2 {
display: none;
}
js:
document
.getElementById('test')
.addEventListener('click',function () {
this.parentNode.style.display = 'none';
// After this the menu doesn't open anymore
// because the style is overriden
});
Here's the jsfiddle
You can try this.
<ul class="level1">
<li class="hoverMe">one
<ul class="level2">
<li id="test">two</li>
<li>three</li>
</ul>
</li>
</ul>
.hoverMe:hover > ul {
display: inline;
}
var test = document.getElementById('test');
test.onclick = function () {
this.parentNode.parentNode.className = "";
};
var level1 = document.getElementsByClassName('level1')[0];
level1.getElementsByTagName("li")[0].onmouseover = function () {
if (this.className != "hoverMe") {
this.className = "hoverMe";
}
};