Develop Reference

usage of spread syntax code with map function

I have some familiarity with the ... operatorspread syntax
and recently I saw a developer use the spread syntax (as attached in snippet as ) [...document.querySelectorAll('#wrapper button')].map((button)=> button.addEventListener('click',Add));
the above ... spread syntax with the map function looks tough for me to understand, can someone help me understand it in simple terms conceptually..thanks for your time
document.addEventListener('DOMContentLoaded', () => {
var temp = [];
var arrayOfStrings = [];
console.log(document.querySelectorAll('#wrapper button')) //choose button only in the wrapper div and not the others like CLR
//listen to only button events(other than the CLR)
document.querySelectorAll('#wrapper button').forEach(button => button.addEventListener('click', Calculat));
//listen to CLR button events
document.getElementById('clear1').addEventListener('click', () => {
temp = [];
arrayOfStrings = [];
document.querySelector('.my_flex').textContent = ('');
});
function Calculat(e) {
z = e.target.innerText;
// console.log(z);
document.querySelector('.my_flex').append(z); //append to the flex object
if (z == '=') {
document.querySelector('.my_flex').append(eval(arrayOfStrings));
return false;
}
temp.push(z);
arrayOfStrings = temp.join("");
}
});
div {
width: 7cm;
}
button {
border: 0;
line-height: 3.5;
padding: 0 20px;
font-size: 1rem;
text-align: center;
/*align the text f the button to the center*/
color: #fff;
text-shadow: 1px 1px 1px #000;
border-radius: 10px;
background-color: rgba(220, 0, 0, 1);
background-image: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0));
box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);
}
button:hover {
background-color: green;
}
button {
border: 0;
line-height: 3.5;
padding: 0 20px;
font-size: 1rem;
text-align: center;
color: #fff;
text-shadow: 1px 1px 1px #000;
border-radius: 10px;
background-color: rgba(220, 0, 0, 1);
background-image: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0));
box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);
}
button:hover {
background-color: green;
}
.my_flex {
display: flex;
background-color: tomato;
margin: 8px;
padding: 20px;
font-size: 30px;
}
<a>Calculations(Simple Mathematics only, example: 1+7,2*8 etc):--</a>
<div id="wrapper">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<br>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>+</button>
<button>-</button>
<button>*</button>
<button>0</button>
<button>(</button>
<button>)</button>
<button>/</button>
<button>=</button>
<button>.</button>
</div>
<div><button id="clear1">CLEAR</button></div>
<div class="my_flex">
<!--just to get nice output on flex canvas -->
</div>

It's not just pointless to use the array spread syntax here, it's also pointless (and indeed confusing) to use map. This should rather use the forEach method:
document.querySelectorAll('#wrapper button').forEach(button => {
button.addEventListener('click', calculate);
});
or even better just a simple for loop:
for (const button of document.querySelectorAll('#wrapper button')) {
button.addEventListener('click', calculate);
}

It's because that the result returned by querySelector is not an instance of Array.In other words the result has no map method and destructuring it inside of array will let you to use Array.prototype.map method on newly created array.

How to make a progress bar that fills every time a textbox is filled

Today i'm trying to put a progress bar that fills every time the user fills a textbox, like this : let's say i have 10 textbox on the screen if none is filled i want the progress bar to be at 0% but if the user fills 5 of them i want it to be 50%. I found how to make the progress bar but can't figure how to make this condition to work with a TextBoxFor
If someone could help

Lets say yours textbox (input type=text ?).
<input type="text" class="check-fill">
You can add the jQuery keyup event on each input field, to check the number of input fields already done.
$(function(){ //When document is ready
$(".check-fill").keyup(function(){ //Prefer keyup so you check after, in case the user delete his entry.
var $fields = $(".check-fill");
var count = 0;
$fields.each(function(){
if($(this).val().length > 0)
count++;
});
});
var percentage = Math.floor(count * 100 / $fields.length);
//Here you have your percentage;
});
You can replace the keyup event by the "focusout" one, to reduce the numbers of verifitcations, but it will only check when the user click out of the input field.

