JavaScript - Customize A Vertical Menu

I've added a Vertical Sliding Menu to my website that only seems to work in Internet Explorer. I have no idea what to do to get it to work in other browsers. If I could at least get it work in Firefox that would be great, but as I said, I'm a bit lost on how to do that. If anyone could help me I would gladly send them a box of chocolates.

The menu is made up of images that are partially recessed into the left of the page, except for a small section which remains visible. When that section is clicked the image slides all the way into view revealing more options. The links are all done with image maps, if that helps.

Here is the entire Javascript code that goes into the head tag:
Code:

<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -


var Abouttop=124
var Newstop=195
var Profilestop=258
var Issuestop=351
var Extrastop=423
var Linkstop=499
var Forumtop=571
var menuleft=-118

var pace=14

var step
var direction
var pause=25

var thismenu
var vorzeichen=1
var vorzeiAbout=-1
var vorzeiNews=-1
var vorzeiProfiles=-1
var vorzeiIssues=-1
var vorzeiExtras=-1
var vorzeiLinks=-1
var vorzeiForum=-1

var menuismoving="no"

function gotourl(thisurl) {
    alert("\n\nThis is onlay a demonstration.\nYou will not be linked to "+thisurl+".html.")
}

function inite() {
	if (document.layers) {
        document.About.left=menuleft
        document.News.left=menuleft
        document.Profiles.left=menuleft 
        document.Issues.left=menuleft
        document.Extras.left=menuleft
        document.Links.left=menuleft
        document.Forum.left=menuleft
        document.About.top=Abouttop
        document.News.top=Newstop
        document.Profiles.top=Profilestop
        document.Issues.top=Issuestop
        document.Extras.top=Extrastop
        document.Links.top=Linkstop
        document.Forum.top=Forumtop
	}	
	if (document.all) {
        document.all.About.style.posLeft=menuleft
        document.all.News.style.posLeft=menuleft
        document.all.Profiles.style.posLeft=menuleft
        document.all.Issues.style.posLeft=menuleft
        document.all.Extras.style.posLeft=menuleft
        document.all.Links.style.posLeft=menuleft
        document.all.Forum.style.posLeft=menuleft
        document.all.About.style.posTop=Abouttop
        document.all.News.style.posTop=Newstop
        document.all.Profiles.style.posTop=Profilestop
        document.all.Issues.style.posTop=Issuestop
        document.all.Extras.style.posTop=Extrastop
        document.all.Links.style.posTop=Linkstop
        document.all.Forum.style.posTop=Forumtop
	}
}

function getmenuname(clickedmenu) {
    if (menuismoving=="no") {
	    if (document.layers) {
            thismenu=eval("document."+clickedmenu)
	    }	
	    if (document.all) {
            thismenu=eval("document.all."+clickedmenu+".style")
	    }
        step=pace
        checkdirection()
	    movemenu()
    }
}

function checkdirection() {
	if (document.layers) {    
        if (thismenu==document.About){vorzeiAbout=vorzeiAbout*-1;vorzeichen=vorzeiAbout}
        if (thismenu==document.News){vorzeiNews=vorzeiNews*-1;vorzeichen=vorzeiNews}
        if (thismenu==document.Profiles){vorzeiProfiles=vorzeiProfiles*-1;vorzeichen=vorzeiProfiles}
        if (thismenu==document.Issues){vorzeiIssues=vorzeiIssues*-1;vorzeichen=vorzeiIssues}
        if (thismenu==document.Extras){vorzeiExtras=vorzeiExtras*-1;vorzeichen=vorzeiExtras}
        if (thismenu==document.Links){vorzeiLinks=vorzeiLinks*-1;vorzeichen=vorzeiLinks}
        if (thismenu==document.Forum){vorzeiForum=vorzeiForum*-1;vorzeichen=vorzeiForum}     
	}	
	if (document.all) {
        if (thismenu==document.all.About.style){vorzeiAbout=vorzeiAbout*-1;vorzeichen=vorzeiAbout}
        if (thismenu==document.all.News.style){vorzeiNews=vorzeiNews*-1;vorzeichen=vorzeiNews}
        if (thismenu==document.all.Profiles.style){vorzeiProfiles=vorzeiProfiles*-1;vorzeichen=vorzeiProfiles}
        if (thismenu==document.all.Issues.style){vorzeiIssues=vorzeiIssues*-1;vorzeichen=vorzeiIssues}
        if (thismenu==document.all.Extras.style){vorzeiExtras=vorzeiExtras*-1;vorzeichen=vorzeiExtras}
        if (thismenu==document.all.Links.style){vorzeiLinks=vorzeiLinks*-1;vorzeichen=vorzeiLinks}
        if (thismenu==document.all.Forum.style){vorzeiForum=vorzeiForum*-1;vorzeichen=vorzeiForum}   
	}
    menuismoving="yes"
}

