jQuery

ninja-media-script

Ninja Media Script

Well, it’s been awhile since I’ve written a post. I hope to get back into my daily post routine :) In the meantime I’ve been fairly busy creating some new scripts and learning some new technologies. One of the latest scripts that I’ve written was a Viral Media Script that’s available on CodeCanyon. Feel free to check it out here.

The response has been great so far, I am reaching nearly 250 sales within the first couple months. It’s great to be able to continue to work on something that people care about. Whenever I’m working on updates during the weekend it’s a great feeling to know that I have users who are looking forward to these updates.

The script was built using Laravel 4 framework, Bootstrap 3, FontAwesome4, and jQuery.

Here are some of the screenshots of the script below:

ninja-media-script-screenshot-1 ninja-media-script-screenshot-2 ninja-media-script-screenshot-3

Be sure to check it out on the Envato page here: http://codecanyon.net/item/ninja-media-script/6822888

And I look forward to hearing your feedback :)

jQuery Tilt-Shift Effect on Images

Tilt-shift Photography is the use of camera movements most often used to create a selective focus or blur effect. You can think of the Tilt-shift effect similar to the blur effect used in Instagram. Take a look at the image below for an example of this effect.

Adding this effect on images of your website can be done easily using the Tilt-Shift jQuery Plug-in written by Noel Tock. Currently this awesome plug-in only works with Chrome and Safari 6, so be sure you are using one of those browsers. Simply add the library to your project and call $(‘.class_name’).tiltShift(); in your document ready function, and you are good to Go!

Be sure to head over to the demo page and give this plug-in a try or click on the image below to be taken to the demo.

Simple Chat with Node JS and Socket IO

So, I finally released my first tutorial on the Envato network called, ‘Simple Chat with Node JS and Socket IO’. So, if you are looking for an easy chat solution or possibly looking into learning more about Node JS or Socket IO, then this tutorial is for you. Be sure to head over to the tutsplus marketplace and buy my new video tutorial.

The tutorial contains 3 short videos containing about an hour of video walk-through and explanation. After completing the video series you will have created your very own web chat system.

The design and HTML elements are very basic. It was designed this way so that the chat system is easily customizable. You can take a look at the video preview below to see what we will be creating throughout this tutorial sequence:

If you are interested in checking out this full tutorial head on over to http://marketplace.tutsplus.com/item/simple-chat-with-node-js-and-socket-io/2616470 and purchase the video series tutorial for only $7. Feel free to leave some comments in this post or on the product page ;)

jQuery Masonry – creating better looking layouts

