|
JavaScript - Loading Lists Onclick
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 Similar TutorialsHello all, I have the following code to load a new html page into the 'new content' div once the user scrolls to the bottom of the page. It all works fine. No problems, except I would like it to pause for a moment whilst it is loading, and show a loading box div at the bottom of the screen as it loads the new content, just to give some positive feedback for the user. So the new div would sit in a fixed position at 'bottom:0px;' and have a loading image inside it. Is this easy to do? I am new to javascript so bear with me Code: alreadyloading = false;
nextpage = 2;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
if (alreadyloading == false) {
var url = "page"+nextpage+".html";
alreadyloading = true;
$.post(url, function(data) {
$('#newcontent').children().last().after(data);
alreadyloading = false;
nextpage++;
});
}
}
});
The 'new content' is a div which is at the bottom of the page and is where the new content loads to! Thank you very much I'm currently working on a project and I am doing a bunch of image switching. I'm having a problem with the following... I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click. Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already. What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function. What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top. Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure. Is it possible disable an onclick after clicking it and then enable it from another onclick by id Code: <img id="one" href="images/homepage/sliders/bonus_button.jpg" style="position:relative; top:30px; left:50px; height:30px; width:70px; float:left;"> This code runs when it is clicked: Code: $("#one").click(function() {
runEffectB();
return false;
});
What I would like to happen is for either runEffectB() to not run if it was just run or to disable the #one.click once it has run. I am assuming I will be able to re-enable it from another onclick running a similar function. This is jquery and jquery ui if that helps. Any ideas much appreciated. 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);>
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! 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>
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 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 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 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.
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. 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, 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. 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>
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? 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. 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 I'm a newbie...please! html lists making javascript array I need help with a HTML UL I have ul inside ul but all I want to get when I select a certain list is the children of that list but remove the ul inside that list so they dont show at all http://pastebin.com/m98deaff any help would be great , current selecting code is http://pastebin.com/m6f4b886f Code: <div class="demo" id="demo_1"> <ul> <li id="1" class="open"><a id="1" href="#"><ins> </ins>Root node 1</a> <ul> <li id="2"><a id="2" href="#"><ins> </ins>Child node 1</a></li> <li id="3"><a id="3" href="#"><ins> </ins>Child node 2</a></li> <li id="4"><a id="4" href="#"><ins> </ins>Some other child node with longer text</a></li> <li id="6"><a id="6" href="#"><ins> </ins>Root node 222</a> //SHOUL NOT BE IN MY ARRAY <ul> <li id="7"><a id="7" href="#"><ins> </ins>Child node 222a</a></li> <li id="8"><a id="8" href="#"><ins> </ins>Child node 222b</a></li> <li id="9"><a id="9" href="#"><ins> </ins>Some other child node with longer text 222</a></li> </ul> //END OF UL ELEMENT N OT NEEDED THERE COULD BE more than 1 </li> </ul> </li> <li id="5"><a id="5" href="#"><ins> </ins>Root node 2</a></li> </ul> |
|||||||