function movemenu() {
	if (document.layers) {
        if (step>=0) {
            thismenu.left+=step*vorzeichen
            step--
            var movetimer=setTimeout("movemenu()",pause)  
	    }
        else {
            menuismoving="no"
            clearTimeout(movetimer)
        }
	}	   
	if (document.all) {
        if (step>=0) {
            thismenu.posLeft+=step*vorzeichen
            step--
            var movetimer=setTimeout("movemenu()",pause)  
	    }
        else {
            menuismoving="no"
            clearTimeout(movetimer)
        }
    }
}
// - End of JavaScript - -->
</SCRIPT>

Code:

This is the CSS code that also goes into the head tag:

<style type="text/css">
	#About {position:absolute;left:-1000px;}
    #News {position:absolute;left:-1000px;}
    #Profiles {position:absolute;left:-1000px;}
    #Issues {position:absolute;left:-1000px;}
    #Extras {position:absolute;left:-1000px;}
    #Links {position:absolute;left:-1000px;}
    #Forum {position:absolute;left:-1000px;}
	.baseline {
		position:absolute;
		left:250px;
		top:100px;
    	font-family:Arial;
    	font-size:9pt;
		color:000000;
	}
</STYLE>

And I'm not sure if this is needed or not, but just in case, here is everything between the body tags
Code:

<body onLoad="inite()" topmargin="0" leftmargin="0"> 

<DIV ID="About">
<IMG SRC="images/main/menu_tab_about2.gif" USEMAP="#Aboutdec99.gif" WIDTH=150 HEIGHT=71 BORDER=0>
<MAP NAME="Aboutdec99.gif">
<AREA SHAPE=RECT COORDS="128,3,143,67" HREF="javascript:getmenuname('About')">
<AREA SHAPE=RECT COORDS="30,4,113,20" HREF="about_nw.asp">
<AREA SHAPE=RECT COORDS="88,21,113,34" HREF="siteinfo.asp">
<AREA SHAPE=RECT COORDS="35,35,113,51" HREF="contributions.asp">
<AREA SHAPE=RECT COORDS="65,52,113,66" HREF="contact.asp">
</MAP></DIV>

<DIV ID="News"><IMG SRC="images/main/menu_tab_news2.gif" USEMAP="#Newsdec99.gif" WIDTH=150 HEIGHT=63 BORDER=0>
<MAP NAME="Newsdec99.gif">
<AREA SHAPE=RECT COORDS="128,5,143,58" HREF="javascript:getmenuname('News')">
<AREA SHAPE=RECT COORDS="30,14,113,31" HREF="news.asp">
<AREA SHAPE=RECT COORDS="30,33,113,48" HREF="news_archive.asp">
</MAP></DIV>

<DIV ID="Profiles"><IMG SRC="images/main/menu_tab_profiles2.gif" USEMAP="#Profilesdec99.gif" WIDTH=150 HEIGHT=93 BORDER=0>
<MAP NAME="Profilesdec99.gif">
<AREA SHAPE=RECT COORDS="128,5,143,89" HREF="javascript:getmenuname('Profiles')">
<AREA SHAPE=RECT COORDS="26,11,113,26" HREF="char_current.asp">
<AREA SHAPE=RECT COORDS="66,30,113,46" HREF="char_inactive.asp">
<AREA SHAPE=RECT COORDS="65,48,113,66" HREF="char_villains.asp">
<AREA SHAPE=RECT COORDS="90,68,113,82" HREF="char_all.asp">
</MAP></DIV>

<DIV ID="Issues"><IMG SRC="images/main/menu_tab_issues2.gif" USEMAP="#Issuesdec99.gif" WIDTH=150 HEIGHT=72 BORDER=0>
<MAP NAME="Issuesdec99.gif">
<AREA SHAPE=RECT COORDS="128,5,143,67" HREF="javascript:getmenuname('Issues')">
<AREA SHAPE=RECT COORDS="53,9,113,25" HREF="issues_uc.asp">
<AREA SHAPE=RECT COORDS="30,28,113,43" HREF="issues.asp">
<AREA SHAPE=RECT COORDS="52,48,113,63" HREF="issues_past.asp">
</MAP></DIV>

<DIV ID="Extras"><IMG SRC="images/main/menu_tab_extra2.gif" USEMAP="#Extrasdec99.gif" WIDTH=150 HEIGHT=76 BORDER=0>
<MAP NAME="Extrasdec99.gif">
<AREA SHAPE=RECT COORDS="128,6,143,71" HREF="javascript:getmenuname('Extras')">
<AREA SHAPE=RECT COORDS="47,10,113,27" HREF="wallpapers.asp">
<AREA SHAPE=RECT COORDS="65,29,113,45" HREF="avatars.asp">
<AREA SHAPE=RECT COORDS="36,48,113,64" HREF="merch.asp">
</MAP></DIV>

<DIV ID="Links"><IMG SRC="images/main/menu_tab_links2.gif" USEMAP="#Linksdec99.gif" WIDTH=150 HEIGHT=72 BORDER=0>
<MAP NAME="Linksdec99.gif">
<AREA SHAPE=RECT COORDS="128,10,143,64" HREF="javascript:getmenuname('Links')">
<AREA SHAPE=RECT COORDS="13,5,113,19" HREF="http://www.newwarriors.com">
<AREA SHAPE=RECT COORDS="74,21,113,34" HREF="http://newwarriors.wordpress.com" alt="New Warriors Continuity Conundrum">
<AREA SHAPE=RECT COORDS="32,37,113,51" HREF="http://infinitytitans.anycities.com/warriorsmix.html">
<AREA SHAPE=RECT COORDS="19,53,113,67" HREF="http://www.novaprimepage.com">
</MAP></DIV>

<DIV ID="Forum"><IMG SRC="images/main/menu_tab_forum2.gif" usemap="#menu_tab_test.jpg" width="150" height="69" border=0>
<map name="menu_tab_test.jpg"> 
<AREA shape=rect COORDS="128,5,143,66" HREF="http://www.newwarriors.net/forum">
</map></DIV>
</body>

And in case anyone wants to see what I'm talking about, here is the link to the page so that you can see the menu bar and how it functions. Make sure you are viewing it in IE though. lol.
http://www.newwarriors.net

I hope that's all of the information that is needed. I just don't have a clue what to do. I really like the menu and want to keep it. Thanks so much!

Hi,

i need to make my alert box stand out a bit more i have looked everywhere but can't find anything! i was looking to do stuff like Bold, Italics, Underline, Fonts, Sizes, Borders, Backgrounds maybe something that flashed!

i'm not asking you to do it for me just tell me how and were to put the different codes!

and ASAP please as it is in for Thursday!! :S

thanks in advance
:D

i have been trying to edit the below code so i can validate text fields and numeric fields but whenever i try it bypasses all validation and executed the php script.
Can someone please let me know what i'm doing wrong

fld = form.elements['name'];
if ( !isValidText( fld.value ) ) {
msg = 'The name is not valid.';
addValidationField(fld);
addValidationMessage(msg);
}



function isValidText(val) {
var re = /^\s{1,}$/g;
if ((mytext.value.length==0) || (mytext.value==null) || ((mytext.value.search(re)) > -1)) {
return true;
}else {
return false;
}
}


Code:

   
fld = form.elements['email'];
    if ( !isValidEmail( fld.value ) ) {
        msg = 'The email address is not valid.';
        addValidationField(fld);
        addValidationMessage(msg);
    }

the above code calls:
Code:

function isValidEmail(val) {
    var re = /^[\w\+\'\.-]+@[\w\'\.-]+\.[a-zA-Z]{2,}$/;
    // /^[a-z0-9]([a-z0-9_\-\.]*)@([a-z0-9_\-\.]*)(\.[a-z]{2,4}(\.[a-z]{2}){0,2})$/i;
    if (!re.test(val)) {
        return false;
    }
    return true;
}

the entire script is as follows

Code:

/* order form code from dyn-web.com */
// onchange of qty field entry
function getProductTotal(field) {
    clearErrorInfo();
    var form = field.form;
    if (field.value == "") field.value = 0;
    if ( !isPosInt(field.value) ) {
        var msg = 'Please enter a positive integer for quantity.';
        addValidationMessage(msg);
        addValidationField(field)
        displayErrorInfo( form );
        return;
    } else {
        var product = field.name.slice(0, field.name.lastIndexOf("_") ); 
        var price = form.elements[product + "_price"].value;
        var amt = field.value * price;
        form.elements[product + "_tot"].value = formatDecimal(amt);
        doTotals(form);
    }
}

function doTotals(form) {
    var total = 0;
    for (var i=0; PRODUCT_ABBRS[i]; i++) {
        var cur_field = form.elements[ PRODUCT_ABBRS[i] + "_qty" ]; 
        if ( !isPosInt(cur_field.value) ) {
            var msg = 'Please enter a positive integer for quantity.';
            addValidationMessage(msg);
            addValidationField(cur_field)
            displayErrorInfo( form );
            return;
        }
        total += parseFloat(cur_field.value) * parseFloat( form.elements[ PRODUCT_ABBRS[i] + "_price" ].value );
    }
    form.elements['total'].value = formatDecimal(total);
}

function finalCheck(form) {
    clearErrorInfo();
    var msg = '', fld;
    // final check of quantity entries' validity
    for (var i=0; PRODUCT_ABBRS[i]; i++) {
        var cur_field = form.elements[ PRODUCT_ABBRS[i] + "_qty" ]; 
        if ( !isPosInt(cur_field.value) ) {
            msg = 'Please enter a positive integer for quantity.';
            addValidationField(cur_field)
        }
    }
    
    if (msg) { // one msg for qty flds
        addValidationMessage(msg);
    }
    
/////////////////////////////////////////////////////////////////////
//  add check on email and any other required fields here
    fld = form.elements['email'];
    if ( !isValidEmail( fld.value ) ) {
        msg = 'The email address is not valid.';
        addValidationField(fld);
        addValidationMessage(msg);
    }
    
    

//
/////////////////////////////////////////////////////////////////////
    
    if (msg) { // if any error msg's, display and cancel submission
        displayErrorInfo( form );
        return false;
    }
    
    // check if a quantity entered
    if (form.elements['total'].value == 0) {
        msg = "You haven't ordered anything.";
        addValidationMessage(msg);
        displayErrorInfo( form );
        return false;
    }
    return true;
}

function isValidEmail(val) {
    var re = /^[\w\+\'\.-]+@[\w\'\.-]+\.[a-zA-Z]{2,}$/;
    // /^[a-z0-9]([a-z0-9_\-\.]*)@([a-z0-9_\-\.]*)(\.[a-z]{2,4}(\.[a-z]{2}){0,2})$/i;
    if (!re.test(val)) {
        return false;
    }
    return true;
}

// onclick
function checkValue(field) {
    if (field.value == 0) field.value = "";
}

// onblur
function reCheckValue(field) {
    if (field.value == "") field.value = 0;
}

function isPosInt(val) {
    var re = /^\d+$/
    if ( !re.test(val) ) {
        return false;
    }
    return true;
}

// format val to n number of decimal places
// modified version of Danny Goodman's (JS Bible)
function formatDecimal(val, n) {
    n = n || 2;
    var str = "" + Math.round ( parseFloat(val) * Math.pow(10, n) );
    while (str.length <= n) str = "0" + str;
    var pt = str.length - n;
    return str.slice(0,pt) + "." + str.slice(pt);
}

How do I give my popup browser a background color, change the title, and center the image on the page? I'd also like to control where it should pop up.

Here is the code:

function popUpImage2()
{
var popupimage = document.getElementById("image2").src;
newwindow=window.open(popupimage,"POPUP","height=400,width=400");
if (window.focus) newwindow.focus();
}


Around the main image it says:

<img id="image2" style="display:none;"/><p><img src="images/bob.jpg" name="mainimage" width="424" border="0" id="mainimage" onclick="popUpImage2()" />


I'm kind of desperate, please write ASAP... Thanks in advance

Hi Exprts,

I am using a (anylink)javascript menu from dynamic drive. Basically I am having a design issue but posting the problem here because I think this can be fixed through JS.

Please download the attached files. You will see the menu & the sub menu on mouse over. Problem is that.... when the submenu appears & I take my mouse to the sub menu, the parent item hover style disappears. I mean, it doesn't look active. I just want the parent item active when users moves his/her mouse to sub menu. Thats all.

Please suggest me any solutions for this. Thank you in advance.

Hi,

Quick question - I want to find the scrollTop value for some ajax divs but I can't seem to get scrollTop to work.

The html looks like this:

Code:

<div id="media-meta-container" style="width: 302px;">
<p>Subtitles <span id="status" ></span></p>
  <div id="scrollbox" >
    <div id="content" >
      <div id="content_0">Content 0</div> 
      <div id="content_1">Content 1</div>
      <div id="content_2">Content 2</div>
      <div id="content_3">Content 3</div>
      <div id="content_4">Content 4</div>           	
    </div>
  </div>
</div>

Where scrollbox is, you guessed it, a scroll box. I want to find the y position of each of the content divs.

I tried this (for exampel for the last element) but it didn't work:

Code:

var height = $('#content div')[4].attr('scrollTop');

Any ideas?

How do you make a vertical carousel that displays either text or images?

Right so I have a popup window that when opened in any browser expect of course IE will open perfectly in the centre of the screen. However with IE it decides to jump to the top of the page, then is pushed back down to just show the popup at the bottom of the window.

Anyone got any idea how I can stop this? Using IE8.

Code:

function openPopup_JD(params){

	var name = params.name;
	var blanket = params.blanket  || true;
	var effect = params.effect || "fade"
	var afterOpen = params.afterOpen || "";
	
	var width = document.getElementById(name).style.width;
	var height = document.getElementById(name).style.height;

	width = width.slice(0, -2);
	height = height.slice(0, -2);

	width = width * 1;
	height = height * 1;

	document.getElementById(name).style.left = getLeft_JD(width) + "px";
	document.getElementById(name).style.top = getTop_JD(height) + "px";

	//Create blanket if it doesn't already exist.
	if(!document.getElementById('blanket')){
		var popupBlanket = document.createElement("div");
			popupBlanket.id = 'blanket';
			popupBlanket.style.display = "none";
			popupBlanket.style.opacity = 0;
			popupBlanket.style.filter = 'alpha(opacity = 0)';
			popupBlanket.style.backgroundColor = "#000";
			popupBlanket.style.position = "absolute";
			popupBlanket.style.zIndex = 9998;
			popupBlanket.style.top = "0px";
			popupBlanket.style.left = "0px";
			popupBlanket.style.width = "100%";
			popupBlanket.style.height = getBlanketHeight()+"px";
			
		document.body.appendChild(popupBlanket);					   
	 }

	switch(effect){
		
		//-----------------------------------
		//FADE IN
		//-----------------------------------
		case "fade":
			if(blanket == true){
				animate_JD({
					objects: 	'blanket			|'+name,	
					properties: "opacity			|opacity",
					start: 		"0",
					end: 		"0.75				|1",
					inerval: 	"20					|20",
					frames: 	"15					|20",
					effect:		"SFS",
					wait:		"0					|-1",
					onStart: 	"toggle('blanket')	|toggle('"+name+"')",
					onComplete:	"					|"+afterOpen
				});	
			}else{
				animate_JD({
					objects: 	''+name,	
					properties: "opacity",
					start: 		"0",
					end: 		"1",
					interval: 	"20",
					frames: 	"6",
					effect:		"SFS",
					wait:		"0",
					onStart:    "toggle('"+name+"')",
					onComplete:	""+afterOpen
				});	
			}
		break;

Not all of the function is shown because below this are only other effects

Hi All,

I am trying to introduce a vertical scroller to my site, I got the code from a tutorial and slightly tweaked the html to meet my needs but now the content doesn't scroll.

Would someone be willing to take a quick look and see if they can spot anything?

None of this code has been altered!

Code:

<script type="text/javascript">
$(document).ready(function(){
	$(".newsticker-jcarousellite").jCarouselLite({
		vertical: true,
		hoverPause:true,
		visible:10,
		auto:500,
		speed:1000
	});
});
</script>

This is the HTML and PHP part:

Code:

<div id="newsticker-demo"> 
<div class="newsticker-jcarousellite">
<br/>
<?php
$query = mysql_query("SELECT * FROM employers WHERE featured = 'Yes' AND image != '' ORDER BY rand()");
$i=0;
//$query = mysql_query("SELECT * FROM employers WHERE f_emp_active = 'Yes' and image !='' ORDER BY rand()");
echo '<div>';
while ($aqm=mysql_fetch_array($query)){
?>
<div>
<div>
<div class="thumbnail">
<div align="center"><a href="company.php?companyname=<?php echo $string ?>">
<img src="<?=$fullurl?>/thumbnail.php?gd=2&amp;src=employers/logo/big/<?=$aqm[image]?>&amp;maxw=<?=$a18[width]?>" alt="<?=$aqm[companyname]?>" title="<?=$aqm[companyname]?>" class="noborder" /></a>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<br/>
<br/>
<?php
if($i==5){
echo '</div><div>';
}
$i++;
}
echo '</div>';
?>
</div>
</div>

Does anyone know a way to do vertical sync with javascript animations (getting timers to run on the vertical sync)?

I rather doubt there is a way to do it, but I find it annoying that when I am dragging an object with my mouse that the object "tears" sometimes.

Hello,

I have a portfolio online (boctay.com/asaf) and I'm using the quicksand plugin with some sorting/filtering script.

My question is simple, for some reason when clicking on one of the buttons to filter, the items are first ordered into a vertical row then redrawn horizontally. Never seen this before and have no clue what is causing it.

Thanks for any help.

Much appreciated.

Hi All,

I would like to ask is if there is any way I could control the selectbox's vertical scroll bar.

scenario:
user inputs value from a textbox and it appends it to the selectbox.
after the user inputs more than 5 entries, the selectbox will create the
vertical scroll bar but will not focus/show the latest entry.

problem:
i can't seem to automatically focus or show the latest entry.

what i did:
i am using jquery to add data to the selectbox and i use jquery to set the selected value.
Code:

$('#selectbox').val('latest value').attr('selected','selected');

this code selects the latest value on the selectbox but it doesn't scroll down to show it. the user still has to drag the scroll bar down. any idea i can auto scroll it to the latest value?

thanks for the help

hi, i am trying to scroll my list of twitter feeds vertically, I am using the following script:

http://www.******************/javasc...ry-news-slider

I have stripped everything out and have the demo working perfectly

I have now uploaded JS files and put in the relevant code and it's not working?!

here is my website:

http://judd-dev.co.uk/pitch/
(homepage twitter feed bottom right)


here is the code I have in my website:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jcarousellite_1.0.1c4.js"></script>
<script type="text/javascript">
$(function() {
	$(".tweet_list").jCarouselLite({
		vertical: true,
		hoverPause:true,
		btnPrev: ".previous",
		btnNext: ".next",
		visible: 3,
		auto:3000,
		speed:500
	});
});
</script>

<div id="social-feed-wrapper">
        
        	
        	<div class="feed" id="twitter-feed" style="display: block;"><ul class="tweet_list"><li class="tweet_first tweet_odd">text goes here</li><li class="tweet_even">more text</li></ul></div>
                        
            <ul class="social-icons">
            
            	<li class="twitter"><a href="#twitter-feed" class="active"></a></li>
                <li class="facebook"><a href="#facebook-feed"></a></li>
            
            </ul>
        
        </div>

Please help

I can't seem to find what I need but I know it exists. I trying to find a vertical scroller that will automatically have the text scroll upwards but have an arrow above and arrow below to be able to control the direction of the scrolling text, or a script with no arrows but still allow me to take control by mousing over the text to scroll up or down.

Thanks

http://jakoba.dk/index.php/joomla-websites

Two things I would like some help with:

First, the cinema slider on the right does have a litle problem on the top of the slider. First it pops op above the slider div and after the slide finishes it goes away. I want it to slide without the jumping up and down in the top.

Second, I would like to make the slider stop on mouseover, so the reader have a chance to click on a picture withou the module keep sliding.

Hope someone could help me with this, cause im not that good to javascript.

Cheers Jakob