TutorBoy » CSS

Gmail style Scrollbar Using jQuery and CSS + MouseWheel

Midhun Devasia — Wed, 29 Feb 2012 06:40:41 +0000

As per the request, here is an updated version of scrollbar with the Mouse Wheel feature. Now you can scroll using the Mouse Wheel movement.

Previous Version you can find here. and also applicable for this (Facebook/Twitter style Scrollbar Using jQuery and CSS).

View Demo

Here am updating the complete JavaScript.

JavaScript

$(document).ready(function(){

    var _offsetY = 0,
    _startY = 0,
    scrollStep = 10,
    isScrollBarClick = false,
    contentDiv,
    scrubber,
    scrollHeight,
    contentHeight,
    scrollFaceHeight,
    initPosition,
    initContentPos,
    moveVal,
    scrubberY = 0;

    element = document.getElementById("updateHolder");
    if (element.addEventListener)
        /** DOMMouseScroll is for mozilla. */
        element.addEventListener('DOMMouseScroll', wheel, false);
    /** IE/Opera. */
    element.onmousewheel = document.onmousewheel = wheel;

	// To resize the height of the scroll scrubber when scroll height increases.
	setScrubberHeight();

	contentDiv = document.getElementById('updateContainer');

	scrubber = $('#updateScollScrubber');

	scrollHeight = $('#updateScollBar').outerHeight();

	contentHeight = $('#updateContent').outerHeight();

	scrollFaceHeight = scrubber.outerHeight();

    initPosition = 0;

	initContentPos = $('#updateHolder').offset().top;

	// Calculate the movement ration with content height and scrollbar height
	moveVal = (contentHeight - scrollHeight)/(scrollHeight - scrollFaceHeight);

	$('#updateHolder').bind('mousewheel', wheel);

	$("#updateScollScrubber").mouseover(function() {
		// Enable Scrollbar only when the content height is greater then the view port area.
		isScrollBarClick = false;
		if(contentHeight > scrollHeight) {
			// Show scrollbar on mouse over
			$(this).animate({opacity: 1});
			scrubber.bind("mousedown", onMouseDown);
		}
	}).mouseout(function() {
	    isScrollBarClick = false;
		if(contentHeight > scrollHeight) {
			// Hide Scrollbar on mouse out.
			$(this).animate({opacity: 0.25});
			$('#updateHolder').unbind("mousemove", onMouseMove);
		    scrubber.unbind("mousedown", onMouseDown);
		}
	});

    $("#updateScollBar").mousedown(function(){
        isScrollBarClick = true;
    }).mouseout(function(){
        isScrollBarClick = false;
    }).mouseup(function(event) {
        if( isScrollBarClick == false )
             return;
        if ((event.pageY - initContentPos) > (scrollHeight - scrubber.outerHeight())) {
            scrubber.css({top: (scrollHeight - scrubber.outerHeight())});
        }else{
            scrubber.css({top: (event.pageY - initContentPos) - 5});
        }
        $('#updateContent').css({top: ((initContentPos - scrubber.offset().top) * moveVal)});
    });

	function onMouseDown(event) {
		$('#updateHolder').bind("mousemove", onMouseMove);
		$('#updateHolder').bind("mouseup", onMouseUp);
		_offsetY = scrubber.offset().top;
		_startY = event.pageY + initContentPos;
		// Disable the text selection inside the update area. Otherwise the text will be selected while dragging on the scrollbar.
		contentDiv.onselectstart = function () { return false; } // ie
		contentDiv.onmousedown = function () { return false; } // mozilla
	}

	function onMouseMove(event) {

        isScrollBarClick = false;
		// Checking the upper and bottom limit of the scroll area
		if((scrubber.offset().top >= initContentPos) && (scrubber.offset().top  (initContentPos + scrollHeight - scrollFaceHeight)) {
				scrubber.css({top: (scrollHeight-scrollFaceHeight-2)});
				$('#updateContent').css({top: (scrollHeight - contentHeight + initPosition)});
			}
			$('#updateHolder').trigger('mouseup');
		}
	}

	function onMouseUp(event) {
		$('#updateHolder').unbind("mousemove", onMouseMove);
		contentDiv.onselectstart = function () { return true; } // ie
		contentDiv.onmousedown = function () { return true; } // mozilla
	}

	function setScrubberHeight() {
		cH = $('#updateContent').outerHeight();
		sH = $('#updateScollBar').outerHeight();
		if(cH > sH) {
			// Set the min height of the scroll scrubber to 20
			if(sH / ( cH / sH ) < 20) { 				$('#updateScollScrubber').css({height: 20 }); 			}else{ 				$('#updateScollScrubber').css({height: sH / ( cH / sH ) }); 			} 		} 	} 	function onMouseWheel(dir) {         scrubberY = scrubber.offset().top + (scrollStep * dir) - initContentPos;         if ((scrubberY) > (scrollHeight - scrubber.outerHeight())) {
            scrubber.css({top: (scrollHeight - scrubber.outerHeight())});
        }else {
            if(scrubberY < 0) scrubberY = 0;
            scrubber.css({top: scrubberY});
        }
        $('#updateContent').css({top: ((initContentPos - scrubber.offset().top) * moveVal)});
	}

	/** This is high-level function.
	 * It must react to delta being more/less than zero.
	 */
	function handle(delta) {
	        if (delta < 0) {
			    onMouseWheel(1);
	        }
	        else {
			    onMouseWheel(-1);
	        }
	}

	/** Event handler for mouse wheel event.
	 */
	function wheel(event){
	        var delta = 0;
	        if (!event) /* For IE. */
	                event = window.event;
	        if (event.wheelDelta) { /* IE/Opera. */
	                delta = event.wheelDelta/120;
	        } else if (event.detail) { /** Mozilla case. */
	                /** In Mozilla, sign of delta is different than in IE.
	                 * Also, delta is multiple of 3.
	                 */
	                delta = -event.detail/3;
	        }
	        /** If delta is nonzero, handle it.
	         * Basically, delta is now positive if wheel was scrolled up,
	         * and negative, if wheel was scrolled down.
	         */
	        if (delta)
	                handle(delta);
	        /** Prevent default actions caused by mouse wheel.
	         * That might be ugly, but we handle scrolls somehow
	         * anyway, so don't bother here..
	         */
	        if (event.preventDefault)
	                event.preventDefault();
	        event.returnValue = false;
	}

});

Simple CSS Selector In JavaScript

Midhun Devasia — Thu, 16 Feb 2012 12:36:14 +0000

Sometime you don’t wish to use JavaScript frameworks on simple web applications, but you hardly need a cross-browser CSS selector. The following snippet help you to retrieve simple ID, CLASS notation and html Tags. This is a very basic version and you can contribute to this.

// IDs and CLASS
$('#my_id, .css_class, .className, #another_id');
// HTML Tags
$('body, h1');

JavaScript


function $(selectors) {
	var result = new Array();
	if(!document.getElementsByTagName) return result;
	// Removing unwanted spaces
	selectors = selectors.replace(/\s*([^\w])\s*/g,"$1");
	// Extracting the selectors from the param
	selectors = selectors.split(",");
	// Store all dom elements
	var elements = document.getElementsByTagName('*');
	// Parse the selectors list
	for(var i = 0; (selector = selectors[i]) != null ; i++) {
		// If ID
		if(selector.indexOf("#") == 0) {
			selector = selector.split("#");
			result[result.length] = document.getElementById(selector[1]);
		}
		// If CLASS
		else if(selector.indexOf(".") == 0) {
			selector = selector.split(".");
			// If the browser support HTML 5
			if(document.getElementsByClassName) {
				result[result.length] = document.getElementsByClassName(selector[1]);
			}
			// for browsers such as IE
			else {
				var hasClassName = new RegExp("(?:^|\\s)" + selector[1] + "(?:$|\\s)");
				var element;
				// Parse all DOM elements
				for(var j = 0; (element = elements[j]) != null; j++ ) {
					if(element.className && element.className.match(hasClassName)) {
						result[result.length] = element;	

					}
				}
			}
		}
		// If tag
		else {
			result[result.length] = document.getElementsByTagName(selector);
		}
	}
	return result;
}

CSS @font-face: Embedding Stylish Fonts in Websites

Midhun Devasia — Mon, 04 Jul 2011 20:01:27 +0000

This is not new method from CSS3, it was there before. The @font-face allows you to add your own fonts to styles. @font-face is a quite easy to implement, only two params are important. ie Name of the font-family, and font path or embed code. It will work on all major browsers(including all version of IE). You can be able to add any kind of font types in @font-face, such as .eot, .ttf, .otf.

Syntax

@font-face {
  font-family: ;
  src:  [,]*;
  [font-weight: ];
  [font-style:

HTML

The Menu holder contains all the menu items. We set the holder height as a fixed(but you can change) , from my example I set it as 108px so I can accommodate 4 menus in the menu holder. Each menu having 27px height and total 27×5 = 108. If you wanna include more menus inside the holder just calculate the height with your li’s height. Set the menu holder div’s overflow property as hidden, so that if the menu height increases then the rest of the entries will not shown, that is the logic behind. By moving mouse over to the menu holder the slider div’s top value will increase and decrease by the up/down mouse movement. The menu holder will act as a mask layer over the UL LI. So it smoothly slide inside the menu_holder div


    
        
            Menu Content 1
            Menu Content 2
            Menu Content 3
            Menu Content 4
            Menu Content 5
            Menu Content 6
            Menu Content 7
            Menu Content 8
            Menu Content 9
            Menu Content 10
            Menu Content 11

Then you need jQuery lib file and jQuery easing plugin file. Download the easing plugin from here. The easing plug-in is optional, if you don’t want to use the easing effect try the commented code inside the script section.

JavaScript Files

jQuery

Here is the complete script for the slider function. We trigger the mouse event for the menu holder div, and calculate the offset Y of the menu holder from the current mouse Y. And finally apply the values into the equation.

$(document).ready(function() {
	// hover color change effect
	$("#slider li").hover(function() {
		$(this).animate({opacity: 0.90}, 100, function(){
			$(this).animate({opacity: 1}, 0);
		} );
	});
	// Trigger mouse move event over the 'menu_holder'.
	$("#menu_holder").mousemove(function(e) {
		// Enable scroll function only when the height of the 'slider' or menu is greater than the 'menu_holder'.
		if($(this).height() < $("#slider").height()) {
			// Calculate the distance value from the 'menu_holder' y pos and page Y pos.
			var distance = e.pageY - $(this).offset().top;
			// Get the percentage value with respect to the Mouse Y on the 'menu_holder'.
			var percentage = distance / $(this).height();
			// Calculate the new Y position of the 'slider'.
			var targetY = -Math.round(($("#slider").height() - $(this).height()) * percentage);
			// With jQuery easing funtion from easing plugin.
			$('#slider').animate({top: [targetY+"px", "easeOutCirc"]}, { queue:false, duration:200 });
			// Without easeing function. by default jQuery have 'swing'.
			//$('#slider').animate({top: [targetY+"px", "easeOutCirc"]}, { queue:false, duration:200 });
		}
	});
});

Resize Images In Same Quality Using CSS Properties

Midhun Devasia — Mon, 13 Sep 2010 07:54:13 +0000

We will lose the image quality while re-sizing it from the original size to up-scaled or down-scaled. The browsers default quality is OK, but still we can improve by using CSS properties like image-rendering, -ms-interpolation-mode. The above properties provide a hint to the user agent about how to handle the image rendering, then the image will be up-scaled (or down-scaled) to the new dimensions using the specified algorithm. The two algorithms are bilinear(High Quality) re-sampling and nearest neighbor re-sampling(Low Quality). -ms-interpolation-mode is used by Internet Explorer and for Firefox (Gecko) image-rendering.

View Demo

You can use the CSS Properties as shown below.

CSS

#lowQualityImg { 
 image-rendering: -moz-crisp-edges;   /* Firefox */
 -ms-interpolation-mode: nearest-neighbor;   /* IE */
 }
 #heighQualityImg{
 image-rendering: optimizeQuality;  /* Firefox 3.6+; default behavior is identical, no need to specify */
 -ms-interpolation-mode: bicubic;   /* Internet Explorer 7.0; default in IE8+ */
 }

Currently auto and optimizeQuality are equal by default, both result in bilinear resampling.
Currently optimizeSpeed and -moz-crisp-edges are equal, both result in nearest neighbor resampling.

Browser compatibility

Browser	Lowest version	Support of
Internet Explorer	7.0	`-ms-interpolation-mode: bicubic \| nearest-neighbor` applies only to images (JPG, GIF, PNG, …) in IE7 only for images without transparency does not inherit default value IE7: `nearest-neighbor` (low quality) default value IE8+: `bicubic` (high quality)
Firefox (Gecko)	3.6 (1.9.2)	`image-rendering: auto \| inherit \| optimizeSpeed \| optimizeQuality \| -moz-crisp-edges`
Opera	—	—
Safari (WebKit)	—	—

jQuery Notification Message like StackOverflow

Midhun Devasia — Fri, 10 Sep 2010 10:47:28 +0000

Here is the source code of the notification message like in stackoverflow. Make it easy with jQuery and CSS. Place all your notification messages inside a div and apply CSS properties position:fixed;top:0px;left:0px; And place the close button with the span and a elements. x. Hide the div element display: none;. and use jQuery to apply fadeIn and fadeOut.

View Demo

HTML


 Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.
 x

CSS

#notification {
    font-family:Arial,Helvetica,sans-serif;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    z-index:105;
    text-align:left;
    font-weight:normal;
    font-size:100%;
    color:white;
    background-color:#000;
    padding:5px;
}
#notification span.dismiss {
    border:2px solid #FFF;
    padding:0 5px;
    cursor:pointer;
    float:right;
    margin-right:10px;
}
#notification a {
    color:white;
    text-decoration:none;
    font-weight:bold
}

jQuery


$(document).ready(function() {
    $("#notification").fadeIn("slow");
    $(".dismiss").click(function(){
	$("#notification").fadeOut("slow");
    });
});