We Keep Coding

On ready position of specific class for li

I code this page that I want to navigate in a li menu by the wheelmouse. My question is: I want the li with the class selected was in the first position on the left.
How can I do to make the specific li with the class selected at this position using jquery code?
$(document).ready(function() {
var scrolling_size = 0;
$("li").each(function(index) {
scrolling_size += parseInt($(this).css("width"));
});
$("#menu").css("width", scrolling_size);
scrolling_size = scrolling_size - parseInt($('#container').css("width"));
$('#menu').bind('mousewheel', function(e) {
$("#before").text("Left of the #menu Before scrollong: " + parseInt($(this).css("left")));
if (e.originalEvent.wheelDelta > 0) {
if (parseInt($(this).css("left")) <= -50) {
$(this).css("left", "+=50");
}
} else {
if (parseInt($(this).css("left")) >= -scrolling_size) {
$(this).css("left", "-=50");
}
}
});
});
#l,
#r {
float: left;
font-size: 80px;
}
#container {
float: left;
border: 1px solid green;
width: 500px;
padding: 2px;
overflow: hidden;
position: relative;
}
#menu {
border: 1px solid blue;
padding: 2px;
position: relative;
}
ul {
list-style-type: none;
white-space: nowrap;
overflow-x: visible;
margin: 0;
padding: 0;
}
li {
border: 1px solid red;
display: inline-block;
font-size: 80px;
}
.selected {
background: #0095ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="menu">
<ul>
<li>Hi !</li>
<li>Text here</li>
<li>Something like this</li>
<li class="selected">Always</li>
<li>Thanks !</li>
<li>Bye</li>
</ul>
</div>
</div>
Like this :
image
I tried this :
$("#menu").css("left", $(".selected").css("left"));
But it's not work
Please help me

Try this in $("#menu ul li.selected").prependTo("#menu ul");
$(document).ready(function() {
$("#menu ul li.selected").prependTo("#menu ul");
var scrolling_size = 0;
$("li").each(function(index) {
scrolling_size += parseInt($(this).css("width"));
});
$("#menu").css("width", scrolling_size);
scrolling_size = scrolling_size - parseInt($('#container').css("width"));
$('#menu').bind('mousewheel', function(e) {
$("#before").text("Left of the #menu Before scrollong: " + parseInt($(this).css("left")));
if (e.originalEvent.wheelDelta > 0) {
if (parseInt($(this).css("left")) <= -50) {
$(this).css("left", "+=50");
}
} else {
if (parseInt($(this).css("left")) >= -scrolling_size) {
$(this).css("left", "-=50");
}
}
});
});
#l,
#r {
float: left;
font-size: 80px;
}
#container {
float: left;
border: 1px solid green;
width: 500px;
padding: 2px;
overflow: hidden;
position: relative;
}
#menu {
border: 1px solid blue;
padding: 2px;
position: relative;
}
ul {
list-style-type: none;
white-space: nowrap;
overflow-x: visible;
margin: 0;
padding: 0;
}
li {
border: 1px solid red;
display: inline-block;
font-size: 80px;
}
.selected {
background: #0095ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="menu">
<ul>
<li>Hi !</li>
<li>Text here</li>
<li>Something like this</li>
<li class="selected">Always</li>
<li>Thanks !</li>
<li>Bye</li>
</ul>
</div>
</div>

I found the answer
We must add this :
var pos = $("li.selected").position();
$("#menu").css("left", pos);

two functions interfering with each other

So my first stab at web development is proceeding reasonably well.
However... I want to have two separate drop down menus, but the JavaScript functions are interfering with each other... That is, if both functions are active at the same time, clicking on one drop down will cause the other drop down to react or stop working. It is probably something massively stupid, but I have little time left. here is the code:
//Control sliding menu on screens smaller than a specified breakpoint.
(function(menu_button, links, breakpoint)
{
"use strict";
var menulink = document.getElementById(menu_button),
menu = document.getElementById(links);
menu.className = "start";
setTimeout(function()
{
menu.className = "collapsed";
}, 20);
menuLink.onclick = function()
{
if (menu.className === "displayed")
{
menu.className = "collapsed";
}
else
{
menu.className = "displayed";
}
return false;
};
window.onresize = function()
{
if (window.innerWidth < breakpoint)
{
menu.className = "collapsed";
}
};
})("menuLink", "navLinks", 700);
That was function No.1, here is No.2:
function dropFunction()
{
"use strict";
document.getElementById("myDropdown").classList.toggle("drop");
}
window.onclick = function(e)
{
"use strict";
if (!e.target.matches('.dropbtn'))
{
var dropdowns = document.getElementsByClassName("dropdownContent");
for (var d = 0; d < dropdowns.length; d++)
{
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains("drop"))
{
openDropdown.classList.remove("drop");
}
}
}
}
and HTML if at all usefull:
<nav>
<p id="menuLink">MENU</p>
<ul class="displayed" id="navLinks">
<li>Home</li>
<li>Portfolio</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</nav>
<div class="dropdownContent" id="myDropdown">
<img class="externalLink" src="images/faceBook.png" style="width:20px">
<img class="externalLink" src="images/linkedIn.png" style="width:20px">
<img class="externalLink" src="images/soundCloud.png" style="width:20px">
</div>
and CSS:
.nav
{
display: inline;
position: absolute;
bottom: 220px;
padding-right: 60px;
width: 100%;
background-color: transparent;
font-family: "verdana";
font-size: 20px;
text-align: center;
}
.nav li
{
display: inline;
}
.nav a
{
display: inline-block;
padding: 50px;
text-decoration: none;
color: #E4E4E4;
}
.nav a:hover
{
color: #FFFFFF;
text-shadow: 0px 0px 15px #FFFFFF;
}
.nav a:active
{
color: #5B4CA8;
}
li.drops
{
display: inline-block;
}
.dropdownContent
{
display: none;
position: absolute;
background-color: transparent;
box-shadow: none;
minimum-width: 20px;
}
.dropdownContent a
{
color: transparent;
text-decoration: none;
display: block;
text-align: center;
}
.drop
{
display: block;
}
#menuLink
{
width: 100%;
background-color: transparent;
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
}
#menuLink a
{
text-decoration: none;
font-family: "helvetica";
color: #E4E4E4;
}
#menuLink a:hover
{
color: #FFFFFF;
text-shadow: 0px 0px 15px #FFFFFF;
}
#menuLink a:active
{
color: #5B4CA8;
}
#navLinks
{
position: absolute;
list-style-type: none;
width: 100%;
background-color: transparent;
padding: 0;
margin: 0;
text-align: center;
z-index: 1;
opacity: 1;
-webkit-transition: all ease-out 0.5s;
transition: all ease-out 0.5s;
}
#navLinks a
{
display: block;
padding: 10px;
font-family: "helvetica";
color: #E4E4E4;
text-decoration: none;
font-size: 18px;
}
#navLinks a:hover
{
color: #FFFFFF;
text-shadow: 0px 0px 15px #FFFFFF;
}
#navLinks a:active
{
color: #5B4CA8;
}
#navLinks.start
{
display: none;
}
#navLinks.collapsed
{
top: -12em;
opacity: 0;
}
Thanks for your help!

You have used the window.Onlcick event to specify behaviors for the dropdowns if the user is not clicking on something with class "drop". This event will fire if you click on any item in that window because events bubble up like that in JavaScript.

Click function not working in slideshow

I'm making jQuery to click the Next and Previous span tab to control the image slideshow but it's not working.
function slideshow() {
var $active = $('div#slider-wrap img.active-img');
var $next = $active.next();
$next.addClass('active-img');
$active.removeClass('active-img');
}
$(function() {
setInterval(slideshow, 5000);
});
$('#tab-container a').on('click', function() {
var element = this.id;
console.log(element);
$('.images').trigger("slideshow", element);
});
/* next and previous jquery code */
$(document).ready(function() {
var divs = $('.images>img');
var now = 0; // currently shown div
divs.hide().first().show(); // hide all divs except first
$("#previous").click(function() {
divs.eq(now).hide();
now = (now + 1 < divs.length) ? now + 1 : 0;
divs.eq(now).show(); // show next
});
$("#next").click(function() {
divs.eq(now).hide();
now = (now > 0) ? now - 1 : divs.length - 1;
divs.eq(now).show(); // show previous
});
});
* {
margin: 0;
padding: 0;
}
#slider-wrap {
position: relative;
}
.slideshow .images {
width: 100%;
height: 350px;
overflow: hidden;
margin: 0 auto;
}
.slideshow .images img {
position: absolute;
width: 100%;
max-width: 960px;
height: auto;
}
.active-img {
z-index: 99;
}
#tab-container {
border-bottom: #ccc 1px solid;
border-top: #ccc 1px solid;
overflow: hidden;
width: 50%;
margin-top: 265px;
}
#tab-container span {
display: block;
float: left;
width: 42.995%;
padding: 10px 0;
text-align: center;
font-size: 12px;
text-transform: uppercase;
border-right: #ccc 1px solid;
letter-spacing: 1px;
font-family: 'corporate_condensed', sans-serif;
}
#tab-container a:nth-of-type(2) span {
border-right: 0;
}
#tab-container a,
#tab-container a:hover,
#tab-container a:active,
#tab-container a:visited {
text-decoration: none;
font-weight: bold;
color: #000;
cursor: pointer;
}
#tab-container span:hover {
color: #fff;
background: #444;
}
#tab-container span.active {
color: #fff;
background: #444;
}
#tab-container a span.active,
.c-slider #tab-container a:hover span.active,
.c-slider #tab-container a:active span.active,
.c-slider #tab-container a:visited span.active {
color: #fff;
}
#slider_time {
display: none;
}
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<div id="slider-wrap">
<div class="slideshow">
<div class="images">
<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/1.jpg" alt="" class="active-img">
<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/2.jpg" alt="">
<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/3.jpg" alt="">
<img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/4.jpg" alt="">
</div>
</div>
</div>
<div id="tab-container">
<a><span id="previous" class="">Previous</span></a>
<a><span id="next"class="">Next</span></a>
</div>
<div style="clear:both"></div>
Previous and next tabs are not aligning properly with equal width. I'm having this problem all the time.

Stick second level navigation onclick

I have this 2 level navigation. If I click on second level it should not hide, but stick there. On hover, second level is showing properly, now what I want is, is I click on sub 2 and move my cursor out, the sub 2 should be selected and stay there.
$(document).ready(function () {
var $nav = $('#top_navigation > ul > li');
$nav.hover(
function() {
$('ul', this).stop(true, true).slideDown('fast');
$('a',this).first().css({"background-color":"#ccc", "color":"#000"});
},
function() {
$('ul', this).slideUp('fast');
$('a',this).first().css({"background-color":"#ccc", "color":"#000"});
}
);
});
#top_navigation {
width: 1248px;
margin: 0 auto;
position: relative;
text-transform: uppercase;
font-family: "Rounded Font", sans-serif;
font-size: 13px;
}
#top_navigation ul ul {
display: none;
}
#top_navigation ul {
padding-left: 0;
}
#top_navigation ul li {
margin: 0;
padding: 0;
float: left;
width: 100px;
height: 30px;
line-height: 30px;
font-size: 13px;
list-style: none;
}
#top_navigation ul li a {
display: block;
text-align: center;
text-decoration: none;
color: #000;
background-color: #FFF;
}
#top_navigation ul li.selected_menu_item a {
background-color: #ccc;
color: #FFF;
}
#top_navigation ul li a:hover {
background-color: #ccc;
color: #FFF;
}
#top_navigation li li {
height: 30px;
line-height: 30px;
border-top: #ccc 1px solid;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body bgcolor="black">
<div id="top_navigation">
<ul>
<li>item1</li>
<li>item2
<ul class="submenu">
<li>sub1</li>
<li>sub2</li>
<li class="selected_menu_item">sub3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

Try this:
$(document).ready(function () {
var $nav = $('#top_navigation > ul > li');
$nav.hover(
function() {
$('ul', this).stop(true, true).slideDown('fast');
$('a',this).first().css({"background-color":"#ccc", "color":"#000"});
},
function() {
if( ! $('ul', this).children().hasClass('show')) {
$('ul', this).slideUp('fast');
} else {
$('#top_navigation ul').click(function(){
$('ul.submenu').slideUp();
})
}
$('a',this).first().css({"background-color":"#ccc", "color":"#000"});
}
);
$('ul.submenu li').click(function(){
$('ul.submenu li').removeClass('selected_menu_item')
$(this).addClass('selected_menu_item show')
});
});
Working Fiddle: https://jsfiddle.net/co7u8L23/2/

$(document).ready(function () {
var $nav = $('#top_navigation > ul > li');
var $nav1 = $('#top_navigation > ul > li >ul >li');
$nav.hover(
function() {
$('ul', this).stop(true, true).slideDown('fast');
$('a',this).first().css({"background-color":"#ccc", "color":"#000"});
},
function() {
$('ul', this).slideUp('fast');
$('a',this).first().css({"background-color":"#ccc", "color":"#000"});
}
);
$nav1.click(function(){
$(this).addClass("selected_menu_item");
}
);
});
#top_navigation {
width: 1248px;
margin: 0 auto;
position: relative;
text-transform: uppercase;
font-family: "Rounded Font", sans-serif;
font-size: 13px;
}
#top_navigation ul ul {
display: none;
}
#top_navigation ul {
padding-left: 0;
}
#top_navigation ul li {
margin: 0;
padding: 0;
float: left;
width: 100px;
height: 30px;
line-height: 30px;
font-size: 13px;
list-style: none;
}
#top_navigation ul li a {
display: block;
text-align: center;
text-decoration: none;
color: #000;
background-color: #FFF;
}
#top_navigation ul li.selected_menu_item a {
background-color: #ccc;
color: #FFF;
}
#top_navigation ul li a:hover {
background-color: #ccc;
color: #FFF;
}
#top_navigation li li {
height: 30px;
line-height: 30px;
border-top: #ccc 1px solid;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body bgcolor="black">
<div id="top_navigation">
<ul>
<li>item1</li>
<li>item2
<ul class="submenu">
<li>sub1</li>
<li>sub2</li>
<li class="selected_menu_item">sub3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I have added click event in your code.This is running snippest of it

I'm trying to add previous and next arrows to this content slider

Currently there are circles at the bottom that can be used to navigate between slides. I would like to add next and previous arrows to the sides that the user can click on to proceed forwards or back through the slides.
CSS:
#wrapper {
width: 2000px;
position: relative;
left: 0px;
transition: left 0.6s ease-in-out;
}
.content {
float: left;
width: 500px;
height: 300px;
white-space: normal;
background-repeat: no-repeat;
}
#contentContainer {
width: 500px;
height: 300px;
overflow: hidden;
}
#navLinks {
margin-top:-61px;
position:relative;
text-align: center;
width: 500px;
}
#navLinks ul {
margin: 0px;
padding: 0px;
display: inline-block;
margin-top: 6px;
}
#navLinks ul li {
float: left;
text-align: center;
margin: 10px;
list-style: none;
cursor: pointer;
background-color: rgba(204,204,204,0.8);
padding: 10px;
border-radius: 50%;
}
#navLinks ul li:hover {
background-color: #FFF;
}
#navLinks ul li.active {
background-color: rgba(156,227,100,0.9);
color: #FFFFFF;
}
#navLinks ul li.active:hover {
background-color: red;
color:#FFF;
}
#itemOne {
background-image: url("http://telcospace.com/wp-content/uploads/2013/02/android_eating_apple_1000x500_by_crus23-d38bpx9-640x300.jpg");
}
#itemTwo {
background-image: url("http://www.thetimesofhealth.com/wp-content/uploads/2014/08/Angry-Baby-Face-500x300.jpg");
}
#itemThree {
background-image: url("http://animalsugar.com/wp-content/uploads/2014/10/baby-cat-hd-wallpapers-baby-cat-widescreen.jpg");
}
#itemFour {
background-image: url("http://cuteimages.net/data/2015/5/the-first-puppy-to-leave-me-speechless-name-cuteimages.net.png");
}
HTML:
<div id="contentContainer">
<div id="wrapper">
<div id="itemOne" class="content">
</div>
<div id="itemTwo" class="content">
</div>
<div id="itemThree" class="content">
</div>
<div id="itemFour" class="content">
</div>
</div>
</div>
<div id="navLinks">
<ul>
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-500px"></li>
<li class="itemLinks" data-pos="-1000px"></li>
<li class="itemLinks" data-pos="-1500px"></li>
</ul>
</div>
JavaScript:
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
var activeLink = 0;
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setClickedItem, false);
link.itemID = i;
}
links[activeLink].classList.add("active");
function setClickedItem(e) {
removeActiveLinks();
resetTimer();
var clickedLink = e.target;
activeLink = clickedLink.itemID;
changePosition(clickedLink);
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
}
function changePosition(link) {
link.classList.add("active");
var position = link.getAttribute("data-pos");
wrapper.style.left = position;
}
var timeoutID;
function startTimer() {
timeoutID = window.setInterval(goToNextItem, 2963);
}
startTimer();
function resetTimer() {
window.clearInterval(timeoutID);
startTimer();
}
function goToNextItem() {
removeActiveLinks();
if (activeLink < links.length - 1) {
activeLink++;
} else {
activeLink = 0;
}
var newLink = links[activeLink];
changePosition(newLink);
}
Here is the JSFiddle http://jsfiddle.net/stormbloom/2d0a1215/
I would like to learn this for personal experience, otherwise I would just use a plugin like WowSlider. If it's easier to do this by building a new slider from scratch then any links to resources explaining how to accomplish this would also be appreciated.

This is an approach with arrows, just tweak with the design.
In the HTML I added the correspoding arrows, and in the JS I added the EventListeners and the function goToPreviousItem() at the end.
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
document.querySelector('#previous').addEventListener('click', goToPreviousItem, false);
document.querySelector('#next').addEventListener('click', goToNextItem, false);
var activeLink = 0;
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setClickedItem, false);
link.itemID = i;
}
links[activeLink].classList.add("active");
function setClickedItem(e) {
removeActiveLinks();
resetTimer();
var clickedLink = e.target;
activeLink = clickedLink.itemID;
changePosition(clickedLink);
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
}
function changePosition(link) {
link.classList.add("active");
var position = link.getAttribute("data-pos");
wrapper.style.left = position;
}
var timeoutID;
function startTimer() {
timeoutID = window.setInterval(goToNextItem, 2963);
}
//startTimer();
function resetTimer() {
window.clearInterval(timeoutID);
startTimer();
}
function goToNextItem() {
removeActiveLinks();
if (activeLink < links.length - 1) {
activeLink++;
} else {
activeLink = 0;
}
var newLink = links[activeLink];
changePosition(newLink);
}
function goToPreviousItem() {
removeActiveLinks();
if(activeLink == 0) {
activeLink = links.length - 1;
} else {
activeLink--;
}
var newLink = links[activeLink];
changePosition(newLink);
}
#wrapper {
width: 2000px;
position: relative;
left: 0px;
transition: left 0.6s ease-in-out;
}
.content {
float: left;
width: 500px;
height: 300px;
white-space: normal;
background-repeat: no-repeat;
}
#outsideContainer {
width: 600px;
}
#previous {
width: 50px;
display: inline-block;
text-align: center;
float: left;
margin-top: 150px;
}
#next {
width: 50px;
display: inline-block;
text-align: center;
float: right;
margin-top: 150px;
}
#contentContainer {
width: 500px;
height: 300px;
overflow: hidden;
display: inline-block;
}
#navLinks {
margin-top:-61px;
position:relative;
text-align: center;
width: 600px;
}
#navLinks ul {
margin: 0px;
padding: 0px;
display: inline-block;
margin-top: 6px;
}
#navLinks ul li {
float: left;
text-align: center;
margin: 10px;
list-style: none;
cursor: pointer;
background-color: rgba(204,204,204,0.8);
padding: 10px;
border-radius: 50%;
border:rgba(255,255,255,0.9) 1px solid;
box-shadow: 0 0 4px #fff;
}
#navLinks ul li:hover {
background-color: #FFF;
box-shadow: 0 0 10px #fff;
border:rgba(255,255,255,0.6) 1px solid;
}
#navLinks ul li.active {
background-color: rgba(156,227,100,0.9);
color: #FFFFFF;
outline-width: 1px;
}
#navLinks ul li.active:hover {
background-color: rgba(255,255,255,0.7);
color: #FFFFFF;
box-shadow: 0 0 10px #fff;
border:rgba(255,255,255,0.9) 1px solid;
}
#itemOne {
background-color: #000;
background-image: url("http://telcospace.com/wp-content/uploads/2013/02/android_eating_apple_1000x500_by_crus23-d38bpx9-640x300.jpg");
}
#itemTwo {
background-color: #fff;
background-image: url("http://www.thetimesofhealth.com/wp-content/uploads/2014/08/Angry-Baby-Face-500x300.jpg");
}
#itemThree {
background-color: #fff;
background-image: url("http://animalsugar.com/wp-content/uploads/2014/10/baby-cat-hd-wallpapers-baby-cat-widescreen.jpg");
}
#itemFour {
background-color: #fff;
background-image: url("http://images5.fanpop.com/image/photos/28100000/Katy-Perry-gifs-katy-perry-28147211-500-300.gif");
}
<div id="outsideContainer">
<div id="previous"><<</div>
<div id="contentContainer">
<div id="wrapper">
<div id="itemOne" class="content"></div>
<div id="itemTwo" class="content"></div>
<div id="itemThree" class="content"></div>
<div id="itemFour" class="content"></div>
</div>
</div>
<div id="next">>></div>
</div>
<div id="navLinks">
<ul>
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-500px"></li>
<li class="itemLinks" data-pos="-1000px"></li>
<li class="itemLinks" data-pos="-1500px"></li>
</ul>
</div>