If you haven’t checked out the awesomeness that is ‘jQuery Masonry’, I would politely ask you where you’ve been for the past year. Actually, I would direct you over to the jQuery Masonry website (http://masonry.desandro.com/).

Typically when you view a grid of content on a website it looks sort of like a checkerboard of images or perhaps the widths for some are smaller or larger. Well, with jQuery Masonry instead of having dynamic widths in your grid-layout you can display your content with dynamic heights.

There are many popular sites using this layout style including one of the latest crazed sites Pinterest. I tried checking their code to see if they were using the actual jQuery Masonry plug-in and could not find it, but they are using it (or something similar).

Another growingly popular site that makes use of jQuery Masonry is Yardsellr.com (I’m currently in love and having a lot of fun with this site).

Making use of the jQuery Masonry plug-in on your website is very simple. You’ll have to head on over to their demo pages and have a look: http://masonry.desandro.com/demos/basic-single-column.html. Perhaps, in the future I will do a screencast or another post explaining how to use this plug-in in-depth.

A few other great examples of sites that use this plug-in are:

And one more of one of my personal sites at:

iHeartFunny (http://www.iheartfunny.com)

Make sure if you ever have a content site and you want to display images or content in a beautiful fashion, you’ll head over to jQuery Masonry and make use of this excellent plug-in.

 

How to detect radio box change with jQuery

I’m constantly finding myself searching Google when I need to find out how to detect when a radio box has been changed using jQuery, and sometimes I have to search down a couple results til I finally find one that works. So, since this may come up again in the future, I have just decided to write a quick post about this topic.

Finding out when the radio box has been changed with jQuery is very easy, say you have a form inside your html that looks like this:

<form id="my_radio_box">
    <input type="radio" name="my_options" value="option 1" /> Option 1
    <input type="radio" name="my_options" value="option 2" /> Option 2
    <input type="radio" name="my_options" value="option 3" /> Option 3
</form>

Now, to detect when that radio box is changed, you can easily call the jQuery ‘change’ event inside your jQuery document ready function:

    $(document).ready(function(){
        $('#my_radio_box').change(function(){
            alert('Radio Box has been changed!');
        });
    });

In the above example when the radio box has been changed an alert is displayed. Now, in order to get the value of the currently selected radio box we can simply save the value in a variable:

    selected_value = $("input[name='my_options']:checked").val();

And, of course this has to be called inside of the jQuery ‘change’ function. Quick note: you’ll need to make sure to include the jQuery library somewhere above this code. So far the whole javascript functionality should look as follows:

    $(document).ready(function(){
        $('#my_radio_box').change(function(){
            selected_value = $("input[name='my_options']:checked").val();
        });
    });

There you go the selected value is stored inside of the ‘selected_value’ variable, you can feel free to do whatever you’d like from here. As an example, I’m going to alert the value to the screen.

Checkout The Simple Demo Here

And the following is the code for the example above:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
 
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
			<script type="text/javascript">
 
				$(document).ready(function(){
 
					$('#my_radio_box').change(function(){
						selected_value = $("input[name='my_options']:checked").val();
			            alert(selected_value);
			        });
 
				});
 
			</script>
	</head>
	<body>
 
		<h2>Detecting a Radio Box Change and getting the Value in jQuery:</h2>	
		<form id="my_radio_box">
		    <input type="radio" name="my_options" value="option 1" checked="checked" /> Option 1
		    <input type="radio" name="my_options" value="option 2" /> Option 2
		    <input type="radio" name="my_options" value="option 3" /> Option 3
		</form>
 
	</body>
</html>

Infinite Scroll Loading Image and Text

So, many of you may have heard about the amazing jquery plug-in called ‘Infinite-Scroll’. If you haven’t you need to check it out here. Anyway, when I was trying to incorporate this plug-in to my site, it was very easy; however, I could not for the life of me figure out how come the loading image and loading text I had specified in the jQuery options were not being executed. Well, the reason is that the documentation on the site has not been updated.

The Loading functionality is supposed to be passed as a separate array. So, instead of passing this code through the infinite scroll plug-in :

loadingImg   : "/img/loading.gif",          
                 // loading image.
                 // default: "http://www.infinite-scroll.com/loading.gif"
 
loadingText  : "Loading new posts...",      
                 // text accompanying loading image
                 // default: "<em>Loading the next set of posts...</em>"

You’ll want to add the following instead:

loading: {
    img: "/img/loading.gif",
    msgText: "Loading new posts..."
},

And now, your custom image and message text will be displayed :)

You can checkout the original Github post issue here: https://github.com/paulirish/infinite-scroll/issues/72#issuecomment-1676802

Animating a Sprite with jQuery

Animating a sprite with jQuery is very simple. I have created a simple sprite animation to show you how this is done. I have used a png image of Mario from the SNES ‘Super Mario World’. You can see what the image looks like below:

Check out the demo here.

Below is the simple code that I used to create this simple animation:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Mario Sprite Animation Scroll</title>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<style type="text/css">
			#mario{
				background:url('mario-walk.gif') no-repeat;
				width:50px;
				height:68px;
				position:fixed;
				left:0;
				background-position:0px 0px;
			}
 
			#mario2{
				background:url('mario-walk.gif') no-repeat;
				width:50px;
				height:68px;
				position:fixed;
				left:0;
				background-position:0px 0px;
			}
 
			.instructions
			{
				font-family:'Helvetica Neue', Helvetica, Arial;
				font-size:14px;
				color:#343434;
			}
 
		</style>
 
		<script type="text/javascript">
			$('document').ready(function(){
				$('#mario').css('top', ($(window).height()/2)-($('#mario').height()/2));
 
				$('html').keydown(function(){
					$('#mario').css('top', ($(window).height()/2)-($('#mario').height()/2));
					$('#mario').css('left', parseInt($('#mario').css('left'))+10);
 
					if($('#mario').css('background-position') == '0px 0px'){
						$('#mario').css('background-position', '-50px 0px');
					} else {
						$('#mario').css('background-position', '0px 0px');
					}
 
					if(parseInt($('#mario').css('left')) > $(window).width())
					{
						$('#mario').css('left', -parseInt($('#mario').width()));
					}
 
 
				});
 
 
			});
 
 
 
 
		</script>
 
	</head>
	<body>
 
 
		<p class="instructions" readonly="readonly">Hold any key down to animate mario...</p>
		<div id="mario"></div>
 
	</body>
</html>

You can download the files from here.

Impress JS – Truly Impressive Javascript

If you haven’t had a chance to checkout Impress JS yet, then I would highly recommend doing so. What is Impress JS? Why… Thanks for asking. Impress JS is a light-weight javascript library for displaying presentations in your web browser. The Impress JS uses the newly available CSS 3 transition effects to display text, blocks, images, and any other HTML element in your browser. You really have to checkout the demonstration here.

Many people may be familiar with Prezi, which is an online tool for creating presentations that not only slide side-to-side, but they also zoom in and zoom out. That’s nice and all but can it do 3d objects and 3d text? Well, as of writing this article… Not quite yet; impressively enough, Impress JS can handle 3d animations. In addition to the 3d capability Impress JS does not use Flash, which we all know is a big No-No in the mobile online revolution. So, if you are familiar with a little bit of Javascript and would like to save some money and create more compatible visual effects… You just might have to impress someone by using Impress JS.

 

 

 

WP FlowBox – A Video Lightbox Player for FlowPlayer

Looking for a simple to use Flowplayer video LightBox. You’ve found yourself in the right place.

After unsuccessfully searching for a simple way to embed an mp4 in a lightbox popup using FlowPlayer, I decided to checkout FlowPlayers API, and it turns out that it is very simple to perform this functionality . So, low and behold we have ‘WP FLOWBOX’. In this plug-in I have made sure to include the necesarry files for you to easily create a FlowPlayer Video Lightbox on your WordPress site.

You Can Download the plug-in below:

DOWNLOAD

Additionally, here is how you use it:

  1. Upload The Plug-in
  2. Activate It
  3. Then create a new post or page and anywhere you want to provide a link to a FlowPlayer Video Popup enter the following code in HTML view:
<a class="flowbox" href="#" rel="#video">{Text or Image Here}</a>
<div id="video" class="overlay">
<a class="player" href="{link to your MP4 file}">&nbsp;</a>
</div>

So, in the code above you’ll have to replace the desired text or image in place of {Text or Image Here} and add the location of your MP4 file in place of {link to your MP4 file}. Then, simply save your post and view the page. Now, when you view your page and click on the link, your MP4 file will open up in a FlowPlayer Lightbox.

To add multiple video popups on a single page:

Simply change the id=”video” to id=”video2″, video3… ETC…

If you have any problems using the plug-in, or just want to say Hi, please leave a comment below ;)

Creating a Jquery Exit Popup

Isn’t it super annoying when you visit a website and upon closing the page a Javascript alert Pops up and asks you if you really want to leave or stay on the site. Instead a less annoying way of doing this would be to use Jquery and when the users cursor reaches the top of the page, usually a sign that the user is going to close the webpage, a Jquery lightbox will popup.

This is very easy to accomplish and I think it’s absolutely ridiculous to have to pay for this kind of functionality, for instance Action Popup is a simple script that you install on your server and it will display a Jquery exit popup on the page when the user is about to exit. They want to sell you this script for $47. Well, instead of paying that $47, just simply download the following file:

DOWNLOAD | DEMO

all that is required is to include ‘exitpopup.php’ to your server and include it on your page:


include('exitpopup.php');

That’s it, now you’ll have an exit popup on your page. Oh, Yeah you’ll need to make sure that the JQuery library is being linked to on the page.

You can simply view the Demo here. Or Download the script here.

Hope someone can find this useful. And if you have any questions at all, please feel free to drop me a comment :) Thank You.