JavaScript - Problem Running Onclick Script When Part Of Hyperlink

I recently coded a page that extracts certain nodes from an external XML file and prints a line of text on the webpage.

It is an HTML page that is strictly devoted to this purpose. There is no other information on it.

The page is currently stored locally on my computer, and when I open it, the script runs fine and outputs the correct text.

However, when I transferred this script over to my web server, and locate it that way, it doesn't run correctly. When I go to the page, it is supposed to display a line of text at the top. It does when I run the file from my local machine, however when I open it from the server, it doesn't display this text. (Same browser, same computer)

When I right-click and view the source, all the code is there, and the files are identical.

Any idea as to why the script runs correctly only when I open the HTML page locally?


I appreciate any help or advice.

Thanks!

Okay I am sure my script is loading when the page loads because of the alert box I have added but when I click on the button that is suppose to activate the script nothing happens.
The button code is as follows:
<button type="button" name="submit" value="submit" class="css3button" onclick="send(nick,passwd,userid,chan,showtime,showjoin,showpart,showquit,fname,fsize,nnick1,nnick2, nnick3,nnick4,nnick5)">Connect</button>
I may be using the button wrong but I am new to javascript. Any suggestions would help.

Hey guys,
I have a script that I'm running for a select box, and I need to run it twice now for another select box. Unfortunately if I duplicate it, it will not run at all.

Im sure there is a way to combine these two so they both run. Any help very much appreciated! I have colored the text that differs between the two instances in red. Runs fine individually but not the two together .

Code:

<!--[][][][][][][][] Job Contacts Script -->
<script type="text/javascript">
function show Customer (str)
{var xmlhttp;    
if (str=="")
{document.getElementById(" txtHint ").innerHTML="";
return;}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
xmlhttp.onreadystatechange=function()
{if (xmlhttp.readyState==4 && xmlhttp.status==200)
{document.getElementById(" txtHint ").innerHTML=xmlhttp.responseText;}}
xmlhttp.open("GET"," getcustomer.asp ?q="+str,true);
xmlhttp.send();
}window.onload = function() {
document.getElementsByName(' customers ')[0].onchange();};
</script>



<!--[][][][][][][][] Job Ship Site Script -->
<script type="text/javascript">
function show Shipto (str)
{var xmlhttp;    
if (str=="")
{document.getElementById(" txtHint2 ").innerHTML="";
return;}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
xmlhttp.onreadystatechange=function()
{if (xmlhttp.readyState==4 && xmlhttp.status==200)
{document.getElementById(" txtHint2 ").innerHTML=xmlhttp.responseText;}}
xmlhttp.open("GET"," getshipsite.asp ?q="+str,true);
xmlhttp.send();
}window.onload = function() {
document.getElementsByName( 'shipsites ')[0].onchange();};
</script>

Hello

I needed an interdependent form for my website and found a JavaScript that would do the trick.

Now i have no knowledge in JavaScript but i managed to set this up right. But i seems some part of the script makes a popup window which is showing what is chosen in the form and i reeeally want to remove that

Can anyone pick out which piece of the script i need to remove?

Thanks in advance

Code:

