Today I would like to share you a simple image lightbox jQuery plugin which inspired from Medium website. The plugin will create a zoom-like animation lightbox effect on any images attached with it using CSS3 transition property.

How it works

A clone of original image will be created at the bottom of body tag. At first, the clone will position itself to match the original image, and then move to the center of user screen with default sizes while loading the larger version of the original image. Once the image loaded, it will adjust the position again to fit that image.

Don’t worry, the clone will be removed once the lightbox has closed.

How to use

Include the required library and plugin dependency then use jQuery to find the desired lightbox elements on which to call the simplezoom plugin.

$('.lightbox').simplezoom();

CSS requirement

The elements created by plugin itself is naked, mean no styling at all, so that it’s easier for personalize customization. If you want a quick fix for that, simply include the simplezoom.css stylesheet or copy it to your own stylesheet.

Documentation

Code Examples

Example of passing settings to plugin.

$('.lightbox').simplezoom({
	offset		: 25,
	scrollclose	: true
});

Example of invoke own function to plugin onImageError event.

$('.lightbox').simplezoom({

	/**
	 * @image		: default image link element
	 * @lightbox	: lightbox element
 	 */
	onImageError: function(image, lightbox) {
		console.error( 'Oops! Image not found.' );
	}

});

Change Log

Question?

Something’s not working? Or any other questions regarding this plugin do let me know using comments form below. Cheer!

The post simplezoom – Responsive Image Lightbox jQuery Plugin appeared first on inwebson.

Well, today I want to share you a simple Math puzzle game called Car Across the Desert. The original version of this Math puzzle was just a bunch of text, I have converted it into game-base format with animation and nice graphics. Hope you guys enjoy it!

Play Game

Concept

Anyhow, you might skip this section to game objective below if you have not interesting in how I’m creating the game. This game was created using jQuery library, with help of underscore.js library for object template binding, and some Object-oriented programming (OOP) concept in creating those cars in the game.

This game use parallax backgrounds effects, multiple backgrounds are moving in different speeds. Also, the cars animation was created using image sprites with slightly different in FPS, the rest part was just events handler for actions. Of course, you might go through the JavaScript files if you find it interesting!

Game Objective

There have 4 persons wanted to across the desert, and the only way to across the desert is by using car. Well, they manage to find a car rental in town, however each car can only has space enough for petrol to get it half way across the desert, moreover there have no petrol station in the desert. If the car is out of petrol, this car can’t drive any more.

Luckily for them, each car can transfer their petrol into one another. Your objective is:

[alert class=”btn-ghost btn-main btn-lg”]

Objective

Help them to figure out how many cars they need at least and how they can reach the their destination.
[/alert]

[alert]

Game Controls

• Click the distance buttons on top of game screen to select how far they want to drive.
• Mouse over the cars to enable petrol transfer options, and select the your option.

[/alert]

Play Game

The post Cars Across the Desert Math Puzzle Game appeared first on inwebson.

View Demo Download Files

The reason I wrote this plugin is because I had faced some difficulty in centering my images during my work due to non-standard sizes of images provided by clients. Perhaps you had faced this before. So I decided to convert my script to a simple jQuery plugin and hope it could save your day!

By the way, it is not advised to stretch your images like this. If possible you should resize and crop them using back-end method or manually, unless in some special cases like what I faced. =)
 

How It Works

imgCentering.js will NOT crop your images, but it will centering them inside a fix dimension container while hide those oversize part of images using CSS overflow properties. Also, it manages to resize your images according to its container while maintain its original ratio.
 

Support

[browser]This jQuery plugin works well in all browsers.[/browser]

imgCentering.js should works well with jQuery 1.7.1 and above (haven’t tested for lower version).

How to Use

1. First, include imgCentering.js script files after jQuery library file  inside <head> tag.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/imgcentering.js"></script>

2. Next, wrap each image inside a container (div, a, or etc) and set a WIDTH and HEIGHT on it using CSS if haven’t yet! For instance:

<a href="#" class="container">
	<img src="sample1.jpg" alt="" />
</a>

The script won’t works well if the images are not wrapping inside a fix width and height container.

3. Last, call .imgCentering() function on your images object in any place of your HTML!

$(document).ready( function() {
	$(".container img").imgCentering();
});

Refer to configuration section for all available options.

Configuration:

Options

There are few options available in imgCentering.js.

License

imgCentering.js is licensed under the GNU General Public License version 2 or later. In other words, you can do whatever you like to the source code. =)

Change Log

Question?

Something’s not working? Or any other questions regarding this plugin please let me know using comments form below. Thanks!!!

The post imgCentering.js – Centering Images with jQuery appeared first on inwebson.

Response JS

Response JS is a lightweight jQuery plugin for responsive layout with mobile-first approach. Also, it enables us to dynamically swap code blocks based on breakpoints and serve images progressively via HTML5 data- attributes.

Source

jQuery Responsive Web

This is a simple jQuery plugin that will automatically add dynamic classes to the body tag based on user’s operating system, browser and window size. With these CSS classes, you could create specific and optimized design for targeted devices.

Source

Breakpoints.js

You could use Breakpoints.js to define different breakpoints for your responsive layout. When browser enters and/or exits the breakpoint, it will fire custom events so that you can apply some changed to the web elements.

Source

Heads-Up Grid

Heads-Up Grid is a responsive grid layout for website development. You can define different grid options like padding, columns, margins, etc and these options can be changed based on different window size.

Source

Automatic Image Montage jQuery Plugin

This jQuery plugin have the abilities to arrange your images in a montage without any white space. You could set it either for a liquid container or a fixed size container (including fullscreen).

Source

jQuery Masonry

jQuery Masonry is a responsive and dynamic grid layout plugin by jQuery. It will arranges your web elements vertically and positioning them in the next open spot in the grid.

Source

Isotope

Isotope is another responsive and dynamic grid layout with the abilities of filtering and sorting as well as enhancement on animation.

Source

Responsive Web Design Frameworks

There are plenty of frameworks that can be used to build a responsive layout, but here I have listed 2 famous and easy-to-use responsive web design frameworks. Even though these frameworks are NOT built in jQuery but they provide you a startup and fundamental of making a responsive layout.

Bootstrap

Bootstrap from Twitter is a HTML, CSS, and JavaScript framework that provides you series of user interface components and interactions while work in responsively.

Source

Skeleton

Skeleton is a small collection of CSS files that can help you making responsive web design.

Source

Test Your Responsive Layout

Last but not least, you need a tool to test your responsive layout right? In following I have listed 2 of my favorite online responsive layout testing tools. Hope you will love them too!

Screenfly

Screenfly by QuirkTools, allows you to test any website at a multitude of common screen resolutions, including desktop monitors, tablets, and smaller mobile devices.

Responsive.is

Responsive.is is another online responsive layout testing tools. Simply type in your URL and it will resizes your page between a range of different preset devices.

The post 7 Responsive Layout Design Helpers by jQuery Plugins appeared first on inwebson.

Supersized! jQuery Plugin

Supersized is a jQuery plugin which is quite famous in creating a fullscreen background slideshow. Now it’s already come to version 3.2 with ton of new features inside.

Demo Download

Vegas Background jQuery Plugin

Vegas Background is a jQuery plugin to add beautiful fullscreen backgrounds or even create amazing slideshows to your webpages. This plugin will automatic applies a cool texture to make the background image looks like ‘background’.

Demo & Download

bgStretcher jQuery Plugin

bgStretcher allows you to add background image to webpage and proportionally resize it to fill entire window browser. Also you may create a background slideshow with it.

Demo Download

jQuery tubular

Tubular is an amazing jQuery plugin that lets you set a YouTube video as your webpage background. Simply pass in the YouTube video ID and tubular will do the rest for you.

Demo & Download

Backstretch jQuery Plugin

Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized background image to your webpages. It will stretch the image to fit the browser window size.

Demo & Download

jQuery.videoBG Plugin

This jQuery plugin enables you to easily add an HTML5 video as a background to webpage or any div. It also provides fallback as an image if user’s browser doesn’t support the HTML5 video tag.

Demo Download

MaxImage 2.0 Plugin