If you are using JQuery you could use Progressbar. Then you can apply a certain class to all inputs OR a selector that apply to all of them, and finally attach an event to capture when they are not empty.
Example:
The form can be something like this:
<form class="progessform" ...>
<input type="text" ..../>
<input type="text" ..../>
</form>
And you can select these by using .progressform input[type=text] in a jquery script:
$('.progressform input[type=text]').on('change', function (e) {
var total = count all .progressform input[type=text] within the same form
var filled = count all .progressform input[type=text] values that are not empty
modify your progressbar according to the count: filled * 100 / total
}
This event is attached to every input text inside your form with class progressform, and it is called anytime the input text is changed.
Note that you might need to do extra things on this to distinguish if the input is validated correctly or not (ie, not to count some input in the progressbar if the value is not correct, like an invalid email or alphab characters in a numerical phone input)

** **PROGRESS BAR FILLUP ACCORDING TO TIME SET IN SECOUNDS ** **
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 100); // set time ex: 100 as 10s & 1000 as 1min
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("label").innerHTML = width * 1 + '%';
}
}
return false;
}
<style>
<body>
#label {
text-align: center;
line-height: 22px;
color: white;
}
.meter {
height: 20px;
position: relative;
margin: 60px 0 20px 0;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
-moz-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
display: block;
width:1%;
height: 100%;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(43,194,83)), color-stop(1, rgb(84,240,84)) );
background-image: -moz-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );
-webkit-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
-moz-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.meter > span:after, .animate > span > span {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent) );
background-image: -moz-linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent );
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px;
-webkit-animation: move 1s linear infinite;
-moz-animation: move 2s linear infinite;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
</style>
<body onload="move()">
<div id="myProgress" class="meter">
<span id="myBar">
<center><div id="label">1%</div></center>
</span>
</div>
<br>
</body>

Converting Javascript Array to PHP Array

