Develop Reference

Modify code to take textContent from li instead of thumbnail img src?

I found (and tweaked) the code below that was designed for switching the larger img src with the src of thumbnails in a list, but I'm not sure how to adjust it to use something like https://picsum.photos/id/CLICKED_LI_textContent/200/200 as the URL instead of pulling from a thumbnail's src.
For some more context here's the original post in which I was looking into this
How can I change img src from list of (non-image) items?
I haven't taken any JS classes, so I'm not sure how every component of the script works. I'm more comfortable with pure HTML and CSS, but think JS is the answer for making this work more smoothly.
(I did add the jquery script src to the document for this)
Sorry the code is a little ugly, I would have added the script and style tags and such but I ran out of time while posting this
$("#list li").click(function(e) {
// if i use this getting undefined
// var src = $(this).attr("src");
// so i use this method
var target = e.target;
var src = target.src;
console.log(src);
$("#display").fadeOut(function() {
$(this).on('load', function() {
$(this).fadeIn();
});
$(this).attr("src", src);
});
//record which thumb was clicked
$("#list li").removeClass("active"); //remove class
$(this).addClass("active"); //apply class to selected thumb
});
//move next
$("#left-arrow").click(function() {
if ($("#list li.active").next("#list li").length > 0) {
$("#list li.active").next().children( 'img' ).trigger("click");
} else {
$("#list li:first > img").trigger("click"); //go to first
}
return false;
});
//move previous
$("#right-arrow").click(function() {
if ($("#list li.active").prev("#list li").length > 0) {
$("#list li.active").prev().children( 'img' ).trigger("click");
} else {
$("#list li:last > img").trigger("click"); //go to end
}
return false;
});
//click the first thumb to begin
$("#list li:first > img").trigger("click");
.container {
display: flex;
}
.active {
border-bottom: 1px solid #990000;
}
.list {
width: 200px;
cursor: pointer;
padding: 0.25rem;
}
list > li * {
/* so only the li tag can be event.target, and none of it's children */
pointer-events: none;
}
.display {
max-width: 500px;
max-height: 500px;
}
<div class="container">
<div class="list">
<ul id="list">
<li>237</li>
<li>240</li>
<li>100</li>
<li>301</li>
</ul>
$larr; $rarr;
</div>
<div class="show">
<img src="https://picsum.photos/id/237/200/200" class="display" id="display">
</div>
</div>

Here is a pure javascript solution. The only difference is that it lacks the fading between the images.
I tried to write the code as pedagogic as possible, using variables as explanations. The code goes more with your original thread, where you had a bunch of images with different file endings. I gave the image an alt attribute, so you can see the change.
A short explanation:
Use an array for the images.
Create your list through javascript, using the array.
Add click listeners to your #list, where you read the .textContent. I added pointer-events: none; to any children to the li tags so they don't trigger the click listener.
Add click listeners to your prev/next buttons, where you check which index that the currently visible image has in the array (from 0 to 3 in imageArr) and then adds +1 och -1 to that index.
[edit] Added code for updating the CSS.
const listEl = document.getElementById('list');
const imgElement = document.querySelector('.right > img');
let imageArr = ["237.jpg", "240.gif", "100.jpeg", "301.png"]; // 1
let currentImage = '';
document.getElementById('next').addEventListener('click', () => shiftImage(1));
document.getElementById('prev').addEventListener('click', () => shiftImage(-1));
listEl.addEventListener('click', displayImage);
function updateImage(imageName) {
const subfolder = 'images/';
changeActive(imageName, currentImage); /* ADDED in EDIT */
currentImage = imageName;
imgElement.src = subfolder + imageName;
imgElement.alt = imageName;
}
/* ADDED in EDIT */
function changeActive(newImage, oldImage) {
if (oldImage) {
let oldIndex = imageArr.indexOf(oldImage);
toggleActiveClass(oldIndex);
}
let currentIndex = imageArr.indexOf(newImage);
toggleActiveClass(currentIndex);
}
/* ADDED in EDIT */
function toggleActiveClass(imageIndex) {
let liElements = listEl.childNodes;
liElements[imageIndex].classList.toggle('active');
}
function shiftImage(direction) {
let currentIndex = imageArr.indexOf(currentImage);
let newIndex = currentIndex + direction;
if (newIndex < 0) { newIndex = imageArr.length - 1; }
else if (newIndex >= imageArr.length) { newIndex = 0; }
let newImageName = imageArr[newIndex];
updateImage(newImageName);
}
function displayImage(event) {
let liElement = event.target;
updateImage(liElement.textContent);
}
function constructImageLinks() { // 2
let htmlOutput = '';
for (let imageSrc of imageArr) {
htmlOutput += `<li>${imageSrc}</li>`;
}
listEl.innerHTML = htmlOutput;
}
constructImageLinks();
updateImage(imageArr[0]);
section {
display: flex;
}
section ul {
margin-top: 0px;
}
section > .left li {
cursor: pointer;
padding: 0.25rem;
}
section > .left li.active {
background-color: pink;
}
section > .left li > * {
pointer-events: none;
}
section > div {
padding: 1rem;
}
section > .right > img {
width: 200px;
border: 1px solid;
padding: 0.5rem;
}
<section>
<div class="left">
<ul id="list"></ul>
<button id="prev">Previous</button>
<button id="next">Next</button>
</div>
<div class="right">
<img>
</div>
</section>

