R T Harrison LTD

This site’s for a sister company to a previous website I built at the start of the year. It was an interesting company that supply stitching machines to the printing trade. I love design and I currently work in digital signage, so seeing the old type-setting kits for traditional signage was very knowledgeable and rewarding.

R T Harrison LTD new Site

Visit Site

R T Harrison LTD

If your a large printing company be sure to visit R T Harrison LTD for stitching machines and supplies.

Spacegallery – mooStyle

I was combing the JavaScript framework blogs and came across this image carousel in JQuery: SpaceGallery. I used this same concept in my old website but it was written in mootools. The jQuery plug-in feels unresponsive and slow and doesn’t have any features. So here is the mootools version I wrote, sorry it is not as a plugin but feel free to make it into one.

Space carousel

View Demo

Things you need

First get Mootools (This demo uses 1.2.4) and if you want the color plugin I use in the demo you can download this from mootools more.

The JavaScript

Sorry about the mess of this: I haven’t written it to be dynamic as it was rushed out late at night. The positioning of elements is hard-coded but would be simple to adapt if i could be bothered to comment anything. So here it is:

var spacers = "";

function loadDemo(){
     spacers = $("spaceMan").getElements(".spaceOB");
     intSpace();
}

function intSpace(){
     spacers.addEvents({
          'mouseover': function(){
               if(this.getStyle("z-index") != 20){
                    this.setStyle("top", parseInt(this.getStyle("top"))-2);
               }
          },
          'mouseout': function(){
                if(this.getStyle("z-index") != 20){
                     this.setStyle("top", parseInt(this.getStyle("top"))+2);
                }
          },
          'click': function(){
               doSpace(this);
          }
     });

     spacers.each(function(item, index){
          var color = [index*40, 82, 87].hsbToRgb();
          spacers[index].setStyles({
               "z-index": 20-index,
               "background-color": color
          });
          spacers[index].set(
               'morph',
               {
                    duration: 1000-(index*100),
                    transition: 'Sine:out'
               }
          );

          spacers[index].morph(
          {
                opacity: [0, (100-(index*10))/100],
                width: 323-(index*32.3),
                height: 203-(index*20.3),
                left: 60+((index*23.5)/1.5),
                top: 80-(index*(15-(index)))
          });
     });
     setTimeout(function(){$("spaceHelp").fade([0,1]);}, 1000);
}

function doSpace(el){
     $("spaceHelp").fade(0);
     var positionOfClicked = 20 - el.getStyle("z-index");
     var topPos = 0;
     spacers.each(function(item, index){
          var zIndexi = parseInt(spacers[index].getStyle("z-index"));
          if(zIndexi == 20){
               spacers[index].setStyle("z-index", 20-(spacers.length-1));
               spacers[index].set('morph', {
                    duration: '500',
                    transition: 'Sine:out',
                    onComplete: function(){
                         spacers[index].set(
                              'morph',
                              {
                                   duration: '500',
                                   transition: 'Sine:out'
                              }
                         );
                         spacers[index].morph({
                              opacity: [0, 0.5],
                              width: [94,161.5],
                              height: [50, 62.5],
                              left: [170, 138],
                              top: [40, 30]
                         });
               }});
               spacers[index].morph({
                    opacity: 0,
                    width: 400,
                    height: 220,
                    left: 25,
                    top: 110
               });
          }
          else{
               var thisPos = 20-(zIndexi+1);
               spacers[index].setStyle("z-index", zIndexi+1);
               spacers[index].set(
                    'morph',
                    {
                         duration: '500',
                         transition: 'Sine:out'
                    });
                spacers[index].morph({
                     opacity: (100-(thisPos*10))/100,
                     width: 323-(thisPos*32.3),
                     height: 203-(thisPos*20.3),
                     left: 60+((thisPos*23.5)/1.5),
                     top: 80-(thisPos*(15-(thisPos)))
                });
          }
     });
     if(positionOfClicked == 0){
          return false;
     }
     if(positionOfClicked != 1){
          setTimeout(function(){doSpace(el)}, 125);
     }
}

The CSS and HTML

The css:

 #spaceManHolder{
   	width: 450px;
 	height: 500px;
 	margin: 40px auto 0px auto;
 	position: relative;
 }
 #spaceMan{
  	width: 450px;
 	height: 300px;
  	position: relative;
 }

 #spaceHelp{
 	font-size: 10px;
 	color: #fff;
 	text-align: center;
 	opacity: 0;
 }

.spaceOB{
	position: absolute;
	width: 100px;
	height: 100px;
	z-index: 100;
}

and the html:

<div id="spaceManHolder">
     <div id="spaceMan">
          <div class="spaceOB"></div>
          <div class="spaceOB"></div>
          <div class="spaceOB"></div>
          <div class="spaceOB"></div>
          <div class="spaceOB"></div>
          <div class="spaceOB"></div>
     </div>
     <div id="spaceHelp">
          Click The front block or try selecting
          a block from the back
     </div>
</div>

If you would like to use or add to this example please do:)

CSS: Position-x and Position-y (Updated)

Updated code

I’ve updated the article and code to use more modern methods. See the CodePen below for more details:

Position-x: Position-y:

View CodePen

Please visit the CodePen above if you would like to implement position-x and position-y.

[Caution] Below is the pre 2009 method if anyone is still interested…

While building out a content management system for DMP I needed to create a toolbar which would stay with position: fixed; on the y-axis, but act like position: absolute on the x-axis. To achieve this I used a clever JavaScript class from David Walsh called scrollspy.

View the old Demo

The JavaScript

Things you will need first: Mootools (This demo uses 1.2.4) and the ScrollSpy plugin from David Walsh. Next write this for you element:

var ss = new ScrollSpy({
     mode: 'horizontal',
     onTick: function(position,state,enters,leaves) {
          $("sidePanel").style.left = -position.x+"px";
     },
     container: window
});

The CSS

In the CSS use position: fixed; because we have handled the position-x: absolute; in JavaScript. so:

#sidePanel {
     position:fixed;
     left:0;
     top:0;
     width:250px;
     z-index:1000;
}

The above example will keep our sidePanel element from disappearing when you scroll down the page but it will scroll with the page when the user scrolls right.

To do the opposite ie. position-x: fixed; position-y: absolute; In the JavaScript change mode: ‘horizontal’ to mode: ‘vertical’ and -position.x+”px”; to -position.y+”px”; and that’s it any comments, ideas or improvements leave them below.