JavaScript - Slideshow And Custom Scrollbar Script Not Working Together

I've found many examples of creating slideshows using javascript all over the internet and these forums. However, I haven't found any that show how to create a slideshow and give each slide a different time interval between switching to the next one.

I'm changing my website over from a Flash based one to something that can be read on all devices. In doing so I've looked for ways to add a little motion to the site. I'm working with a friend who has been doing most of the site but here and there I like to get my hands dirty and try some things on my own. Unfortunately he doesn't know Javascript.

I wanted to have an animation window in the bottom corner of the page. Look at http://www.whyreboot.com/blog to see what I came up with. I took a slider plugin for Wordpress and basically created a bunch of slides and entered them in to switch every .5s so that I could change how quickly they changed images by making some of them repeat the same slide 4 times for 2s, 2 times for 1s, etc. Though it's not pretty, it works. On Firefox everything looks great although it'd be nice to have fade in and out on each slide. On an iPad or IE it actually shows the flash between slides even when they're the same image. Quite frankly, it's ugly. Does anybody have any ideas?

Please keep in mind that I am a network systems engineer by trade so the only coding I know is Cisco IOS, etc. I'm trying to get this to work in a Wordpress site on a window with dimensions of 450X230.

I apologize if this is not the correct place to look for help on this. I have read the forum fules and guidelines and this seemed to be the right place. Thanks ahead of time for any sage advice from what looks like a great community of web geeks!

I want to repeat the same slideshow next to my working one, and have copied and pasted the same code, but for some reason which I don't understand it is appearing as a still image with no movement, or the 'back' and 'forward' arrows?

Heres my website in testing to show what I mean: http://whnpf.perdu.servertrust.com/

The code is:

Code:

<script type="text/javascript" src="/v/vspfiles/assets/images/stepcarousel.js"></script>

<script type="text/javascript" src="/v/vspfiles/assets/images/stepcarousel.js">

</script>

<style type="text/css">