JSFiddle - Link
HTML
<div class="container">
<div class="list">
<ul id="list">
<li>237</li>
<li>240</li>
<li>100</li>
<li>301</li>
</ul>
$larr; $rarr;
</div>
<div class="show">
<img src="https://picsum.photos/id/240/200/200" class="display" id="display">
</div>
</div>
Javascript
// HELPER FUNCTIONS
function getImageURL(id, width=200, height=200){
return "https://picsum.photos/id/"+ id + "/" + width + "/" + height;
}
function removeActive(){
let lis = $('#list li');
for(let i=0;i<lis.length;i++){
$(lis[i]).removeClass('active');
}
}
// HANDLE EVENTS
$(document).on('click', "#list li", async (e)=>{
await $('#display').fadeOut();
removeActive();
let li = $(e.target);
li.addClass('active');
let image_id = parseInt($(e.target).html());
let image_url = getImageURL(image_id);
$('#display').attr('src', image_url);
await $('#display').fadeIn();
});
//move next
$(document).on('click', "#left-arrow", (e)=>{
// Handler Here
});
//move previous
$(document).on('click', "#right-arrow", (e)=>{
// Handler Here
});
CSS
.active {
border-bottom: 1px solid #990000;
}
.list {
width: 200px;
cursor: pointer;
padding: 0.25rem;
}
list > li * {
/* so only the li tag can be event.target, and none of it's children */
pointer-events: none;
}
.display {
max-width: 500px;
max-height: 500px;
}
.container {
display: flex;
}

How to create a side menu that the "active" item follow the page content location?

I'm looking to learn how to do this left menu :
http://js.devexpress.com/New/15_2/#HTML_5_JS_Core
When you scroll down the page, the "active" menu item change.
p.s.
Is there a name for this type of menu?
regards,
yaniv