var ss2Values = [
  // 'Please choose a subject'
  ['Please choose a category'],
  // '3D Printer'
  ['Please choose a category', 'Darwin', 'Huxley', 'MendelMax', 'Original Mendel', 'Printrbot', 'Prusa Mendel', 'Wallace', 'Upgrades'],
  // 'Home'
  ['Please choose a category', 'Bathroom', 'Bedroom', 'Decorations', 'Furniture', 'Home utilities', 'Household items', 'Kitchen', 'Livingroom', 'Outdoor', 'Spareparts'],
  // 'Mechanical'
  ['Please choose a category', 'Gears', 'Nuts and bolts', 'Tracks and bogies'],
  // 'Electrical'
  ['Please choose a category', 'Battery boxes', 'Terminal blocks', 'Outlet boxes'],
  // 'Electrical'
  ['Please choose a category', 'Architectural', 'Games', 'Ornaments', 'Toys'],
  // 'Educational'
  ['Please choose a category', 'Biological models', 'Chemical models', 'Mathematical', 'Physical models']
];
window.onload = function()
{
  var ss2 = new xSubSelect('sel20', 'sel21', null, ss2Values, ss2OnChange);
}
function ss1OnChange(s0, s1, s2)
{
  alert(
    s0.options[s0.selectedIndex].value + ' / '
    + s1.options[s1.selectedIndex].value + ' / '
    + s2.options[s2.selectedIndex].value
  );
}
function ss2OnChange(s0, s1)
{
  alert(
    s0.options[s0.selectedIndex].value + ' / '
    + s1.options[s1.selectedIndex].value
  );
}
function xSubSelect(sSelId0, sSelId1, sSelId2, aValues, fnOnChange)
{
  var s0 = document.getElementById(sSelId0);
  var s1 = document.getElementById(sSelId1);
  var s2 = sSelId2 ? document.getElementById(sSelId2) : null;
  if (s0 && s1)
  {
    s0.onchange = function()
    {
      var i, len, val;
      // clear existing options for s1
      len = s1.options.length;
      for (i = 0; i < len; ++i)
      {
        s1.options[0] = null;
      }
      // insert new options for s1
      len = aValues[s0.selectedIndex].length;
      for (i = 0; i < len; ++i)
      {
        val = aValues[s0.selectedIndex][i];
        s1.options[i] = new Option(s2 ? val[0] : val);
      }
      // update s2
      if (s2)
      {
        s1.onchange();
      }
    };
    if (s2)
    {
      s1.onchange = function()
      {
        var i, len;
        // clear existing options for s2
        len = s2.options.length;
        for (i = 0; i < len; ++i)
        {
          s2.options[0] = null;
        }
        // insert new options for s2
        len = aValues[s0.selectedIndex][s1.selectedIndex].length;
        for (i = 1; i < len; ++i)
        {
          s2.options[i - 1] = new Option(aValues[s0.selectedIndex][s1.selectedIndex][i]);
        }
      };
      s2.onchange = function()
      {
        if (fnOnChange)
        {
          fnOnChange(s0, s1, s2);
        }
      };
    }
    else
    {
      s1.onchange = function()
      {
        if (fnOnChange)
        {
          fnOnChange(s0, s1);
        }
      };
    }
    s0.onchange(); // first init
  }
}

I have 2 pages, If in test.php i include test2.php everything is working perfect, but if the page appear the script is not working. Can someone help me find a problem?

test.php
PHP Code:
<head>
<script>
function Show_test2(){
 var ajaxRequest;
try{
 ajaxRequest = new XMLHttpRequest();
 } catch (e){
 try{
 ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
 try{
 ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
 } catch (e){
 alert("Your browser broke!");
 return false;
 } } } 
 var ot = document.getElementById('over_time').value;
 var queryString = "?ot=" + ot;
 ajaxRequest.open("GET", "test2.php" + queryString, true);
 ajaxRequest.send(null);
  ajaxRequest.onreadystatechange = function(){
 if(ajaxRequest.readyState == 4){
 var ajaxDisplay = document.getElementById('Show_test2');
 ajaxDisplay.innerHTML = ajaxRequest.responseText;
 } } }
</script>
</head>
<body>
<?php
//include ("test2.php");
    $year = 2014;
   if(!empty($year)) {
    echo 'Over Time: ';
    echo '
    <select name="over_time" id="over_time" onclick="Show_test2()">
    <option value="1">0</option>
    <option value="2">1</option>
    <option value="3">2</option>
    <option value="4">3</option>
    <option value="5">4</option>
    <option value="6">5</option>
    </select>
    <br/>';
    echo '<div id="Show_test2"></div>';
    }
?>
</body>

test2.php
PHP Code:
<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(function() {
    $('input[name^="player"]').keyup(function(event) {
    var player = $(this).attr("name").split('_');
    player = player[1];
    var player_sum = 0;
    $('.player_'+player).each(function(index, el) {
    var pt = parseInt($(el).val());
    if(!isNaN(pt))
    {
    player_sum += pt;
    }
    });
    $('#sum_'+player).html(player_sum);
    });
    });