MaxImage 2.0 is a fullscreen background slideshow jQuery plugin that allows you to use jQuery Cycle plugin and supports almost all of jQuery Cycle’s functions, transitions, etc.

Demo Download

Smooth Fullscreen Background Slideshow jQuery Plugin

What cool in this plugin is it will wait for images to actually loaded before displaying it as background to make it look smoother. You might add a grid texture if you like!

Demo Download

Fullscreen Background jQuery Plugin

This background plugin works well in IE7 and higher, Firefox, Opera, Safari and Chrome. Also, it is easy to integrate and everyone can do it!

Demo Download

jQuery Easy Background Resize

As stated in name, this jQuery plugin is very simply and easy to use. If you don’t want any extra features in background, then this plugin will suits your need.

Demo & Download

Full Size Background Image jQuery Plugin: Redux

A light weight jQuery plugin for background auto resized with proper aspect ratio.

Demo Download

Nice jQuery Full Background Image Slider

This is not a jQuery plugin but just a simple jQuery tutorial for fullscreen background slideshow. If you’re interest to have your own jQuery background plugin, this will be your fundamental.

Demo Download

The post 12 Fullscreen Background jQuery Plugins appeared first on inwebson.

The Idea

The idea was to create two different kinds of animations for both hover over and over out with just CSS3. The over out animation shouldn’t be the reverse version of animation for hover over.

[browser type=”cfs-x”]This working demo only works in browsers that support the respective CSS properties.[/browser]

The HTML Markup

Please note that the entire markup shown here was simplified version of demo, but you will see the complete markup in source files, of course.

Our HTML markup contains two elements, one for hovered object and other as its child element. I will name them as ‘object‘ and ‘child‘.

<div class="object">
	<span class="child">Some Text</span>
</div>

The CSS

Also, please note that in following CSS code I will ignore all the browser vendor prefixes, but in the real environment you should include them as well.

First let’s style our object and child. I change the shape of object to circle using CSS3 border-radius properties and apply some gradient effect on it through inset box-shadow properties.

.object
{
	color: #003E49;
	background-color: #87e0fd;
	border: 3px solid rgba(255,255,255,0.5);
	border-radius: 100px;
	box-shadow:7px 8px 16px white inset, -3px -8px 44px #9b7400 inset;
}	
.child
{
	display: block;
	font-weight: bold;
	text-transform: uppercase;
	font-family: Impact, Charcoal, sans-serif;
	text-shadow: 0 1px 2px #CCF7FF;
}

CSS3 Animations

Next, apply hover over animation on object when hovered using :hover pseudo-class. For hover out animation, we can apply on the class itself (no pseudo-class).

.object
{
	transform-origin:50% 10%;
	animation-name: hoverover;
	animation-duration: 0.3s;
	animation-timing-function: ease-in-out;
}	
.object:hover
{
	animation-name: hoverout;
	animation-duration: 0.4s;
}

There is no need to define all animations properties again for :hover pseudo-class since it will inherit from parent, unless we want the value to be different from parent.

Same goes to child when object hovered.

.object .child
{
	animation-name: movedown;
	animation-duration: 0.3s;
	transform: translateY(0);
}
.object:hover .child
{
	animation-name: moveup;
	animation-duration: 0.4s;
	transform: translateY(-20px);
}

Remember to include final value in :hover class if the value of final animation differ from initial value.

After that, simply define your keyframes for these animations.

/* object animation (hover over) */
@keyframes hoverover
{
	0% { transform: scale(1); border-width:3px;}
	50% { transform: scale(1.1); border-width:4;}
	75% { transform: scale(0.95); border-width:2px;}
	100% { transform: scale(1); border-width:3px;}
}
/* object animation (hover out) */
@keyframes hoverout 
{
	0% { transform: scale(1); border-width:3px;}
	30% { transform: scale(0.93); border-width:2px;}
	50% { transform: scale(0.93); border-width:2px;}
	80% { transform: scale(1); border-width:3px;}
	100% { transform: scale(1);border-width:3px; }
}
/* child animation (hover over) */
@keyframes moveup
{
	0% { transform: translateY(0px); }
	100% { transform: translateY(-20px); }
}
/* child animation (hover out) */
@keyframes movedown
{
	0% { transform: translateY(-20px); }
	70% { transform: translateY(5px); }
	100% { transform: translateY(0px); }
}