Scroll Navigation
That is how we call these type of navigation bars. Basically you have to listen to the scroll event and calculate which element is in the viewport at the moment than you add a class to your navigation that marks the current menu element.
There is a nice demo built in jQuery but because jQuery is a thing of the past, I built one in Vanilla JS. See comments for explanations.
There are different ways to define which is the current element. In my Example it is the last one whose top line just passed the top line of the browser.
Working demo
window.onscroll = onScroll;
function onScroll() {
var removeActiveClass = function (elements) {
for (var i = 0; i < elements.length; ++i) {
elements[i].classList.remove('active');
}
}
var anchors = document.querySelectorAll('#menu-center a');
var previousRefElement = null;
for (var i = 0; i < anchors.length; ++i) {
// Get the current element by the id from the anchor's href.
var currentRefElement = document.getElementById(anchors[i].getAttribute('href').substring(1));
var currentRefElementTop = currentRefElement.getBoundingClientRect().top;
// Searching for the element whose top haven't left the top of the browser.
if (currentRefElementTop <= 0) {
//The browser's top line haven't reached the current element, so the previous element is the one we currently look at.
previousRefElement = anchors[i];
// Edge case for last element.
if (i == anchors.length - 1) {
removeActiveClass(anchors);
anchors[i].classList.add("active");
}
} else {
removeActiveClass(anchors);
previousRefElement.classList.add("active");
break;
}
}
}
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.menu {
width: 100%;
height: 75px;
position: fixed;
background-color:rgba(4, 180, 49, 0.6);
}
#menu-center {
width: 980px;
height: 75px;
margin: 0 auto;
}
#menu-center ul {
margin: 15px 0 0 0;
}
#menu-center ul li {
list-style: none;
margin: 0 30px 0 0;
display: inline;
}
.active {
font-size: 14px;
color: #fff;
text-decoration: none;
line-height: 50px;
}
a {
font-size: 14px;
color: black;
text-decoration: none;
line-height: 50px;
}
.content {
height: 100%;
width: 100%;
}
#portfolio {background-color: grey;}
#about {background-color: blue;}
#contact {background-color: red;}
<div class="menu">
<div id="menu-center">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="home" class="content"></div>
<div id="portfolio" class="content"></div>
<div id="about" class="content"></div>
<div id="contact" class="content"></div>

This is not exactly menu type, it is the way how you can position objects by html.
You can use position:Abosule property to achieve this effect:
http://www.w3schools.com/css/tryit.asp?filename=trycss_position_fixed
By this given divs are "flying" above the res of the page. In your case it could be a menu.
EDIT:
To sync this you need to detect when given anchor is currently seen.
It can be done by jQuery, this is sample draft of code, should explain clue of solution:
// list of header on page
var positions = [
$("#anchor1").offset().top,
$("#anchor2").offset().top,
$("#anchor3").offset().top,
];
var menu_objects= [
"#menu1",
"#menu2",
"#menu3"
];
var $w = $(window).scroll(function(){
// clear old
for(var v in menu_objects)
$(v).css({"color","white"});
for(var i=positions.length-1;i>=0;i--)
{
if(positions[i]>=$w.scrollTop())
{
$(menu_objects[i]).css({"color","red"});
break;
}
}
});

jQuery custom slider creation with loop

