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>
Learn from the best
Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.
Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.
Our community of experts have been thoroughly vetted for their expertise and industry experience.