Results 1 to 3 of 3

Thread: Anyone know where this came from?

  1. #1
    Join Date
    Aug 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Anyone know where this came from?

    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

  2. #2
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    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>
    Corrections to my coding/thoughts welcome.

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •