Tag Archives: css

Webkit custom scroll bars

Webkit browsers such as Safari and Chrome support some superb CSS3 styling.
They are ( even thought I use firefox as my primary browser ) the most advanced browsers.

For a while now I have created custom scroll bars using a Javascript library called Mootools, other libraries such as jQuery and Prototype can do this too, but here is one easy way to do it with CSS alone;

here is the simple code, if you know CSS it will be self explanatory, else I have added some commenting

/* were a webkit browser, lets style our scroll bar */
@media screen and (-webkit-min-device-pixel-ratio:0) {

	html{
		/* hide overall scrolling */
		overflow: auto;
	}
	body {
		/* absolute position our 'body' and allow for the width of the scroll bar */
		position: absolute;
		left: 0;
		top: 0;
		right: 10px;
		bottom: 0;
		padding-right: 10px;
		overflow-x: auto;
		overflow-y:scroll;
	}


	::-webkit-scrollbar {
		/* set the width of the scroll bar */
		width: 10px;
	}

	::-webkit-scrollbar-button:start:decrement, 
	::-webkit-scrollbar-button:end:increment {
		/* hide the arrows */
		display: block;
		height: 10px;
	}

	::-webkit-scrollbar-track-piece {
		/* set the style/colour of the scroll bar background */
		background: 
		-webkit-gradient(
			linear, 
			0 0, 
			100% 0, 
			from(rgba(0,0,0,0.2)), 
			to(rgba(0,0,0,0.12))
		);
		-webkit-box-shadow: 0 1px 0 0 rgba(255,255,255,0.35);
		-webkit-border-radius: 5px;
	}

	::-webkit-scrollbar-thumb:vertical{
		/* this is the acutal scrooll bar, set the colours here to match your site */
		/* I have used grey's (#464646 & #383838 & #cccccc) */
		background: 
		-webkit-gradient(
			linear, 
			0 0, 
			100% 0, 
			from(#464646),
			to(#383838)
			);
			-webkit-border-radius: 6px;
			border: 3px solid #cccccc;
			-webkit-background-clip: padding-box;
		}
		::-webkit-scrollbar-track-piece:horizontal{
			background: none;
			-webkit-box-shadow:none;
		}
		::-webkit-scrollbar:horizontal{
			height: 16px;
		}
		::-webkit-scrollbar-thumb:horizontal{
			height: 12px;
			-webkit-border-radius:12px;
			background: 
			-webkit-gradient(
				linear, 
				0 0, 
				0 100%, 
				from(rgba(0,0,0,0.1)), 
				to(rgba(0,0,0,0.25))
			);
			border: 6px solid transparent;
			-webkit-background-clip: padding-box;
			
		}
	}
}

Mootools Gallery ZoomBox Plugin

I needed a simple lightweight Mootools Gallery Lightbox, and after a few googles, I found nothing that suited my needs with out all the extra ‘captions’ and grouping and bloat.

This is a simple zoom from start position type lightbox that uses only the Mootools Core version 1.2.4 at this time but should work with 1.3.x

I have used it on the Glass Effects web page which you can view for a demo.

You will notice on my class, I am adding a CSS class ‘shadow’ to the large image, this is used for basic styling and you can do any CSS you want to it. ( or none at all )

Here is how it is built up;

HTML:

< div id="photos">
	< ul>
		< li>< a href="http://www.glasseffects.co.nz/assets/volume1/2_large.jpg" class="zoomBox" title="Glass Effects - Painted toi toi image on glass splashback">< img src="http://www.glasseffects.co.nz/assets/volume1/2_small.jpg" alt="Glass Effects - Painted toi toi image on glass splashback" />< /a>< /li>
		< li>< a href="http://www.glasseffects.co.nz/assets/volume1/3_large.jpg" class="zoomBox" title="Glass Effects - Uniformed lines on Effects glass splashback">< img src="http://www.glasseffects.co.nz/assets/volume1/3_small.jpg" alt="Glass Effects - Uniformed lines on Effects glass splashback" />< /a>< /li>
		< li>< a href="http://www.glasseffects.co.nz/assets/volume1/5_large.jpg" class="zoomBox" title="Glass Effects - Textured Effect splashback using GlassArt colour #25 Iridium">< img src="http://www.glasseffects.co.nz/assets/volume1/5_small.jpg" alt="Glass Effects - Textured Effect splashback using GlassArt colour #25 Iridium" />< /a>< li>
		< li>< a href="http://www.glasseffects.co.nz/assets/volume1/6_large.jpg" class="zoomBox" title="Glass Effects - Stencilled Effect – toi toi. GJ Gardner Show Home, Tauranga">< img src="http://www.glasseffects.co.nz/assets/volume1/6_small.jpg" alt="Glass Effects - Stencilled Effect – toi toi. GJ Gardner Show Home, Tauranga" />< /a>< /li>
		< li>< a href="http://www.glasseffects.co.nz/assets/volume1/7_large.jpg" class="zoomBox" title="Glass Effects - Painted glass for bar. GlassArt colour #49 Red Red Red">< img src="http://www.glasseffects.co.nz/assets/volume1/7_small.jpg" alt="Glass Effects - Painted glass for bar. GlassArt colour #49 Red Red Red" />< /a>< /li>
	< /ul>
< /div>

JS ( In Page ):


window.addEvent('domready', function() {

	/* Any other JS needed for your page */
	
	var myZoomBox = new zoomBox();


	/* to set options */
	
	var myZoomBox = new zoomBox({
		zb_class:     '.mootools-ftw',
		zb_element:   'big_image',
		zb_loader:    './loading.gif'
	});

});

ZoomBox Class:

// Create the Mootools ZoomBox Class
var zoomBox = new Class({
	
	Implements : Options,
	// Editable Settings
    options: {
		zb_class:     '.zoomBox',                    // class of anchors/images to find on page.
		zb_element:   'zb_image',                    // id of zppmBox pop-up div
		zb_loader:    '/assets/images/loading.gif',  // path to loading image
		scale_image:  true,                          // scale large image if it is bigger than our screen size, bool true/false
		win_width:    1024,                          // basic window width, ignore
		win_height:   768                            // basic window height, ignore
    },

	initialize: function(options){
		// set options and internal settings
		this.setOptions(options);
		this.setWindowSize();
		this.currentIndex;
		this.images = new Array();
		this.positions = new Array();
		
		// create our loading image
		this.zb_loading = new Element('img', { 
			'id'    : 'zb_loading', 
			'src'   : this.options.zb_loader,
			'styles': { 
				'position': 'absolute',
				'display' : 'none',
				'left'    : 0,
				'top'     : 0
			}
		}).inject(document.body, 'bottom');

		// scan page for our class.
		this.thumbs = $$(this.options.zb_class);
		
		var self = this;
		
		// attach each image.
		this.thumbs.each(function(zb, index) {
			self.attach(zb, index);
		});
		
		// add event listener if the user resizes their window to scale max size of images.
		window.addEvent('resize', self.setWindowSize.bindWithEvent(this));
		
	},
	
	
	// attach out image and add event listeners.
	attach: function(zb, index) {
		var self     = this;
		// is we manually attach a new element this is needed.
		if(index == undefined) {
			index = (self.length + 1);
		}
		// set our basic width/heights.
		var zb_fx;
		var zb_src   = zb.get('href');
		var zb_org   = zb.getElements('img')[0];
		self.positions[index] = {};
		self.positions[index].zb_left = zb_org.getPosition().x;
		self.positions[index].zb_top  = zb_org.getPosition().y;
		// add out click event.
		zb.addEvent('click', function(clk) {
			new Event(clk).stop();
			// no point opening it, if its already open !
			if(!document.id(self.options.zb_element) || !document.id(self.options.zb_element).get('src').match(zb.get('href'))) {
				// add out loading gif to the image about to be opened.
				self.zb_loading.setStyles({
					'display' : '',
					'top'     : self.positions[index].zb_top,
					'left'    : self.positions[index].zb_left
				});
				// if we have one open, let it be gone
				if(document.id(self.options.zb_element)) {
					self.close(self.currentIndex);
				}
				// set current index.
				self.currentIndex = index;
				// create and place on top of the thumbnail. but keep it hidden.
				self.images[index] = new Element('img', { 
					'id'    : self.options.zb_element, 
					'src'   : zb_src,
					'styles': { 
						'position': 'absolute',
						'opacity' : 0,
						'left'    : self.positions[index].zb_left,
						'top'     : self.positions[index].zb_top
					}
				})
				.addClass('shadow') // we don't need this. but its basic styling for large image.
				.inject(document.body, 'bottom') // inject at teh bottom of our page.
				.addEvent('click', function(clk) {
					// bind out close even on clicking the new large image
					new Event(clk).stop();
					self.close(index);
				})
				// bind a load event so once the large image has loaded, we open it.
				.addEvent('load', function() {
					// get our large image size
					var zb_width  = self.images[index].getWidth();
					var zb_height = self.images[index].getHeight();
					// see if we need to scale it, so the image fits on screen.
					if(self.options.scale_image) {
						if(self.options.win_width < zb_width) {
							zb_width  = (self.options.win_width - 50);
							zb_height = (zb_width / zb_height) * zb_width;
						} 
						if(self.options.win_height < zb_height) {
							zb_height = Math.floor(self.options.win_height - 50);
							zb_width  = Math.floor((zb_height / zb_width) * zb_height);
						}
					}
					// set the imahe the size of the thumbnail
					self.images[index].setStyles({
						'width'   : zb_org.getWidth(),
						'height'  : zb_org.getHeight(),
						'cursor'  : 'pointer'
					});
					// hide teh loading gif/indicator 
					self.zb_loading.setStyle('display', 'none');
					// animate it BIG ! and center it on the screen
					var zb_fx = new Fx.Morph(self.images[index]).start({
						'top'     : ((self.options.win_height / 2) - (zb_height / 2)) + window.getScroll().y,
						'left'    : ((self.options.win_width / 2) - (zb_width / 2)),
						'width'   : zb_width,
						'height'  : zb_height,
						'opacity' : 1
					});
				});
			} else {
				// we have used it before, lets load it up.
				self.images[index].fireEvent('load');
			}
			// bind the 'escape' key to close the current image.
			window.addEvent('keyup', function(key) {
				if(key.code == 27) {
					self.close(index);
				} 
			});
		});
	},
	
	close: function(index) {
		var self = this;
		var zb_fx = new Fx.Morph(self.images[index], { 
			onComplete: function() {
				document.id(self.options.zb_element)
					.fade(0)
					.dispose();
			} 
		}).start({
			'top'     : self.positions[index].zb_top,
			'left'    : self.positions[index].zb_left,
			'width'   : 100,
			'height'  : 100,
			'opacity' : 0
		});
		window.removeEvents('keyup');
	},
	
	setWindowSize: function() {
		
		this.options.win_width = window.getWidth();
		this.options.win_height = window.getHeight();
		
	}
	
});

Download the Full Script:
[download id="11"]

Safari's CSS Support for multiple backgrounds on the same Style

I was browsing just now and fond something pretty interesting, Safari supports multiple background image declarations for the same style tag.

	.box {

		background:
		/*	Upper-left	*/	url(./corners_01.png),
		/*	Upper-right	*/	url(./corners_02.png),
		/*	Lower-left	*/	url(./corners_03.png),
		/*	Lower-right	*/	url(./corners_04.png),
		/*	Icon		*/	url(./icon.png),
		/*	Gradient	*/	url(./gradient.png);

		background-position:
		/*	Upper-left	*/	0% 0%,
		/*	Upper-right	*/	100% 0%,
		/*	Lower-left	*/	0% 100%,
		/*	Lower-right	*/	100% 100%,
		/*	Icon		*/	0.6em 0.6em,
		/*	Gradient	*/	0% 100%;

		background-repeat:
		/*	Upper-left	*/ 	no-repeat,
		/*	Upper-right	*/	no-repeat,
		/*	Lower-left	*/	no-repeat,
		/*	Lower-right	*/	no-repeat,
		/*	Icon		*/	no-repeat,
		/*	Gradient	*/	repeat-x;
	}

CSS Fix for SPAW Editor & Safari

Over the last couple of years I have used the SPAW WYSIWYG Editor for my site management and clients sites CMS systems.

Ryan Stemkoski and I used it in our Zipline ZLCMS Package that is now in use in over 300 sites and have found it to be a great editor, and now I am using SPAW 2.0.8.1 for CodeIgniter in a CodeIngiter CMS Site.

How ever I have found that SPAW doesnt really fit in the Safari Frame, and all the toolbars span on one line causing usability and scrolling issue.

Today when implementing it for a MAC Safari only based client I went and dug for the fix.

I have always used the Spaw2Lite theme, which is much lighter than the standard theme, if you edit the theme CSS file located at

/spaw2/plugins/core/lib/theme/spaw2lite/css/theme.css

and alter these two sections of code.

( I’m sure the same fix will apply for the standard theme. )

Add the CSS attribute ‘float: left;‘ to the selector ‘.spaw2litemaintoolbar‘.

.spaw2litemaintoolbar
{
	float: left;
	border-bottom: 1px solid #cecece;
}

Remove the ‘white-space‘ attribute from the selector ‘.spaw2litetoolbar‘.

  white-space: nowrap;

Let me know if this helps, or doesn’t, or you have other fixes for SPAW.

CSS IE 6 PNG Fix

While doing some iPhone web Dev research, I came across this IE 6 CSS PNG Fix.

I am yet to try it, but could be pretty helpful ! :)

/*Fix the PNG background image so that the contents can still be clicked*/
/* http://gist.github.com/9180 */
* html .png-fix-box {
  background: none;
  _azimuth: expression(this.bgd = this.bgd || 'bgd:'+this.insertAdjacentHTML('afterBegin','
'),'inherit'); } * html .png-fix-box .bg { display:inline; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/media/images/global/discuss-box_top.png', sizingMethod='image'); }