Anyone know where this came from?

**scotlad** · 08-19-2010, 06:36 PM

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

**bluewalrus** · 08-19-2010, 06:49 PM

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>

**vwphillips** · 08-20-2010, 10:24 AM

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>

Thread: Anyone know where this came from?

Thread Tools

Search Thread

Anyone know where this came from?

Bookmarks

Bookmarks

Posting Permissions