.stepcarousel{
position: relative; /*leave this value alone*/
float:left;
border: 1px solid GREY;
overflow: scroll; /*leave this value alone*/
width: 313px; /*Width of Carousel Viewer itself*/
height: 262px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: absolute; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0px; /*margin around each panel*/
width: 313px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

</style>



<script type="text/javascript">

stepcarousel.setup({
	galleryid: 'mygallery', //id of carousel DIV
	beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'panel', //class of panel DIVs each holding content
	autostep: {enable:true, moveby:1, pause:3000},
	panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
	defaultbuttons: {enable: true, moveby: 1, leftnav: ['/v/vspfiles/assets/images/backward.jpg', 80, 215], rightnav: ['/v/vspfiles/assets/images/forward.jpg', -135, 215]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})

</script>


<div id="mygallery" class="stepcarousel">
<div class="belt">

<div class="panel">
<img src="/v/vspfiles/assets/images/HOTDEALS.jpg" />
</div>

<div class="panel">
<img src="/v/vspfiles/assets/images/POPULAR.jpg" />
</div>

<div class="panel">
<img src="/v/vspfiles/assets/images/HOTDEALS.jpg" />
</div>

<div class="panel">
<img src="/v/vspfiles/assets/images/POPULAR.jpg" />
</div>

<div class="panel">
<img src="/v/vspfiles/assets/images/HOTDEALS.jpg" />
</div>

</div>
</div>

 <-! ##### SECOND SLIDESHOW NOT WORKING ###### !-> 

<script type="text/javascript" src="/v/vspfiles/assets/images/stepcarousel.js"></script>

<script type="text/javascript" src="/v/vspfiles/assets/images/stepcarousel.js">

</script>

<style type="text/css">

.stepcarousel{
position: relative; /*leave this value alone*/
float:left;
border: 1px solid GREY;
overflow: scroll; /*leave this value alone*/
width: 313px; /*Width of Carousel Viewer itself*/
height: 262px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: absolute; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0px; /*margin around each panel*/
width: 313px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

</style>



<script type="text/javascript">

stepcarousel.setup({
	galleryid: 'mygallery', //id of carousel DIV
	beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'panel', //class of panel DIVs each holding content
	autostep: {enable:true, moveby:1, pause:3000},
	panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
	defaultbuttons: {enable: true, moveby: 1, leftnav: ['/v/vspfiles/assets/images/backward.jpg', 80, 215], rightnav: ['/v/vspfiles/assets/images/forward.jpg', -135, 215]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})

</script>


<div id="mygallery" class="stepcarousel">
<div class="belt">

<div class="panel">
<img src="/v/vspfiles/assets/images/HOTDEALS.jpg" />
</div>

<div class="panel">
<img src="/v/vspfiles/assets/images/POPULAR.jpg" />
</div>

<div class="panel">
<img src="/v/vspfiles/assets/images/HOTDEALS.jpg" />
</div>

<div class="panel">
<img src="/v/vspfiles/assets/images/POPULAR.jpg" />
</div>

<div class="panel">
<img src="/v/vspfiles/assets/images/HOTDEALS.jpg" />
</div>
[/B]
</div>
</div>

Any help would greatly be appreciated, thanks!

http://becompleteamerica.com/index.p...tact&Itemid=80

It works awesome in all browsers but IE 7 & 8. The custom "alert" is actually a dialog box, with a background fader underneath it, kind of like lightbox.

Any ideas why IE doesn't play nice? Thx

Hi, i am currently using the below slideshow javascript on one location on a webpage.
http://www.javascriptkit.com/howto/show2.shtml

I have another image on the same webpage, that i would like to turn into a slideshow as well.

My problem is, that as soon as i put the "head" code for the second group of images, none of the slideshows work..

Basically, how can i get two slideshows on one page, using the same script?
If anyone can help me i would really appreciate

Thanks!
srhlb

Hi,

I need some help with a slideshow script. I have a client who wants a slideshow script similar to BR's site (http://bananarepublic.gap.com/ ). See the part where the big picture is that has the little gray box on the side with the date? My customer wants that to be a slideshow (where the picture is - so multiple pictures fading in/out) with that gray spot over it with the date on it (staying on the slideshow as the pictures move behind it). How would I go about doing this?

I am not an expert in writing Javascript, but I can edit javascript once it's written. If anyone has any tips or can help at all, it'd be much appreciated!

Thanks!

Currently we have an implementation of Lightbox (not sure which version) on our site that aids in the process of a voting system. I wasn't around when it was created, and after creating a new version of the site, have no idea how to re-integrate it so I was hoping some seasoned JS people out there can help me.

Now what happens is that people go to the voting page where the list is populated with entries from a mysql db. The names are clickable and, when clicked, a lightbox should show up with the information about the person and have a vote and close button. The vote button, when pressed, should tick a single vote back in the mysql db, and then take them to a "Thank you for voting, here are the current top 10" type page. That's the overall function.

Here's what information I do have so far:
In the root directory there's a folder named templates Inside of that, there's a folder called Lightbox inside of Lightbox, there are 3 folders [css, images, and js] The *.js folder has [builder.js, effects.js, lightbox.js, prototype.js and scriptaculous.js] inside
When clicking on a name, however, it just takes me to the image as if it's directly linked instead of opening up the Lightbox. So I need some help getting this to work.

New to the forum so any help you can provide is greatly appreciated. I have been using a Javascript slideshow code for several websites. I create images that are exactly the same size and then the slideshow moves through them with a cross-fade. Cross-fade does not work in FireFox but images still change over nicely, just no fade. In IE, the cross-fade worked beautifully, creating a seamless transition between images.

Now - I'm guessing within the last 2 months? - these images in IE 'jump'. Instead of a seamless transition, the fade causes the next image in show to come in from upper left of slide show area. So images appear to jump into place rather than slowly transition in.

Did IE change something in the way it processes Java? This code worked perfectly until recently. I'm not a Java programmer - using this code from another source.
Here is heart of the transition code:
[CODE]
var tss;
var iss;
var jss = 1;
var pss = Picture.length-1;

var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}

function runSlideShow(){
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=2)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
jss = jss + 1;
if (jss > (pss)) jss=1;
tss = setTimeout('runSlideShow()', SlideShowSpeed);
}
[CODE]

As I said, I have used this code on several websites & it is the focal point for a nice-looking display. Any input, help or advice is greatly appreciated.

Hello guys and gals ,

I am using one of the JavaScript codes provided at http://www.javascriptkit.com, and it works great on Chrome and Firefox. But Internet Explorer is giving me trouble

Here is the HTML:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="Keywords go here" name="keywords" />
<meta content="Description goes here" name="description" />
<meta content="This website is coded and maintained by ***** " name="author" />
<meta content="@2004 ***** " name="copyright" />
<meta http-equiv="Content-Style-Type" content="text/css2" />
<title>Concepto MV</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Comfortaa:400,700' rel='stylesheet' type='text/css'>

<!--Website coded and maintained by Alexandra barvo
Copyright @2011 w ww.alexandrabarvo.com -->
</head>
<body>
<div id="background"></div><!--Backgroung-->
<div id="wrapper">
<div id="nav">
<div id="logo">
<img src="images/logo.png"/>
</div><!--logo-->
<ul id="main_nav">
<li><a class="active" href="index.html">HOME</a></li>
<li>|</a></li>
<li><a href="about.html">OUR COMPANY</a></li>
<li>|</a></li>
<li><a href="services.html">SERVICES</a></li>
<li>|</a></li>
<li><a href="contact.html">CONTACT US</a></li>
</ul>
<ul id="social">
<li><a href="http://www.twitter.com" target="blank"><img src="images/twitter.png" border="0"/></a></li>
<li><a href="http://www.flickr.com" target="blank"><img src="images/flickr.png" border="0"/></a></li>
<li><a href="http://www.facebook.com" target="blank"><img src="images/facebook.png" border="0"/></a></li>
</ul>
</div><!--nav-->
<div id="slideshow">
<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]=['images/render1.jpg', '', '']
ultimateshow[1]=['images/render2.jpg', '', '']
ultimateshow[2]=['images/render3.jpg', '', '']

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

var slidewidth="900px" //set to width of LARGEST image in your slideshow
var slideheight="400px" //set to height of LARGEST iamge in your slideshow
var slidecycles="3" //number of cycles before slideshow stops (ie: "2" or "continous")
var randomorder="no" //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=3000

////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>
</div><!--slideshow-->
<div class="push"></div><!--push-->
</div><!--wrapper-->
<div class="footer">
<p id="copy">Copyright &copy; 2012</p>
</div><!--footer-->
</div><!--body-->
</body>
</html>

And here is the CSS


Code:

@charset "utf-8";
/* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

body{
	background:url(../images/bg.jpg) repeat;
	padding: 0px;
	font: 12px 'Comfortaa', Helvetica, sans-serif;
	color: #CCC;
}

#wrapper{
	margin:0 auto 75px auto;
	width:960px;
	min-height: 100%;
	height:auto !important;
	height:100%;
}

#background{
	background:url(../images/nav_bg.png) repeat-x;
	position:absolute;
	left:0;
	top:35px;
	width:100%;
	height:100%;
	z-index:-1;
}

#website{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:99;
}

#nav{
	/*background: url(../images/nav_bg.png) repeat-x;*/
	width: 100%;
	height: 75px;
	margin-top: 35px;
	margin-bottom: 75px;
}

