We help IT Professionals succeed at work.
Get Started

jquery smooth HORIZONTAL scroll plugin

manal87
manal87 asked
on
2 Comments
1 Solution
1,140 Views
Last Modified: 2012-05-11
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

Comment
Watch Question
Commented:
This problem has been solved!
Unlock 1 Answer and 2 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE