JavaScript - Dynamically Changing Play / Pause Buttons

Hi All

I have a piece of script which makes a div slide out from the side of the screen with information on it. I can change the innerHtml etc no problem, but i have a problem with change .style attributes dynamically. My code:

Code:

var mystring = "height:500px";
var keyVal = mystring.split(":")
var slidingDiv = document.getElementById('slidingDiv');
slidingDiv.style.keyVal[0] = keyVal[1];

As you see above i get a value which i need to split() to get the key and value to use. So what i would like to see is:

Quote:
slidingDiv.style.height = 500px;
But it does not work, as there is no such function as slidingDiv.style.keyVal[0];
How do i change this?

I hope I've explained this thoroughly enough. Please ask if i need to explain further.

Regards
Marinus

Is it possible to dynamically change the value of text on a page as the user types into a text box?

E.g. like:
You Are Typing:
<script>
var keyword = document.getElementById('string');
document.write(keyword);
</script>

Or I could probably insert it into a function and loop it over and over again or is there a better way?

Hi Friends,
I need to select browser option dynamically using javascript for handling cookies , i.e., in need select checkbox "override automatic cookie handling" checkbox dynamically. Kindly help me friends how to select this checkbox dynamically.

Tools - -> Internet Options --> Privacy (Tab) --> Advance (Button) --> Override automatic cookie handling .

Thanks in Advance,
Siva.

Hello,
I am having problems trying to figure out how to do this.

Basically, we are using a turn-key software package to run a website, and this software has included the Highslide software for image viewing. Here is an example:

http://www.gem-tech.com/store/pc/vie...&idcategory=15

Notice the (3) images at the bottom. If you click one of them, the image will pop up and you can see the Highslide JS at work.

Problem is, the store owner wants to change up the buttons so they look more like this website:

http://morris-photographics.com/photography/

Off to the right corner, so they won't get in the way of the product, and the ability to put a description in is cool - that way when we have multiple types of similar products, we can label that particular photos to show what it is.

Would anybody be willing to assist on helping me get this setup? I have found some 'Highslide Configurators' online but Im very confused on the whole process

I am building an online survey using a survey creation tool which allows me to incorporate javascript for additional functionality. However, I am new to javascript so would appreciate any help that you could provide me with.

I have question types like agreement scales, where the respondent sees a list of statements and has to rate each one by clicking on a radio button. The source code of the matrix table looks like this:

Code:

<thead><tr class="Answers">

			<th class='c1 BorderColor' width="25%" class='c1'> &nbsp; </th>
		<th class='c2 BorderColor' class='c2 yAxisBorder' > &nbsp; </th>
		<th class='c3 BorderColor' class='c3 yAxisBorder' > &nbsp; </th>
	
	
										
		<th width="25%" class='Selection BorderColor c4   ' id='header~QID19~1~4' >

			<label>Disagree</label>
		</th>
										
		<th width="25%" class='Selection BorderColor c5   ' id='header~QID19~2~5' >
			<label>Neither agree nor disagree</label>
		</th>
										
		<th width="25%" class='Selection BorderColor c6 last  ' id='header~QID19~3~6' >
			<label>Agree</label>

		</th>
	
	
</tr></thead><tr class='ChoiceRow   '><th class='c1' id='header~QID19~1'><span class='LabelWrapper'><label for='QR~QID19~1'>Statement 1</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~1' > &nbsp; </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~1' > &nbsp; </td><td class='c4   ' headers='header~QID19~1~4 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~1'  ></td><td class='c5   ' headers='header~QID19~2~5 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~2'  ></td><td class='c6 last  ' headers='header~QID19~3~6 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~3'  ></td></tr><tr class='ChoiceRow ReadableAlt  '><th class='c1' id='header~QID19~2'><span class='LabelWrapper'><label for='QR~QID19~2'>Statement 2</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~2' > &nbsp; </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~2' > &nbsp; </td><td class='c4   ' headers='header~QID19~1~4 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~1'  ></td><td class='c5   ' headers='header~QID19~2~5 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~2'  ></td><td class='c6 last  ' headers='header~QID19~3~6 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~3'  ></td></tr><tr class='ChoiceRow  bottom '><th class='c1' id='header~QID19~3'><span class='LabelWrapper'><label for='QR~QID19~3'>Statement 3</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~3' > &nbsp; </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~3' > &nbsp; </td><td class='c4   ' headers='header~QID19~1~4 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~1'  ></td><td class='c5   ' headers='header~QID19~2~5 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~2'  ></td><td class='c6 last  ' headers='header~QID19~3~6 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~3'  ></td></tr><input type=hidden name='Transformation~QID19~1' value='YToxOntzOjEwOiJRUn5RSUQxOX4xIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~2' value='YToxOntzOjEwOiJRUn5RSUQxOX4yIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~3' value='YToxOntzOjEwOiJRUn5RSUQxOX4zIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''></table></div>