#logo{
	margin-left:40px;
	float:left;
}

#main_nav{
	margin-left: 22px;
}

ul#main_nav{
	list-style:none;
	float:left;
	margin-top: 38px;
}

ul#main_nav li{
	display:inline;
	padding-left:7px;
	font-size:14px;

}

ul#main_nav a{
	text-decoration:none;
	color:#ccc;
}

ul#main_nav a:hover{
	text-decoration:none;
	color:#666;
}

ul#social{
	list-style:none;
	float:left;
	margin-top: 34px;
	margin-left: 22px;
}

ul#social li{
	display:inline;
	padding-left:10px;
	font-size:18px;
}

ul#social a{
	text-decoration:none;
	color:#ccc;
}

ul#social a:hover{
	text-decoration:none;
	color:#666;
}

#slideshow{
	width:900px;
	height:400px;
	border:#101010 solid 5px;
	padding: 0px;
	margin: 0px auto;
}

.footer{
	text-align:center;
	background-color: #000; 
	padding: 37px 0px 0px 0px;
	margin:0px;
	width:100%;
	background:url(../images/nav_bg.png) repeat-x;
}

.footer, .push{
	height: 75px;
}

Can anyone tell me of I am doing something wrong, or if I just need to use another code for the slideshow to work on ie?

Thank you so much for you time.
Ale

