Avatar of manal87
manal87
 asked on

jquery smooth HORIZONTAL scroll plugin

Hi there,

I've designed my portfolio website which has a horizontal layout: www.manalelias.com
When the viewer reaches the end of the row of images, there is a div to which i want to apply a smooth scroll function that directs the viewer back to the beginning (left) of the page.
This is exactly the same as the typical "scroll to top" functions, except horizontally, so "scroll to left".

I am completely new to jquery and web design. I did some research and tried applying this:
http://www.electrictoolbox.com/jquery-scroll-top/

So I replaced #top with my div #apDiv3 and I replaced scrollTop with scrollLeft.

So that makes:
<script type="text/javascript" language="javascript">
$(document).ready(function() {
   
    $('a[href=#apDiv3]').click(function(){
        $('html, body').animate({scrollLeft:0}, 'slow');
        return false;

    });

 

});
</script>


I inserted the script in my head section.
Also, I download jquery and put it in my root folder. So I also have this in my head section:
<script src="jquery.js" type="text/javascript"></script>

Result: nothing
What am I missing?
<!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>manal</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
    
    $('a[href=#apDiv3]').click(function(){
        $('html, body').animate({scrollLeft:0}, 'slow');
        return false;

    });

});
</script>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_showHideLayers() { //v9.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) 
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
#apDiv2 {
	position:absolute;
	width:8300px;
	height:408px;
	z-index:1;
	overflow: auto;
	left: 317px;
	top: 174px;
}

#apDiv1 {
	position:absolute;
	width:8213px;
	height:408px;
	z-index:1;
	overflow: auto;
	left: 317px;
	top: 174px;
	visibility: hidden;
}

#apDiv3 {
	position: absolute;
	left: 8572px;
	top: 174px;
	z-index: 97;
	width: 44px;
	height: 23px;
}

body {
	background-color: #909090;
	background-image: url(background.jpg);
	background-repeat: repeat-x;
}

#wrapper {
	position:absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 8530px;
	height: 750px;
}

-->
</style>
</head>

