Develop Reference

HTML5 range cannot set linear-gradient as background using javascript when change value. It add automatically a center class into the style

I create a custom linear-gradient as a background of an HTML Range. When I try to change range value the javascript code change the background linear width. As you can see in the snippet it set the colour on the beginning. But after change the value it adds unknown centre (please check the logs) class inside this style and doesn't set colour properly. How to get rid of this centre class. or are there any method to do this without this way? (Please check the following snippet.)
Any help will be Thankful
document.getElementById("sliderPrice").oninput = function() {
$color = 'linear-gradient(rgb(241, 241, 241),rgb(241, 241, 241),rgb(241, 241, 241)) left/' + (100 - parseFloat(this.value / 1000)) + '% 100%, linear-gradient(180deg, rgb(235, 150, 222) 0%, rgb(141, 33, 125) 100%) left/' + this.value / 1000 + '% 100%,linear-gradient(180deg, rgb(141, 33, 125) 0%, rgba(255, 255, 255, 0) 100%) left/' + this.value / 1000 + '% 100%';
this.style.background = $color;
console.log($color);
console.log(this.style.background);
};
#sliderPrice {
width: 80%;
position: relative;
margin-left: 8vw;
background: linear-gradient(#F1F1F1, #F1F1F1, #F1F1F1) right/80% 100%,linear-gradient(180deg, #EB96DE 0%, #8D217D 100%) left/20% 100%,linear-gradient(180deg, #8D217D 0%, rgba(255, 255, 255, 0) 100%) left/20% 100%;
background-repeat: no-repeat;
background-blend-mode: hard-light,normal;
border-radius: 10px;
border-radius: 8px;
height: 7px;
outline: none;
transition: background 450ms ease-in;
-webkit-appearance: none;
}
<input autocomplete="off" id="sliderPrice" type="range" class="slider" value="20000" min="0" max="100001" />

You had a first issue with position in your gradient (left instead right for the first one) .
To update the background, you could use the css custom properies and update it .
Posible fixed .
(added Math.round() to shorten the background size recalculated value, for readability in the console only )
let range = document.getElementById("sliderPrice");
range.oninput = function() {
$color =
"linear-gradient(rgb(241, 241, 241),rgb(241, 241, 241),rgb(241, 241, 241)) right / " +
Math.round((100 - parseFloat(this.value / 1000))) +
"% 100%, linear-gradient(180deg, rgb(235, 150, 222) 0%, rgb(141, 33, 125) 100%) left / " +
this.value / 1000 +
"% 100%,linear-gradient(180deg, rgb(141, 33, 125) 0%, rgba(255, 255, 255, 0) 100%) left/" +
Math.round(parseFloat(this.value / 1000)) +
"% 100%";
document.documentElement.style.setProperty("--newBg", $color);
console.log($color);
console.log(
getComputedStyle(document.documentElement).getPropertyValue("--newBg")
);
};
:root {
--newBg: linear-gradient(#f1f1f1, #f1f1f1, #f1f1f1) right/80% 100%, linear-gradient(180deg, #eb96de 0%, #8d217d 100%) left/20% 100%, linear-gradient(180deg, #8d217d 0%, rgba(255, 255, 255, 0) 100%) left/20% 100%;
}
#sliderPrice {
width: 80%;
position: relative;
margin-left: 8vw;
background: var(--newBg);
background-repeat: no-repeat;
background-blend-mode: hard-light, normal;
border-radius: 10px;
border-radius: 8px;
height: 7px;
outline: none;
transition: background 450ms ease-in;
-webkit-appearance: none;
}
<input autocomplete="off" id="sliderPrice" type="range" class="slider" value="20000" min="0" max="100001" />