</script>
<body>   
<?php
echo 'first half<br>';
for ($i=1;$i<4;$i++){
echo "gracz".$i.": <input type='text' class='player_".$i."' name='player_".$i."' size='1' maxlength='2'> ";
}
echo '<br><br>';
echo 'second half<br>';
for ($i=1;$i<4;$i++){
echo "gracz".$i.": <input type='text' class='player_".$i."' name='player_".$i."' size='1' maxlength='2'> ";
}
echo '<br><br>';
for ($i=1;$i<4;$i++){
echo "gracz".$i.": <span id='sum_".$i."'>0</span> ";
}
echo '<br><br>';
?>
</body>
</html>

Thanks

Is there a way that I can run a second set of this script on the same page at the same time?

If I want a 2nd instance of this script to run on the same page...what values would I need to rename in the 2nd instance?

When I try to place this script a second time it only shows the 2nd scripts values or banner ads... I'm trying to make a Banner rotation placement on my sites inner pages (It's a Wordpress powered site) One Set of Banners that ROTATE directly Above Another Set...

I like this script since it allows for a Random order on each page load and will ALSO cycle through Each Banner once before repeating the order, That way Each Advertiser will get seen before another is seen a second or third time...

I know there are plug-ins for wordpress for advertising, but I have not found any that will rotate out the banners every x niumber of seconds, like this does...

Is there a way that I can run a second set of this script on the same page at the same time?




<script type="text/javascript">

// Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use

var ultimateshow=new Array()

//ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"]

ultimateshow[0]=['http://www.rockinghamcountymerchants.com/CraigTravis/CraigTravis250x250.jpg', 'http://tcraigtravis.com/', '_new']
ultimateshow[1]=['http://www.rceno.com/RCENO/bannerads/elizabethspizza/elizabethspizza250x250.jpg', 'http://www.rceno.com/RCENO/advertisers/elizabethspizza/index.html', '_new']
ultimateshow[2]=['http://www.rceno.com/RCENO/bannerads/gavinsmightychamps/gavin250x250.jpg', 'http://www.gavinsmightychamps.com/index.html', '_new']
ultimateshow[3]=['http://www.rceno.com/RCENO/bannerads/redrivergrill/RedRiver2420-250x250.jpg', 'http://www.rockinghamcountymerchants.com/redrivergrill', '_new']
ultimateshow[4]=['http://www.rceno.com/RCENO/bannerads/qualitycleaners/QC250x250-011510.jpg', 'http://www.rockinghamcountymerchants.com/qualitycleaners', '_new']








//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth="250px" //set to width of LARGEST image in your slideshow
var slideheight="250px" //set to height of LARGEST iamge in your slideshow
var slidecycles="continous" //number of cycles before slideshow stops (ie: "2" or "continous")
var randomorder="yes" //randomize the order in which images are displayed? "yes" or "no"
var preloadimages="yes" //preload images? "yes" or "no"
var slidebgcolor='white'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=9000

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById
var curcycle=0

if (preloadimages=="yes"){
for (i=0;i<ultimateshow.length;i++){
var cacheimage=new Image()
cacheimage.src=ultimateshow[i][0]
}
}

var currentslide=0

function randomize(targetarray){
ultimateshowCopy=new Array()
var the_one
var z=0
while (z<targetarray.length){
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
ultimateshowCopy[z]=targetarray[the_one]
targetarray[the_one]="_selected!"
z++
}
}
}

if (randomorder=="yes")
randomize(ultimateshow)
else
ultimateshowCopy=ultimateshow

function rotateimages(){
curcycle=(currentslide==0)? curcycle+1 : curcycle
ultcontainer='<center>'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" target="'+ultimateshowCopy[currentslide][2]+'">'
ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='</a>'
ultcontainer+='</center>'
if (ie||dom)
crossrotateobj.innerHTML=ultcontainer
if (currentslide==ultimateshow.length-1) currentslide=0
else currentslide++
if (curcycle==parseInt(slidecycles) && currentslide==0)
return
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
rotateimages()
}

if (ie||dom)
window.onload=start_slider

</script>