I don't have any control over the HTML as this is generated by the survey tool. However, the survey tool has a "JavaScript Editor" for each question, where I can put in javascript functions, and it executes them when the page loads.

What I want to do is to have the label for each row (i.e for each statement) to change color when a corresponding radio button has been selected. This way, it is easier for respondents to see which rows they have answered.

I used the following JS code:

Code:

var radioname = [];
var radiolist = [];
var labelspans = [];
var labels = [];
var radios = [];
var count;
var spans = document.getElementsByTagName('span');

function getLabels()
  {
    for (x=0; x<spans.length; x++)
  {
    if (spans[x].className == "LabelWrapper")
    {
      labelspans.push(spans[x]);
    }
  }
    for (y=0; y<labelspans.length; y++)
  {
   labels.push(labelspans[y].firstChild);
   radioname.push(labelspans[y].firstChild.htmlFor);
  }
}
  
function getRadios()
{   
  //will put all radio groups into the "radiolist" array
  for (z=0; z<radioname.length; z++)
   {
     radiolist.push(document.getElementsByName(radioname[z]));
     //will add Event Listener to each radio button, and add each one to the "radios" array
     for (i=0; i<radiolist[z].length; i++)
       {
        chkradio = radiolist[z][i];
        chkradio.setAttribute("count",Number(z));
        chkradio.addEventListener("click", function(){changeLabel()}, false);
        radios.push(chkradio);
       }
  }
}

function changeLabel()
//loops through all the radios to check if they are selected, and changes label color accordingly          
   {
    for (w=0; w<radios.length; w++)   
      {
       if (radios[w].checked)
           {
            a = radios[w].getAttribute("count");
            labels[a].innerHTML = labels[a].innerHTML.fontcolor("green");
           }
       }
    }
getLabels();  
getRadios();

This code works as intended; however, as you can see, it loops through all the radio buttons when one is clicked. Is there a way to accomplish this without looping through all the radios, and thus make the script run faster?

Also, I have read that the addEventListener function does not work for older versions of IE. Is there a simpler alternative?

Hello,
I have 4 pictures (Picture_1, Picture_2, Picture_3, Picture_4) and 2 buttons. I am trying to make it so that when you click the 'next picture' button it increments a variables andchanges the current picture to the next one ("Picture_" + CurrentPicture) I am aware that I would need to delete the current picture before creating the next one but I am unsure how to do this I use document.write("<img src = 'Picture_Example'>") to display my picture but if there is a better way please say
Here's all my code:
Code:

<html>
<head>
<script language = "javascript" type = "text/javascript">
CurrentPicture = 1
document.write("<img src = 'Picture_' + CurrentPicture + '.jpg'/>")
function ChangeImage(Rotation){
Current_Picture ++
	if(Rotation == 1){
		if(CurrentPicture != 1){
			document.write("<img src = 'Picture_' + CurrentPicture + '.jpg'/>")
		}
	}else if (Rotation == 2){
		if(CurrentPicture != 4){
			document.write("<img src = 'Picture_' + CurrentPicture + '.jpg'/>")
		}
	}
}
</script>
</head>
<form>
<input type = "button" value = "Next Picture" onClick = "ChangeImage(1)">
<input type = "button" value = "Previous Picture" onClick = "ChangeImage(2)">
</form>
</body>
</html>

Thanks.

Hello,

I am trying to get my jqtransform'd radio buttons to switch to "checked" via my rowover javascript that I was already using.

Here is the script for the row over effect:

Code:

function selectRowEffect(object, buttonSelect) {
  if (!selected) { 
    if (document.getElementById) {
      selected = document.getElementById('defaultSelected');
    } else {
      selected = document.all['defaultSelected'];
    }
  }

  if (selected) selected.className = 'moduleRow';
  object.className = 'moduleRowSelected';
  selected = object;
  


// one button is not an array
  if (document.checkout_address.shipping[0]) {
    document.checkout_address.shipping[buttonSelect].checked=true;
  } else {
    document.checkout_address.shipping.checked=true;
  }
}

function rowOverEffect(object) {
  if (object.className == 'moduleRow') object.className = 'moduleRowOver';
}

function rowOutEffect(object) {
  if (object.className == 'moduleRowOver') object.className = 'moduleRow';
}
//--></script>

Currently if I click on the row, it will actually select the radio button in my form but the jqtransform does not reflect that so it still looks like it is not clicked. I tried addings something like

jqTransformRadio.addClass("jqTransformChecked");

but that is no good. any help is greatly appreciated.

Hi all,

I hope that someone can help me with this strange problem I have here.

I have some script which changes a button and changes the onclick event.

The strange thing is that although it is changing it. All the events have the same parameter even though my code is giving each button's onclick event it's own unique parameter.

Here's my Code.
Code:

	var AllocPeople = window.opener.document.getElementById('AllocPeople');
	
	if(AllocPeople.value.length > 0)
	{
		var people = AllocPeople.value.split(",");
		var Controls = new Array();
		for(var P in people)
		{
			var id = people[P];
			Controls[P] = document.getElementById('bt_AP_'+id);
			Controls[P].innerHTML = "Deallocate";
			Controls[P].onclick = function() {Remove_Player(id)};
		}
		
	}

Thanking you all in advance.

Hi,

I found a nice simple javascript slider but there is a small
change I want to make.

How can I make the slider pause for one or two seconds
when the image has slid fully into position ?

PHP Code:
<style>
#ParentDiv
{
    margin: auto;
    width: 200px;
    overflow: hidden;
}

#ChildDiv
{
    width: 6000px; 
    position:relative;
    cursor:pointer;
}
#ParentDiv img
{
float: left;
padding: 3px;
margin: 0px;
}
</style>

<script type="text/javascript">
//Array Of Image, [URL, width of Image, LinkTo]
var t;
var StepTime=20;
var StepPixel=2;
var ImgPadding=3;
var ParentDivLen=200;
var Img= Array(
["http://mobi6.net/images/screen1.png", 200, "index.php"], 
["http://mobi6.net/images/screen2.png", 200, "index.php"], 
["http://mobi6.net/images/screen3.png", 200, "index.php"], 
["http://mobi6.net/images/screen1.png", 200, "index.php"], 
["http://mobi6.net/images/screen2.png", 200, "index.php"], 
["http://mobi6.net/images/screen3.png", 200, "index.php"], 
["http://mobi6.net/images/screen1.png", 200, "index.php"], 
["http://mobi6.net/images/screen2.png", 200, "index.php"], 
["http://mobi6.net/images/screen3.png", 200, "index.php"]
);
var Pos=3;
var Len=Img.length;

var DivWidth=0;
var MoreImage=0; 

function goURL(URLS) {
    document.location.href=URLS;
}
for(i=0;i<Len;i++)
{
    DivWidth+=Img[i][1] + ImgPadding*2;
    if(MoreImage==0 && DivWidth>ParentDivLen)MoreImage=i;
}
function getE(id)
{
    return document.getElementById(id);
}

function Dr_Img(IMG)
{
    return '<img src="'+ IMG[0] + '" onclick="goURL(\'' + IMG[2] + '\')">';
}

function Dr_ImgArr()
{
    var str='';
    for(i=0;i<Len;i++) str += Dr_Img(Img[i]);
    for(i=0;i<MoreImage;i++)str += Dr_Img(Img[i]);
    document.write(str);
}

function DoSlide()
{
    if(Pos==0)Pos=-1;
    divtg=getE('ChildDiv');
    Pos-=StepPixel;
    if(Pos<-DivWidth)Pos=0;
    divtg.style.left=Pos +'px';
    t=setTimeout('DoSlide()',StepTime);
    
}

function SlideStop()
{
    clearTimeout(t);
}
function setmouse(id)
{
    if(id==1)
    {
        DoSlide();
    }
    else
    {
        SlideStop();
    }
}
</script>

</head>
<body onload="DoSlide()">
<div id="ParentDiv">
    <div id="ChildDiv" onmouseout="setmouse(1);" onmouseover="setmouse(2);">

        <script>
            Dr_ImgArr();
        </script>
    </div>
</div> 


I have tried adding wait(2) in a couple of places but
the script just failed to run.

Any ideas ?


Thanks.



.

I have a site with a lot of animated gifs and I was wondering if there was a way to (on page load) stop all gif animations (only show first image frame). Then when you click a link, it will animate the animated gifs.

Instead of using setTimeout() or setInterval(), I wrote a function like this:
Code:

function pause(time)
{   var currentTime=(new Date()).getTime();
    while (currentTime+time > (new Date()).getTime());
}

However, it doesn't work as expected. if you append a character to the value of button, you will get the result at one time. e.g.
Code:

for (var i=0; i<5; i++)
{    aButton.value+="2 ";
      pause(2000);
}

then the webpage wait 10 secs then display 2 2 2 2 2 while it should append '2' every 2 secs ...

so is there real pause mechanism in js? (besides alert() etc which makes the background totally blank...)

I have some text that I don't want to display until 2 seconds after the previous text. The sleep(2); function won't work for what I am doing.

I wrote a simple javescript for a slideshow that cycles through images and displays where the image is but I am wondering how to pause the slideshow and then add in a fading effect. Any help would be appreciated.

index.html
PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <title>Page 1</title>
        <link rel="stylesheet" type="text/css" href="css.css"></link>
        <script language="JavaScript" type="text/javascript" src="js.js"></script>
    </head>
    <body onLoad="LoadMenu(); PlaceArrow();">
        <table border="0" cellspacing="0" cellpadding="0" id="hmt" summary="layout" align="center">
            <tr><td colspan="4"><div id="htop"><img border="0" width="240" height="40" alt="" src="img/homet.png"></div></td></tr>
            <tr valign="top">
                <td id="hmtgut"><img border="0" width="50" height="250" alt="" src="img/homel.png"></td>
                <td id="hmtl"><img border="0" width="280" height="270" src="img/homelogo.png"></td>
                <td id="hmtr">
<script language="JavaScript" type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="photos/slides/photo01.jpg"
var image2=new Image()
image2.src="photos/slides/photo02.jpg"
var image3=new Image()
image3.src="photos/slides/photo03.jpg"
var image4=new Image()
image4.src="photos/slides/photo04.jpg"
var image5=new Image()
image5.src="photos/slides/photo05.jpg"
var image6=new Image()
image6.src="photos/slides/photo06.jpg"
var image7=new Image()
image7.src="img/thumbarrow.png"
var image8=new Image()
image8.src="img/spacer.gif"

var cphoto = Math.ceil(6*Math.random());
document.write('<div id="homephoto"><a href="javascript:slidelink()"><img border="0" name="photo" width="230" height="230" src="photos/slides/photo0'+cphoto+'.jpg"></a></div>');

var step=cphoto
var whichimage=step

function slideit()
{
if (!document.images)
return
document.images.photo.src=eval("image"+step+".src")
whichimage=step
if (step<6)
{
step=parseInt(Math.ceil(6*Math.random()))
}
else
{
step=1
}
setTimeout("slideit()",3000)
var i = "a" + whichimage
document.images.a1.src=eval("image8.src")
document.images.a2.src=eval("image8.src")
document.images.a3.src=eval("image8.src")
document.images.a4.src=eval("image8.src")
document.images.a5.src=eval("image8.src")
document.images.a6.src=eval("image8.src")
document.images[i].src=eval("image7.src")
}

slideit()

function slidelink()
{
if (whichimage==1)
window.open('img.php?img=1','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400')
else if (whichimage==2)
window.open('img.php?img=2','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400')
else if (whichimage==3)
window.open('img.php?img=3','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400')
else if (whichimage==4)
window.open('img.php?img=4','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400')
else if (whichimage==5)
window.open('img.php?img=5','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400')
else if (whichimage==6)
window.open('img.php?img=6','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400')
}

//-->
</script>
<noscript>
<div id="homephoto">
<img border="0" name="photo" width="230" height="230" src="photos/slides/photo01.jpg">
</div>
</noscript>
</td>
                <td id="mtmenu" valign="middle">Links Here</td>
            </tr>
            <tr>
                <td colspan="4">
                    <div id="hfoot">
                        <div id="hbot"><img border="0" width="240" height="20" alt="" src="img/homeb.png"></div>
                        <div id="thumb1">
                            <div><img border="0" vspace="9" hspace="2" name="a1" width="30" height="6" alt="" src="img/spacer.gif"></div>
                            <div><a onClick="LoadPhoto(1); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo01thumb.jpg"></a></div>
                      </div>
                        <div id="thumb2">
                            <div><img border="0" vspace="9" hspace="2" name="a2" width="30" height="6" alt="" src="img/spacer.gif"></div>
                            <div><a onClick="LoadPhoto(2); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo02thumb.jpg"></a></div>
                      </div>
                        <div id="thumb3">
                            <div><img border="0" vspace="9" hspace="2" name="a3" width="30" height="6" alt="" src="img/spacer.gif"></div>
                            <div><a onClick="LoadPhoto(3); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo03thumb.jpg"></a></div>
                      </div>
                        <div id="thumb4">
                            <div><img border="0" vspace="9" hspace="2" name="a4" width="30" height="6" alt="" src="img/spacer.gif"></div>
                            <div><a onClick="LoadPhoto(4); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo04thumb.jpg"></a></div>
                      </div>
                        <div id="thumb5">
                            <div><img border="0" vspace="9" hspace="2" name="a5" width="30" height="6" alt="" src="img/spacer.gif"></div>
                            <div><a onClick="LoadPhoto(5); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo05thumb.jpg"></a></div>
                      </div>
                        <div id="thumb6">
                            <div><img border="0" vspace="9" hspace="2" name="a6" width="30" height="6" alt="" src="img/spacer.gif"></div>
                            <div><a onClick="LoadPhoto(6); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo06thumb.jpg"></a></div>
                      </div>
                    </div>
                </td>
            </tr>
        </table>
</table>
</body>
</html> 


js.js
PHP Code:
function PlaceArrow() {
    if ( cphoto ) {
        carrow = "a" + cphoto;
        document.images[carrow].src = "img/thumbarrow.png";
    }
}

function LoadPhoto (i) {
    if (document.images) {
        carrow = "a" + cphoto;
        document.images[carrow].src = "img/spacer.gif";
        
        narrow = "a" + i;
        nphoto = "photo0" + i;
        document.images[narrow].src = "img/thumbarrow.png";
        document.images['photo'].src = "photos/slides/" + nphoto + ".jpg";
        
        cphoto = i;
    }
} 

I have a banner but it keeps rotating even when you mouse over it.

Is there a simple code I can add to the code below so that the banner will paused when you mouse over it?

Thanks!

Jeremy

Quote:
</script>
<script type="text/javascript">
$(function() {
//some elements..
var $ps_container = $('#ps_container'),
$ps_image_wrapper = $ps_container.find('.ps_image_wrapper'),
$ps_next = $ps_container.find('.ps_next'),
$ps_prev = $ps_container.find('.ps_prev'),
$ps_nav = $ps_container.find('.ps_nav'),
$tooltip = $ps_container.find('.ps_preview'),
$ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'),
$links = $ps_nav.children('li').not($tooltip),
total_images = $links.length,
currentHovered = -1,
current = 0,
$loader = $('#loader');

/*check if you are using a browser*/
var ie = false;
if ($.browser.msie) {
ie = true;//you are not!Anyway let's give it a try
}
if(!ie)
$tooltip.css({
opacity : 0
}).show();


/*first preload images (thumbs and large images)*/
var loaded = 0;
$links.each(function(i){
var $link = $(this);
$link.find('a').preload({
onComplete : function(){
++loaded;
if(loaded == total_images){
//all images preloaded,
//show ps_container and initialize events
$loader.hide();
$ps_container.show();
//when mouse enters the pages (the dots),
//show the tooltip,
//when mouse leaves hide the tooltip,
//clicking on one will display the respective image
$links.bind('mouseenter',showTooltip)
.bind('mouseleave',hideTooltip)
.bind('click',showImage);
//navigate through the images
$ps_next.bind('click',nextImage);
$ps_prev.bind('click',prevImage);
}
}
});
});

function showTooltip(){
var $link = $(this),
idx = $link.index(),
linkOuterWidth = $link.outerWidth(),
//this holds the left value for the next position
//of the tooltip
left = parseFloat(idx * linkOuterWidth) - $tooltip.width()/2 + linkOuterWidth/2,
//the thumb image source
$thumb = $link.find('a').attr('rel'),
imageLeft;

//if we are not hovering the current one
if(currentHovered != idx){
//check if we will animate left->right or right->left
if(currentHovered != -1){
if(currentHovered < idx){
imageLeft = 75;
}
else{
imageLeft = -75;
}
}
currentHovered = idx;

//the next thumb image to be shown in the tooltip
var $newImage = $('<img/>').css('left','0px')
.attr('src',$thumb);

//if theres more than 1 image
//(if we would move the mouse too fast it would probably happen)
//then remove the oldest one (:last)
if($ps_preview_wrapper.children().length > 1)
$ps_preview_wrapper.children(':last').remove();

//prepend the new image
$ps_preview_wrapper.prepend($newImage);

var $tooltip_imgs = $ps_preview_wrapper.children(),
tooltip_imgs_count = $tooltip_imgs.length;

//if theres 2 images on the tooltip
//animate the current one out, and the new one in
if(tooltip_imgs_count > 1){
$tooltip_imgs.eq(tooltip_imgs_count-1)
.stop()
.animate({
left:-imageLeft+'px'
},150,function(){
//remove the old one
$(this).remove();
});
$tooltip_imgs.eq(0)
.css('left',imageLeft + 'px')
.stop()
.animate({
left:'0px'
},150);
}
}
//if we are not using a "browser", we just show the tooltip,
//otherwise we fade it
//
if(ie)
$tooltip.css('left',left + 'px').show();
else
$tooltip.stop()
.animate({
left : left + 'px',
opacity : 1
},150);
}

function hideTooltip(){
//hide / fade out the tooltip
if(ie)
$tooltip.hide();
else
$tooltip.stop()
.animate({
opacity : 0
},150);
}

function showImage(e){
var $link = $(this),
idx = $link.index(),
$image = $link.find('a').attr('href'),
$currentImage = $ps_image_wrapper.find('img'),
currentImageWidth = $currentImage.width();

//if we click the current one return
if(current == idx) return false;

//add class selected to the current page / dot
$links.eq(current).removeClass('selected');
$link.addClass('selected');

//the new image element
var $newImage = $('<img/>').css('left',currentImageWidth + 'px')
.attr('src',$image);

//if the wrapper has more than one image, remove oldest
if($ps_image_wrapper.children().length > 1)
$ps_image_wrapper.children(':last').remove();

//prepend the new image
$ps_image_wrapper.prepend($newImage);

//the new image width.
//This will be the new width of the ps_image_wrapper
var newImageWidth = $newImage.width();

//check animation direction
if(current > idx){
$newImage.css('left',-newImageWidth + 'px');
currentImageWidth = -newImageWidth;
}
current = idx;
//animate the new width of the ps_image_wrapper
//(same like new image width)
$ps_image_wrapper.stop().animate({
width : newImageWidth + 'px'
},350);
//animate the new image in
$newImage.stop().animate({
left : '0px'
},350);
//animate the old image out
$currentImage.stop().animate({
left : -currentImageWidth + 'px'
},350);

e.preventDefault();
}

function nextImage() {
var cache='';
cache = cache==''?current+':'+total_images:cache;
if(current < total_images)
$links.eq(current+1).trigger('click');
if(cache == (current+':'+total_images))
$links.eq(0).trigger('click');

}
function prevImage(){
if(current > 0){
$links.eq(current-1).trigger('click');
}
}
setInterval( function(){
$('.ps_next').click();
},4000 );

Hello everyone,

1.) I'm not a programmer beyond HTML, CSS and only a basic knowledge of javascript, it doesn't take much for me to get lost beyond my skills in javascript.

2.) Is someone willing to add and explain the changes to the code below to include a pause on mouseover?

Code:

var currentSlide = 1;
var maxSlides = 0;

function fadeImage(){
	opacity = 100;
	if(steps < 4){
		steps += 1;
		opacity = opacity / steps;
		imageObj = document.getElementById("slide-"+currentSlide);
		imageObjN = document.getElementById("slide-"+nextSlide);
		imageObjN.style.display = "block";

		imageObj.style.opacity = "" + opacity / 100;
		imageObjN.style.opacity = "" + ((steps * 25) / 100);
		//fade
		slideTimeout = setTimeout("fadeImage()", 170); /** fade transition speed */
	}else{
		steps = 1;
		document.getElementById("slide-"+currentSlide).style.display = "none";
		currentSlide += 1;
		if(currentSlide > maxSlides){
			currentSlide = 1;
		}
		showSlide();
	}
}

function initSlideshow(){
	slidesCollection = document.getElementById("slides").children;
	maxSlides = slidesCollection.length;
	for (var i=0; i < maxSlides; i++){
		slidesCollection[i].id = "slide-"+(i+1);
		if (i > 0)
			slidesCollection[i].style.display = "none";
	}	
	steps = 1;
	nextSlide = 2;
	slideTimeout = 0;
	showSlide();
}

function showSlide(){
	clearTimeout(slideTimeout);
		
	nextSlide = currentSlide + 1;
	if (currentSlide >= maxSlides){
		nextSlide = 1;
	}
	
	slideTimeout = setTimeout("fadeImage()", 8300); /** display time of slide */
}