|
JavaScript - Filtering Lists Based On Variables
Hi, I have a large e-commerce site that runs on a database. There are many products on the site which have 'variables' attached to them, e.g. colour, width, height etc.
I have a script in place to sort the products depending on these variables. Apologies for the length of the code. Code: (function(i) {var u =navigator.userAgent;var e=/*@cc_on!@*/false; var st =
setTimeout;if(/webkit/i.test(u)){st(function(){var dr=document.readyState;
if(dr=="loaded"||dr=="complete"){i()}else{st(arguments.callee,10);}},10);}
else if((/mozilla/i.test(u)&&!/(compati)/.test(u)) || (/opera/i.test(u))){
document.addEventListener("DOMContentLoaded",i,false); } else if(e){ (
function(){var t=document.createElement('doc:rdy');try{t.doScroll('left');
i();t=null;}catch(e){st(arguments.callee,0);}})();}})(sortinit);
var prodlines = new Array(); // for Products
var spanids = new Array();
var lastsorttype = 'default';
var bReadyToSort = false;
var searchlines = new Array(); // for Search Results
var searchspanids = new Array();
var searchlastsorttype = 'default';
var bSearchReadyToSort = false;
var sectlines = new Array(); // for Sections
var sectspanids = new Array();
var sectlastsorttype = 'default';
var bSectReadyToSort = false;
var bSortInitalised = false;
// Search Results Related
function searchreseq(seqtype){ // resequence search results
if ( ! (bSearchReadyToSort || bPageIsLoaded) )
{
alert('Please wait until the page has fully loaded. (SRC)');
return false;
}
searchlines.length = 0;
searchspanids.length = 0;
var spans = document.getElementsByTagName('span');
for ( var i=0; i<spans.length; i++ )
{
if ( spans[i].id.indexOf('searchsortline_') == 0 )
{
searchspanids.push(spans[i]);
searchlines.push({
id: spans[i].id,
price: spans[i].getAttribute('price').replace(/[^\d\.]/g,''),
seq: spans[i].getAttribute('seq'),
pname: spans[i].getAttribute('pname'),
phtml: spans[i].innerHTML
});
}
}
if ( seqtype == 'lowhigh' ) searchlines.sort(function(a,b){return a.price - b.price});
if ( seqtype == 'highlow' ) searchlines.sort(function(a,b){return b.price - a.price});
if ( seqtype == 'default' ) searchlines.sort(function(a,b){return a.seq - b.seq});
if ( seqtype == 'alpha' ) searchlines.sort(function(a,b){return (a.pname <= b.pname) ? -1 : 1;});
if ( seqtype == 'reverse' ) searchlines.sort(function(a,b){return (b.pname <= a.pname) ? -1 : 1;});
searchlastsorttype = seqtype;
setCookie('SEARCHSORTTYPE', searchlastsorttype);
searchshowsorttype();
for ( var i=0; i<searchlines.length; i++ )
{
searchspanids[i].innerHTML = searchlines[i].phtml;
searchspanids[i].id = searchlines[i].id;
searchspanids[i].setAttribute('price', searchlines[i].price);
searchspanids[i].setAttribute('seq', searchlines[i].seq);
searchspanids[i].setAttribute('pname', searchlines[i].pname);
}
return false;
}
function searchshowsorttype(){ // highlight the type of sort that's currently in use
if ( document.getElementById('searchsortdropdown') ) // see if we're using drop-downs
{
var dropdowns = document.getElementsByTagName('select'); // all drop-downs
for ( var i=0; i<dropdowns.length; i++ )
{
if ( dropdowns[i].name == 'searchsortdropdown' ) // relevant one
{
var sdd = dropdowns[i];
for ( var j=0; j<sdd.options.length; j++ )
{
if ( sdd.options[j].value == searchlastsorttype ) sdd.selectedIndex = j;
}
}
}
}
else
{
var buttonlinks = document.getElementsByTagName('input'); // looking for buttons
for ( var i=0; i<buttonlinks.length; i++ )
{
if ( buttonlinks[i].name == 'searchsortlink' )
{
buttonlinks[i].className = ( buttonlinks[i].id == searchlastsorttype ) ? 'searchsortactive' : 'searchsortinactive';
}
}
var buttonlinks = document.getElementsByTagName('a'); // looking for A tags
for ( var i=0; i<buttonlinks.length; i++ )
{
if ( buttonlinks[i].name == 'searchsortlink' )
{
buttonlinks[i].className = ( buttonlinks[i].id == searchlastsorttype ) ? 'searchsortactive' : 'searchsortinactive';
}
}
}
}
// Section Related
function sectionseq(seqtype){ // resequence Sections
if ( ! (bSectReadyToSort || bPageIsLoaded) )
{
alert('Please wait until the page has fully loaded. (SECT)');
return false;
}
sectlines.length = 0;
sectspanids.length = 0;
var spans = document.getElementsByTagName('span');
for ( var i=0; i<spans.length; i++ )
{
if ( spans[i].id.indexOf('sectionline_') == 0 )
{
sectspanids.push(spans[i]);
sectlines.push({
id: spans[i].id,
price: spans[i].getAttribute('price'),
seq: spans[i].getAttribute('seq'),
pname: spans[i].getAttribute('pname'),
phtml: spans[i].innerHTML
});
}
}
if ( seqtype == 'lowhigh' ) sectlines.sort(function(a,b){return a.price - b.price});
if ( seqtype == 'highlow' ) sectlines.sort(function(a,b){return b.price - a.price});
if ( seqtype == 'default' ) sectlines.sort(function(a,b){return a.seq - b.seq});
if ( seqtype == 'alpha' ) sectlines.sort(function(a,b){return (a.pname <= b.pname) ? -1 : 1;});
if ( seqtype == 'reverse' ) sectlines.sort(function(a,b){return (b.pname <= a.pname) ? -1 : 1;});
sectlastsorttype = seqtype;
setCookie('SECTSORTTYPE', sectlastsorttype);
sectshowsorttype();
for ( var i=0; i<sectlines.length; i++ )
{
sectspanids[i].innerHTML = sectlines[i].phtml;
sectspanids[i].id = sectlines[i].id;
sectspanids[i].setAttribute('price', sectlines[i].price);
sectspanids[i].setAttribute('seq', sectlines[i].seq);
sectspanids[i].setAttribute('pname', sectlines[i].pname);
}
return false;
}
function sectshowsorttype(){ // highlight the type of sort that's currently in use
if ( document.getElementById('sectionsortdropdown') ) // see if we're using drop-downs
{
var dropdowns = document.getElementsByTagName('select'); // all drop-downs
for ( var i=0; i<dropdowns.length; i++ )
{
if ( dropdowns[i].name == 'sectionsortdropdown' ) // relevant one
{
var sdd = dropdowns[i];
for ( var j=0; j<sdd.options.length; j++ )
{
if ( sdd.options[j].value == sectlastsorttype ) sdd.selectedIndex = j;
}
}
}
}
else
{
var buttonlinks = document.getElementsByTagName('input'); // looking for buttons
for ( var i=0; i<buttonlinks.length; i++ )
{
if ( buttonlinks[i].name == 'sectsortlink' )
{
buttonlinks[i].className = ( buttonlinks[i].id == sectlastsorttype ) ? 'sectsortactive' : 'sectsortinactive';
}
}
var buttonlinks = document.getElementsByTagName('a'); // looking for A tags
for ( var i=0; i<buttonlinks.length; i++ )
{
if ( buttonlinks[i].name == 'sectsortlink' )
{
buttonlinks[i].className = ( buttonlinks[i].id == sectlastsorttype ) ? 'sectsortactive' : 'sectsortinactive';
}
}
}
}
// Product Related
function reseq(seqtype, gotoanchor){ // resequence products
if ( ! (bReadyToSort || bPageIsLoaded) )
{
alert('Please wait until the page has fully loaded. (PROD)');
return false;
}
prodlines.length = 0;
spanids.length = 0;
var spans = document.getElementsByTagName('span');
for ( var i=0; i<spans.length; i++ )
{
if ( spans[i].id.indexOf('sortline_') == 0 )
{
spanids.push(spans[i]);
prodlines.push({
id: spans[i].id,
price: spans[i].getAttribute('price'),
seq: spans[i].getAttribute('seq'),
pname: spans[i].getAttribute('pname'),
brand: spans[i].getAttribute('brand'),
capacity: spans[i].getAttribute('capacity'),
height: spans[i].getAttribute('height'),
width: spans[i].getAttribute('width'),
depth: spans[i].getAttribute('depth'),
colour: spans[i].getAttribute('colour'),
energyrating: spans[i].getAttribute('energyrating'),
spinspeed: spans[i].getAttribute('spinspeed'),
phtml: spans[i].innerHTML
});
}
}
if ( seqtype == 'lowhigh' ) prodlines.sort(function(a,b){return a.price - b.price});
if ( seqtype == 'highlow' ) prodlines.sort(function(a,b){return b.price - a.price});
if ( seqtype == 'default' ) prodlines.sort(function(a,b){return a.seq - b.seq});
if ( seqtype == 'alpha' ) prodlines.sort(function(a,b){return (a.pname <= b.pname) ? -1 : 1;});
if ( seqtype == 'reverse' ) prodlines.sort(function(a,b){return (b.pname <= a.pname) ? -1 : 1;});
if ( seqtype == 'brand' ) prodlines.sort(function(a,b){return (a.brand <= b.brand) ? -1 : 1;});
if ( seqtype == 'capacity' ) prodlines.sort(function(a,b){return (b.capacity <= a.capacity) ? -1 : 1;});
if ( seqtype == 'height' ) prodlines.sort(function(a,b){return (a.height <= b.height) ? -1 : 1;});
if ( seqtype == 'width' ) prodlines.sort(function(a,b){return (a.width <= b.width) ? -1 : 1;});
if ( seqtype == 'depth' ) prodlines.sort(function(a,b){return (a.depth <= b.depth) ? -1 : 1;});
if ( seqtype == 'colour' ) prodlines.sort(function(a,b){return (a.colour <= b.colour) ? -1 : 1;});
if ( seqtype == 'energyrating' ) prodlines.sort(function(a,b){return (a.energyrating <= b.energyrating) ? -1 : 1;});
if ( seqtype == 'spinspeed' ) prodlines.sort(function(a,b){return (b.spinspeed <= a.spinspeed) ? -1 : 1;});
lastsorttype = seqtype;
setCookie('SORTTYPE', lastsorttype);
showsorttype();
for ( var i=0; i<prodlines.length; i++ )
{
spanids[i].innerHTML = prodlines[i].phtml;
spanids[i].id = prodlines[i].id;
spanids[i].setAttribute('price', prodlines[i].price);
spanids[i].setAttribute('seq', prodlines[i].seq);
spanids[i].setAttribute('pname', prodlines[i].pname);
spanids[i].setAttribute('brand', prodlines[i].brand);
spanids[i].setAttribute('capacity', prodlines[i].capacity);
spanids[i].setAttribute('height', prodlines[i].height);
spanids[i].setAttribute('width', prodlines[i].width);
spanids[i].setAttribute('depth', prodlines[i].depth);
spanids[i].setAttribute('colour', prodlines[i].colour);
spanids[i].setAttribute('energyrating', prodlines[i].energyrating);
spanids[i].setAttribute('spinspeed', prodlines[i].spinspeed);
}
if ( gotoanchor && location.hash ) scrolltoanchor(location.hash); // Product Page just loaded and Anchor so we need to reposition
//
// Some Drillpine add-ons need reactivated after the DOM has been fiddled with
//
// Tabber (needs V210 onwards) - reset Tabber
if ( window.resetallpanes ) resetallpanes();
// Tabber V3
if ( window.jqinittabber ) jqinittabber();
// Lightbox / Slimbox
if ( window.Slimbox && window.Slimbox.scanPage ) Slimbox.scanPage();
// Lightbox / Slimbox2
if ( (typeof(jQuery) == 'function') && (typeof(jQuery.slimbox) == 'function') )
{
$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
}
return false;
}
function showsorttype(){ // highlight the type of sort that's currently in use
if ( document.getElementById('sortdropdown') ) // see if we're using drop-downs
{
var dropdowns = document.getElementsByTagName('select'); // all drop-downs
for ( var i=0; i<dropdowns.length; i++ )
{
if ( dropdowns[i].name == 'sortdropdown' ) // relevant one
{
var sdd = dropdowns[i];
for ( var j=0; j<sdd.options.length; j++ )
{
if ( sdd.options[j].value == lastsorttype ) sdd.selectedIndex = j;
}
}
}
}
else
{
var buttonlinks = document.getElementsByTagName('input'); // looking for buttons
for ( var i=0; i<buttonlinks.length; i++ )
{
if ( buttonlinks[i].name == 'sortlink' )
{
buttonlinks[i].className = ( buttonlinks[i].id == lastsorttype ) ? 'sortactive' : 'sortinactive';
}
}
var buttonlinks = document.getElementsByTagName('a'); // looking for A tags
for ( var i=0; i<buttonlinks.length; i++ )
{
if ( buttonlinks[i].name == 'sortlink' )
{
buttonlinks[i].className = ( buttonlinks[i].id == lastsorttype ) ? 'sortactive' : 'sortinactive';
}
}
}
}
// General code
function hidetagswithid(tag, id){ // hide all tags with ID
var alltags = document.getElementsByTagName(tag); // all such tags
for ( var i=0; i<alltags.length; i++ )
{
if ( alltags[i].id == id ) // with ID
{
alltags[i].style.display = 'none'; // hide entire control
alltags[i].style.visibility = 'hidden'; // hide entire control
}
}
}
function scrolltoanchor(anc){ // reposition to display anchor
var ancs = document.getElementsByTagName('a');
anc = anc.replace(/.*\#/,''); // Search highlight passes duplicate anchors - lose one
if ( ancs[anc] ) ancs[anc].scrollIntoView(true);
}
function sortinit(){ // called when DOM is loaded
if (arguments.callee.done) return;
arguments.callee.done = true;
bSortInitialised = true;
// Products
if ( document.getElementById('sortwidget') )
{
bReadyToSort = true;
lastsorttype = getCookie('SORTTYPE');
if ( lastsorttype == null ) lastsorttype = 'default';
setCookie('SORTTYPE', lastsorttype);
showsorttype();
if ( lastsorttype != 'default' )
{
reseq(lastsorttype, true);
}
}
// Search Results
if ( document.getElementById('searchsortwidget') )
{
bSearchReadyToSort = true;
searchlastsorttype = getCookie('SEARCHSORTTYPE');
if ( searchlastsorttype == null ) searchlastsorttype = 'default';
setCookie('SEARCHSORTTYPE', searchlastsorttype);
searchshowsorttype();
if ( searchlastsorttype != 'default' )
{
searchreseq(searchlastsorttype);
}
}
// Sections
if ( document.getElementById('sectsortwidget') )
{
// check for no prices available and hide buttons if so
var spans = document.getElementsByTagName('span');
var rtot = 0;
for ( var i=0; i<spans.length; i++ )
{
if ( spans[i].id.indexOf('sectionline_') == 0 )
{
var price = spans[i].getAttribute('price');
rtot += (price != null) ? price - 0 : 0;
}
}
if ( rtot == 0 )
{
if ( SectionSortLinksFinalOnly ) // do we only show links on final Sections
{
hidetagswithid('span', 'sectsortwidget'); // hide all sort widgets
}
else
{
if ( document.getElementById('sectpricelinks') ) // button or text links
{
hidetagswithid('span', 'sectpricelinks');
}
if ( document.getElementById('sectionsortdropdown') ) // drop-down list
{
var dropdowns = document.getElementsByTagName('select'); // all drop-downs
for ( var i=0; i<dropdowns.length; i++ )
{
if ( dropdowns[i].id == 'sectionsortdropdown' ) // relevant one
{
var opts = dropdowns[i].options;
for ( var j=opts.length; j>0; j-- ) // scan backwards as we're deleting items
{
if ( (opts[j - 1].value == "lowhigh") || (opts[j - 1].value == "highlow") )
{
opts[j - 1] = null;
}
}
}
}
}
}
}
bSectReadyToSort = true;
sectlastsorttype = getCookie('SECTSORTTYPE');
if ( sectlastsorttype == null ) sectlastsorttype = 'default';
setCookie('SECTSORTTYPE', sectlastsorttype);
sectshowsorttype();
// only resequence if button showing and we've a non default sequence
if ( (document.getElementById('sectsortwidget').style.display != 'none') && (sectlastsorttype != 'default') )
{
sectionseq(sectlastsorttype);
}
}
}
function onloadsortinit(){ // optionally called on onload
if ( ! bSortInitalised ) sortinit(); // only init if it's not already run
}
// in case we cannot activate on DOM loaded
if (window.attachEvent) // IE
{
window.attachEvent("onload", onloadsortinit);
}
else // DOM
{
window.addEventListener("load", onloadsortinit, false);
}
I didn't write this script and I'm not a JavaScript expert, so i don't know how to edit it properly. I want to change it's function from sorting to filtering, i.e. something along the lines of a slice function. Any advice would be much appreciated. Similar TutorialsHi , I need a javascript help for the following snippet of html code. The html displays Data in tabular format. There is drop-down at the 'Status" column of this table. If the status is chosen as 'all', then all the rows will be displayed having status ('CO','OK','IN' and '-'). But if the status is selected as 'valid', then the rows having '-' as status will be discarded and only rows having 'CO','OK,'IN' as status will be displayed. The following code is working except for a single row once I select 'valid' as Status from the drop-down. Please notice the cell under "Task" column having value 'checkRsf1' and its immediate right cell containing 'exec' under "Command" column is not coming at all after filtering by "valid". Instead the 'esdnet' and 'IN' (under Method and Status column) are getting shifted to left under wrong column head. Thanks in advance. Below is the html embedded with Javascript. <html> <head> <link rel="stylesheet" type="text/css" href="/css/tree.css" /> </head> <body style="background-color:#fff"> <table border="1" id="mytable"><tr style="background-color:#d0d0d0"> <th align="left">Task</th><th align="left">Command</th><th align="left">Method</th> <th align="left">Status<br><select onchange="showRows(this.value)"> <option value="all">show status</option> <option value="all">all</option> <option value="active">valid</option> </select> </th> <th align="left">Task version</th><th align="left">Tool</th><th align="left">Last changed</th><th align="left">Comments</th></tr> <tr><td rowspan="1">char32</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr> <tr><td rowspan="1">H1p</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr> <tr><td rowspan="1">H1c</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr> <tr><td rowspan="1">adex</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr> <tr><td rowspan="1">ds</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr> <tr><td rowspan="1">mec</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr> <tr><td rowspan="1">admsSim_post</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr> <tr><td rowspan="1">Sim_pre</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap"><font color="red">CO</font></td><td nowrap="nowrap">CO</td><td nowrap="nowrap">CO</td><td nowrap="nowrap">Apr 24 </td><td nowrap="nowrap"> </td></tr> <tr><td rowspan="1">amsdSim_post</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap"><font color="red">OK</font></td><td nowrap="nowrap">CO</td><td nowrap="nowrap">CO</td><td nowrap="nowrap">Apr 21 </td><td nowrap="nowrap"> </td></tr> <tr><td rowspan="1">amsdSim_pre</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap"><font color="red">OK</font></td><td nowrap="nowrap">CO</td><td nowrap="nowrap">CO</td><td nowrap="nowrap">May 3 </td><td nowrap="nowrap"> </td></tr> <tr><td rowspan="1">antdrc</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap"><font color="red">CO</font></td><td nowrap="nowrap">CO</td><td nowrap="nowrap">CO</td><td nowrap="nowrap">Apr 24</td><td nowrap="nowrap"> </td></tr> <tr><td rowspan="1">archive</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr> <tr><td rowspan="1">avenue</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr> <tr><td rowspan="1">cdl</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap"><font color="red">IN</font></td><td nowrap="nowrap">CO</td><td nowrap="nowrap">CO</td><td nowrap="nowrap">Apr 2</td><td nowrap="nowrap"> </td></tr> <tr><td rowspan="1">cdl_pre</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap"><font color="red">CO</font></td><td nowrap="nowrap">CO</td><td nowrap="nowrap">CO</td><td nowrap="nowrap">Apr 8</td><td nowrap="nowrap"> </td></tr> <tr><td rowspan="5">checkRsf</td><td rowspan="5">exec</td><td nowrap="nowrap">antdrc</td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr> <tr><td nowrap="nowrap">drc</td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr> <tr><td nowrap="nowrap">erc</td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr> <tr><td nowrap="nowrap">esdnet</td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr> <tr><td nowrap="nowrap">lvs</td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr> <tr><td rowspan="5">checkRsf1</td><td rowspan="5">exec</td><td nowrap="nowrap">antdrcres</td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr> <tr><td nowrap="nowrap">drc</td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr> <tr><td nowrap="nowrap">erc</td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr> <tr><td nowrap="nowrap">esdnet</td><td nowrap="nowrap">IN</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr> <tr><td nowrap="nowrap">lvs</td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr> <tr><td rowspan="5">checkRsf2</td><td rowspan="5">exec</td><td nowrap="nowrap">antdrcres</td><td nowrap="nowrap">IN</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr> <tr><td nowrap="nowrap">drc</td><td nowrap="nowrap">IN</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr> <tr><td nowrap="nowrap">erc</td><td nowrap="nowrap">IN</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr> <tr><td nowrap="nowrap">esdnet</td><td nowrap="nowrap">IN</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr> <tr><td nowrap="nowrap">lvs</td><td nowrap="nowrap">IN</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr> <tr><td rowspan="2"> designSync</td><td rowspan="2">exec</td><td nowrap="nowrap">dssc_layout</td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr> <tr><td nowrap="nowrap">dssc_schematic</td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr> <tr><td rowspan="1">diosearch</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap">-</td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td><td nowrap="nowrap"> </td></tr> <tr><td rowspan="1">drc</td><td rowspan="1">exec</td><td nowrap="nowrap"> </td><td nowrap="nowrap"><font color="red">IN</font></td><td nowrap="nowrap">CO</td><td nowrap="nowrap">CO</td><td nowrap="nowrap">Apr 3</td><td nowrap="nowrap"> </td></tr> </table> <script type="text/javascript"> mytab=document.getElementById("mytable") function showRows(val){ for (var i = 0; i < mytab.rows.length; i++) { if (val=="all"){ mytab.rows[i].style.display="table-row" } else { if (mytab.rows[i].innerHTML.match("-")){ mytab.rows[i].style.display="none" } } } } </script> </body> </html> Hi, I have an array for all the trousers on my site. It includes the image, name, waist, description, price and buy link. The javascript I use below outputs all products in the array. What I'd like to do is only output products which contain either "Wrangler" or "Levi" in the name string AND "forty" or "thirty" in the waist string. Would anyone know how to change the for loop in order to do this? Code: for(i=0;i<Trousers.length;i++){
$('body').append("<div><img src='"+Trousers[i].ProductImage+"'>"+"<br /><strong>"+Trousers[i].name+"</strong><br /><span style='color: #999; font-size:10px;'>"+Trousers[i].waist+"</span><br />"+Trousers[i].description+"<br /><strong>"+Trousers[i].price+"</strong><br /><a href='"+Trousers[i].buyLink+"'>Add to Basket</a></div>");
}
Thanks in advance hello i have 2 lists and function to clean them Code: function del_sel(option)
{
if (option == "1")
{
document.forms[0].list1.innerHTML = '';
}
if (option == "2")
{
document.forms[0].list2.innerHTML = '';
}
}
how to make this function shorter & without options ? smth like that Code: function del_sel(option)
{
document.forms[0].option.innerHTML = '';
}
the problem is that this code returns mistake Code: function del_sel(option)
{
document.forms[0].option.innerHTML = '';
}
...
<input type='button' value='Delete onclick='del_sel(form.list1);>
Thanks for all the help Old Pedant. You're nice enough to lend people a hand when you don't have to, and this makes the second or third time you've helped me solve a problem I've had with my website. Thanks so much. So I'm making a page where when someone clicks on the second drop list, then it carrys out a function first, and it calculates it based on what the first droplist is picked. Here's the code I have: Code: <html>
<head>
<title></title>
<script type="text/javascript">
function first()
{
var gold = 4;
var green = 6;
var red = 30;
var blue = 0;
var total = 100;
if (calculate.color.GetElementById('gold').select)
{
var depends = gold/total
};
if (calculate.color.GetElementById('green').select)
{
var depends = green/total
};
if (calculate.color.GetElementById('red').select)
{
var depends = red/total
};
if (calculate.color.GetElementById('blue').select)
{
var depends = blue/total
};
if (calculate.choice1.GetElementById('first').select)
{
calculate.results.value = 1 * calculate.howmany.value * depends;
}
}
</script>
</head>
<body>
<form name="calculate">
<table>
<td>
I need: <input type="text" name="howmany" />
<br />
My choice is:
</td>
<td>
<select name="color">
<option selected id="gold">Gold</option>
<option id="green">Green</option>
<option id="red">Red</option>
<option id="blue">Blue Charms</option>
</select>
<br />
<select name="choice1">
<option id="first" onClick="first()">
First
</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center" valign="top">
You will need <input type="text" name="results" />
</td>
</tr>
</table>
</form>
</body>
</html>
Any help is well appreciated. Thanks. Hi all, I have a JavaScript map of different regions (which are basically just seperate images merged together) and I want them to load different drop down list boxes according to which images/area of the map is clicked. There doesn't seem to be much on the net about loading specific elements on the page onClick like this(perhaps I'm barking up the wrong tree)... Can anyone provide an example of drop down boxes only loading on a page after an image is clicked? Or perhaps some way to populate an already loaded drop down list with an array, where different arrays are loaded into this drop down list depending on the image clicked? Cheers in advance. Tom I need help please. I'm trying to validate when a user selects an item from the equipment select list they must select a reason code as to why they are ordering the item. This must work across all rows. Also the field to the left of the equipment select list should allow the user to key in the item # of the part and the select list automatically gets selected with the part. How the heck do I do this. I tried the functions I have included but they suck! Please help me Tracy Code: <script>
function validateReason(){
var tr, i=1;
while(tr=document.getElementById('Child'+(i++))){
var txtV=tr.getElementsByTagName('input')[0].value
var selS=tr.getElementsByTagName('select')[0].selectedIndex;
if(txtV.length>0&&selS==0){alert('If you enter a quantity you must select a reason!');return false}
}
}
function change_uids(uid){
var uids = document.getElementById("uids");
for (var i=0; i<uids.options.length; i++){
if (uids.options[i].value == uid.value){
uids.options[i].selected = true;
break;
}
}
}
</script>
<form method="POST" onsubmit="return validateReason(this) ;" action="" name="theForm" >
<table>
<tr id='Child1'>
<td><input type = 'text' MAXLENGTH='3'
style = 'width:40px'; class='textfield' name='quantity[]' ></td>
<td><input type = 'text' MAXLENGTH='6'
style = 'width:60px'; class='textfield' onkeyup='change_uids(this)' id='uid' name='wic[]' ></td>
<td>
<select size='1' STYLE='width: 270px' class='smallDrop' id='uids' name='itemid[]'>
<option value='' > - Choose Equipment - </option>
<option value='112233' > ZENTIH - </option>
<option value='332244' > EMERSON - </option>
<option value='0949' >LG</option>
<option value='99623' >SONY</option>
</select>
</td> <td>
<select size='1' STYLE='width: 130px' class='smallDrop' name='reason_codes[]'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>
</td></tr>
<tr id='Child2'>
<td><input type = 'text' MAXLENGTH='3'
style = 'width:40px'; class='textfield' name='quantity[]' ></td>
<td><input type = 'text' MAXLENGTH='6'
style = 'width:60px'; class='textfield' onkeyup='change_uids(this)' id='uid' name='num[]' ></td>
<td>
<select size='1' STYLE='width: 270px' class='smallDrop' id='uids' name='itemid[]'>
<option value='' > - Choose Equipment - </option>
<option value='112233' > ZENTIH - </option>
<option value='332244' > EMERSON - </option>
<option value='0949' >LG</option>
<option value='99623' >SONY</option>
</select>
</td> <td>
<select size='1' STYLE='width: 130px' class='smallDrop' name='reason_codes[]'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>
</td></tr>
<tr id='Child3'>
<td><input type = 'text' MAXLENGTH='3'
style = 'width:40px'; class='textfield' name='quantity[]' ></td>
<td><input type = 'text' MAXLENGTH='6'
style = 'width:60px'; class='textfield' onkeyup='change_uids(this)' id='uid' name='wic[]' ></td>
<td>
<select size='1' STYLE='width: 270px' class='smallDrop' id='uids' name='itemid[]'>
<option value='' > - Choose Equipment - </option>
<option value='112233' > ZENTIH - </option>
<option value='332244' > EMERSON - </option>
<option value='0949' >LG</option>
<option value='99623' >SONY</option>
</select>
</td>
<td>
<select size='1' STYLE='width: 130px' class='smallDrop' name='reason_codes[]'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>
</td></tr>
</table>
<input type="submit" value="SUBMIT" name="submit">
</form>
Hello, I'm pretty new to JS but I can script a few things. I'm using a pre-written script, but trying to add a functionality that uses my + and - images to indicate whats whether the list is expanded or not. It works on the first click. The symbol starts as a plus, you click it and it expands and goes to minus. After that the list maintains functionality (for the most part) but doesn't continue changing symbols back and forth. I've pored over the script for HOURS but I can't find the solution. Working Link Example My written JS: Code: // JavaScript Document
var expandables = new Array();
expandables[0] = "expand_northeast";
expandables[1] = "expand_southeast";
expandables[2] = "expand_midwest";
expandables[3] = "expand_southwest";
expandables[4] = "expand_west";
var clickCounter = 0;
function expand(current) {
//add height to the containing div
if(clickCounter<=1) {
var newHeight = document.getElementById('region_us').offsetHeight + 187;
document.getElementById('region_us').style.height = newHeight.toString() + 'px';
clickCounter+=1;
}
//get the section name
var section = current.split('_')[1];
for ( var i=0; i<expandables.length; i++ ){
if(document.getElementById(expandables[i]).id.indexOf('collapse') != -1){ //if it has collapse in id string
var tempSection = expandables[i].split('_')[1]; //parse just the region
document.getElementById(expandables[i]).id='expand_' + tempSection; //change the id to expand / plus symbol
expandables[i] = document.getElementById('expand_' + tempSection).id; //make the change in the array as well
}
}
document.getElementById(current).href='javascript:animatedcollapse.show(\'stats_'+ section + '\');';
document.getElementById(current).onclick=function() {collapse('\'collapse_'+section +'\'');};
document.getElementById(current).id="collapse_" + section + "";
for (x in expandables)
{
if(expandables[x] == current){
expandables[x] = document.getElementById('collapse_' + section).id;
}
}
//alert(expandables);
}
function collapse(current) {
var section = current.split('_')[1];
//alert(current);
current = ("expand_"+section);
document.getElementById(current).href='javascript:animatedcollapse.hide(\'stats_'+ section + ');';
document.getElementById(current).onclick=function() {expand('"expand_'+section+'"');};
document.getElementById(current).id='expand_' + section;
for (x in expandables)
{
if(expandables[x] == current){
expandables[x] = document.getElementById('expand_' + section).id;
}
}
}
Relevant HTML: Code: <a id="expand_northeast" href="javascript://" onclick="expand('expand_northeast');"></a>
<span class="state_title">Northeast</span>
<span class="state_title_num">2,749</span>
<span class="state_title_perc">62.5%</span>
<div id="stats_northeast" style="display:none;">
<span class="state colored">Maine</span><span class="stat_num colored">32</span><span class="stat_percent colored">7.1%</span><br />
<span class="state">New Hampshire</span><span class="stat_num">32</span><span class="stat_percent">7.1%</span><br />
<span class="state colored">Rhode Island</span><span class="stat_num colored">32</span><span class="stat_percent colored">7.1%</span><br />
<span class="state">New Hampshire</span><span class="stat_num">32</span><span class="stat_percent">7.1%</span><br />
<span class="state colored">Rhode Island</span><span class="stat_num colored">32</span><span class="stat_percent colored">7.1%</span><br />
<span class="state">New Hampshire</span><span class="stat_num">32</span><span class="stat_percent">7.1%</span><br />
<span class="state colored">Rhode Island</span><span class="stat_num colored">32</span><span class="stat_percent colored">7.1%</span><br />
<span class="state">New Hampshire</span><span class="stat_num">32</span><span class="stat_percent">7.1%</span><br />
<span class="state colored">Maryland</span><span class="stat_num colored">32</span><span class="stat_percent colored">7.1%</span><br />
<span class="state">Pennsylvania</span><span class="stat_num">32</span><span class="stat_percent">7.1%</span><br />
</div>
Thanks guys! Hi, I want to make a list that expands and collapses like on the lynda.com site. See example http://www.lynda.com/Rhino-4-tutoria...g/59223-2.html I would also like to make it fade in and out when collapsing and expanding. I haven't been able to find a lot of information on how to do this. Would this be best using something like jQuery or just plain JavaScript? By the way I'm just starting to learn JavaScript, so any level of explanation is helpful. Hey, I've tried w3schools, tizag, and google, but haven't found exactly what I need. I need some way of easily figuring out which option in a drop down menu is checked, through the use of javascript, like how you can use document.formname.elementname[i].checked to find out which checkbox/radio button is checked. Anything that would return something that allows me to figure out which option has been chosen. I will need to have a function with 3 if statements, one for each option.
hello everybody I have a list like this Code:
<ul id="main_menu">
<li><a href="#">Comments</a></li>
<li><a href="#"> Advertising </a>
<ul>
<li><a href="#">edit/delete ads</a></li>
<li><a href="#">Add Ads</a></li>
</ul>
</li>
<li><a href="#">Groups</a></li>
<li><a href="#">Members</a>
<ul>
<li><a href="#">Edit / Delete Member</a></li>
<li><a href="#">Add Member</a></li>
</ul>
</li>
<li><a href="#">Photo</a>
<ul>
<li><a href="#">edit / Delete Photo</a></li>
<li><a href="#">Add a picture</a></li>
</ul>
</li>
<li><a href="#">Sections</a>
<ul>
<li><a href="#">Edit / Delete section</a></li>
<li><a href="#">Add Section</a></li>
</ul>
</li>
<li><a href="#">General Settings</a></li>
<li><a href="#">Home</a></li>
</ul>
This list contains lists of 8, including 4 lists contain children (Advertising , Members,Photo,Sections) And I've written this code but did not work very well Code: function MainMenu(item){
var MenuItems = document.getElementById('main_menu');
for (var i = 0; i < MenuItems.children.length; i++) {
MenuItems.children[i].children[1].style.display = "none";
}
item.children[1].style.display = "block";
}
What i needed is when i press a list containing the submenus Close all open lists Then open this menu Hi On my web page I have 3 seperate catorgories with 2 drop down lists in each, the first dropdown list in each catergory is for "county" here is a snippet of the code Code: function fillCategory(){
addOption(document.drop_list.Category, "bedfordshire", "Bedfordshire", "");
addOption(document.drop_list.Category, "berkshire", "Berkshire", "");
addOption(document.drop_list.Category, "buckinghamshire", "Buckinghamshire", "");
addOption(document.drop_list.Category, "cambridgeshire", "Cambridgeshire", "");
I wanted to know if it is possible to use "list.js" to populate all 3 county dropdown lists or would I need "list.js" "list1.js" etc etc Hi, I have two dropdown lists, and I want to have each option from the first dropdown list to give the specific options on the second dropdown list. For instance, <select name="module"> <option value="pic1.jpg>TM1</option> <option value="pic2.jpg>TM2</option> <option value="pic3.jpg>TM3</option> </select> <select name="location"> <option value="loc_1">Box1</option> <option value="loc_2">Box2</option> <option value="loc_3">Box3</option> Note: The option values are just examples, but each option must have a value in order for other things to work. Here is what I need to do: If TM1 is selected, only Box1 and Box 2 are available (Box3 is removed from the dropdown "location" list); If TM2 is selected, only Box 2 is available (Box 1 and 3 are removed from the dropdown "location" list); If TM3 is selected, all options in the dropdown "location" list are available. My javascript knowledge is very limited. Any help is greatly appreciated. Thanks in advance, JW Hi to everyone, I'm kind of new to html/php/javascript but still I manage to create a nice looking form in wich the users have to fill some text fields and select items from drop list. But I now have a small problem. I need one of those text fields to be automaticly filled by the informations selected in 2 drop lists. This is how it would looks like : Machine-Name : __________ (empty text field) Drop-List1 : abc (the user selected the string "abc" from the list.) Machine-Name : abc- Drop-List 2 : zxy(the user selected the string "zxy" from the list.) Machine-Name : abc-zxy- I hope you understand what I mean. If needed, I can past those fields and list code, but I don't think that would be very useful since it is kind of trivial. So, in words, how would you guys proceed to achieve this goal? Hi Guys, I am after populating a HTML box (or another language if html wont do) with a number of different files pdfs, exe's etc for customer to download. The content of this box will depend on the choices from two drop down lists. I have got two drop down lists setup filtering off each other... I have thought about tagging each document and then pulling up a file off the choices selected? Not sure the best way to go about this. Regards Heres the code so far.... Code: <HTML>
<HEAD><TITLE>prototype CP</Title>
<style type="text/css">
.style1 {
text-align: center;
}
.style2 {
font-size: small;
color: #FFFFFF;
}
.style3 {
font-size: small;
}
</style>
</Head>
<BODY OnLoad="BuildContacts(0);" style="background-color: #336699; background-image: url('back.jpeg')">
<FORM Name="myForm">
<div class="style1">
<span class="style2">I have a
</span>
<font color="#000000">
<SELECT Name="SalesNames" OnChange="BuildContacts(this.selectedIndex);" class="style3">
<OPTION Value="">
<OPTION Value="nexgen">nexgen
<OPTION Value="zimbra">zimbraCS
<OPTION Value="exchange">exchange
</Select></font><span class="style2">
mailbox and I want to set it up on:
</span>
<font color="#000000">
<SELECT Name="SalesContacts" class="style3">
<OPTION Value="">--------
</Select>
</font>
</div>
</Form>
</Body>
</Html>
<SCRIPT Language="JavaScript"><!--
//Build arrays for each mailbox type
Contacts=new Array(4);
Contacts[0]=new Array(3);
Contacts[1]=new Array(2);
Contacts[2]=new Array(5);
Contacts[3]=new Array(4);
//Nexgen
Contacts[0][0]="";
Contacts[0][1]="Outlook";
Contacts[0][2]="mac mail";
Contacts[0][3]="entourage";
Contacts[0][4]="iPhone";
Contacts[0][5]="Blackberry";
Contacts[0][6]="other mobile phone";
//Zimbra
Contacts[1][0]="Outlook";
Contacts[1][1]="mac mail";
Contacts[1][2]="entourage";
Contacts[1][3]="iPhone";
Contacts[1][4]="Blackberry";
Contacts[1][5]="other mobile phone";
//Exchange
Contacts[2][0]="Outlook";
Contacts[2][1]="mac mail";
Contacts[2][2]="entourage";
Contacts[2][3]="iPhone";
Contacts[2][4]="Blackberry";
Contacts[2][5]="other mobile phone";
//Call this to build the Contact list for the specified Salesperson
function BuildContacts(num)
{
//Select the first Contact
document.myForm.SalesContacts.selectedIndex=0;
//For every contact in the array for this person, add a new option
for(ctr=0;ctr<Contacts[num].length;ctr++)
{
document.myForm.SalesContacts.options[ctr]=new Option(Contacts[num][ctr],Contacts[num][ctr]);
}
//Set the length of the select list
document.myForm.SalesContacts.length=Contacts[num].length;
}
//--></Script>
I have a cgi script (using perl for database queries) in which I have two select boxes. I am populating the left select box with rows from a database, and then provide buttons for people to move items to the right select box. So far so good, everything works, the move right, move left, and move right all and move left all buttons work, data is always sorted in both lists. My only problem is, when I click the submit button, the follow up program only displays data that was highlighted/selected in the right select box, not all of the data in the right select box. I don't know how to tell the script, via javascript, to highlight everything in the right select box when the submit form button is clicked. I would think i could just call a function via -onClick for the submit button. I could use some help with the function to select all data in that list. I can post code if it is helpful. Thanks, Taylor Hello everyone, I am trying to figure a solution to this CSS/JavaScript navigation menu. I have a couple of different classes set out for each level of the menu, which there are 4 levels max. The first level has a class for it called 'pMenuMain'. The second and third have names 'pMenu2' and 'pMenu3'. The 4th level is found by its <a> tags, because all of those are links. This is the JavaScript I need to change somehow: Code: <script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout = 1000;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('.pMenu2').hover(jsddm_open, jsddm_timer)
$('.pMenu > li > ul').hover(jsddm_open, jsddm_timer)});
document.onclick = jsddm_close;
</script>
Now this is the CSS style sheet: Code: /********************/
/*PERSONAL NAV MENU**/
/********************/
.pWrapper {
padding-bottom:53%;
padding-left:21%;
}
.pMenu {
margin:0;
padding:0;
list-style:none;
}
/*IE 6 & 7 need inline block feature*/
ul.pMenu ul li{
width:100%;
display:inline-block;
}
ul.pMenu ul ul li{
width:100%;
display:inline-block;
}
ul.pMenu ul ul ul li{
width:100%;
display:inline-block;
}
/*begin main list attributes*/
ul.pMenu > li:hover{
background:#F00;
border:.33em ridge #C90;
color:#FF0;
}
ul.pMenu > li{
float:left;
list-style:none;
margin-right:1%;
display:block;
color:#FFF;
background:#900;
border:.33em ridge #C30;
text-decoration:none;
}
.pMenuMain{
text-shadow:1px 1px 1px #000;
white-space:nowrap;
padding-top:.7em;
padding-bottom:.7em;
text-align:center;
}
/*first sub-list*/
ul.pMenu li li{
margin-right:0;
}
ul.pMenu ul {
margin:0;
padding:0;
position:absolute;
visibility:hidden;
}
.pMenu2{
background:#CCC;
border:.25em outset #999;
width:10em;
font-size:12px;
padding-top:.5em;
padding-bottom:.5em;
padding-right:2em;
padding-left:.5em;
text-decoration:none;
text-shadow:1px 1px 1px #000;
color:#000;
position:relative;
text-align:left;
top:.33em;
visibility:hidden;
}
.pMenu2:hover{
background:#999;
border:.25em inset #666;
text-decoration:blink;
}
/*second sub-list*/
ul.pMenu ul ul{
margin:0;
padding:0;
position:absolute;
visibility:hidden;
display:none;
}
.pMenu3{
background:#999;
border:.25em outset #666;
width:13em;
font-size:11px;
padding-top:.35em;
padding-bottom:.35em;
padding-right:2em;
padding-left:.5em;
text-decoration:none;
text-shadow:1px 1px 1px #000;
color:#000;
position:relative;
text-align:left;
top:.33em;
visibility:hidden;
}
ul.pMenu ul ul li {
float:none;
display:inline;
}
ul.pMenu ul ul li a {
width:auto;
background:#999;
border:.15em outset #666;
text-shadow:1px 1px 1px #000;
color:#FFF;
}
ul.pMenu ul ul a:hover {
background:#999;
border:.15em inset #666;
text-decoration:blink;
}
/*third sub-list*/
ul.pMenu ul ul ul {
margin:0;
padding:0;
position:absolute;
visibility:hidden;
}
ul.pMenu ul ul ul li {
float:none;
display:inline;
}
ul.pMenu ul ul li a {
width:auto;
background:#999;
border:1% outset #666;
text-shadow:1px 1px 1px #000;
color:#FFF;
}
ul.pMenu ul ul li a:hover {
background:#999;
border:1% inset #666;
text-decoration:blink;
}
/******************/
/*End Personal Nav*/
/*****************/
This is how it's set up in HTML: Code: <!-- begin Personal navigation menu -->
<div class="pWrapper">
<ul class="pMenu">
<li style="width:10%;"><div class="pMenuMain">health</div>
<ul style="left:18em;">
<li><div class="pMenu2">weight loss</div>
<ul>
<li><div class="pMenu3">fitness</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><div class="pMenu3">dieting</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
</ul>
</li>
<li><div class="pMenu2">skin care</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="pMenu">
<li style="width:14%;"><div class="pMenuMain">insurance</div>
<ul>
<li><div class="pMenu2">property insurance</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><div class="pMenu2">auto insurance</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><div class="pMenu2">health insurance</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><div class="pMenu2">annuities</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="pMenu">
<li style="width:11.3%;"><div class="pMenuMain">general</div>
<ul>
<li><div class="pMenu2">electronics</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><div class="pMenu2">style & fashion</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><div class="pMenu2">food/dining</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><div class="pMenu2">cars/auto</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="pMenu">
<li style="width:10%;"><div class="pMenuMain">dating</div>
<ul>
<li><a href="#">RealMatureSingles</a></li>
<li><a href="#">SeniorPeopleMeet</a></li>
</ul>
</li>
</ul>
<ul class="pMenu">
<li style="width:13.8%;"><div class="pMenuMain">education</div>
<ul>
<li><div class="pMenu2"><a href="#">under construction</a></div></li>
</ul>
</li>
</ul>
</div>
<!-- end Personal navigation menu-->
I know that I will receive critique for the HTML I created for this. The reason I am going this route is that a drop down menu with a list full of <a href="#"> can be clicked, resetting the menu. This is a flaw in functionality. Dependable dropdown lists (4 level) 1 Level dropdown list 2 Level dropdown list 3 Level dropdown list 4 Level dropdown list Every dropdown list is depends on another dropdown list For example if I select a value from 1 dropdown list then 2 dropdown list will appear. And then I select a value from 2 dropdown list then 3 dropdown list will appear. And if I select a value from 3 dropdown list then 4 dropdown list Multiple selection will be enable. It means every dropdown list may have hundreds of values. Thus, In this situation of multiple selection of values I analyze that, use of dropdown isn't suitable because if a dropdown value has 500 related values then these 500 values disturb the page design. So, is there any other better solution for it? |
|||||||