|
JavaScript - List Expander Script, Clicking On Link Collapses Entire List. How To Prevent This?
Similar TutorialsRight now when someone clicks on my listbox I immediately do an update on the form to populate the selected item. Is there a way to detect if a user has clicked on some white area of a list box? If my list is sized 8 items but the list only has 4 items, if the user clicks near the bottom of the list where there is no item to select, can I detect that? Currently I get the form updating even if I click on the white area of the list and I'd like the form to update only if I actually click on an item in the list. Thanks Hello guys, You were all very kind to help me a few months ago when I was trying to create the code which is posted below. it is a table of banner ads that will rotate on my website and the appropriate link follows the appropraite ad when they rotate. everything is working fine except that when you click on one of the ads ( which is a link), the link works but the page displays an error at the bottom as soon as any link is clicked. Since this type of hyperlink is associated with the javascript, im not sure how to correct the issue. maybe it is a simple thing. can anyone take a look at this and help me figure out the issue? thanks. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>.</title>
<script type="text/javascript">
var ImageArray = [ // add paths, if needed
['randoms/0.jpg','http://0.com'],
['randoms/1.jpg','http://1.com'],
['randoms/2.jpg','http://2.com'],
['randoms/3.jpg','http://3.com'],
['randoms/4.jpg','http://4.com'],
['randoms/5.jpg','http://5.com'],
['randoms/6.jpg','http://6.com'],
['randoms/7.jpg','http://7.com'],
['randoms/8.jpg','http://8.com'],
['randoms/9.jpg','http://9.com'],
['randoms/10.jpg','http://10.com'],
['randoms/11.jpg','http://11.com'],
['randoms/12.jpg','http://12.com'],
['randoms/13.jpg','http://13.com'],
['randoms/14.jpg','http://14.com'],
['randoms/15.jpg','http://15.com'] // No comma after last entry
];
function randOrd() {
return (Math.round(Math.random())-0.5);
}
function ChangeImages() {
var ImgPtr = new Array();
for (var i=0; i<ImageArray.length; i++) { ImgPtr[i] = i; }
ImgPtr = ImgPtr.sort(randOrd);
var tmp = '';
for (var i=0; i<ImgPtr.length; i++) {
tmp = 'tImg'+i;
document.getElementById(tmp).src = ImageArray[ImgPtr[i]][0];
document.getElementById(tmp).alt = ImageArray[ImgPtr[i]][1];
tmp = 'lImg'+i;
document.getElementById(tmp).href = ImageArray[ImgPtr[i]][1];
}
}
var TimerAction = 0;
function startTimer() {
TimerAction = setInterval('ChangeImages()',3000);
}
function stopTimer() {
clearTimeout(TimerAction);
}
</script>
<style type="text/css">body { background-color: #000000; margin: 0;
}
</style></head>
<body onLoad="startTimer();ChangeImages()" >
<table width="250" border="0" cellpadding="0" id="ads">
<tr><td>
<a href="" id="lImg0" onclick="return gotoLink(this.id,0)"target="_blank">
<img id="tImg0" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg1" onclick="return gotoLink(this.id,1)"target="_blank">
<img id="tImg1" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg2" onclick="return gotoLink(this.id,2)"target="_blank">
<img id="tImg2" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg3" onclick="return gotoLink(this.id,3)"target="_blank">
<img id="tImg3" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg4" onclick="return gotoLink(this.id,4)"target="_blank">
<img id="tImg4" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg5" onclick="return gotoLink(this.id,5)"target="_blank">
<img id="tImg5" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg6" onclick="return gotoLink(this.id,6)"target="_blank">
<img id="tImg6" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg7" onclick="return gotoLink(this.id,7)"target="_blank">
<img id="tImg7" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg8" onclick="return gotoLink(this.id,8)"target="_blank">
<img id="tImg8" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg9" onclick="return gotoLink(this.id,9)"target="_blank">
<img id="tImg9" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg10" onclick="return gotoLink(this.id,10)"target="_blank">
<img id="tImg10" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg11" onclick="return gotoLink(this.id,11)"target="_blank">
<img id="tImg11" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg12" onclick="return gotoLink(this.id,12)"target="_blank">
<img id="tImg12" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg13" onclick="return gotoLink(this.id,13)"target="_blank">
<img id="tImg13" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg14" onclick="return gotoLink(this.id,14)"target="_blank">
<img id="tImg14" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg15" onclick="return gotoLink(this.id,15)"target="_blank">
<img id="tImg15" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
</table>
</body>
</html>
Hi all, I have been struggling on a bit of code for a while now. I need to populate a second drop down list (Region) based upon the selection of the first (County). I have found a piece of code that works on its own and have adapted to suit my needs - see below. However, when I drop it into my main page the javascript is not working. It's because of the formObject but I just don't know enough to resolve this! Furthermore, I need the textboxes the user has already completed in the form to retain their value once the javascript kicks in as the completed form will submit to a database. This piece of code is working well . . . . Code: <?php
$link = mysql_connect('myhost', 'myusername', 'mypassword') or die('Could not connect: ' . mysql_error());
mysql_select_db('mydatabase') or die('Could not select database');
if(isset($_GET["County"]) && is_numeric($_GET["County"]))
{
$County = $_GET["County"];
}
if(isset($_GET["Region"]) && is_numeric($_GET["Region"]))
{
$Region = $_GET["Region"];
}
?>
<script language="JavaScript">
function autoSubmit()
{
var formObject = document.forms['theForm'];
formObject.submit();
}
</script>
<form name="theForm" method="get">
<!-- County SELECTION BASED ON city VALUE -->
<?php
?>
<select name="County" onChange="autoSubmit();">
<option value=''</option>
<?php
//POPULATE DROP DOWN MENU WITH COUNTRIES FROM A GIVEN city
$sql = "SELECT * FROM county_regions";
$counties = mysql_query($sql,$link);
while($row = mysql_fetch_array($counties))
{
echo ("<option value=\"$row[CountyID]\" " . ($County == $row["CountyID"]? " selected" : "") . ">$row[County]</option>");
}
?>
</select>
<?php
?>
<br><br>
<?php
if($County!= null && is_numeric($County))
{
?>
<select name="Region" onChange="autoSubmit();">
<?php
//POPULATE DROP DOWN MENU WITH RegionS FROM A GIVEN city, County
$sql = "SELECT * FROM county_regions WHERE CountyID = $County ";
$Regions = mysql_query($sql,$link);
while($row = mysql_fetch_array($Regions))
{
echo ("<option value=\"$row[CountyID]\" " . ($Region == $row["CountyID"]? " selected" : "") . ">$row[Region]</option>");
}
?>
</select>
<?php
}
?>
What follows is my form where the javascript is not working - edited quite a bit to save on space! Code:
<head>
<script language="JavaScript">
function autoSubmit()
{
var formObject = document.forms['subform'];
formObject.submit();
}
</script>
</head>
<form enctype="multipart/form-data" method="post" action="add_attraction01.php" FORM NAME="FormName">
<input type="hidden" name="MAX_FILE_SIZE" value="32768" />
<label for="Business_name">Business Name</label>
<input type="text" size="60" STYLE="color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; background-color: #72A4D2;"
<id="Business_name" name="Business_name" maxlength=60/><font size="1" face="arial" color="red">Required field</font><br />
<label for="StreetAddress">Address</label>
<input type="text" size="60" rows="2" id="StreetAddress" name="StreetAddress" maxlength=120/><font size="1" face="arial" color="red">Required field</font><br />
<label for="Town">Town</label> <input type="text" size="25" id="Town" name="Town" maxlength=25/><font size="1" face="arial" color="red">Required field</font><br />
<?php
$link = mysql_connect('myhost', 'myusername', 'mypassword') or die('Could not connect: ' . mysql_error());
mysql_select_db('mydatabase') or die('Could not select database');
if(isset($_GET["County"]) && is_numeric($_GET["County"]))
{
$County = $_GET["County"];
}
if(isset($_GET["Region"]) && is_numeric($_GET["Region"]))
{
$Region = $_GET["Region"];
}
?>
<form name = "subform" method="get">
<select name="County" onChange="autoSubmit();">
<option value=''</option>
<?php
$sql = "SELECT * FROM county_regions";
$counties = mysql_query($sql,$link);
while($row = mysql_fetch_array($counties))
{
echo ("<option value=\"$row[CountyID]\" " . ($County == $row["CountyID"]? " selected" : "") . ">$row[County]</option>");
}
?>
</select>
<?php
?>
<br><br>
<?php
if($County!= null && is_numeric($County))
{
?>
<select name="Region" onChange="autoSubmit();">
<?php
$sql = "SELECT * FROM county_regions WHERE CountyID = $County ";
$Regions = mysql_query($sql,$link);
while($row = mysql_fetch_array($Regions))
{
echo ("<option value=\"$row[CountyID]\" " . ($Region == $row["CountyID"]? " selected" : "") . ">$row[Region]</option>");
}
?>
</select>
<?php
}
?>
<input type="text" size="20"id="Tel_No" name="Tel_No" maxlength=20 onkeypress="return isNumberKey(event)"/><font size="1" face="arial" color="red">Required field</font><br />
<br/>
<input type="submit" value="Submit your attraction" name="submit" onclick="return BothFieldsIdenticalCaseSensitive();"/>
</form>
</body>
</html>
It's probably obvious to you guys!! Thanks in advance for your help. 09-01-10 Not sure exactly where to post this thread as it involves HTML, Javascript and embedded media players. It probably would be more appropriate here as there is much Javascript involved.... Hello, I am trying to construct a Jukebox for my website. I have spent considerable time all over the WEB and at this forum which addressed the issue in a 50 page thread. Please see: http://codingforums.com/showthread.php?t=50666 I got a lot of ideas from this thread but still cannot figure a way to do the following within the Jukebox. These are my main two questions for everything below: 1. How can I have the Jukebox cycle through all tunes and then start over from the beginning? 2. How can I allow the user to select a tune from a list but not a drop down list, have the Jukebox start from the user’s selection and then play all songs to the end. Then as in #1, start over from the beginning? Per this thread I came away with basically two ways to assemble the jukebox. One uses links in a drop down list which the user can choose from. The other is to use an .m3u playlist. The user can only select a “playlist” from the drop down. Below, I have included the code for each Jukebox. To see the Jukeboxes in action please go to my website where I have posted some test pages exhibiting the jukeboxes that I am referring to. The following is the Jukebox which utilizes an .m3u playlist. If I end up using this idea I would like the tunes in the .m3u playlist to be displayed and allow the user to be able to choose a tune in the list. Then have the list play to the end of all tunes in the list. Then start over from the beginning of the list. After this code is the .m3u playlist. Go to url removed and click on the link that says: “Media Player Using an .M3U Playlist” Jukebox utilizing an .m3u playlist: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
text-align:center;
}
</style>
<script type="text/javascript">
function PlayIt(what){
player.document.getElementById('music').innerHTML='<object width="300" height="300" '
+'classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" '
+'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" '
+'standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">'
+'<param name="url" value="'+what+'">'
+'<param name="uiMode" value="full">'
+'<param name="autoStart" value="true">'
+'<param name="loop" value="true">'
+'<embed type="application/x-mplayer2" '
+'pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" '
+'showcontrols="true" uimode="full" width="300" height="45" '
+'src="'+what+'" autostart="true" loop="true">'
+'</object>';
}
</script>
</head>
<body>
<div id="music">
<object width="300" height="300"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">
<param name="url" value="">
<param name="uiMode" value="full">
<param name="autoStart" value="true">
<param name="loop" value="true">
<embed type="application/x-mplayer2"
pluginspage="http://microsoft.com/windows/mediaplayer/en/download/"
showcontrols="true" uimode="full" width="300" height="45"
src="" autostart="true" loop="true">
</object>
</div>
<br>
<br>
<select name="player" onchange="PlayIt(this.value)">
<option value="none">::Choose a Song::</option>
<option value="JukeboxList.m3u">Jukebox List</option>
</select><br>
</html>
Here is the .m3u playlist for the above code: Code: #EXTM3U #EXTINF:Bill Evans - G Waltz media/G Waltz.mp3 #EXTINF:Dan Pincus - In Your Time media/In Your Time.mp3 The following code is for the Jukebox that has a list of links in a dropdown list. If I go with this idea, I would like for the list not to be a dropdown list but just a list of tunes. The user should be able to click on any tune in the list and the player should start from that point, play all the remaining tunes in the list and then start from the beginning. Go to url removed and click on the link that says: “Media Player Using Links” Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
text-align:center;
}
</style>
<script type="text/javascript">
function PlayIt(what){
player.document.getElementById('music').innerHTML='<object width="300" height="300" '
+'classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" '
+'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" '
+'standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">'
+'<param name="url" value="'+what+'">'
+'<param name="uiMode" value="full">'
+'<param name="autoStart" value="true">'
+'<param name="loop" value="true">'
+'<embed type="application/x-mplayer2" '
+'pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" '
+'showcontrols="true" uimode="full" width="300" height="45" '
+'src="'+what+'" autostart="true" loop="true">'
+'</object>';
}
</script>
</head>
<body>
<select name="player" onchange="PlayIt(this.value)">
<option value="none">::Choose a Song::</option>
<option value="media/GWaltz.mp3">G Waltz</option>
<option value="media/InYourTime.mp3">In Your Time</option>
<option value="http://urltosong3.mp3">Song 3</option>
<option value="http://urltosong4.mp3">Song 4</option>
<option value="http://urltosong5.mp3">Song 5</option>
</select><br>
<div id="music">
<object width="300" height="300"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">
<param name="url" value="">
<param name="uiMode" value="full">
<param name="autoStart" value="true">
<param name="loop" value="true">
<embed type="application/x-mplayer2"
pluginspage="http://microsoft.com/windows/mediaplayer/en/download/"
showcontrols="true" uimode="full" width="300" height="45"
src="" autostart="true" loop="true">
</object>
</div>
</html>
Another idea I found on the WEB also uses an .m3u playlist. The good thing about it is that it lists all the tunes in the playlist which the user can then select from. This jukebox calls up an entire Windows Media Player. If I was to use this idea I would like to be able to disable the left side of the player where the user has options such as burning to CD, Media Guide, Radio Tuner etc… Go to url removed and click on the link that says: “Media Player Within an IFrame Using .m3u Playlist”” Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>JukeBox</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="Expires" content="-1"> </head> <body> <IFRAME name="frame" src="JukeboxList.m3u" width="100%" height="347" scrolling="no" frameborder="0"> [Your user agent does not support frames or is currently configured not to display frames.] </IFRAME> </body> </html> Thanks! Dan I would like to make an ordered list, for example: 1. Airplane 2. Boat 3. Car I'd like one of the words to be displayed on my webpage, for example: Boat Then I'd want an up button, and a down button. The up button would display Airplane instead of Boat, and the down button would display Car instead of Boat. Once it got to Car, the same up button would change it back to boat. How do I do this? Thanks. I have the code below and currently the user selects an option and clicks the go button and this links to the webpage in a new window, however I am wanting this to open in the same window instead, any help? Code: <html>
<body><script>
function goToNewPage(dropdownlist) { var url = dropdownlist.options(dropdownlist.selectedIndex).value; if (url != "") { window.open(url); } }
</script>
<p>Test</p>
<form name="dropdown"><select accesskey="E" name="list"> <option selected="selected">Please select....</option> <option value="http://www.google.com/">Google</option> <option value="http://www.search.com/">Search.com</option> <option value="http://www.dogpile.com/">Dogpile</option></select> <input onclick="goToNewPage(document.dropdown.list)" type="button" value="Go" /></form>
</body></html>
hi please help solving my problem. I have the following code for changing the td colour when chk box in it is clicked. It is working fine. My application will get some data from the database when i check a chk box say ABC. My problem is ...i want to chage the colour of the check box when it is clicked and retain the colour of my chkbox even after page refresh. Code: <html>
<head>
<title>color</title>
<script type="text/javascript">
function toggle(box,theId) {
if(document.getElementById) {
var cell = document.getElementById(theId);
if(box.checked) {
cell.className = "on";
}
else {
cell.className = "off";
}
}
}
</script>
<style type="text/css">
.off {
background-color: #fff;
}
.on {
background-color: red;
}
</style>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<td class="off" id="sub1"><input type="checkbox" name="subject" onclick="submit(); toggle(this,'sub1'); " value="s1" id="demo1">ABC</td>
<td class="off" id="sub2"><input type="checkbox" name="subject" onclick=" submit(); toggle(this,'sub2'); " value="s2" id="demo2">XYZ</td>
</tr>
</table>
</body>
</html>
Reply With Quote 01-21-2015, 08:37 AM #2 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts Originally Posted by raj_d hi please help solving my problem. I have the following code for changing the td colour when chk box in it is clicked. It is working fine. My application will get some data from the database when i check a chk box say ABC. My problem is ...i want to chage the colour of the check box when it is clicked and retain the colour of my chkbox even after page refresh. You will need to use a cookie or local storage to record the colour of the checkbox. hello, i am writing a script that will update a dropdown list based on the selection of a previous list. the script is run by a PHP script, so instead of posting the PHP, i will post an example client-side script. the hierachy is: category, sub category, brand (but sometimes there exists no sub category and the PHP script queries and adds brands instead) everything works correctly, except for one major issue: you can not change the selection of the third (brand) box this could be an easy fix for some coders, but i am not experienced in javascript and could really use some help. here is an example script, sorry it is so long Code: <script language="javascript">
function fillprodCat(){
// this function is used to fill the category list on load
addOption(document.prodCatSubCatBrand_list.add_prodCat, "1", "HD Video");
addOption(document.prodCatSubCatBrand_list.add_prodCat, "2", "Components");
addOption(document.prodCatSubCatBrand_list.add_prodCat, "3", "Audiophiles");
addOption(document.prodCatSubCatBrand_list.add_prodCat, "4", "Speakers");
addOption(document.prodCatSubCatBrand_list.add_prodCat, "5", "Whole House Audio");
addOption(document.prodCatSubCatBrand_list.add_prodCat, "6", "Furniture");
addOption(document.prodCatSubCatBrand_list.add_prodCat, "7", "Accessories");
}
function SelectprodSubCat(){
// on selection of category, this is called
removeAllOptions(document.prodCatSubCatBrand_list.add_prodSubCat);
if(document.prodCatSubCatBrand_list.add_prodCat.value == "1"){
document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"1", "HD Television");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"2", "HD Projectors");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"3", "Screens");
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "2"){
document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"4", "Turntables");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"5", "Receivers, amps & preamps");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"6", "DVD & CD players");
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "3"){
document.prodCatSubCatBrand_list.add_prodSubCat.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"0", "None");
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "4"){
document.prodCatSubCatBrand_list.add_prodSubCat.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"0", "None");
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "5"){
document.prodCatSubCatBrand_list.add_prodSubCat.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"0", "None");
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "6"){
document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"8", "AV Furniture");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"7", "Armchairs");
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "7"){
document.prodCatSubCatBrand_list.add_prodSubCat.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"10", "Power Conditioning");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"9", "Remote Controls");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"11", "Mounts");
addOption(document.prodCatSubCatBrand_list.add_prodSubCat,"12", "Cables & Interconnects");
}
}
function SelectprodBrand(){
// ON selection of category, sub category, or brand this is called
removeAllOptions(document.prodCatSubCatBrand_list.add_prodBrand);
if(document.prodCatSubCatBrand_list.add_prodCat.value == "1"){
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "1"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"1", "Hitachi");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"2", "JVC");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"3", "Panasonic");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"4", "Pioneer");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"5", "Samsung");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"6", "Sharp");
}
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "2"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"7", "Epson");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"8", "JVC");
}
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "3"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"9", "Da-Lite");
}
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "2"){
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "4"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"10", "Music Hall Audio");
}
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "5"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"11", "Arcam");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"12", "Bose");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"13", "Integra");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"14", "Krell");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"15", "Pioneer");
}
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "6"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None");
}
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "3"){
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "0"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None");
}
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "4"){
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "0"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"16", "Canton");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"17", "Dali");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"18", "Tru Audio");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"19", "Von Schweikert");
}
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "5"){
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "0"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"20", "Elan");
}
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "6"){
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "8"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"21", "BDI");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"22", "Bello");
}
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "7"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None");
}
}
if(document.prodCatSubCatBrand_list.add_prodCat.value == "7"){
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "10"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"23", "Richard Gray's Power Company");
}
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "9"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None");
}
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "11"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=true;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"", "None");
}
if(document.prodCatSubCatBrand_list.add_prodSubCat.value == "12"){
document.prodCatSubCatBrand_list.add_prodBrand.disabled=false;
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"24", "Analysis Plus");
addOption(document.prodCatSubCatBrand_list.add_prodBrand,"25", "Tributaries");
}
}
}
function removeAllOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
//selectbox.options.remove(i);
selectbox.remove(i);
}
}
function addOption(selectbox, value, text )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}
</script>
please let me know if this is too confusing to follow (because it certainly looks like it could be), and i will attempt to clean it up I have two lists/menus that are start and end times and I want to make the end time list/menu advance 2 hours from whatever is chosen in start list/menu. The values in both of the list/menu are [CODE] <select name="Time" class="Body" id="Time"> <option value="">Choose Start Time</option> <option value="06:00:00">6:00 am</option> <option value="06:30:00">6:30 am</option> <option value="07:00:00">7:00 am</option> <option value="07:30:00">7:30 am</option> ETC........ <select name="Time2" class="Body" id="Time2"> <option value="">Choose End Time</option> <option value="06:00:00">6:00 am</option> <option value="06:30:00">6:30 am</option> <option value="07:00:00">7:00 am</option> <option value="07:30:00">7:30 am</option> ETC........ [ICODE] any ideas on how to accomplish this? you can find my file at http://www.crazywayno.com/startend.php ---------------------------------------------------------------- I also tried this javascript but it doesn't add the additional 2 hours it just repeats the first value. [CODE] <script type="text/javascript"> function cfunc() { document.getElementById("Time2").value=document.ge tElementById("Time").value } </script> <select name="Time" type="text" id="Time" onmouseup="cfunc()"> <option value="">Choose Start Time</option> <option value="06:00:00">6:00 am</option> <option value="06:30:00">6:30 am</option> <option value="07:00:00">7:00 am</option> <option value="07:30:00">7:30 am</option> ETC.......... <select name="Time2" class="Body" id="Time2"> <option value="">Choose End Time</option> <option value="06:00:00">6:00 am</option> <option value="06:30:00">6:30 am</option> <option value="07:00:00">7:00 am</option> ETC........... [ICODE] You can find this at http://www.crazywayno.com/2fields.php Thanks Hi, I have two dropdown lists with the second one being dependent on the selection in the first. Options in list 1: 1,3 or 4 List two should be enabled when 3 or 4 is selected in list 1. So far so good, managed to get it to work with only one set of lists, but I actually have 18 of those sets in this form: Code: <select name="fw[$i]" id="fw[$i]"> <option value="1">FWH</option> <option value="3">links</option> <option value="4">rechts</option> <option value="0" selected></option> </select><br /> <select name="lie[$i]" id="lie[$i]" disabled="disabled" onchange="showBox($i,xxx);"> <option value="0" selected>---</option> <option value="1">gut</option> <option value="2">schlecht</option> <option value="3">Strafschlag</option> <option value="4">OB</option> </select> $i is my index generated by my PHP script and runs from 1 to 18. Everything works just fine as long as the index is not in play. With the index my function breaks, most probably due to my inability to extract the second parameter (xxx above) from the selection field. Here's my function, there could be something wrong there too with how exactly to specify the proper dropdown list to enable. Code: function showBox(field,val) {
if (val > 1) {
var box = 'lie[' + field + ']';
document.form1.box.disabled == false;
}
else {
document.form1.box.disabled == true;
}
}
Finally, I'm not that adept in javascript programming, more like a trial and error guy, how has hit the wall with this problem. Thanks in advance! Joe Hi all, I want to have a javascript popup box so that when a hyperlink is clicked, a user is asked if they are sure they want to click this link, if they select ok then the page loads, if they click canel then nothing happens, so i have this code below: Code: <script type="text/javascript">
function confirmSubmit()
{
var agree=confirm("Are you sure you wish to click this link?");
if (agree)
return true ;
else
return false ;
}
</script>
Code: <a onclick="return confirmSubmit()" href="page.html">Page</a> However when a user clicks cancel the link still loads, can anyone see where I am going wrong? any help will be appreciated Hello. I have looked everywhere and I absolutely cannot find a method that works. I'm making an html website with flash. This is all I want...... A swf "this will be the default flash you see" underneath that flash I want 3 text links named..... Flash1 Flash2 Flash3 when you click flash1, 2, or 3 I want it to swap out the Current flash video with a different one. This way The user can watch all the flash vids on the same page, rather than a separate page for each flash. I found a way to swap them out using iframe, however that requires me to make a separate html page for each of my swf's themselves. I dont want to do that. Plz if someone could help me I would greatly appreciate it! I hope I am posting this in the correct section, I know swfobject involves javascripting so thats why I'm posting here. Not that your method HAS to involve swfobject to embed. If someone can give me code that I can just copy/paste into a blank page in dreamweaver (and I would adjust the embded swf file name and size etc obviously) and have it work that would be fantastic. thank you How to get this to work? Code: <html> <body> <script type="text/javascript" src="01.js"> <h1>Welcome</h1> <a href="#" onclick="write(); return false;">Click here</a> <div id="info_here"> </div> </body> </html> 01.js Code: function write() {
var a=document.getElementById("info_here");
a.innerHTML=document.write("Hello <br />" + "Thanks for clicking");
}
I tried to word the question as best as possible, but here is what I want to do. I am creating a calculator online and it is getting more and more extensive, which is good b/c I'm learning a lot. Here is what I'm trying accomplish now. I am using "input" to get information from the user in the top section of my calculator and that will always stay the same. The part that will change is the results section (bottom part of the calc) based on a few different variations or setups, so I want to be able have them click on a few different options. Option 1 Option 2 Option 3 Depending on which one they click I want the javascript that is run for the results section to correspond to the option chosen. I also, want to be able to have a default option displayed the first time the page is loaded and then have it change if a different option is chosen. I don't think reloading the page is necessary, but I'm new to this and could use a little direction. I hope what I'd like to do makes a little sense. I'm not asking for any code written that will do this, but naturally something hints or tips that could get me going. I don't know how to "monitor" a link and return a value to a variable, so that it can be put into a an if statement in the results section. After that, it would be continually monitored or somehow restarted if the variable does change. Again, I don't know if this is the best way to go at it, but I'm not sure at all. Any help would be awesome. I have looked at "onclick", but I'm not completely sure how I can tie it all together of if I should use another method. Thanks for any suggestions/ideas/help. First, let me clarify. I'm still a JS noob, so feel free to dummy-proof your answers By my understanding, if I want to use a given JS on multiple pages, I need to call for that script in each page. If I understand correctly, it then downloads it, and the functionality is then available to that given page. Now, presuming that I've got that at least mostly correct, it seems like there should be a way to just download it once, and use it till the session is over. My thinking is to call for the heavy JS's on the welcome page after a succeful login, and then not have to slow down each and every page by calling for those same scripts. Is this common, or at least possible? Are there specific reasons to not do this? Thanks-a-bunch, ~ Mo I want to make a script selecting electronics category in this site http://eu.redeem-it.net/boutique.php A friend told me to use getElementsByClass but I still cant do it. I was advised by a community member this post would be better suited for the JavaScript section (hope someone can help): The exit pop-up script I have is working fine, other than the fact that it engages on any internal links as well. Below I have the original script I was using along with a modified script sent back to me from someone in another forum. They also advised me to add rel="external" to all of my external links. I'm not sure if a different condition would apply whether the link stayed within my site or went elsewhere. In any event, it's still not working. The changes get me to my desired page on internal links, but the pop-up still engages and I have to click "OK" before it takes me there. I'm obviously looking to get this to work so that all internal links go straight to the page they're defined to, without the pop-up engaging at all. Both script versions are below: My original: Code: <script type="text/javascript">
var internal = 0;
function bunload() {
if (internal != 1) {
window.onbeforeunload = null;
alert("******************************************************\n WAIT! WAIT! WAIT! WAIT! WAIT! WAIT!! WAIT!!\n******************************************************\n\nMy partner will probably KICK MY *** for this...\n\nI am secretly giving away a LIMITED number of $20\ncoupons just for Tweeting about us.\n\nIf you act right now, you can grab our Manuscript\nplus ALL Bonuses for just $27!\n\nJust click *CANCEL* on the next window to get your\nV.I.P. discount link!\n\n******************************************************");
window.location = "gift page";
return "******************************************************\n Click CANCEL - Click CANCEL - Click CANCEL \n******************************************************\n\n Click *CANCEL* Now to get your V.I.P. discount!\n\n"; }
else {
internal = 0;
}
}
if (internal != 1) {
window.onbeforeunload = bunload;
}
else {
internal = 0;
}
</script>
And the modified script another community member replied back to use: Code: <script type="text/javascript">
var internal = 0;
function bunload() {
if (internal != 1) {
window.onbeforeunload = null;
alert("******************************************************\n WAIT! WAIT! WAIT! WAIT! WAIT! WAIT!! WAIT!!\n******************************************************\n\nMy partner will probably KICK MY *** for this...\n\nI am secretly giving away a LIMITED number of $20\ncoupons just for Tweeting about us.\n\nIf you act right now, you can grab our Manuscript\nplus ALL Bonuses for just $27!\n\nJust click *CANCEL* on the next window to get your\nV.I.P. discount link!\n\n******************************************************");
window.location = "gift page";
return "******************************************************\n Click CANCEL - Click CANCEL - Click CANCEL \n******************************************************\n\n Click *CANCEL* Now to get your V.I.P. discount!\n\n"; }
else {
internal = 0;
}
}
if (internal != 1) {
window.onbeforeunload = bunload;
}
else {
internal = 0;
}
window.onload = function()
{
var links = document.getElementsByTagName('a');
for(i = 0 ; i < links.length; i++)
{
if(links[i].getAttribute('rel') == 'external')
{
links[i].onclick = function()
{
bunload();
}
}
}
}
</script>
Any suggestions on what I'm doing wrong here? My apologies, but my coding isn't very strong and I'm just picking this stuff up as I go. Thanks http://www.akirathedon.com/wp-conten...urama/TEST.php This code works almost perfectly for my needs bar one issue. As i have included paragraphs in the content, the ellipses is forced below the paragraph, when ideally it would sit directly next to where the text was trimmed. Can anyone think of a way I can do this with javascript or css? I tried making the paragraph an inline block and setting the ellipsis to inline but I lost my paragraph line breaks. Thanks you. I am a new to js and GM but I am trying to make a script that will click a button on a page where there are multiple instances of the button. The source I am looking at is below and I have narrowed down what I am looking at to the bold section. <dl> <dd class="left"><div id='recommendstatus_article4458331'> <dl class="recommend"> <dt class='recs'><a href="javascript://" onclick="RecSpy( 'article', '4458331', 'tippers' ); return false;">50</a> </dt> <dd><a href="javascript:void(0);" onclick="RecommendItem(1,'article','4458331','1','recommendstatus_article4458331' ); return false;" onmouseover="return overlib('Give thumbs up', WRAP);" onmouseout="return nd();"> <img class='icon' title='' alt='Thumb up' style='background-position: -304px -48px;' src='http://geekdo-images.com/images/pixel.gif' /></a></dd> <dt class='tippers'><a href="javascript://" style='color: #969600;' onclick="RecSpy( 'article', '4458331', 'tippers' ); return false;"></a></dt> <dd><a href="javascript:void(0);" onmouseover = "return overlib( 'GeekGold Tip', WRAP );" onmouseout = "nd();" onClick="GeekGoldTip(0,'article','4458331','recommendstatus_article4458331'); return false;"> <img class='icon' title='' alt='tip' style='background-position: -368px -48px;' src='http://geekdo-images.com/images/pixel.gif' /></a></dd> <dd> <a href="javascript:void(0);" onclick="RecommendItem(0,'article','4458331','','recommendstatus_article4458331', 'article4458331' ); return false;" onmouseover="return overlib('Hide this post', WRAP);" onmouseout="return nd();"> <img class='icon' title='' alt='Thumb up' style='background-position: -336px -48px;' src='http://geekdo-images.com/images/pixel.gif' /></a> </dd> <dt class='thumbsdown'> </dt> </dl> How do I create a script to find each instance of the button and click it? |
|||||||