In Other words I would have one set of 5 ads rotating and directly below it another set of 5 Ads

Hi there,
I'm fairly new to Javascript, though have a good deal of experience with C# and HTML. I am having trouble getting a form to validate when it is submitted. My goal is that if a checkbox is checked (allowing the user to request more information via email) that the email address textbox should also verified to be filled out. What I have is a script in the page body, that (I believe) validates the two form elements, and the form has an onsubmit tag to run the javascript. However, everytime I run a test on the page, it submits regardless of if there is or isn't anything in the email field, with the box checked. Any guidance would be appreciated!

Code:

<script type="text/javascript"> 
function validate(){
if(document.getElementById('00N50000002tarI').value == '1' && document.getElementById('email').value == ''){
     alert('Please enter your email address');
     return false;
}
</script> 
<form class="apply_now_form" action="test.php" id="apply_now_form" method="POST" onsubmit="return validate();">

<div class="text"><label for="email">Email</label> <input id="email" type="text" name="email" maxlength="80" /></div>
<div class="check"><font color="#006e92"><input  id="00N50000002tarI" name="00N50000002tarI" type="checkbox" value="1" />*I would like to receive the latest updates via email.</font><br></div>

<div class="submit"><input class="c pill-button" type="submit" name="submit" value="Apply Now!"/></div>
</form>

Note: This form was generated by SalesForce Web-to-lead, so I cannot modify form field names, and the form is running on WordPress, in an blank page template (so there shouldn't be any WordPress code muddling with the form).

Hi,

I have a site that runs a javascript slideshow automatically when a user visits it.

It is designed in such a way that I cannot pre-load individual images for aesthetic reasons. (Also the whole concept makes my brain hurt.)

I therefore need 1 of 2 things:

1. A preloader that doesn't show the page or start the slideshow until all the images are loaded.

or

2. I could start with the slideshow paused, and when the page is fully loaded, the play command (currently attached to a 'play' button) is 'sent'.

(I'm not techy, so this is the best I can do as explanation.)

The latter would probably be more elegant, especially if ultimately I could hide the controls for the slideshow with a loading bar until all the html is loaded, and then show them when the slideshow starts.

I'm sorry if this is a really basic question. I tried searching the site but couldn't find anything.

If you do feel like answering, can you imagine that you are speaking to a 5 year old. Then dumb it down a bit. I need all the explanation and clarity I can get!

Thanks!

Hi there, this is our first post, just stubmled across this awesome site. Need some help if anyone is able (and willing ).

We are trying to make the best possible shopping experience for our customers.

Objective: to give the customer a running total of what they're about to order, before they add to basket (kind of a quick quote).

if you go to our test page: http://www.gatewrights.co.uk/page87.html we have got a form (boxed in red) which does indeed put the totals (of that form) in the totals box (on our form). As you should see if you test it. Now, I need to try and work out (but am really struggling) how to get it to work with the items on our form.

Objective: to give the customer a running total of what they're about to order, before they add to basket (kind of a quick quote).

I'll post the head js code and the body js code below.

I have tried renaning the formID to 'frmOrder' (the same as the one boxed in red, and then moved that boxed one off page but it doesn't work. I suspect there is a little work to do (possibly in the value fields of our form).

Hope it is clear, and I thank you for your time so far.

--------------------------
js head code:
Code:

</script><script type="text/javascript" src="orderform04.js"></script>

(plus)

Code:

<script type="text/javascript">
    //<![CDATA[
    window.onload = setupScripts;
    function setupScripts()
    {
         var anOrder1 = new OrderForm();
    }
    //]]>
    </script>

--------------------
js file uploaded to root directory (orderform04.js):

Code:

// mredkj.com
// OrderForm.js - v0.4
// v0.4 - 2007-02-01
// v0.3 - 2006-04-09
// v0.2 - 2006-04-08
// v0.1 - 2006-04-06

function OrderForm(prefix, precision, firstChoice) {
     
     this.prefix = prefix ? prefix : '';
     
     // ****************************
     // Configure here
     // ****************************
     // names - Set these according to how the html ids are set
     this.FORM_NAME = this.prefix + 'frmOrder';
     this.BTN_TOTAL = this.prefix + 'btnTotal';
     this.TXT_OUT = this.prefix + 'txtTotal';
     
     // partial names - Set these according to how the html ids are set
     this.CHK = this.prefix + 'chk';
     this.SEL = this.prefix + 'sel';
     this.PRICE = this.prefix + 'txtPrice';
     
     // precision for the decimal places
     // If not set, then no decimal adjustment is made
     this.precision = precision ? precision : -1;
     
     // if the drop down has the first choice after index 1
     // this is used when checking or unchecking a checkbox
     this.firstChoice = firstChoice ? firstChoice : 1;
     // ****************************
     
     // form
     this.frm = document.getElementById(this.FORM_NAME);
     
     // checkboxes
     this.chkReg = new RegExp(this.CHK + '([0-9]+)');
     this.getCheck = function(chkId) {
          return document.getElementById(this.CHK + chkId);
     };
     
     // selects
     this.selReg = new RegExp(this.SEL + '([0-9]+)');
     this.getSelect = function(selId) {
          return document.getElementById(this.SEL + selId);
     };
     
     // price spans
     this.priceReg = new RegExp(this.PRICE + '([0-9]+)');
     
     // text output
     this.txtOut = document.getElementById(this.TXT_OUT);
     
     // button
     this.btnTotal = document.getElementById(this.BTN_TOTAL);
     
     // price array
     this.prices = new Array();
     
     var o = this;
     this.getCheckEvent = function() {
          return function() {
               o.checkRetotal(o, this);
          };
     };
     
     this.getSelectEvent = function() {
          return function() {
               o.totalCost(o);
          };
     };
     
     this.getBtnEvent = function() {
          return function() {
               o.totalCost(o);
          };
     };
     
     /*
      * Calculate the cost
      *
      * Required:
      * Span tags around the prices with IDs formatted
      * so each item's numbers correspond its select elements and input checkboxes.
      */
     this.totalCost = function(orderObj) {
          var spanObj = orderObj.frm.getElementsByTagName('span');
          var total = 0.0;
          for (var i=0; i<spanObj.length; i++) {
               var regResult = orderObj.priceReg.exec(spanObj.id);
               if (regResult) {
                    var itemNum = regResult[1];
                    var chkObj = orderObj.getCheck(itemNum);
                    var selObj = orderObj.getSelect(itemNum);
                    var price = orderObj.prices[itemNum];
                    var quantity = 0;
                    if (selObj) {
                         quantity = parseFloat(selObj.options[selObj.selectedIndex].text);
                         quantity = isNaN(quantity) ? 0 : quantity;
                         if (chkObj) chkObj.checked = quantity;
                    } else if (chkObj) {
                         quantity = chkObj.checked ? 1 : 0;
                    }
                    total += quantity * price;
               }
          }
          if (this.precision == -1) {
               orderObj.txtOut.value = total
          } else {
               orderObj.txtOut.value = total.toFixed(this.precision);
          }
     };

     /*
      * Handle clicks on the checkboxes
      *
      * Required:
      * The corresponding select elements and input checkboxes need to be numbered the same
      *
      */
     this.checkRetotal = function(orderObj, obj) {
          var regResult = orderObj.chkReg.exec(obj.id);
          if (regResult) {
               var optObj = orderObj.getSelect(regResult[1]);
               if (optObj) {
                    if (obj.checked) {
                         optObj.selectedIndex = orderObj.firstChoice;
                    } else {
                         optObj.selectedIndex = 0;
                    }
               }
               orderObj.totalCost(orderObj);
          }
     };
     
     /*
      * Set up events
      */
     this.setEvents = function(orderObj) {
          var spanObj = orderObj.frm.getElementsByTagName('span');
          for (var i=0; i<spanObj.length; i++) {
               var regResult = orderObj.priceReg.exec(spanObj.id);
               if (regResult) {
                    var itemNum = regResult[1];
                    var chkObj = orderObj.getCheck(itemNum);
                    var selObj = orderObj.getSelect(itemNum);
                    if (chkObj) {
                         chkObj.onclick = orderObj.getCheckEvent();
                    }
                    if (selObj) {
                         selObj.onchange = orderObj.getSelectEvent();
                    }
                    if (orderObj.btnTotal) {
                         orderObj.btnTotal.onclick = orderObj.getBtnEvent();
                    }
               }
          }
     };
     this.setEvents(this);

     /*
      *
      * Grab the prices from the html
      * Required:
      * Prices should be wrapped in span tags, numbers only.
      */
     this.grabPrices = function(orderObj) {
          var spanObj = orderObj.frm.getElementsByTagName('span');
          for (var i=0; i<spanObj.length; i++) {
               if (orderObj.priceReg.test(spanObj.id)) {
                    var regResult = orderObj.priceReg.exec(spanObj.id);
                    if (regResult) {
                         orderObj.prices[regResult[1]] = parseFloat(spanObj.innerHTML);
                    }
               }
          }
     };
     this.grabPrices(this);
     
}

---

Now I hope this makes sense, and really appreciate any help you can offer. If anything is unclear, please let me know.

ps is it something to do with "* Prices should be wrapped in span tags, numbers only."??

Hello, I'm building a simple custom dropdown menu for a web-site so that I can control look and feel as well as the behavior of an iframe.

I've set it up so that when the user clicks on any of the menu's active components, an "if" sequence in the clickHandler() function is activated that gets the element's class. If the event occurred on a dropdown option, the event-target id is checked, and the appropriate function is called. At least this is how it's supposed to work.

All of the drop-down options have been assigned the "dmo" class. When I test the menu and click on other elements, it works fine. But when I click the "dmo" drop-down options, nothing happens. Firebug and IE Explorer Developer Tools both show no errors, but on clicking a dropdown option, the correlate code doesn't run at all, and after hours of head-banging, I have no idea why.

I need help on this one. Here's the code.

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>Untitled Document</title>

<style type="text/css">

BODY {
	background:#000;
}
.DropMenu {
	width:228px;
	height:1.5em;
}
.DropMenu span {
	color:#FFF;
	font-size:0.875em;
	font-family:Verdana, Geneva, sans-serif;
	font-weight:bold;
}
.DropMenuLabel {
	float:left;
	width:85px;
	height:1.5em;
	padding:0.2em 0 0 0;
	text-indent:0.3em;
}
.DropMenuTopList {
	width:130px;
	float:left;
	height:1.5em;
	padding:0 0 0 0;
	cursor:pointer;
}
.DropMenuTopList img {
	padding:0.4em 0 0 0.3em;
	cursor:pointer;
}
.DropMenu span {
	color:#FFF;
	font-size:.875em;
	font-family:Verdana, Geneva, sans-serif;
	font-weight:bold;
	vertical-align:center;
}
#dropMenuButton {
	cursor:pointer;
}
#dropMenuOptions {
	position:relative;
	width:130px;
	left:85px;
	padding:0.2em 0 0 0;
	visibility:hidden;
	cursor:pointer;
}
.MenuList {	
	list-style-type:none;
	top:0;
	left:0;
	width:100%;
	margin:1.5em 0 0 0;
	padding:0;
}
.MenuList li{
	height:1.5em;
	margin:0.2em 0 0 0;
	padding:0;
	width:100%;
	background-color:#666;
	border-color:#AAA;
	border:0.5px solid;
	text-indent:0.3em;
}
.dmo {
	z-index:100;
}

</style>

<script type="text/javascript" language="javascript">

window.onload = function() 
	{	
		setBehavior();
	}

function setBehavior()
	{
		/*
		var downButton = document.getElementById('dropMenuButton')
		downButton.onclick = new Function ( "showMenu()" );
		*/
		window.onclick = new Function ( "evt" , "clickHandler( evt )" );
	}

function clickHandler( evt )
	{
	
		var dropMenu = document.getElementById('dropMenuOptions');
	
		var e = evt;
		var targ;
	
		if (e.target) {targ = e.target}
		else if (e.srcElement) {targ = e.srcElement}
		
		var targClass = targ.getAttribute('class');
				
		/* classnames 
		
		dmb - dropdown button - this should toggle the dropdown visibility on and off on click, and toggle visibility on over/out
		dmo - option - once clicked, this should turn the dropdown visibility off
		
		*/
		
		var exclude = ("dmb" || "dmo")
		if (targClass != exclude )
			{
				hideMenu()				
			}
		
		else if (targClass == "dmb" )
			{
				if (dropMenu.style.visibility == "visible") { hideMenu() }
				else showMenu();
			}

		else if (targClass == "dmo" )
			{
				if ( targ.id == "option1" ){ window.open(www.bing.com,"Bing") }
				else if ( targ.id == "option2" ){ window.open(www.bing.com,"Bing") }
				else if ( targ.id == "option3" ){ window.open(www.cuil.com,"Cuil") }
				hideMenu();
			}
	}

function showMenu()
	{
		var dropMenu = document.getElementById('dropMenuOptions');
		
		dropMenu.style.visibility= "visible";
	}

function hideMenu()
	{
		var dropMenu = document.getElementById('dropMenuOptions');
		
		dropMenu.style.visibility= "hidden";
	}

</script>


</head>

<body>

<div id="customMenu" class="DropMenu">
	<span>
    
    <div class="DropMenuLabel">Options:</div>
    
    <div class="DropMenuTopList dmb" id="dropMenuTopList">Temp Text
   	    <img class="dmb" id="dropMenuButton" src="Assets/Buttons/DropMenuDownButton.png">
        </img>
    </div>
    
    <div class="dmo DropMenuOptions" id="dropMenuOptions">
        <ul id="menuList" class="dmo MenuList">
            <li id="option1" class="dmo">Option1</li>
            <li id="option2" class="dmo">Option2</li>
            <li id="option3" class="dmo">Option3</li>
        </ul>                
    </div>
        
    </span>    

</div>


</body>
</html>

I've been hammering at this for quite a while and it has me stumped. I have 4 variables that I am creating in the head section of my code. I am passing 2 parameters to my test page via the url and they are intended to be used to construct alternate url's for use by menu buttons. This my test url. My test link

Here is a code snippet that creates the alternate url's. Code:

<script type="text/javascript">
var videofile = swfobject.getQueryParamValue('id');
var af = swfobject.getQueryParamValue('af');
function enLink()
{
var enLink = "http://jim.playourvideo.net/lsatest.htm?id=" + videofile + "&af=" + af;
alert(enLink);
}
function spLink()
{
var spLink = "http://jim.playourvideo.net/lsatest.htm?id=sp" + videofile + "&af=" + af;
alert(spLink);
}
function grLink()
{
var grLink = "http://jim.playourvideo.net/lsatest.htm?id=gr" + videofile + "&af=" + af;
alert(grLink);
}
function frLink()
{
var frLink = "http://jim.playourvideo.net/lsatest.htm?id=fr" + videofile + "&af=" + af;
alert(frLink);
}
</script>

I am trying to call the appropriate function by clicking on one of menu buttons. When I click any of the buttons I get an alert showing that my url is properly constructed. But the link never seems to fire and result in switching video files. I did also try it with onclick - same result. What should happen is the page should reload and play a different regionally captioned file. For testing I haven't captioned the test files. Just trying to get the logic working. I'd sure appreciate some advice.

Jonni

I'm a complete Noob to Java. Just retired and starting a new venture.

I need to add a sound effect to my image. I read the Onmouseover tutorial using HTML5 and its exactly what I need but as hard as I try I cannot make sense of it.

My source code:

Code:

<html><head>
  
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>You Could Win BIG!</title>
<script type="text/javascript">
//preload images first
img1=new Image()
img1.src="/images/themagicbutton.png"
img2=new Image()
img2.src="/images/themagicbutton5.png"
</script>
  
</head><body bgcolor="C4C996">

<br>
<br>
<br>
<br>
<br>

<br>
<br>
<br>
<br>
<br>
<center><a href="http://bit.ly/tZ7iUv" onMousedown="document.images['example'].src=img2.src" onMouseup="document.images['example'].src=img1.src">
<img src="/images/themagicbutton.png" name="example" border=0></a>
</body></html>

I want to ad the following sound to my image above: magic-chime-03.mp3, magic-chime-03.wav, magic-chime-03.ogg as an OnClick.

I need your expertise in setting this scipt up and where to place it in my source code.

Any help I would be eternally grateful.

Hello,

I've searched high and low for some decent code that will allow a visitor to a website to bookmark the site through a hyperlink. The bookmarking is done through a javascript function that looks like this:

Code:

function OnBookmarkButtonClick (e)
{
    if (window.sidebar)
    { // Mozilla Firefox Bookmark
	    window.sidebar.addPanel("TimeSheet", window.document.location,"");	
	}
	else if (window.external)
	{ // IE Favorite	
	    window.external.AddFavorite( window.document.location, "TimeSheet");
	}
}

I need to add some detection for Opera, Safari, and Chrome. Please note that it must be feature detection, not browser detection. But as I said, I've searched high and low for this, and couldn't find anything.

Help is much appreciated.

I'd like to place an AJAX call to load another SELECT menu in my form, and I'm having trouble finding a tutorial.
Can someone point me to a good tute, or provide some guidance/examples here?

For your Copying/Pasting pleasure , here's an example button for which I'd include the onclick():
Code:

<button type="button" >Add</button>

And here's an example SELECT menu:
Code:

<select id="idNumber" name="weekday_1['workPeriod_new'][] >
	<option value="1" >one</option>
	<option value="2" >2</option>
</select>

Thanks-a-bunch,
~ Mo

NOTE: Overall, I'm pretty green in JS.

Hello Everyone,

I am in the process of creating a billboard script for our company front page which will switch between two images. I am using the following script as a base: http://tympanus.net/codrops/2009/12/...query-and-css/

I am eager to learn coding, but am still a novice at it so I was wondering if anyone could assist me with adding the following functionality:

1. Rather than (or perhaps in addition to) having the two images change based on a timer, I'd like to be able to insert a "next" arrow. Therefore I will need assistance in coding a button to change the images from "ad_1" to "ad_2" which is currently done automatically by the interval timer

2. I'd like to make the images clickable with unique destinations (so when you click on "ad_1" it will take you to "link 1", "ad_2" will take you to "link 2"

Below is my current code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Rotating Billboard with jQuery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8"/>
    </head>
    <body>
        <div class="palmtrees"></div>
        <div class="powerline"></div>
        <div class="city"></div>
        <div class="container">
            <div class="ad">
                <div id="ad_1" class="ad_1">
                    <img class="slice_1" src="ads/ad1_slice01.jpg"/>
                    <img class="slice_2" src="ads/ad1_slice02.jpg"/>
                    <img class="slice_3" src="ads/ad1_slice03.jpg"/>

                </div>
                <div id="ad_2" class="ad_2">
                    <img class="slice_1" src="ads/ad2_slice01.jpg"/>
                    <img class="slice_2" src="ads/ad2_slice02.jpg"/>
                    <img class="slice_3" src="ads/ad2_slice03.jpg"/>

                </div>
            </div>
        </div>
        <div class="billboard"></div>
        <a class="back" href="http://tympanus.net/codrops/2009/12/16/creating-a-rotating-billboard-system-with-jquery-and-css/"><a>
        <script src="jquery-1.3.2.js" type="text/javascript"></script>
        <script>
$(function() {            
    $('#ad_1 > img').each(function(i,e){
        rotate($(this),500,10000,i);
    });
    function rotate(elem1,speed,timeout,i){
        elem1.animate({'marginLeft':'18px','width':'0px'},speed,function(){
            var other;
            if(elem1.parent().attr('id') == 'ad_1')
                other = $('#ad_2').children('img').eq(i);
            else
                other = $('#ad_1').children('img').eq(i);
                other.animate({'marginLeft':'0px','width':'266px'},speed,function(){
                var f = function() { rotate(other,speed,timeout,i) };
                setTimeout(f,timeout);
            });
        });
    }
});
        </script>
    </body>
</html>

And here is a working example: http://www.santamarinas.com/RS/Tests/Billboard/

Thank you in advance for your help!!