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
$('html, body').animate({scrollLeft
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"></s
Result: nothing
What am I missing?
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
$('html, body').animate({scrollLeft
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"></s
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 "expats" - 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 & adaptive.<br />
This project is a collaboration between Aya Atoui & 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>
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Premium Content
You need an Expert Office subscription to comment.Start Free Trial