That’s all for Nifty Hover Effect with CSS3 Animations tutorial.Thanks for reading =)

You might interest in my other CSS3 animations tutorials as well:

• Fancy Hover Effects with CSS3 Transitions
• Fancy Image Gallery with CSS3 Transitions
• CSS3 3D Transforms Animation – Cube Rotation Effect
• CSS3 Background Animations for Stary Night

View Demo Download Source

The post Nifty Hover Effects with CSS3 Animations appeared first on inwebson.

Howdy, all! Today I would like to share with you a brand new jQuery plugin, called jPreLoader. jPreLoader can create a preloading screen for your website before all your images (including the images in CSS) are fully loaded. It will come in handy when you wish to preload all the images on your page before exposed to user. It’s useful for those games websites.

Well, you can also create a Splash Screen during preloading process to introduce your products, or describe about your page, or show the instructions of gameplay as well as put an advertisement during the waiting time of your user.

[browser]jPreLoader works well with jQuery 1.7.1 (others haven’t tested yet) and compatible with IE7 and above, Chrome, Firefox and Safari.[/browser]

This idea is inspired by Gaya’s cool “QueryLoader2” plugin which able to preload your website in style.

The beautiful images used in demo is from Mike Shaw, a Cheshire UK based photographer.

Features:

• Full page Loading Screen.
• Progress bar with progress percentage.
• Display custom Splash Screen during loading process.
• Preload all images in <img> tag as well as in Stylesheet.
• Using CSS to customize.
• Debug mode to check for broken images.

How to use:

1. Include the jPreLoader script and css inside the <head> tag.

<script type="text/javascript" src="js/jpreloader.js"></script>

#Tips: Be sure to have jQuery script included first.

2. Call the jPreLoader function at the bottom (right before </body>) of your page.

<script type="text/javascript">
	$(document).ready(function() {
		$('body').jpreLoader();
	});
</script>

3. Do any jPreLoader configuration/options to suit your needs (refer to Configuration section below). (Optional)

4. Customize the jPreLoader look using CSS if you like. (Optional)

5. That’s it! You’re DONE!

Configuration:

OPTIONS

CALLBACK

You can use callback function once all the loading are completed.

To create Splash Screen, you need to put your Splash Screen code inside your page. After that point the splashID property to your code using id or class attribute (prefer using id). If you wish to have some animation for your Splash Screen, use splashFunction properties to pass your function to jPreLoader (requires basic jQuery knowledge). Anyway, do refer to source files for more details and how it works.

License:

jPreLoader is licensed under the GNU General Public License version 2 or later. That means you do whatever you like to the source code.

Change Log

Archive:

Conclusion:

jPreLoader was born during the time I created my latest IQ Game – Cross the Bridge. When I try to search on Google, there are actually not much jQuery plugins available in Internet which able to create a Loading Screen for preloading all the images in your website. Most of them are simply show an animated loading gif during the preloading process. So I decided to create this plugin which is able to do the things mentioned above with nice progress bar and progress percentage. Hope it can help you as well.

If you find a bug or having problem in using jPreLoader, do not hesitate to contact me. I am very much like to hear about the issue. Please feel free to use the COMMENTS FROM below as well.

The post jPreLoader | A Preloading Screen to Preload Images appeared first on inwebson.

The main techniques involved in this CSS3 progress bars tutorial are CSS3 background gradient effects combined with CSS3 animation property, that’s all! No images are needed. Check the browsers compatible picture below for best results.

[browser type=”cfs-x”]This working demo only works in browsers that support the respective CSS3 properties.[/browser]

The HTML Markup

The basic HTML markup for each progress bar is pretty simple. A

container with a class of bar as progress container and a child element as current progress area.

<div class="bar">
	<span></span>
</div>

To create extra effects on progress bar, I have added different CSS classes on each progress bar, for instance, gradient class will create gradient effect and stripe class will generate stripe pattern on progress bar.

In following tutorial I will talk about the CSS properties of these classes.

 

The Base CSS

It’s hard for me to explain all the classes used in demo page one by one right here. So I decide to discuss some of them only since most of them are pretty straight forward or similar. Of course you can still find them all inside source files.

Well, let’s keep going with the base CSS. It will contains 2 parts, a container with bar class and its child element, .

.bar {
	margin: 5px 0 3px;
	border: 6px solid #333;
	background: #333;
	overflow: hidden;
	
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	box-shadow: 1px 1px 1px #777;
	-moz-box-shadow: 1px 1px 1px #777;
	-webkit-box-shadow: 1px 1px 1px #777;
}
.bar > span {
	display: block;
	height: 20px;
	width: 20%;
	
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

Some of these properties like width and height can be adjusted to suit your layout.

 

Gradient Effect

I use CSS3 box-shadow property to create the gradient effect for progress bar rather than using CSS3 gradient background. I preserve gradient background for other styling as it can do MORE than just a gradient effect.

.gradient > span {
	box-shadow:
		0 5px 5px rgba(255,255,255,0.6) inset, 
		0 -5px 7px rgba(0, 0, 0, 0.4) inset;
	-moz-box-shadow:
		0 5px 5px rgba(255,255,255,0.6) inset, 
		0 -5px 7px rgba(0, 0, 0, 0.4) inset;
	-webkit-box-shadow:
		0 5px 5px rgba(255,255,255,0.6) inset, 
		0 -5px 7px rgba(0, 0, 0, 0.4) inset;
	filter: progid:DXImageTransform.Microsoft.gradient( 
		startColorstr='#33ffffff', 
		endColorstr='#33000000',
		GradientType=0 );
}

Since IE8 and below doesn’t support complicated CSS3 gradient background, thus I apply filter property on this class as well as a fallback. At least our progress bar won’t be displaced as plain color in IE.  =)

 

Gloss Effect

Gloss effect can be generated by using CSS background gradient property as below. This will create a semitransparency gloss effect on top of progress bar, which mean it can integrate into any color of progress bar.

.gloss > span {
	background-image: -moz-linear-gradient(top, 
		rgba(255,255,255,0.2) 0%, 
		rgba(255,255,255,0.1) 45%, 
		rgba(0,0,0,0.2) 55%, 
		rgba(0,0,0,0.1) 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, 
		color-stop(0%,rgba(255,255,255,0.2)), 
		color-stop(45%,rgba(255,255,255,0.1)), 
		color-stop(55%,rgba(0,0,0,0.2)), 
		color-stop(100%,rgba(0,0,0,0.1)));
	background-image: -webkit-linear-gradient(top, 
		rgba(255,255,255,0.5) 0%, 
		rgba(255,255,255,0.1) 45%, 
		rgba(0,0,0,0.2) 55%, 
		rgba(0,0,0,0.1) 100%);
	background-image: -o-linear-gradient(top, 
		rgba(255,255,255,0.2) 0%, 
		rgba(255,255,255,0.1) 45%, 
		rgba(0,0,0,0.2) 55%, 
		rgba(0,0,0,0.1) 100%);
	background-image: -ms-linear-gradient(top, 
		rgba(255,255,255,0.2) 0%, 
		rgba(255,255,255,0.1) 45%, 
		rgba(0,0,0,0.2) 55%, 
		rgba(0,0,0,0.1) 100%);
	background-image: linear-gradient(to bottom, 
		rgba(255,255,255,0.2) 0%, 
		rgba(255,255,255,0.1) 45%, 
		rgba(0,0,0,0.2) 55%, 
		rgba(0,0,0,0.1) 100%);
}

 

Stripe Effect

Same goes to stripe effect. We can generate stripe pattern through CSS3 gradient background property, and same as gloss effect, I will create a partial transparency stripe pattern so that it can apply to any color of progress bar.

.stripe > span {
	background-size: 30px 30px;
	
	background-image: -moz-linear-gradient(-45deg, 
		rgba(255,255,255,0.15) 0%, 
		rgba(255,255,255,0.15) 25%, 
		rgba(255,255,255,0) 25%, 
		rgba(255,255,255,0) 50%, 
		rgba(255,255,255,0.15) 50%, 
		rgba(255,255,255,0.15) 75%, 
		rgba(255,255,255,0) 75%, 
		rgba(255,255,255,0) 100%);
	background-image: -webkit-gradient(linear, left top, right bottom, 
		color-stop(0%,rgba(255,255,255,0.2)), 
		color-stop(25%,rgba(255,255,255,0.2)), 
		color-stop(25%,rgba(255,255,255,0)), 
		color-stop(50%,rgba(255,255,255,0)), 
		color-stop(50%,rgba(255,255,255,0.2)), 
		color-stop(75%,rgba(255,255,255,0.2)),
		color-stop(75%,rgba(255,255,255,0)),
		color-stop(100%,rgba(255,255,255,0)));
	background-image: -webkit-linear-gradient(-45deg, 
		rgba(255,255,255,0.3) 0%,
		rgba(255,255,255,0.3) 25%,
		rgba(255,255,255,0) 25%,
		rgba(255,255,255,0) 50%,
		rgba(255,255,255,0.3) 50%,
		rgba(255,255,255,0.3) 75%,
		rgba(255,255,255,0) 75%,
		rgba(255,255,255,0) 100%);
	background-image: -o-linear-gradient(-45deg, 
		rgba(255,255,255,0.15) 0%,
		rgba(255,255,255,0.15) 25%,
		rgba(255,255,255,0) 25%,
		rgba(255,255,255,0) 50%,
		rgba(255,255,255,0.15) 50%,
		rgba(255,255,255,0.15) 75%,
		rgba(255,255,255,0) 75%,
		rgba(255,255,255,0) 100%);
	background-image: -ms-linear-gradient(-45deg, 
		rgba(255,255,255,0.15) 0%,
		rgba(255,255,255,0.15) 25%,
		rgba(255,255,255,0) 25%,
		rgba(255,255,255,0) 50%,
		rgba(255,255,255,0.15) 50%,
		rgba(255,255,255,0.15) 75%,
		rgba(255,255,255,0) 75%,
		rgba(255,255,255,0) 100%);
	background-image: linear-gradient(135deg, 
		rgba(255,255,255,0.15) 0%,
		rgba(255,255,255,0.15) 25%,
		rgba(255,255,255,0) 25%,
		rgba(255,255,255,0) 50%,
		rgba(255,255,255,0.15) 50%,
		rgba(255,255,255,0.15) 75%,
		rgba(255,255,255,0) 75%,
		rgba(255,255,255,0) 100%);
}

Not only these, we can generate even more effect through gradient background as you can see in demo page.

 

Animation

It is easy to have an animated progress bar with help from CSS3 animation property. Change the values of animation and keyframes as you like and attach the animate class to any <span> to make the progress bar animated.

.animate {
	animation: progress 2s linear infinite;
	-moz-animation: progress 2s linear infinite;
	-webkit-animation: progress 2s linear infinite;
	-ms-animation: progress 2s linear infinite;
	-o-animation: progress 2s linear infinite;
}

@-webkit-keyframes progress {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -60px -60px;
  }
}
@-moz-keyframes progress {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -60px -60px;
  }
}
@-ms-keyframes progress {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -60px -60px;
  }
}
@-o-keyframes progress {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -60px -60px;
  }
}
@keyframes progress {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -60px -60px;
  }
}

View Demo Download Sources

The post New Pure CSS3 Progress Bars appeared first on inwebson.

]]> https://www.inwebson.com/css3/new-pure-css3-progress-bars/feed/ 4 https://www.inwebson.com/jquery/jquery-1-8-beta-the-way-of-use-it/ https://www.inwebson.com/jquery/jquery-1-8-beta-the-way-of-use-it/#respond Tue, 03 Jul 2012 06:13:40 +0000 http://www.inwebson.com/?p=1527 After a long month of coding and debugging, finally I have completed all the projects on hand. And it’s time […]

The post jQuery 1.8 BETA – The Way of Use It appeared first on inwebson.

]]>

After a long month of coding and debugging, finally I have completed all the projects on hand. And it’s time for me to share something again. =)

Well, just noticed that jQuery 1.8 Beta has been released last week. You can grab the code from jQuery CDN: http://code.jquery.com/jquery-1.8b1.js

I believe most of you should already have gone through the new features of jQuery 1.8 Beta 1, if you haven’t yet, check the announcement here. 

In the following post I have briefly show the way of use and code these new features of jQuery 1.8. Hope you will find it useful.

 

Custom jQuery

As of jQuery 1.8, you can create custom version of jQuery with excluding one or more modules that you do not need, for instance, AJAX module, CSS module, effects module, dimension module and offset module can be excluded from jQuery library.

In order to have custom builds jQuery, follow this documentation.

 

CSS Vendor Prefixes

Having nightmare to include all vendor prefixed CSS properties into stylesheet or JavaScript? With jQuery 1.8, you could save your time from this. Simply pass the non-prefixed property and jQuery will generate the vendor prefix that is appropriate for the user browser. It can be as simple as this:

$('.box').css({	
	'transition': 'all 1s',
	'box-shadow': '1px 1px 3px #ccc',
	'border-radius': '5px',
	'box-sizing': 'border-box'
});

That’s all! These will automatically add -webkit- prefixes in webkit browsers as well as -moz- in Firefox.

 

New $.parseHTML() Method

This new method allows us to parse strings as HTML. It will be used to replace $() method in the way to parse HTML into a DOM fragment for better XSS protection.

I suppose the way of using it will be like this:

var html1 = $("<p>This is paragraph.</p>");
var html2 = $.parseHTML("<p>This is paragraph.</p>");

$('.box').append(html1);	//output: <p>This is paragraph.</p>
$('.box').append(html2);	//output: <p>This is paragraph.</p>

var html1 = $("<img src='z.jpg' />");
var html2 = $.parseHTML("<img src='z.jpg' />");

$('.box').append(html1);	//output: <img src='z.jpg' />
$('.box').append(html2);	//output: <img src='z.jpg' />

var html1 = $(".object");
var html2 = $.parseHTML(".object");

$('.box').append(html1);	//output: (The object HTML)
$('.box').append(html2);	//output: .object

 

New $.Animation Function

jQuery 1.8 uses a new core for creating an animation object – $.Animation( element, props, opts). It provides support for older browsers without built-in animations and fixes many bugs from previous versions.

However, at the moment there is only preliminary documentation for this. As for me I’m not clear in how to use it yet. Perhaps if you know the way please shares with us.

 

And Much More….

There are much more changes in jQuery 1.8 such as deprecation of APIs and features that are inefficient, ineffective and inadvisable. Of course, to know more about it you could simply read the official blog post.

The post jQuery 1.8 BETA – The Way of Use It appeared first on inwebson.

]]> https://www.inwebson.com/jquery/jquery-1-8-beta-the-way-of-use-it/feed/ 0 https://www.inwebson.com/css3/pure-css-slideshow-effect-for-presentation/ https://www.inwebson.com/css3/pure-css-slideshow-effect-for-presentation/#comments Wed, 30 May 2012 17:24:11 +0000 http://www.inwebson.com/?p=1486 Having problem of creating presentation slideshow in web page? In this tutorial we’ll show you how to create a web […]

The post Pure CSS Slideshow Effect for Presentation appeared first on inwebson.

]]>

Having problem of creating presentation slideshow in web page? In this tutorial we’ll show you how to create a web presentation CSS slideshow effect, with the combination of CSS3 Transitions and CSS :checked pseudo-class with sibling selector (~).

[browser type=”cf-ox”]This working demo only works in browsers that support the respective CSS properties.[/browser]

 

The Idea

The main idea is to create a web presentation CSS slideshow effect like in Microsoft PowerPoint but using HTML and CSS only.

 

The HTML Markup

The markup will consist of several slides and radio buttons, each radio button will be attached to a slide. The purpose of using radio button is to get the selected slide when attached radio button is checked. Hence, we can simply use <label> tag with for attribute inside presentation slides to make the radio button checked when clicked.