Please, help me to configure my slider.
If you click on numbers in any row, you can see, that jquery give them classes and spin slider to index()
I want to add arrows to my slider, and do infinite loop. Eg if number 2 selected right arrow moves all 3 rows to number 3. And vice versa.
Here is my code.
$('.item').click(function() {
$this = $(this);
$(".item").removeClass("active");
$('.item').each(function() {
if (+$(this).index() == +$this.index()) {
$(this).addClass('active');
var box = $(this).closest('.scroll');
var x = ($(this).position().left - (box.width() / 2)) + box.scrollLeft();
box.animate({
scrollLeft: x
});
}
});
});
* {
margin: 0;
padding: 0;
}
.first-line,
.second-line,
.line3 {
margin-top: 20px;
}
.second-line,
.line3 {
margin-left: 20px;
}
.second-line {
width: 200px;
overflow: auto;
}
.line3 {
width: 200px;
overflow: hidden;
}
.wrap {
width: 500px;
}
.number,
.anotherclass,
.onemoreclass {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 15px;
border: 1px solid blue;
text-align: center;
margin: 0 10px;
}
.right-arrow,
.left-arrow {
display: inline-block;
cursor: pointer;
margin: 0 20px;
}
.number.active,
.anotherclass.active,
.onemoreclass.active {
background: blue;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="left-arrow"> << </div>
<div class="right-arrow"> >> </div>
<div class="first-line scroll">
<div class="anywrap">
<div class="number active item">1</div>
<div class="number item">2</div>
<div class="number item">3</div>
<div class="number item">4</div>
<div class="number item">5</div>
</div>
</div>
<div class="second-line scroll">
<div class="wrap">
<div class="anotherclass item active">1</div>
<div class="anotherclass item">2</div>
<div class="anotherclass item">3</div>
<div class="anotherclass item">4</div>
<div class="anotherclass item">5</div>
</div>
</div>
<div class="line3 scroll">
<div class="wrap">
<div class="onemoreclass item active">1</div>
<div class="onemoreclass item">2</div>
<div class="onemoreclass item">3</div>
<div class="onemoreclass item">4</div>
<div class="onemoreclass item">5</div>
</div>
</div>

Added to your function to support all of what you want. Let me know if this helps! Added comments to areas I changed to explain what I am doing. I also made $this a local variable instead of a global as well by defining it with var.
Fiddle: http://jsfiddle.net/AtheistP3ace/3ewguuyL/
JS:
// Attach click to all clickable elements
$('.item, .left-arrow, .right-arrow').click(function () {
var $this = $(this);
// check if we clicked an item or arrow
if (!$this.hasClass('item')) {
// if left arrow, get previous item of first active we find
if ($this.hasClass('left-arrow')) {
$this = $('.item.active:first').prev();
}
// if right arrow, get next item of first active we find
else if ($this.hasClass('right-arrow')) {
$this = $('.item.active:first').next();
}
// Handle being at the start or end of items
if ($this.length == 0) {
return;
}
}
// Let your previous code run
$(".item").removeClass("active");
$('.item').each(function () {
if (+$(this).index() == +$this.index()) {
$(this).addClass('active');
var box = $(this).closest('.scroll');
var x = ($(this).position().left - (box.width() / 2)) + box.scrollLeft();
box.animate({
scrollLeft: x
});
}
});
});

Have a look at https://jsfiddle.net/0m0raekm/
For the arrow support I just added this part:
$('.arrow-control').click(function(){
var direction = $(this).hasClass('left-arrow') ? -1 : 1;
var currentItemIndex = $('.anywrap .active').index();
var itemCount = $('.anywrap .item').length;
var nextItemIndex = (currentItemIndex + direction)%itemCount;
var nextItem = $('.anywrap .item').get( nextItemIndex );
$(nextItem).trigger( "click" );
});
It is quite generic: it determines the currently active item, chooses the next one depending on the arrow direction and the number of items (infinite loops) and triggers a click event on the item that is supposed to be next. So after determining the next item, it uses your original code to do the actual effect.

after scrolling, detect when element returns to original position

I am trying to, sort of, emulate the effect here. Essentially, during scrolling, change the css (drop shadow), and when the element comes back to original position (remove shadow).
I am able to detect scroll, but not able to figure out how to detect the return to the original un-scrolled state.
HTML
<div id="container">
<ul>
<li id="one">el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li><li>el</li>
</ul>
</div>
CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
height: 100px;
width: 500px;
border: 1px solid #000000;
overflow: scroll;
}
JS (with jquery)
var p = $('#one');
var position0 = p.position().top;
$('#container').scroll(function () {
if (p.position().top != position0) {
console.log('p.position: ' + p.position().top);
$('#container').css('background-color', 'pink');
}
});
JSFIDDLE: http://jsfiddle.net/nrao89m3/
PS: From console.log it doesn't seem to return to its original value at all.

Just add an else block:
var p = $('#one');
var position0 = p.position().top;
$('#container').scroll(function () {
if (p.position().top != position0) {
console.log('p.position: ' + p.position().top);
$('#container').css('background-color', 'pink');
} else {
$('#container').css('background-color', 'white');
}
});
http://jsfiddle.net/vyjbwne2/

Scrolling Tabs in a table

I have a horizontal tab menu. These tabs are all li elements. I show always 5 of them at once. To the left and right I have buttons which scrolls these tabs to either side. I am just not sure how to achieve that. Can I put the next 5 tabs in a different div which will be shown on click? That wouldnt be the best solution, would it? Can I do this somehow with JavaScript or jQuery?
Thanks.