I'm trying to get data from import io in php format, however that doesn't work with pagination, so have had to do it in javascript (code below) however i need to put it into a database so I guess php would be the best (or at least easiest for me). My question is how can i convert a javascript array into a php array.
thanks,
MsKazza
<!DOCTYPE html>
<html>
<head>
<title>Import•io Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- 1. Include the client library -->
<script src="https://cdn.import.io/js/2.0.0/importio.js"></script>
<!-- 2. Configure the library -->
<script type="text/javascript">
importio.init({
"auth": {
"userGuid": "4e3524b0-5ff7-4102-9710-f96246a8303c",
"apiKey": "oX9ksC/OQXxeO6dXYlNTgl8Juuh2SkCpdih2f0xH9d+3tzoBT0CsFuLr+ZlWPxVLbylL9XHQ8dLxNJvrKc2AUg=="
},
"host": "import.io"
});
// Data and done callbacks
var dataCallback = function(data) {
console.log("Data received", data);
for (var i = 0; i < data.length; i++) {
var d = data[i];
for (var k in d.data) {
document.write("<i>" + k + "</i>: " + d.data[k] + "<br />");
}
document.write("<hr>");
}
}
var doneCallback = function(data) {
console.log("Done, all data:", data);
document.write("<b>Done</b><hr>");
}
// 3. Do the query (when the function is called)
var doQuery = function() {
// Query for tile goldenwherewhen
importio.query({
"connectorGuids": [
"83c211ab-91a1-4e54-9838-dc086bc1b527"
],
"input": {
"what": "hotels",
"where": "ireland"
}
}, { "data": dataCallback, "done": doneCallback });
}
</script>
<style>body { text-align: center; } button { line-height: 20px; color: #333; text-align: center; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; cursor: pointer; border: 1px solid #CCC; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05); outline: 0; padding: 11px 19px; font-size: 17.5px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; color: #FFF; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #EC3C87; background-image: -moz-linear-gradient(top,#EE4E93,#E92076); background-image: -webkit-gradient(linear,0 0,0 100%,from(#EE4E93),to(#E92076)); background-image: -webkit-linear-gradient(top,#EE4E93,#E92076); background-image: -o-linear-gradient(top,#EE4E93,#E92076); background-image: linear-gradient(to bottom,#EE4E93,#E92076); background-repeat: repeat-x; border-color: #E92076 #E92076 #AC1153; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee4e93',endColorstr='#ffe92076',GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); }</style>
<body>
<button onClick="doQuery()">Query</button>
<p style="margin-top: 0"><img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF0AAABaCAMAAADtqqpJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAvFQTFRFUVJST1BQUFFR/////f39TE1N/v7+TU5OUlNTTk9PSElJSUpK/Pz8WltbU1RU+Pj4SktLRkdHS0xM+/v7R0hI9/f3YmNjV1hYiouL5ubm7e3tVVZW9PT0VFVVXF1dQUJCRUZGWFlZ3t7e39/f9vb22dnZ8/PzzMzM0NDQ5OTk8fHx6urqyMjI+vr6X2Bg+fn5YGFhYWJif4CA8PDwjY6O6enp7Ozsc3R0cXJyi4uL7u7uZ2hoz8/PhoeHtre3kJGRmJmZQEFBqqqq2tvbkpOTnJ2d7+/vg4ODeXp6o6Oj9/j4goOD6+vrr7Cw1dXV1NTUbG1tysrKwcHB1dbWh4iIlJSUxMTEi4yMZmdnxsfHcnJyVldXd3h4vr6+TE5Orq+vZGVlY2RkQ0RE4eHhuLi44uLi3d3dzs/P09PT5+jofn9/x8fH29zcl5mZl5eXlpeXRkhIamtrra2tp6ioWVpabW5uXV5ePT4+cHFxw8PDQUNDx8jI19fX6OjobG5uPD09yMnJpqampaWlampqpqiok5WVvb29REZGnZ6era6u/v//1tfXvr+/kJCQdnd3gICA9PX1g4SE4ODgrK2tS01Nk5SUdHV1wMDAv8DAwMHBaWpq6unpREVFhIWFt7e38vLyv7+/fX19fX9/W1xccXFxioqKpqenaGhoTU1NXmBg4+Tke3x8QkNDZGRk0dHRWVtbZmVlh4eHf39/z9DQj4+Ps7Ozb3Bwc3Nz5eXljo+PSkxMUFBQ8vPz3Nzc9fX13NvbVVVVVFRU3t3deHl5oKCgU1NTdXZ25+fnuLm5ubm5a2xspKWlenp6wcLC9vf38fLyuru71NXVqKiow8TEm5ycsbKysbGx7e7uaGpqhoaGUlJSfn5+zc7O1tbWvLy8zc3N0tLS6uvrysvLoaKinp6edXV1/f7+zM3NiImJaGlp2tra8/T0TU9P29vb/Pv7bm9veHp69fb2XF5emZmZ6+rq+vv7s7S0u7y8lJWVZWZm////lMTowQAAAPt0Uk5T/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDjnwPIAAAD80lEQVR42uzYU9AmRxQG4NMYf7bx27bXtm1nrZgbZze2bdu2bdtWX2X+3eAitZsvmz4Xqdq5mpqaear7nHd6ahqEnEPNE/zvV0GKzU49/9W9vsXS/RFrv6U/R5H00gsogPP0ShzdnTKAeK8r5ih6STsBMOC0WziGvsgLADpNN1QUydcd81123Slo2X2jfum6+wPTHnuc6iQdebtctp4YZJedVk1vPoMkV5dzyfrLTlsnzp79Q0SzBh/CperqGz67MGD1sJ92X6WcMPW9ei5RZ/11e+gQmD7ckX810FWXTqmWp7OCTxWAaQA1S0T0ydY+hjn5QAeTpp+TtF+lyTq5coodnz0ujit05llRafp5BtDQeJNsmMiFKgqPpob3mgmSdHZ3nILyzWKdZk7p7ebweRGT3h7Pk6PzTjuOesmyEAkcti1CTZvDG2sq5OijXgPwDIr1S4FrQMG21f64tc19mRS97IlLgGj5Yt5sJdPD/phPXkxK3Z8aYqcRnuOisMXQhiUkr+/56yiYS4uY+GGa4ZvUJldXb9wI5kFN9lnT/Yo5PiZZX/jKF6P79Z41thikJSj7y7dbx5Kta1b+Y8TTUC9bZ7/nZMFgRfswJlv/cw41oLUOxNIH3qRYnQksfWQKlE4VS485Dc9yN5ZenKLmLwJJ54UeoEOqkXT10TBc8aIDSXe/NRec8zmWPgAgcxWWXrkyQGZ3YHX1mMsJCSew9K9Ga8ZJUSy9MER8dUj/TUK9z0fJiUGssc8Kw6FdfiSdr81AdiJH0j+vA/pguYqkt63XjNUxrK6WbADl1kos/RkLbjuAIenB7z30nlFHIOl8DoV738Xa4yiZQzyRs7H0WRr4HnAg6Wp/H7iWMSS9tJYatdUCSe/IgN6ApQ/tBvAWq0j6HVkCqYcFjq7OmAnKykos/SEA63mBo7MFOqFT90HS/QfbPb1IIOlPhynNPoukOw5XQOn2I+mNVaD7PhY4OtvkAe31IhydXfYdAWuMQNIjik63FCDpi5KU6osZjl7+tQFm63bx/6aX3WAB1HwpcPQuF4DyCEfRebFLA++xqsDQ+d4hosP6UoGhs+vbNVBc7zgw9B9nOBWA+FE7vmvn9OCdy10GaJ4RQyXpfzWPqbzizKQBNNv1kZCiBxMFbrG1xMGytrHnWl5KzHBFmZCis7xrb358zbhxR0ZH9F3xa58AULJu2Mh/fi433T0praedAWcoUKvP7d3edNV2v+mXpYsXiELsb5BGNdA0XYe6MTk9lqNeemHSqVlkTz0dqGqvmrAwxyjkqKvBz8a+9H5kRfMna44/+a6ck5tzIu0cFolGB6v/N++FtH2xXfou/X+g/ybAAPqmhSv3+0oDAAAAAElFTkSuQmCC" /></p>
</body>
</html>

You can do this in many ways, two of the "best" would be
1, sending variables in the format variable[key] = value php will reconise this and do the the conversion so $_GET['variable']['key'] would contain value. http://php.net/manual/en/language.variables.external.php
2, send it as a JSON string use JSON.stringify(yourArray); (NOTE: IE8 and above support this, older versions need a libary like json2), then in php call json_decode() on the variable. http://php.net/manual/en/function.json-decode.php

CSS curved gradients and box-shadow

Can CSS be used to make a left and right edges of a content container look like this image? I have been trying to figure out a way to do this without using an image, if that is possible.
Here is jsFiddle that I have been working on. The CSS for the "top" class never gets applied. The CSS for the "bottom" class seems to work ok though.
http://jsfiddle.net/kXuQY/
HTML:
<div class="drop-shadow top bottom">
Content here.
</div>
CSS:
.drop-shadow {
/** Create container. Box-shadow here is to color the inside of the container **/
position:relative;
width:50%;
background: none repeat scroll 0 0 #FFFFFF;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
padding:3em;
margin: 2em 20px 4em;
text-align:center
}
.top:before,
.top:after {
/** Generate pseudo-elements ('before' and 'after') and push them behind the container box. Position pseudo-elements ('before', and 'after') and give them dimensions **/
content:"";
position:absolute;
z-index:-1;
top:20px;
left:0;
width:40%;
height:1em;
max-width:150px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(70deg);
-moz-transform:rotate(70deg);
-o-transform:rotate(70deg);
transform:rotate(70deg);
}
.top:after{
/**One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction. This is easily done by overriding only the properties that need to differ **/
right:0;
left:auto;
-webkit-transform:rotate(-70deg);
-moz-transform:rotate(-70deg);
-o-transform:rotate(-70deg);
transform:rotate(-70deg);
}
.bottom:before,
.bottom:after {
/** Generate pseudo-elements ('before' and 'after') and push them behind the container box. Position pseudo-elements ('before', and 'after') and give them dimensions **/
content:"";
position:absolute;
z-index:-2;
top:90px;
left:0;
width:10%;
max-width:150px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(99deg);
-moz-transform:rotate(99deg);
-o-transform:rotate(99deg);
transform:rotate(99deg);
}
.bottom:after{
/**One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction. This is easily done by overriding only the properties that need to differ **/
right:0;
left:auto;
-webkit-transform:rotate(-99deg);
-moz-transform:rotate(-99deg);
-o-transform:rotate(-99deg);
transform:rotate(-99deg);
}

You can use ::before and ::after pseudo elements to achieve the effect, see here.
Example: (Demo)
HTML:
<div id="box">
<h1>css-3-box-shadow</h1>
<p>some text</p>
</div>
CSS:
#box:before, #box:after {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
bottom: 15px;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
content: "";
left: 10px;
max-width: 300px;
position: absolute;
top: 80%;
transform: rotate(-3deg);
width: 50%;
z-index: -1;
}
#box:after {
left: auto;
right: 10px;
transform: rotate(3deg);
}
#box {
background: none repeat scroll 0 0 #DDDDDD;
border-radius: 4px 4px 4px 4px;
color: rgba(0, 0, 0, 0.8);
line-height: 1.5;
margin: 60px auto;
padding: 2em 1.5em;
position: relative;
text-shadow: 0 1px 0 #FFFFFF;
width: 60%;
}

.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/