I think this is what you wanted...
You missed a right property in the first linear-gradient.
You also need to reset some background properties that you had in CSS and with Javascript manipulation you overwrote...
I hope this helps! 😁
document.getElementById("sliderPrice").oninput = function() {
const progress = Math.round(parseFloat(this.value / 1000));
$color = `linear-gradient(rgb(241, 241, 241),rgb(241, 241, 241),rgb(241, 241, 241)) right/${100 - progress}% 100%,
linear-gradient(180deg, rgb(235, 150, 222) 0%, rgb(141, 33, 125) 100%) left/${progress}% 100%,
linear-gradient(180deg, rgb(141, 33, 125) 0%, rgba(255, 255, 255, 0) 100%) left/${progress}% 100%`;
this.style.background = $color;
this.style['background-repeat'] = 'no-repeat';
this.style['background-blend-mode'] = 'hard-light, normal';
};
#sliderPrice {
width: 80%;
position: relative;
margin-left: 8vw;
background: linear-gradient(#F1F1F1, #F1F1F1, #F1F1F1) right/80% 100%,
linear-gradient(180deg, #EB96DE 0%, #8D217D 100%) left/20% 100%,
linear-gradient(180deg, #8D217D 0%, rgba(255, 255, 255, 0) 100%) left/20% 100%;
background-repeat: no-repeat;
background-blend-mode: hard-light, normal;
border-radius: 10px;
border-radius: 8px;
height: 7px;
outline: none;
transition: background 250ms ease-in;
-webkit-appearance: none;
}
#c {
width: 100px;
height:100px;
display:inline-block;
background:
linear-gradient(#F1F1F1, #F1F1F1, #F1F1F1) right/80% 100%,
linear-gradient(180deg, red 0%, blue 100%) left/20% 100%;
background-repeat: no-repeat;
background-blend-mode: hard-light, normal;
transition: background 450ms ease-in;
}
<input autocomplete="off" id="sliderPrice" type="range" class="slider" value="20000" min="0" max="100001" />

I have no idea why this happens, a workaround could be: dynamically add a CSS style to the html header and then add the class to the element instead of setting its style.
var bgGradient = 'linear-gradient(#F1F1F1, #F1F1F1, #F1F1F1) right/80% 100%,linear-gradient(180deg, #EB96DE 0%, #8D217D 100%) left/20% 100%,linear-gradient(180deg, #8D217D 0%, rgba(255, 255, 255, 0) 100%) left/20% 100%;',
/*
above css style do not works on the snippet
(maybe the problem is on the syntax of the gradient?),
so i used simply #000 color
*/
css = '.mydivclass{ background:#000 !important; }',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style'),
mydiv = document.getElementById('mydiv');
head.appendChild(style);
style.type = 'text/css';
if (style.styleSheet){
// This is required for IE8 and below.
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style)
/*
then add or remove the class to your element
*/
setInterval(()=>{
if(mydiv.classList.contains('mydivclass'))
return mydiv.classList.remove('mydivclass')
mydiv.classList.add('mydivclass')
},1000)
#mydiv{
width:100px;
height:100px;
background: yellow;
}
<html>
<head>
</head>
<body>
<div id="mydiv">
</div>
</body>
</html>

You're trying to change css for your DOM element using JavaScript. I don't think it's possible.
Either control everything using CSS or keep the whole control on JS.
I've scribbled the latter:
document.getElementById("sliderPrice").oninput = function() {
const value = parseFloat(this.value / 1000);
const cssText = `width: 80%;
position: relative;
margin-left: 8vw;
background: linear-gradient(180deg, #EB96DE 0%, #8D217D 100%) left/${value}% 100%;
background-repeat: no-repeat;
background-blend-mode: hard-light, normal;
border-radius: 10px;
border-radius: 8px;
height: 7px;
outline: none;
transition: background 450ms ease-in;
-webkit-appearance: none;
`;
this.style.cssText = cssText;
console.log(this.style.background);
};
<input autocomplete="off" id="sliderPrice" type="range" class="slider" value="20000" min="0" max="100001" />
Notice I've not initialized the CSS outside your eventHandler, so it would start working when you change the slider.

When I add a new CSS style with Javascript, the JS that's there stops working

I have a JavaScript to-do list that works until I add the below code to it. style to it. (The entire code is saved at https://codepen.io/hmcka/pen/vYBgZVN). Yes, I want to use plain JS.
function toggleShimmer(e) {
box.classList.add("shimmer");
}
I don't understand why what's there originally stops working, but I wonder if it has something to do with the fact that my CSS that I am adding is attached to a wrapper and the JavaScript is attached to the items within the wrapper.
I have tried a few things to fix this. First I tried to put a timer on the add.classList so that the style could be removed afterwards. When I did this, however, the style would show up again when I clicked on the check boxes. The other thing that I tried to do was adjust the z-index of the list items.
Any suggestions would be appreciated by this beginner.
const addItems = document.querySelector('.add-items');
const itemsList = document.querySelector('.plates');
const items = JSON.parse(localStorage.getItem('items')) || [];
const box = document.querySelector('#rectWrapper');
function addItem(e) {
e.preventDefault();
const text = (this.querySelector('[name=item]')).value;
const item = {
text,
done: false
};
items.push(item);
populateList(items, itemsList);
localStorage.setItem('items', JSON.stringify(items));
this.reset();
}
function populateList(plates = [], platesList) {
platesList.innerHTML = plates.map((plate, i) => {
return `
<li>
<input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ''} />
<label for="item${i}">${plate.text}</label>
</li>
`;
}).join('');
}
function toggleDone(e) {
if (!e.target.matches('input')) return; // skip this unless it's an input
const el = e.target;
const index = el.dataset.index;
items[index].done = !items[index].done;
localStorage.setItem('items', JSON.stringify(items));
populateList(items, itemsList);
}
function toggleShimmer(e) {
box.classList.add("shimmer");
}
window.addEventListener("load", toggleShimmer);
box.addEventListener('mouseenter', toggleShimmer);
addItems.addEventListener('submit', addItem);
itemsList.addEventListener('click', toggleDone);
populateList(items, itemsList);
html {
/* background-color: #B01E84B01E84; */
background: rgba(153, 25, 117, 1);
background: -moz-linear-gradient(-45deg, rgba(153, 25, 117, 1) 0%, rgba(212, 19, 157, 1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(153, 25, 117, 1)), color-stop(100%, rgba(212, 19, 157, 1)));
background: -webkit-linear-gradient(-45deg, rgba(153, 25, 117, 1) 0%, rgba(212, 19, 157, 1) 100%);
background: -o-linear-gradient(-45deg, rgba(153, 25, 117, 1) 0%, rgba(212, 19, 157, 1) 100%);
background: -ms-linear-gradient(-45deg, rgba(153, 25, 117, 1) 0%, rgba(212, 19, 157, 1) 100%);
background: linear-gradient(135deg, rgba(153, 25, 117, 1) 0%, rgba(212, 19, 157, 1) 100%);
box-sizing: border-box;
/* background: url('http://wes.io/hx9M/oh-la-la.jpg') center no-repeat; */
/* background-size: cover; */
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-family: Futura, "Trebuchet MS", Arial, sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* svg {
fill:white;
background: rgba(0,0,0,0.1);
padding: 20px;
border-radius: 50%;
width: 200px;
margin-bottom: 50px;
} */
.wrapper {
padding: 20px;
max-width: 350px;
background-color: #7A0857;
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
}
.shimmer {
position: relative;
overflow: hidden;
/* width: 50px; */
/* height: 50px; */
display: inline-block;
/* margin: 25px 0 25px 25px; */
/* border-radius: 5px; */
color: #fff;
}
/*The "shine" element */
.shimmer:after {
content: "";
position: absolute;
top: -110%;
left: -210%;
width: 200%;
height: 200%;
opacity: 0;
transform: rotate(30deg);
background: rgba(255, 255, 255, 0.13);
background: linear-gradient( to right, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100%);
/* display: none; */
display: block;
/* display: inline; */
}
/* Hover state - trigger effect */
.shimmer:hover:after {
opacity: 1;
top: -40%;
left: -40%;
transition-property: left, top, opacity;
transition-duration: 1.4s, 1.4s, 0.3s;
transition-timing-function: ease;
}
/* Active state */
.shimmer:active:after {
opacity: 0;
}
h2 {
text-align: center;
margin: 0;
font-weight: 200;
}
.plates {
margin: 0;
padding: 0;
text-align: left;
list-style: none;
}
.plates li {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
padding: 10px 0;
font-weight: 100;
display: flex;
}
.plates label {
flex: 1;
cursor: pointer;
}
.plates input {
display: none;
}
.plates input+label:before {
content: '⬜️';
margin-right: 10px;
}
.plates input:checked+label:before {
content: '🌮';
}
.add-items {
margin-top: 20px;
}
.add-items input {
padding: 10px;
outline: 0;
border: 1px solid rgba(0, 0, 0, 0.1);
}
<div id="rectWrapper" class="wrapper">
<h2>TO-DO LIST</h2>
<p></p>
<ul class="plates">
<li>Loading Tapas...</li>
</ul>
<form class="add-items">
<input type="text" name="item" placeholder="Item Name" required>
<input type="submit" value="+ Add Item">
</form>
</div>

There is a pseudo element (shimmer:after) over the form, preventing you from clicking on the input field or add button.
The easiest solution is to use pointer-events to make the shimmer "transparent" to mouse events:
.shimmer:after {
pointer-events: none;
}

object contents lost when opening new page within window

I am making the transition over from Desktop .NET development to Web Development and I have just run into something that I don't understand. I was under the impression that when defining global variables if you opened a new webpage in the sane session the variable would still be accessible in memory to prevent the need to reload it. Can someone please clarify this matter?
I am loading a JSON database into memory as an array of objects var PlayerDatabase. I created an intelligent search bar to select a player and open a page with information about them. When opening the new page the PlayerDatabase is undefined.
Initial Search Bar page:
/*
window.fn = {};
var playerDatabase = [];
var count = 0;
window.fn.open = function() {
var menu = document.getElementById('menu');
menu.open();
};
window.fn.load = function(page) {
var menu = document.getElementById('menu');
var navi = document.getElementById('navi');
menu.close();
navi.resetToPage(page, { animation: 'fade' });
};
// Data Load Event
function showModal() {
var modal = document.querySelector('ons-modal');
modal.show();
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
playerDatabase = JSON.parse(this.responseText);
count = $(playerDatabase).toArray().length;
modal.hide();
console.log(count);
}
};
var requestURL = 'dataURL';
xmlhttp.open("GET", requestURL, true);
xmlhttp.send();
}
*/
// Search Bar Filter Logic
function searchPlayers() {
var input, filter, ul, li, a, i;
input = document.getElementById("searchBarInput");
filter = input.value.toUpperCase();
div = document.getElementById("dropdownItems");
li = div.getElementsByTagName("li");
// remove all current items
for (i = li.length - 1; i > -1; i--) {
div.removeChild(li[i]);
}
// check for min length
if (filter.length < 3) {
$('#dropdownItems').append("<li><a>Please input at least 3 characters.</a></li>");
} else {
// Here I add filtered items to the drop dwon
$('#dropdownItems').append("<li><a href='playerPage.html?playerID=" + "playerID" + "'>" + "Player Name" + " - " + "Player Position" + "</a></li>");
}
}
// Search Bar focus lost
$(document).on("focusout", "#searchBarInput input", function() {
var div = document.getElementById("dropdownItems");
var li = div.getElementsByTagName("li");
// remove all current items
for (i = li.length - 1; i > -1; i--) {
div.removeChild(li[i]);
}
});
/* * Copyright (c) 2012 Thibaut Courouble
* Licensed under the MIT License
================================================== */
a {
color: #1e7ad3;
text-decoration: none;
font-size: 12px;
}
a:hover {
text-decoration: underline
}
input {
font-size: 13px;
color: #555860;
}
.search {
position: relative;
margin: 0 auto;
}
.search input {
height: 26px;
width: 100%;
padding: 0 12px 0 25px;
background: white url("https://cssdeck.com/uploads/media/items/5/5JuDgOa.png") 8px 6px no-repeat;
border-width: 1px;
border-style: solid;
border-color: #a8acbc #babdcc #c0c3d2;
border-radius: 13px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
}
.search input:focus {
outline: none;
border-color: #66b1ee;
-webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
}
.search input:focus+.results,
.search .results:hover {
display: block
}
.search .results {
display: none;
position: absolute;
top: 35px;
left: 0;
right: 0;
z-index: 10;
padding: 0;
margin: 0;
border-width: 1px;
border-style: solid;
border-color: #cbcfe2 #c8cee7 #c4c7d7;
border-radius: 3px;
background-color: #fdfdfd;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
background-image: linear-gradient(top, #fdfdfd, #eceef4);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.search .results li {
display: block;
}
.search .results li:first-child {
margin-top: -1px
}
.search .results li:first-child:before,
.search .results li:first-child:after {
display: block;
content: '';
width: 0;
height: 0;
position: absolute;
left: 50%;
margin-left: -5px;
border: 5px outset transparent;
}
.search .results li:first-child:before {
border-bottom: 5px solid #c4c7d7;
top: -11px;
}
.search .results li:first-child:after {
border-bottom: 5px solid #fdfdfd;
top: -10px;
}
.search .results li:first-child:hover:before,
.search .results li:first-child:hover:after {
display: none
}
.search .results li:last-child {
margin-bottom: -1px
}
.search .results a {
display: block;
position: relative;
margin: 0 -1px;
padding: 6px 40px 6px 10px;
color: #808394;
text-color: #808394;
font-weight: 500;
text-shadow: 0 1px #fff;
border: 1px solid transparent;
border-radius: 3px;
}
.search .results a span {
font-weight: 200
}
.search .results a:before {
content: '';
width: 18px;
height: 18px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -9px;
background: url("https://cssdeck.com/uploads/media/items/7/7BNkBjd.png") 0 0 no-repeat;
}
.search .results a:hover {
text-decoration: none;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
border-color: #2380dd #2179d5 #1a60aa;
background-color: #338cdf;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
background-image: linear-gradient(top, #59aaf4, #338cdf);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}
:-moz-placeholder {
color: #a7aabc;
font-weight: 200;
}
::-webkit-input-placeholder {
color: #a7aabc;
font-weight: 200;
}
.lt-ie9 .search input {
line-height: 26px
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<!-- Page Content -->
<header class="w3-display-container w3-content w3-wide" style="max-width:1500px;" id="home">
<img class="w3-image w3-black" src="http://www.sportssabermetrics.net/html/images/header_image.jpg" alt="Header Image" width="100%">
<div class="w3-display-middle w3-center" style="width:60%;">
<!-- Search Bar -->
<section class="main">
<div id="myDropdown" style="margin: auto; font-size: 14px;">
<form class="search" method="post"><input type="text" id="searchBarInput" placeholder="Search for NFL Player" onkeyup="searchPlayers()" />
<ul id="dropdownItems" class="results">
</ul>
</div>
</section>
</div>
</header>
</body>
Seperate Javascript file to handle New Page
// Load full HTML page prior to making calls
$(function() {
// check to see if data has loaded
if (count > 0) {
// query URL parameters
var url_string = window.location.href;
var url = new URL(url_string);
var c = url.searchParams.get("playerID");
var player;
for (i=0; i < count; i++) {
if (playerDatabase[i].playerID = c) {
player = playerDatabase[i];
{ break; }
}
}
} else {
// Load Data
showModal();
console.log(count);
}
});

Here I'll do it since he originally beat me by a couple seconds (I upvoted) and expand. Variables do not persist in the browser from session to session. you need cookies or localStorage for that.
HOWEVER, note there are differences between the two. If you are planning to support a wide variety of browsers and users, you'll need to check that local storage is available or else your user will be toast. If you are planning on sending this data ever back to the server, then cookies is still the preferred method if you really need it to persist.
I, like you, moved from ASP .Net into the web, and something to consider is, do you really need the front end to remember and store this data? For some things that is a security issue as well. Many times it can actually be preferable to pass the data you need back and forth, and when you are done it's disposed rather than physically caching it. I would argue in full web you should be polling for data every page load from the server even if it's redundant. That way you control what the user has, the front end is dumb, and you are sure the data is not tampered with which becomes very important...
I would say, tread lightly with storage outside of session tokens etc on the front end, it can get to be a mess very quickly and is very un-webby. How are you going to insure that the data is not stale, what if modifications are made? How long are you going to have the data persist without a refresh, when you get a large number of users, if they don't wipe their cache and you let them store something for x-length of time, you're going to run into this and it's a fundamental design flaw. Even if you refresh the data every few minutes, when you get to scale that is an eternity and you will get data conflicts. Decide if you really, really, really need this stored on the (and each) user's machine.

Dropdown menu with jQuery and nth-child

I just made a dropdown menu with jQuery and a little bit
special html structure.
This is how my structure looks like.
And this is the jsFiddle, which was created: https://jsfiddle.net/rxLg0bo4/10/
But I want it to work like a proper dropdown menu. So that means it should show the submenu_link when you hover over the menu. f.e. if you hover over the menu_link q, the the submenu_link 1-5 should dropdown.
This is the jQuery:
$(document).ready(function () {
$('.menu_link').ready(function () {
$("[id$=pnlSubmenu]").hide();
});
$('.menu_link').hover(function () {
$("[id$=pnlSubmenu]").slideDown(200);
});
$('[id$=pnlSubmenu]').mouseenter( function () {
$(this).show();
});
$('[id$=pnlSubmenu]').mouseleave(function () {
$(this).hide();
});
$('.menu_link').mouseleave(function () {
$("[id$=pnlSubmenu]").hide();
});
});
And this is my ASP.NET code:
<nav id="menu">
<asp:Panel ID="pnlMenu" runat="server"></asp:Panel>
<asp:Panel ID="pnlSubmenu" runat="server">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</asp:Panel>
</nav>
Can i do this with the nth-child anyhow?
I would also like the have the links in a list style how can I do that?

Here is a solution i found with your markup.
Used CSS to beautify it.
Jquery:
What did you do?
when .menu_link is hovered i find what index it has.
The index finds if its the first child or second etc.
When we have this magic index number var nthNumber
we can use it to find its corresponding .submenu_panel (I'm guessing here since i cant see all your code) and hide or show this panel
Eg. when we hover the first .menu_link,
we will show the first .submenu_panel
And we do the same for the second and third etc.
$(".menu_link, .submenu_panel").hover(function() {
//Hover inn function
var nthNumber = $(this).index() + 1;
$("[id$=Submenu]").show();
$("[id$=Submenu] .submenu_panel:nth-of-type(" + nthNumber + ")").show();
}, function() {
//Hover out function
$("[id$=Submenu]").hide();
var nthNumber = $(this).index() + 1;
$("[id$=Submenu] .submenu_panel:nth-of-type(" + nthNumber + ")").hide();
});
#menu [id$=Menu] {
border: 2px solid #2980b9;
border-radius: 5px;
background-color: #3498db;
}
#menu [id$=Menu] .menu_link {
padding: 10px 10px;
display: inline-block;
font-size: 1.2em;
}
#menu [id$=Menu] .menu_link:hover {
background-color: #45a9ec;
//border: 2px solid #2980b9;
border-radius: 2px;
cursor: pointer; //Visual only (REMOVE)!
}
#menu [id$=Submenu] {
display: none;
}
#menu [id$=Submenu] .submenu_panel {
display: none;
background-color: #45a9ec;
border: 2px solid #2980b9;
border-top: none;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
}
#menu [id$=Submenu] .submenu_panel .submenu_link {
position: relative;
display: block;
text-indent: 15px;
font-size: 1.1em;
padding: 4px 0px;
border-bottom: 1px solid #2980b9;
}
#menu [id$=Submenu] .submenu_panel .submenu_link:hover {
background-color: #56bafd;
cursor: pointer; //ONLY FOR VISUAL(REMOVE)!
}
#menu [id$=Submenu] .submenu_panel .submenu_link:first-child {
border-top: 1px solid #2980b9;
margin-top: -5px;
padding-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu">
<div id="pn1Menu">
<a class="menu_link">Lorem</a>
<a class="menu_link">Ipsum</a>
<a class="menu_link">Dollar</a>
<a class="menu_link">Si</a>
<a class="menu_link">Amet</a>
</div>
<div id="pn1Submenu">
<div class="submenu_panel">
<a class="submenu_link">100</a>
<a class="submenu_link">200</a>
<a class="submenu_link">300</a>
<a class="submenu_link">400</a>
<a class="submenu_link">500</a>
<a class="submenu_link">600</a>
</div>
<div class="submenu_panel">
<a class="submenu_link">010</a>
<a class="submenu_link">020</a>
<a class="submenu_link">030</a>
<a class="submenu_link">040</a>
<a class="submenu_link">050</a>
<a class="submenu_link">060</a>
</div>
<div class="submenu_panel">
<a class="submenu_link">1001</a>
<a class="submenu_link">2002</a>
<a class="submenu_link">3003</a>
<a class="submenu_link">4004</a>
<a class="submenu_link">5005</a>
<a class="submenu_link">6006</a>
</div>
</div>
</nav>

i tweaked quite a bit https://jsfiddle.net/rxLg0bo4/19/ You will have to try it out with a real page to know for sure.
$(document).ready(function () {
$('.menu_link').ready(function () {
$("[id$=pnlSubmenu]").hide();
});
$('.menu_link1').hover(function () {
$("[id$=pnlSubmenu]").slideDown(200);
$("[class$=submenu_panel]").css("left", "0px");
});
$('.menu_link2').hover(function () {
$("[id$=pnlSubmenu]").slideDown(200);
$("[class$=submenu_panel]").css("left", "12%");
});
$('.menu_link3').hover(function () {
$("[id$=pnlSubmenu]").slideDown(200);
$("[class$=submenu_panel]").css("left", "25%");
});
$('.menu_link4').hover(function () {
$("[id$=pnlSubmenu]").slideDown(200);
$("[class$=submenu_panel]").css("left", "37%");
});
$('.menu_link5').hover(function () {
$("[id$=pnlSubmenu]").slideDown(200);
$("[class$=submenu_panel]").css("left", "50%");
});
$('[id$=pnlSubmenu]').mouseenter(function () {
$(this).show();
});
$('[id$=pnlSubmenu]').mouseleave(function () {
$(this).hide();
});
$('.menu_link1').mouseleave(function () {
$("[id$=pnlSubmenu]").hide();
});
$('.menu_link2').mouseleave(function () {
$("[id$=pnlSubmenu]").hide();
});
$('.menu_link3').mouseleave(function () {
$("[id$=pnlSubmenu]").hide();
});
$('.menu_link4').mouseleave(function () {
$("[id$=pnlSubmenu]").hide();
});
$('.menu_link5').mouseleave(function () {
$("[id$=pnlSubmenu]").hide();
});
});
#pnlMenu .menu_link:hover #pnlSubmenu .submenu_link {
height:50px;
display:block;
}
#wrapper_menu {
margin-bottom: 50px;
position: relative;
z-index: 1;
}
#menuicon {
margin: 0 auto;
width: 27px;
display: none;
}
.menubar {
background: #001155;
height: 4px;
width: 27px;
margin-bottom: 5px;
border-radius: 2px;
position: relative;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#menuicon:hover #menubar-top {
transform: translate(0px, 9px) rotate(45deg);
}
#menuicon:hover #menubar-mid {
opacity: 0;
}
#menuicon:hover #menubar-bottom {
transform: translate(0px, -9px) rotate(-45deg);
}
#menu {
height: 44px;
width: 980px;
margin: 0 auto;
border-radius: 5px;
background: rgb(229, 229, 229);
/* Old browsers */
background: -moz-linear-gradient(top, rgba(229, 229, 229, 0.95) 0%, rgba(193, 192, 194, 0.95) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(229, 229, 229, 0.95)), color-stop(100%, rgba(193, 192, 194, 0.95)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(229, 229, 229, 0.95) 0%, rgba(193, 192, 194, 0.95) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(229, 229, 229, 0.95) 0%, rgba(193, 192, 194, 0.95) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(229, 229, 229, 0.95) 0%, rgba(193, 192, 194, 0.95) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(229, 229, 229, 0.95) 0%, rgba(193, 192, 194, 0.95) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5e5e5', endColorstr='#c1c0c2', GradientType=0);
/* IE6-9 */
-webkit-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.5);
}
#pnlMenu {
width: 100%;
height: auto;
}
.menu_link1, .menu_link2, .menu_link3, .menu_link4, .menu_link5, .menu_link6 {
position:relative;
font-size: 15px;
line-height: 44px;
padding: 0 40px;
text-align:left;
}
.menu_link1:active, .menu_link2:active, .menu_link3:active, .menu_link4:active, .menu_link5:active, .menu_link6:active, .menu_link1:focus, .menu_link2:focus, .menu_link3:focus, .menu_link4:focus, .menu_link5:focus, .menu_link6:focus, {
color: #2d98e5;
border-radius: 5px;
background: rgb(229, 229, 229);
/* Old browsers */
background: -moz-linear-gradient(top, rgba(193, 192, 194, 0.95) 0%, rgba(229, 229, 229, 0.95) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(193, 192, 194, 0.95)), color-stop(100%, rgba(229, 229, 229, 0.95)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(193, 192, 194, 0.95) 0%, rgba(229, 229, 229, 0.95) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(193, 192, 194, 0.95) 0%, rgba(229, 229, 229, 0.95) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(193, 192, 194, 0.95)) 0%, rgba(229, 229, 229, 0.95) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(193, 192, 194, 0.95) 0%, rgba(229, 229, 229, 0.95) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(endColorstr='#c1c0c2', startColorstr='#e5e5e5', GradientType=0);
/* IE6-9 */
-webkit-box-shadow: inset 0px 0px 7px 0px rgba(50, 50, 50, 0.3);
-moz-box-shadow: inset 0px 0px 7px 0px rgba(50, 50, 50, 0.3);
box-shadow: inset 0px 0px 7px 0px rgba(50, 50, 50, 0.3);
}
.last_menu_link {
float: right;
}
.submenu_link {
}
.submenu_panel {
width: 15%;
height: auto;
background: gray;
position:relative;
overflow: hidden;
transition: all 0.2s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="wrapper_menu">
<div id="menuicon">
<div class="menubar" id="menubar-top"></div>
<div class="menubar" id="menubar-mid"></div>
<div class="menubar" id="menubar-bottom"></div>
</div>
<nav id="menu">
<div id="pnlMenu"> <a class="menu_link1" href="Index.aspx?category=1">menu1</a><a class="menu_link2" href="Index.aspx?category=2">menu2</a><a class="menu_link3" href="Index.aspx?category=4">menu3</a><a class="menu_link4" href="Index.aspx?category=5">menu4</a><a class="menu_link5" href="Index.aspx?category=6">menu5</a><a class="menu_link6 last_menu_link" href="Index.aspx?category=8">menu6</a>
</div>
<div id="pnlSubmenu" style="display:none">
<div class="submenu_panel" style="height:100px"> <a class="submenu_link" href="Pages/Chart.aspx?id=7">submenu1</a><a class="submenu_link" href="Pages/Chart.aspx?id=8">submenu2</a>
</div>
<div class="submenu_panel" style="height:100px"> <a class="submenu_link" href="Pages/Chart.aspx?id=4">Link1</a>
<a class="submenu_link" href="Pages/Chart.aspx?id=11">Link2</a>
</div>
</div>
</nav>
</div>

I think this is what you are asking for?
Use CSS rather than jquery. This should get you started.
https://jsfiddle.net/cshanno/bgryLLwo/
HTML
<ul class="menu">
<li>Link
<ul class="submenu">
<li>Example 1</li>
<li>Example 2</li>
</ul>
</li>
<li> Link 2</li>
</ul>
CSS
.menu {
border:1px solid black;
}
.menu, .menu li {
padding:0;
margin:0 10px;
display:inline-block;
list-style:none;
}
.menu ul {
display:none;
}
.menu li:hover ul {
display:block;
position:absolute;
padding:0;
}
.menu li:hover ul li {
margin:0 0;
display:block;
border: 1px solid black;
}
.menu li ul li:hover {
background-color:skyblue;
}

.click event on li plus link redirect

I am not a programmer, just know a good amount of css and html, but almost no javascript. I am trying to implement a free menu I found (thanks to stu nichols), but I am running into an issue I think is the the jquery script. I contacted the designer but he was not able to help.
I input the menu into jsfiddle.
http://jsfiddle.net/3vAaN/
HTML:
<ul class="leftnav1">
<li>tier1
<ul>
<li>t1 s1</li>
<li>t1 s2</li>
<li>t1 s3</li>
</ul>
</li>
<li>tier2
<ul>
<li>t2 s1</li>
<li>t2 s2</li>
<li>t2 s3</li>
<li>t2 s4</li>
<li>t2 s5</li>
</ul>
</li>
</ul>​
CSS:
.leftnav1 { font: bold 15px/15px arial, sans-serif; text-align: center; border: 5px solid #400; }
.leftnav1 {background:#600; width:180px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
.leftnav1 ul {background:#700; width:170px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
.leftnav1 ul ul {background:#800; width:160px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
.leftnav1 ul ul ul {background:#900; width:150px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
.leftnav1 ul { display: none; }
.leftnav1, .leftnav1 ul { padding: 10px 5px; margin: 0; list-style: none; -o-border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -o-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); -ms-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5); }
.leftnav1 li a { color: #ddd; text-indent: 0; text-decoration: none; display:block; }
.leftnav1 li { cursor: pointer; width: 100%; padding: 5px 0; }
.leftnav1 li a:hover { color: #fff; }
.leftnav1 li.has_ul { color: #fc0; }
.leftnav1 li.has_ul:hover { color: #0cf; }
.leftnav1 li.clicked { color: #0cf; }
​JavaScript:
$(document).ready(function () {
timer=0;
/* time in milliseconds */
collapse = 10000;
$(".leftnav1 li:has(ul)").click(function (event) {
if (this == event.target) {
$(this).toggleClass('clicked').children('ul').slideToggle();
$(this).find('li:has(ul)').removeClass('clicked').find("ul").slideUp();
$(this).siblings().removeClass('clicked').find("ul").slideUp();
}
}).addClass('has_ul');
$(".leftnav1").mouseover(function() {
clearTimeout(timer);
});
$(".leftnav1").mouseleave(function() {
timer = window.setTimeout(function(){
$('.leftnav1 li > a').siblings().children().removeClass('clicked').find('ul').slideUp();
$('.leftnav1 li > a').parent().siblings().removeClass('clicked').find('ul').slideUp();
}, collapse);
});
});
​
If you look at the menu, the sliding works correctly on the first tier because it does not contain a link within the li.
On tier 2, I add a link within the li which also has a sub ul. The sliding only works if you click on the very tip top of the li area. Not on the whole li area. My guess is that the link fires if you click anywhere on the word, not allowing the slide function in the script to fire, and vice versa when you click the tip top of the li area.
I have tried display:block in every possible class that might solve it, and it hasn't. Is it possible that jquery cannot fire a function and follow a link at the same time? The implementation of the menu will be in a static left hand column of an ecommerce site, and the links will be to categories within the site that load in the inner page area.

Rewrite the function to fire when clicking on the link (<a>). At the end of the event handler, make sure you include return false or use preventDefault()
See http://api.jquery.com/event.preventDefault/