<div id="slideshow">
	<!-- radio button for each slide -->
	<input id="s1-chk" class="s1-chk main-chk s-input" name="slide" type="radio" checked />
	<input id="s2-chk" class="s2-chk main-chk s-input" name="slide" type="radio" />
	<input id="s3-chk" class="s3-chk main-chk s-input" name="slide" type="radio" />
	<input id="s2-sub1-chk" class="s2-chk sub1-chk s-input" name="slide" type="radio" />
	<!----------------------------------->
	<!-- You can add more radio button -->
	<!----------------------------------->	

	<!-- A slideshow canvas -->	
	<div id="slidecanvas">
		<!-- Slide 1 -->
		<section id="s1" class="slide-holder">
			<div class="main-slide slide">
				<!-- Slide content goes here -->
				<label for="s2-chk">Go to slide 2</label>
			</div>
		</section>
		<!-- Slide 2 with sub-slide -->
		<section id="s2" class="slide-holder">
			<div class="main-slide slide">
				<!-- Slide content goes here -->
				<label for="s2-sub1-chk">Go to sub-slide</label>
				<label for="s3-chk">Go to slide 3</label>
			</div>
			<div class="sub-slide slide">
				<!-- Slide content goes here -->
			</div>
		</section>
		<!------------------------------------------->
		<!-- You can have more presentation slides -->
		<!------------------------------------------->
	</div>	
</div>

There can be any number of presentation slides. Just to make sure that each slide have attached with a radio button.

 

The CSS

Note that we will exclude all vendor styles. Yet you can find them in the source files.

The #slidecanvas will hold all the presentation slides and where the animation takes place. Depending on how many main slides we have, set its width accordingly so that the slideshow able to present in full screen view.

#slidecanvas 
{
	position: absolute;
	top: 0;
	left: 0;
	width: 400%;
	height: 100%;
	
	transition: all 2s cubic-bezier(0.785, 0.135, 0.150, 0.860);
	-moz-transition: all 2s cubic-bezier(0.785, 0.135, 0.150, 0.860);
	-webkit-transition: all 2s cubic-bezier(0.785, 0.135, 0.150, 0.860);
	-ms-transition: all 2s cubic-bezier(0.785, 0.135, 0.150, 0.860);
	-o-transition: all 2s cubic-bezier(0.785, 0.135, 0.150, 0.860);
}

The .slide-holder class will be used to segment out the main slides into different columns. Since we have four main slides in demo, set the width to 25% (100 / 4).

.slide-holder 
{
	position: relative;
	float: left;
	width: 25%;
	height: 100%;
}

Also, we will style each slide using .slide class. In order to make the slide align in vertical center, we will use CSS calc function to calculate and set the height of slides according to user browser resolution.

.slide 
{
	position: relative;
	background: url(slidebg.png) 0 0 repeat #fafafa;
	margin: 80px 120px;
	padding: 25px 50px;
	height: 600px;  /* fallback */
	height: -moz-calc(100% - 160px);
	height: -webkit-calc(100% - 160px);
	height: calc(100% - 160px);
	min-height: 600px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

Now let’s animate the slideshow using radio button :checked pseudo-class with sibling selector. When selected radio button is checked, the #slidecanvas will move to the point we specified and at the same time create a slideshow effect.

input.s1-chk:checked ~ #slidecanvas
{
	left: 0;
}
input.s2-chk:checked ~ #slidecanvas
{
	left: -100%;
}
input.s3-chk:checked ~ #slidecanvas
{
	left: -200%;
}
input.main-chk:checked ~ #slidecanvas
{
	top: 0;
}
input.sub1-chk:checked ~ #slidecanvas
{
	top: -100%;
}

Last simply hide the radio buttons using CSS visibility properties since we want the presentation slideshow have its own flow.

.s-input
{
	position: relative;
	visibility: hidden;
}

That’s it! You can freely to style the content inside presentation slide just like normal using CSS. Hope you enjoyed this pure CSS Slideshow tutorial and find it inspiring!

You might be interested in our other CSS tutorials as well: =)

• Fancy Hover Effects with CSS3 Transitions
• Fancy Image Gallery with CSS3 Transitions
• CSS3 3D Transforms Animation
• CSS3 Background Animations
• CSS Tricks for Headings, Fonts and Text Styling

View Demo Download

The post Pure CSS Slideshow Effect for Presentation appeared first on inwebson.

]]> https://www.inwebson.com/css3/pure-css-slideshow-effect-for-presentation/feed/ 3