Printable View
Can anyone help me here? I suspect this is a prewritten script and the author has removed the scroll bar.
Any help appreciated as I cannot find where it originally came from, even though I had it before :(
http://www.gmcbryde.com is the site
Many thanks
He/she is using jquery. If you view the source you can see how they are doing it
Code:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type= "text/javascript">/*<![CDATA[*/
$(function(){
//Get our elements for faster access and set overlay width
var div = $('div.sc_menu'),
ul = $('ul.sc_menu'),
ulPadding = 0;
//Get menu width
var divWidth = div.width();
//Remove scrollbars
div.css({overflow: 'hidden'});
//Find last image container
var lastLi = ul.find('li:last-child');
//When user move mouse over menu
div.mousemove(function(e){
//As images are loaded ul width increases,
//so we recalculate it each time
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
div.scrollLeft(left);
});
});
/*]]>*/</script>
if you dont need all that jQuery
or need multiple applications or page resizing
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
,... ,...
s&93S ;@@@@: &@@@@X
@@@@@ :@@@@, 2@@@@s
2@@@@ @@ s@@@@r
#@@@s B@@@@@X r@@@@@@r :H@@@@@@@Mr @@@@ #@@@@@@@@M@@@@@ .@@@@r X@X .G@@@@@@@#r ;@@@@;
@@@@@@@@@@@@@@#@@@@@@@@@ @@@@@@@@@@@@@ @@@@3@@@@@@@@@@@@@@@@M &@@@@,@#. X@@@@@@@@@@@@ @@@@
@@@@@#, ,#@@@@@A. :@@@@@.s@@@@: @@@@& @@@@@@@H&r5@@@# &@@@@ @@@@r ;@@@@ @@@@@ @@@@
M@@@# @@@@h @@@@;.r:. #@@@A @@@@@ s@@@M @@@@A i@@@@ 2@@@@; .; @@@#
B@@@G @@@@; @@@@; sM@@@@@@@@9 @@@@; 2@@@@ ;@@@@ @@@@. @@@@@@@@@h; X@@X
B@@@M @@@@i @@@@: @@@@@@@@2#@@@9 @@@@: X@@@@ @@@@A ;@@@H ;H@@@@@@@@@@i ;@@r
B@@@# @@@@5 @@@@r@@@@& h@@@9 @@@@r X@@@@ @@@@ #@@@ ;X#@@@@@: ;r
B@@@# @@@@5 @@@@G@@@@ @@@@3 @@@@r 3@@@@ &@@@@@@@i @@@@2 @@@@5 ;..r
M@@@@ @@@@2 @@@@;@@@@@r;i#@@@@@9 @@@@s 9@@@@#Ms @@@@@@@ 3@@@@@2r;sA@@@@ s@@@@i
@@@@@ @@@@& @@@@, @@@@@@@@SS@@@@ @@@@2 @@@@@@@ r@@@@@: :@@@@@@@@@@@h r@@@@s
.. . rX9S, . . .:;;. @@@@# :sX9Xi; . ,
@@@@
h@@@@@@;
#@@@@@r
// WEBSITE BY MARTYBELL.CO.UK ,.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<title>GORDON MCBRYDE / 1</title>
<style type="text/css">
/*<![CDATA[*/
* {
border:0;
margin:0;
padding:0;
}
div.sc_menu {
/* Set it so we could calculate the offsetLeft */
position: relative;
height: 400px;
width: 100%;
/* Add scroll-bars */
overflow: auto;
}
ul.sc_menu {
height: 400px;
/* Max width here, for users without Javascript */
width: 8065px;
/* Remove default margin */
position: relative;
list-style: none;
}
.sc_menu li {
float: left;
}
.sc_menu a {
text-decoration: none;
}
/*]]>*/
</style>
<meta name="description" content="Photographic portfolio of UK based photographer Gordon McBryde." />
<meta name="keywords" content="gordon mcbryde photography, gordon, mcbryde, photography, p0rg, portfolio, photos, photo, pictures, images, deviantart, flickr, uk, landscape, manipulation, retouching, england" />
<style type="text/css">
embed{width:0px; height:0px}
</style>
</head>
<body>
<div id="tst" class="sc_menu">
<ul class="sc_menu">
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/1.jpg">
</a></li>
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/2.jpg">
</a></li>
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/3.jpg">
</a></li>
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/4.jpg">
</a></li>
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/5.jpg">
</a></li>
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/6.jpg">
</a></li>
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/7.jpg">
</a></li>
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/8.jpg">
</a></li>
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/9.jpg">
</a></li>
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/10.jpg">
</a></li>
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/11.jpg">
</a></li>
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/12.jpg">
</a></li>
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/13.jpg">
</a></li>
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/14.jpg">
</a></li>
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/15.jpg">
</a></li>
</ul>
</div>
<div id="tst2" class="sc_menu">
<ul class="sc_menu">
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/1.jpg">
</a></li>
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/2.jpg">
</a></li>
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/3.jpg">
</a></li>
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/4.jpg">
</a></li>
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/5.jpg">
</a></li>
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/6.jpg">
</a></li>
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/7.jpg">
</a></li>
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/8.jpg">
</a></li>
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/9.jpg">
</a></li>
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/10.jpg">
</a></li>
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/11.jpg">
</a></li>
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/12.jpg">
</a></li>
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/13.jpg">
</a></li>
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/14.jpg">
</a></li>
<li><a href="#">
<img src="http://www.gmcbryde.com/images/gallery/one/15.jpg">
</a></li>
</ul>
</div>
<script type= "text/javascript">
/*<![CDATA[*/
function Scroll(id,ulPadding){
var div=document.getElementById(id);
div.style.overflow='hidden';
var ul=div.getElementsByTagName('UL')[0];
var lis=ul.getElementsByTagName('LI');
var lastLi=lis[lis.length-1];
var ulPadding = ulPadding||0;
this.ul=ul;
div.onmousemove=function(e){
e=e||window.event;
var x=(window.event)?e.clientX:e.pageX;
var ulWidth = lastLi.offsetLeft + lastLi.offsetWidth + ulPadding;
var left = (x - div.offsetLeft) * (ulWidth-div.offsetWidth) / div.offsetWidth;
ul.style.left=-left+'px';
}
}
var s1=new Scroll('tst',0);
var s2=new Scroll('tst2',0);
window.onresize=function(){
s1.ul.style.left='0px';
s2.ul.style.left='0px';
}
/*]]>*/
</script>
</body>