<body onload="MM_preloadImages('navi_on/on_19.png','nav_on/on_02.jpg','nav_on/on_04.jpg','nav_on/on_06.jpg','nav_on/on_08.jpg','nav_on/on_11.jpg','nav_on/on_13.jpg','nav_on/on_15.jpg','nav_on/on_17.jpg','nav_on/on_22.jpg')">
<div class="info_icon" id="infoicon"><img src="info_icon.jpg" alt="About this project" width="20" height="21" border="0" onclick="MM_showHideLayers('infoicon','','hide','apDiv2','','hide','apDiv1','','show','text','','show','closeicon','','show')" /></div>
<div id="wrapper"></div>
<div id="apDiv2"><img src="collab/collab_01.jpg" width="632" height="408" border="0" /><img src="collab/collab_02.jpg" width="630" height="408" border="0" /><img src="collab/collab_03.jpg" width="629" height="408" border="0" /><img src="collab/collab_04.jpg" width="650" height="408" border="0" /><img src="collab/collab_05.jpg" width="631" height="408" border="0" /><img src="collab/collab_06.jpg" width="632" height="408" border="0" /><img src="collab/collab_07.jpg" width="630" height="408" border="0" /><img src="collab/collab_08.jpg" width="633" height="408" border="0" /><img src="collab/collab_09.jpg" width="634" height="408" border="0" /><img src="collab/collab_10.jpg" width="633" height="408" border="0" /><img src="collab/collab_11.jpg" width="634" height="408" border="0" /><img src="collab/collab_12.jpg" width="631" height="408" border="0" /><img src="collab/collab_13.jpg" width="614" height="408" border="0" /></div>
<div id="apDiv1"><img src="collab/info_01.jpg" width="632" height="408" border="0" /><img src="collab/info_02.jpg" width="631" height="408" border="0" /><img src="collab/info_03.jpg" width="629" height="408" border="0" /><img src="collab/info_04.jpg" width="649" height="408" border="0" /><img src="collab/info_05.jpg" width="631" height="408" border="0" /><img src="collab/info_06.jpg" width="632" height="408" border="0" /><img src="collab/info_07.jpg" width="630" height="408" border="0" /><img src="collab/info_08.jpg" width="633" height="408" border="0" /><img src="collab/info_09.jpg" width="634" height="408" border="0" /><img src="collab/info_10.jpg" width="633" height="408" border="0" /><img src="collab/info_11.jpg" width="634" height="408" border="0" /><img src="collab/info_12.jpg" width="631" height="408" border="0" /><img src="collab/info_13.jpg" width="614" height="408" border="0" /></div>
<div id="nav"><img src="nav_off/off_01.jpg" width="251" height="145" border="0" /><a href="nad_design.html"><img src="nav_off/off_02.jpg" width="135" height="20" border="0" id="Image1" onmouseover="MM_swapImage('Image1','','nav_on/on_02.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><img src="nav_off/off_03.jpg" width="116" height="20" border="0" /><a href="dxboards.html"><img src="nav_off/off_04.jpg" width="175" height="23" border="0" id="Image2" onmouseover="MM_swapImage('Image2','','nav_on/on_04.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><img src="nav_off/off_05.jpg" width="76" height="23" border="0" /><a href="cure.html"><img src="nav_off/off_06.jpg" width="156" height="19" border="0" id="Image3" onmouseover="MM_swapImage('Image3','','nav_on/on_06.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><img src="nav_off/off_07.jpg" width="95" height="19" border="0" /><img src="nav_off/off_08.jpg" width="194" height="23" border="0" id="Image4" onmouseover="MM_swapImage('Image4','','nav_on/on_08.jpg',1)" onmouseout="MM_swapImgRestore()" /><img src="nav_off/off_09.jpg" width="57" height="23" border="0" /><img src="nav_off/off_10.jpg" width="251" height="43" border="0" /><a href="documentary.html"><img src="nav_off/off_11.jpg" width="134" height="24" border="0" id="Image5" onmouseover="MM_swapImage('Image5','','nav_on/on_11.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><img src="nav_off/off_12.jpg" width="117" height="24" border="0" /><a href="portraits.html"><img src="nav_off/off_13.jpg" width="118" height="18" border="0" id="Image6" onmouseover="MM_swapImage('Image6','','nav_on/on_13.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><img src="nav_off/off_14.jpg" width="133" height="18" border="0" /><a href="product_industrial.html"><img src="nav_off/off_15.jpg" width="193" height="23" border="0" id="Image7" onmouseover="MM_swapImage('Image7','','nav_on/on_15.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><img src="nav_off/off_16.jpg" width="58" height="23" border="0" /><a href="other.html"><img src="nav_off/off_17.jpg" width="174" height="19" border="0" id="Image8" onmouseover="MM_swapImage('Image8','','nav_on/on_17.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><img src="nav_off/off_18.jpg" width="77" height="19" border="0" /><a href="collab.html"><img src="nav_on/on_19.jpg" width="126" height="20" border="0" /></a><img src="nav_off/off_20.jpg" width="125" height="20" border="0" /><img src="nav_off/off_21.jpg" width="251" height="36" border="0" /><a href="about.html"><img src="nav_off/off_22.jpg" width="118" height="10" border="0" id="Image10" onmouseover="MM_swapImage('Image10','','nav_on/on_22.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><img src="nav_off/off_23.jpg" width="133" height="10" border="0" /><img src="nav_off/off_24.jpg" width="251" height="13" border="0" /></div>
<div id="apDiv3"><img src="back.jpg" alt="Back to beginning" width="44" height="14" border="0" /></div>
<div class="text" id="text">
  <p><strong>A city</strong> with a demographic of mostly &quot;expats&quot; - an eternal status. <br />
    <strong>Spaces</strong> that define Dubai's constant state of reconstruction.<br />
    <strong>Projections</strong> that, in their nature, are fleeting &amp; adaptive.<br />
    This project is a collaboration between Aya Atoui &amp; Manal Elias. 
  </p>
</div>
<div class="close" id="closeicon"><img src="close.jpg" alt="Close" width="11" height="11" border="0" onclick="MM_showHideLayers('infoicon','','show','apDiv2','','show','apDiv1','','hide','text','','hide','closeicon','','hide')" /></div>
<script type="text/javascript" language="javascript">

var topInit = $("#nav").offset().top;
var left = $('#nav').offset().left - parseFloat($('#nav').css('margin-left').replace(/auto/, 0));


$(window).scroll(function(event) {
    var x = 0 - $(this).scrollLeft();
    var y = $(this).scrollTop();

    // whether that's below the form
    if (x <= left) {
        // if so, ad the fixed class
        $('#nav').addClass('fixed');

    } else {
        // otherwise remove it
        $('#nav').removeClass('fixed');

    }
    
    $("#nav").offset({
        top: topInit
    });
    
});
</script>
</body></html>

Open in new window

JScriptHTMLWeb Development

Avatar of undefined
Last Comment
manal87

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
darren-w-

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
manal87

ASKER
Thanks :)
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy