Blogfreakz - Web Design and Web Development resources » Tutorials

SimpleWeather – Display The Weather Using jQuery

Keith@Blogfreakz — Mon, 21 May 2012 02:24:33 +0000

Today’s featured plugin comes from the guys over at monkeecreate and it is called SimpleWeather, a jQuery plugin that creates a widget that displays the current weather in the specified locale. The data it displays is pulled from the public Yahoo! Weather feed via the YQL API, which means that it can only recognize US zip codes so if you are to set a location outside the US you’ll have to type in the name of the city together with the corresponding country.

Customization of the plugin is easy. The script simply returns the data for you to do as you want, which means that you control the entire HTML and utilize the current CSS classes. Click on the image for the demo and documentation.

Quicksand – Recorder and Filter

Marvin@Blogfreakz — Mon, 21 May 2012 01:55:21 +0000

Created by Jacek Galanciak, Quicksand allows you to organize and record items to make your search get easier.

Click on the image to find out how it works and download its file.

Incoming search terms for the article:

travel write for us

CSS Tutorial: CSS Properties CSS Syntax

Marvin@Blogfreakz — Mon, 14 May 2012 00:42:30 +0000

CSS plays an important role in today’s web development so here’s a video tutorial by Ashton Sanders that can be very helpful in your quest for making a good web site.

Click on the image to launch the tutorial.

Incoming search terms for the article:

How To Remove The Height And Width Attributes In WP Image Uploader

Keith@Blogfreakz — Mon, 14 May 2012 00:19:03 +0000

Every time you use WordPress’ image uploader it automatically includes the image’s actual size (height and width) into the tag.

While this is all well and good, it can be a bit of a nuisance especially if you’re using a responsive website design because renders your uploaded image un-resizable which kind of defeats the idea of a responsive web page.

To address this, Damien Oh‘s nifty WordPress trick teaches you how to prevent the image’s height and width attribute from being inserted into the tag the next time you use the WP image uploader. Get his TUTORIAL now.

Incoming search terms for the article:

recent comments wordpress

kiNotice: A jQuery Notification Plugin

Keith@Blogfreakz — Fri, 11 May 2012 06:41:49 +0000

There are a few ways you can introduce a notification message window to a visitor; at the top, in the middle, or at the bottom of the screen (the side are usually reserved for ads and widgets like social media icons). I for one personally think that the best place to put your notification without the risk of obstructing your visitor’s view of your site is at the bottom of the page, which brings us to the main focus of this article.

Serban Ghita developed and introduced a nice versatile jQuery plugin called kiNotice that lets you put a nifty notification box at the bottom right corner of the page. There are eight different styles for you to choose from.

Get the DEMO and DOWNLOAD.

Below are some random examples and the code you put in your HTML to call in the plugin:

Static string example:

$.fn.kiNotice({

autoOpen: true,

hideOnClose: true,

title: 'Today\'s announcement',

content: 'Quisque a nunc felis, vel bibendum diam. Phasellus a velit libero. Aliquam consectetur arcu vitae massa pellentesque accumsan.
'
 });

With DOM object inserted into the body of the notice:

$.fn.kiNotice({

autoOpen: true,

content: $('#important-message')
 });
With AJAX content loaded:
$('#content').kiNotice({

autoOpen: true,

hideOnClose: true,

ajaxSettings: {

url: 'ajax.php?page=get_message&response=html',

type: 'GET'

}
 });

You can also use extra classes to customize the notice, and a custom notice animation (see sample code below):