You can do this w/ jQuery. Easier if all of the tabs are the same width. You can position the UL inside a DIV that has overflow: hidden and position: relative. Then the UL can slide around inside the DIV using the animate() method (or the css() method). Check them out on http://api.jquery.com.
Here's an example:
<!DOCTYPE HTML>
<html>
<head>
<style>
* { margin: 0; padding: 0; }
body { padding: 30px; }
div#tabs { width: 360px; height: 30px; overflow: hidden; position: relative; }
ul { display: block; float: left; width: 1080px; position: absolute; left: -360px; }
li { display: block; float: left; width: 70px; height: 30px; font-size: 12px; border: 1px solid #333; }
button { float: left; width: 100px; margin: 20px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
var tabs_list = $("div#tabs > ul");
if($(this).is("#left"))
{
tabs_list.animate({ left: "-=360" }, 500);
}
else if($(this).is("#right"))
{
tabs_list.animate({ left: "+=360" }, 500);
}
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
<li>eleven</li>
<li>twelve</li>
<li>thirteen</li>
<li>fourteen</li>
<li>fifteen</li>
</ul>
</div>
<button id="left">scroll left</button>
<button id="right">scroll right</button>
</body>
</html>
This would need some more work in order to de-activate or hide the scroll buttons when you've reached the beginning or end of the tabs list, but this should get you started.

I like Elliot's solution. I have another one, which will work if the tabs are of different lengths. It does it by hiding and showing the individual "li"s as you click the "right" and "left" buttons. The code also takes care of moving the tabs 5 at a time, both left and right, and handles the end cases.
<!DOCTYPE HTML>
<html>
<head>
<style>
#left, #right {float: left; position: relative; margin: 0; padding: 0;}
#tabs {float: left; position: relative; list-style: none; margin: 0; padding: 0;}
#tabs li {float: left; display: none; border: 2px solid #000; width: 50px; text-align: center;};
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var tabs = $('#tabs li'), number_of_tabs = tabs.length;
var tabs_visible = Math.min(5, number_of_tabs), low_tab = 0, high_tab = (tabs_visible - 1);
$(tabs).filter(function(index){return (index < tabs_visible);}).show();
$('#left, #right').each(function(){
$(this).click(function(){
if ($(this).is('#right')) {
var high_tab_new = Math.min((high_tab + tabs_visible), (number_of_tabs - 1));
var low_tab_new = high_tab_new - tabs_visible + 1;
$(tabs).filter(function(index){
return (index >= low_tab) && (index < low_tab_new);
}).hide();
$(tabs).filter(function(index){
return (index > high_tab) && (index <= high_tab_new);
}).show();
low_tab = low_tab_new;
high_tab = high_tab_new;
} else {
var low_tab_new = Math.max((low_tab - tabs_visible), 0);
var high_tab_new = low_tab_new + tabs_visible - 1;
$(tabs).filter(function(index){
return (index > high_tab_new) && (index <= high_tab);
}).hide();
$(tabs).filter(function(index){
return (index >= low_tab_new) && (index < low_tab);
}).show();
low_tab = low_tab_new;
high_tab = high_tab_new;
}
});
});
</script>
</head>
<div id="nav3">
<button id="left">left</button>
<ul id="tabs">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
</ul>
<button id="right">right</button>
</div>
</body>
</html>

Though I am not sure how would the tab look like, I am assuming that with the 5 tabs you are showing different set of page content.
I am suggesting a simple solution (Design) with Javascript. See if it works.
Have a variable to store the current View index. e.g. _currentView.
Place the content of 5 tabs in 5 views (When I say views there are many ways to establish it, ranging from using div object to using .net multiview control).
By default keep their visibility off.
Create a method, that'll accept the _currentView as the parameter. In this method, just make the current view visible.
On the click of left and right arrow, increment or decrement the _currentView value and call the method that activates the current view.
Please see if this helps you.