> 1. The fifth cell contains a drop-down selection list for the quantity of items ordered as the first child node of the table cell.
> Store the reference to this selection list in the variable
> `qtySelect`.
> 2. Store the value of the selected option in the `qtySelect` object in the `newItem`'s `qty` property.
> 3. Associate each selection list with a particular store item (you must do this because the table contains 13 different selection lists;
> one for each store item) by adding a custom property to `qtySelect`
> named `currentItem`, and set it equal to the `newItem` variable.
> 4. Add an `onchange` event handler to `qtySelect` that sets the `qty` property value of the `currentItem` property to the value of the
> selected option in the `qtySelect` selection list.


----------


I need help setting up the currentItem property so that newItem.qty updates properly when a different selection is made.



function storeItem() {

this.pid;
this.descr;
this.price;
this.qty = 1;
}

function startShopping() {

var tbody = document.getElementById("saltItems").tBodies[0];
var rows = tbody.rows;
for (var i = 0; i < rows.length; i++) {
var newItem = new storeItem();
var cells = rows[i].cells;
newItem.pid = cells[0].innerHTML;
newItem.prod = cells[1].innerHTML;
newItem.desc = cells[2].innerHTML;
newItem.price = cells[3].innerHTML;
var selID = newItem.pid+"Qty";
var qtySelect = document.getElementById(selID);
var index = qtySelect.selectedIndex;
newItem.qty = qtySelect.options[index].value;
}
}

example of one of the table rows:

<tr>
<td>FSSPJ11</td>
<td>Fine Sea Salt</td>
<td>Plastic Shaker Jar (11 oz.)</td>
<td class="price">$4.15</td>
<td><select id="FSSPJ11Qty">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
<td class="cartAdd"><input type="checkbox" id="FSSPJ11" /></td>
</tr>

My code works great except that the margin and padding CSS isn't doing anything. Which doesn't make sense to me because the font size, style, and alignment is affected by the CSS. Does anyone know why this is??

Code:

    <h2 class="sidebar-heading">Testimonial:</h2>
<html>
<head>
  <title>Testimonies</title>
<style type="text/css">
#quote {
  margin: 0 20px;
  padding-top: 20px;
  font-size: 1.1em;
  font-style: italic;
  text-align: left;
}
</style>
  <script type="text/javascript" language="javascript">
    var testimony = new Array()
    testimony[1]= "<i>Testimonial 1</i>";
    testimony[2]= "<i>Testimonial 2</i>";
    testimony[3]= "<i>Testimonial 3</i>";
    function firstTestimony()
       { document.getElementById('div_display').innerHTML=testimony[1];
       setTimeout("secondTestimony()",2000); }
    function secondTestimony()
       { document.getElementById('div_display').innerHTML=testimony[2];
       setTimeout("thirdTestimony()",2000); }
    function thirdTestimony()
       { document.getElementById('div_display').innerHTML=testimony[3];
       setTimeout("firstTestimony()",2000); }
  </script>
</head>
<body>
  <span id="quote">
   <div id="div_display"><script type="text/javascript" language="javascript">firstTestimony();</script></div>
  </span>
</body>
</html>

Thanks!!

I have used the script I downloaded from here. I have 3 images to run through. Its all works, BUT!

My images are 3072 x 2034 in size, and thats what comes up on the page when loaded.

I set the var slideheight and width entries in the code for 500 and 500.

It seems to not read the var statement.

I would like to leave the orogical images as is, so when clicked on they load full size.

Any ideas would be great.

I am not very knowledgeable with javascript. I have the following code pasted into my website and it works, but I want to modify it in the following ways:

1) I want the text to only scroll for a maximum of two visible lines at a time.

2) I want the text to scroll only once and then remain in place.