$.fn.kiNotice({

autoOpen: false,

ajaxSettings: {

url: 'ajax.php?action=inbox&response=json',

type: 'GET',

success: function(data){

this._setToggleIcon('^{'+data.notice_count+'}');

this.kiNoticeContent.html(data.notice_content);

this._open();

},

extraClasses: 'AlmaTheme',

extraNoticeInterval: 1000
 });

This plugin has been successfully tested on the following browsers:

IE6, IE7, IE8, IE9
Firefox
Chrome
Opera
Safari

Moreover, it works on jQuery 1.3.1 but it is highly recommended to be ran on versions 1.4 and above. Hope you guys find this plugin very useful in your site!

Incoming search terms for the article:

How to Make Your Own Jaws Movie Poster

Marvin@Blogfreakz — Fri, 11 May 2012 06:20:59 +0000

The novel turned mega hit thriller movie Jaws was so influential that it was one of the best thrillers of all time and a cult favorite. So to relive this scary flick poster by Steven Spielberg, Uzair Nazeer shares a great tutorial on how we can create our own Jaws movie poster.

Click on the image to view the full tutorial.

Incoming search terms for the article:

Create Eye-Catching CSS Buttons With Pseudo-Elements

Keith@Blogfreakz — Thu, 10 May 2012 03:33:37 +0000

Today’s featured CSS tutorial comes from Sergio Camalich who created a very cool set of button designs with the use of CSS pseudo-elements. His tutorial shows you how to create buttons with a twist. It will only involve using just one anchor tag for each button to work (with the help of CSS), because you’ll be creating the other elements with the ::before pseudo-class.

Sergio created five different button styles using this one approach but I’m only going to show you just one of them, which actually happens to be my favorite one. If you like to see the rest of the styles, you can check them out on his dribble page.

The button that we’re going to create will look like this:

Click on the image for the demo.

We’ll keep our HTML markup as short and simple as possible with this:

Click me!

And now for the magic of CSS:

.a_demo_three {

background-color:#3bb3e0;

font-family: 'Open Sans', sans-serif;

font-size:12px;

text-decoration:none;

color:#fff;

position:relative;

padding:10px 20px;

border-left:solid 1px #2ab7ec;

margin-left:35px;
background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);

border-top-right-radius: 5px;

border-bottom-right-radius: 5px;

box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;

.a_demo_three:active {

top:3px;

background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);

box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;

.a_demo_three::before {

content:"·";

width:35px;

max-height:29px;

height:100%;

position:absolute;

display:block;

padding-top:8px;

top:0px;

left:-36px;

font-size:16px;

font-weight:bold;

color:#8fd1ea;

text-shadow:1px 1px 0px #07526e;

border-right:solid 1px #07526e;

background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);

border-top-left-radius: 5px;

border-bottom-left-radius: 5px;

box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;

.a_demo_three:active::before {

top:-3px;

box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
 }

Incoming search terms for the article:

NetEye Touch Gallery

Marvin@Blogfreakz — Thu, 10 May 2012 02:10:09 +0000

Upgrade your mobile browser’s photo-viewing apps with the NetEye Touch Gallery. It’s a type of lightbox that’s written and optimized for Mobile Safari on iPad/iPhone, has photo gallery for any touch devices, has touch support and it works with Desktop Safari, Firefox 4, Opera, Chrome and limited for IE which may have no transition.

Click on the image to download the zip file.

Usage:

You may alter it by providing the getSource function like this:

See Touch Gallery’s full DEMO and DETAILS.

Incoming search terms for the article:

Create a Slick Menu Using CSS3

Marvin@Blogfreakz — Wed, 09 May 2012 06:14:50 +0000

Created by a web developer in the Philippines, here’s a great navigation menu tutorial that uses only CSS. View the DEMO, then click on the image to see how it is done.

Incoming search terms for the article:

Make Your Website Behave Like An Image Slider With Revolver Plugin

Keith@Blogfreakz — Wed, 09 May 2012 06:04:23 +0000

Revolver is a jQuery plugin developed by kernelstudio from codecanyon, and it lets you turn your entire website into a slider. Instead of simply clearing out the entire window and loading the next page, Revolver simply causes the current webpage to slide off the screen and introduces the next one just like your typical image slider.

Click on the image to try the DEMO.

The plugin lets you customize attributes like the speed and of the transition and the animation of the easing. It supports the following browsers: IE7 to IE9, FireFox 4, Safari 5, Opera, and Chrome.