3) I want the text color to be grey (#ABABAB)

---------------------
Here is the code I am using:
---------------------

<script type="text/javascript">
window.onload = WindowLoad;
var _hsSpeed=50; //lower value means faster speed!
var _hsData=new Array();
var _hsCounter=0;
function WindowLoad(event) {
InitializeHorizontalScroll();
}

function InitializeHorizontalScroll() {
var arrElements = document.getElementsByTagName("span");
for (var i=0; i<arrElements.length; i++) {
var element=arrElements[i];
if (element.getAttribute("horizontalscroll") == "1") {
_hsData[_hsCounter] = new Array();
_hsData[_hsCounter]["element"] = element;
_hsData[_hsCounter]["text"] = FindInnerText(element);
_hsData[_hsCounter]["index"] = 0;
_hsCounter++;
}
}
if (_hsCounter > 0)
window.setTimeout("HorizontalScrollTimer();", 100);
}
function HorizontalScrollTimer() {
for (var i=0; i<_hsData.length; i++) {
var element = _hsData[i]["element"];
var strText = _hsData[i]["text"];
var index = parseInt(_hsData[i]["index"]);
element.innerHTML = strText.substr(0, index+1);
index++;
if (index >= strText.length)
index = 0;
_hsData[i]["index"] = index;
}
window.setTimeout("HorizontalScrollTimer();", _hsSpeed);
}

function FindInnerText(objControl, innerText, nestingLevel)
{
if ((typeof nestingLevel != "undefined")&&(nestingLevel > 100))
return innerText;

if (typeof innerText == "undefined")
innerText = "";

if (!objControl)
return innerText;

if (typeof nestingLevel == "undefined")
nestingLevel = 0;

var text=objControl.nodeValue;
if (!text)
text = "";
if (objControl.nodeName.toLowerCase() == "br")
return "\n";


for (var i=0; i<objControl.childNodes.length; i++)
{
text += FindInnerText(objControl.childNodes[i], objControl.childNodes[i].nodeValue, nestingLevel+1);
}

return text;
}
</script>

---------------------
And this is inserted in the body of the page:
---------------------

<span horizontalscroll="1" style="font-family: helvetica;text-transform: uppercase;font-size: 10; letter-spacing: 3; font-color: #ABABAB;">text content</span>

---------------------
Thank to anyone who can assist.
---------------------

I am trying to implement a credit card check function in the validation script.
But whenever i enable the function it bypasses all previous validation checks and just inputs the data, where am i going wrong with this function?

Code:

function CheckCreditCard(cardtype, cardnumber)
{
var frm = document.forms["OrderForm"];
  if (cardtype == "Visa") {
      var re = /^4\d{3}-?\d{4}-?\d{4}-?\d{4}$/;
   } else if (cardtype == "Master Card") {
      var re = /^5[1-5]\d{2}-?\d{4}-?\d{4}-?\d{4}$/;
   } else if (cardtype == "American Express") {
      var re = /^3[4,7]\d{13}$/;
   } 
   if (!re.test(cardnumber)) return false;
   cardnumber = cardnumber.split("-").join("");
   var checksum = 0;
   for (var i=(2-(cardnumber.length % 2)); i<=cardnumber.length; i+=2) {
      checksum += parseInt(cardnumber.charAt(i-1));
   }
   for (var i=(cardnumber.length % 2) + 1; i<cardnumber.length; i+=2) {
      var digit = parseInt(cardnumber.charAt(i-1)) * 2;
      if (digit < 10) { checksum += digit; } else { checksum += (digit-9); }
   }
   if ((checksum % 10) == 0) 
   return true; 
   else 
   sfm_show_error_msg('error message goes here');
   return false;
}

HTML Code is:
Code:

<script language="JavaScript" type="text/javascript">
 var frmvalidator  = new Validator("OrderForm");
 frmvalidator.EnableOnPageErrorDisplaySingleBox();
 frmvalidator.EnableMsgsTogether();
 frmvalidator.EnableFocusOnError(false); 
 
// other attributes went here but were removed 
 
  frmvalidator.setAddnlValidationFunction("CheckCreditCard"); 
</script>

FULL Javascript:
Attached at a txt file, was too large to post here.

Hello

I have created awebpage here with an onmouseover slideshow, adapted from the Cut & paste Onmouseover Slideshow from Javascript kit

This works in IE8 but not in Firefox or Chrome.

I appreciate this may have been previously solved but I cannot find it in the threads.

I am working on a website that features a custom javascript enabled audio player with an animated playhead to follow along with the provided spectrogram. An example of this is included below.

http://cetus.ucsd.edu/voicesinthesea.../humpback.html

I am having difficulty figuring out why the audio/spectrogram player does not work on an iPad. This component was built by a developer who I am not longer in contact with, thus I am in urgent need of some advice/wisdom.

Thank you!