How to Highlight Particular Dates in JQuery UI Datepicker

Highlighting particular dates

In this post I will cover how to highlight specific dates in Jquery UI Datepicker. It pretty simple actually, we will add a custom CSS class to particular dates and then style those particular dates.

Here are steps which we will be following to highlight particular dates in datepicker:

  1. We use array to hold the dates which will be highlighted.
  2. We will utilize  datepicker beforeShowDay function to add custom CSS classes to the dates in array
  3. We will add CSS rules to style the dates.

Continue Reading

How to Create A Sticky Footer With CSS

Create a fixed footer with CSS

A sticky footer is a great way to encourage people to subscribe to your website’s newsletter, get more eyes on your advertisements or post short and important updates for your visitors.

The difference between a sticky header and a sticky footer is that the footer doesn’t take up “prime real estate” on your blog’s page in the same way that a header does. Visitor’s eyes will naturally make their way down to the footer as they read through your content and it’s not disruptive to their viewing.

What is a sticky footer?

Typically, it’s a bar that runs along the bottom of your webpage, even when scrolling.

Create a fixed footer with CSS

View the live demo here .

The Method

Let’s start out by creating a HTML webpage.

<html>
<head>
<title>My Webpage</title>
<style type="text/css">
</style>
</head>
<body>
Your webpage content goes here. To be able to test the functions of your fixed footer correctly, you need to have enough content so that when viewing you are required to scroll down the page to continue reading.
</body>
</html>

Next, we’ll add the footer div layer to the page.

<html>
<head>
<title>My Webpage</title>
<style type="text/css">
</head>
<body>
Your webpage content goes here. To be able to test the functions of your fixed footer correctly, you need to have enough content so that when viewing you are required to scroll down the page to continue reading.
<div id="footer">
Your fixed footer content goes here. You can use web forms, images, javascript code or whatever you want!
</div>
</body>
</html>

Now that we’ve got the basic set up for your webpage, we will rely on CSS to do the rest of the work. Use the following code in your style.css file or include it in between the script tags I have used above.

I am going to include a little styling for mine, which is optional for you.

body {
background-color: #e4e4e4; /* Styling */
font-family: 'Arial', sans-serif; /* Styling */
font-size: 17px; /* Styling */
}

#footer {
position: fixed;
bottom: 0px;
width: 100%;
overflow: visible;
z-index: 99;
height:40px;
left: 0px;
padding: 5px; /* Styling */
border-top: 2px solid #000000; /* Styling */
background-color: #ffffff; /* Styling */
text-align: center; /* Styling */
}

Not only do you now have a sticky footer on your screen, but it’s also mobile responsive. Keep in mind that you will have to add some additional styling for mobile view if you want the viewer to be able to see what is in the footer. Widths should be set to 100% and heights to auto to ensure it shrinks to size correctly.

Top 10 tools to convert HTML to PDF

PDF (Portable Document Formal) is a useful document format, and as the name portable. Once a document is converted to the PDF format, its formatting remains the same when viewed across a range of devices, irrespective of the platform. Due to its usability, there is often a need to convert documents from various formats to PDF. Webpages, which are basically HTML documents, belong to the same category.

Thus, we present 10 HTML to PDF converters with range of functionalites associated with each one.Continue Reading

Creating animated loaders with CSS3 Animation

spinkit

Introduction

Loaders and Spinners play an important role in the modern dynamic websites. Though they look simple but they play a very important role in simplifying the overall User Experience. There are a lot of ways to create animated loaders, however in this post I will be using the power of CSS3 to create 3 different spinners.

You can view all the working loaders and spinners by clicking “vKIAp” button below. Before we dig in to it, lets find out what CSS3 properties are required to build them.

See the Pen vKIAp by Mohit Bhansali (@mohitbhansali) on CodePen.Continue Reading

Adobe Brackets 1.0, an open source text editor for Web Designers

Multi Cursors

Introduction

Adobe has just launched version 1.0 of Brackets, its free open-source text editor that is built in HTML, CSS and JavaScript, for writing coding in HTML, CSS and JavaScript.

Brackets started as an open-source project over three years ago, and developers who want to customize the text editor to fit their motives can pull the source code from the app’s Github project page and alter it as they wish, and add their changes for others to use.

Currently, Brackets 1.0, as well as a preview of Extract for Brackets (an extension that Adobe itself has been working on) are available for Windows, Mac and Linux. Brackets is targeting mainly at Web developers (front-end) and designers. They are offering interesting features like inline editors (select and press ctrl + E / push command) will show inline window to update particular code without pop-ups or additional tabs, Live Preview to see instantly changes on screen and view CSS selector for quick edits and built in support for preprocessors.

What’s new in Adobe Brackets 1.0?

They are building fresh features and enhancing the existing one for better user experience. Download Brackets, and  explore the excellent stuff.Continue Reading

Create Your Own Mobile Responsive Masonry (Pinterest Style) Content Grid

Traditional Grid - Create Your Own Mobile Responsive Masonry (Pinterest Style) Content Grid

With Pinterest coming out of the woodwork and taking social media by storm in the recent months, it’s apparent that a lot of it’s popularity is down to it’s aesthetically pleasing layout. Pinterest’s “grid view” style for displaying pins is what the design world refers to as a Masonry Grid.

Masonry Grids are different from normal grids in that they do not have to be the same size as each other (like traditional grids created with CSS & HTML) and they slot in perfectly with each other despite their different lengths.

Traditional Grid

Traditional Grid - Create Your Own Mobile Responsive Masonry (Pinterest Style) Content Grid

Masonry Grid

Masonry Grid - Create Your Own Mobile Responsive Masonry (Pinterest Style) Content GridContinue Reading

How to create a random art using Canvas HTML5

Canvas Art

Introduction

Canvas is one of the most interesting additions to web pages by HTML5. In some ways, a canvas is like an <img> element. You can add a canvas like this:

<canvas id=”art-board” width=”920px” height=”320px”> </canvas>

And the browser allocates some space in the page for the canvas, with the width and height you have specified.

The HTML5 Canvas element is an HTML tag similar to <div>, <table> that allows user to draw graphics such as lines, squares, circles, etc. via scripting (usually, JavaScript) directly into an allocated canvas block element that appears on the web page. Since you can draw an image on a canvas, you can also to erase and re-draw all or a portion of the canvas image. There are a number of transformations and effects that you can apply to your canvas drawing.

Note: The <canvas> element is just a container for graphics. You need add a script to actually draw the graphics. We will show you how, don’t worry!

In much the same way that you might draw an image using a graphics program like Adobe Photoshop or paint, save it to a file, and load it onto a web page. With canvas you can automate through code and the drawing commands, and immediately see the results on the web page, without the need for an loading an external file. This capability allows you to do many sophisticated things that were once difficult or impossible to do, such as dynamically creating preview images.Continue Reading

Create Animated Loaders and Spinners with CSS3

circular loader 1

Loaders and spinners are a common sight in webpages, popping up whenever the server loads a page. For long, animated gifs have served the purpose. However, a plethora of custom made, editable CSS spinners are now available. This tutorial will walk you through the creation of basic animated loaders and how to apply elementary mathematics for various transformations, rather than a hit and trial approach.Continue Reading

Create a CSS3 Clock using no JavaScript

CSS3 has shown a true test of mettle in the field of power and speed. One can produce a pixel perfect webpage with CSS3 that will load faster, has a small overall file size and fewer HTTP requests.

CSS3 animation module provides an elegant solution to basic animation needs of webpages without requiring to trespass the realm of scripting and has the potential to be a major part of web designing practices. Using CSS3 keyframe animations, one can create smooth, maintainable animations that perform relatively well.

An example of creating an analogue clock using purely CSS would be a nice way to illustrate the power of CSS3. No Javascript is used for this purpose. This article will walk you through with various parts of the CSS3 clock, mainly focussing on the new features introduced in CSS3, like the transforms, gradients and animations.Continue Reading

Create Parallax Scrolling using jQuery

Parallax scrolling is a relatively new trend in web design. With this effect, you can create an illusion of depth on your webpage. Parallax works by making the background of the webpage scroll at a slower speed that the foreground, thus giving the scene a perceived depth. This is similar to the idea that when you are moving, objects nearer to you move at slower speeds- hence, the background appears to be behind the foreground.

So, how do we achieve this effect? Well, it’s quite simple really. Whenever a users scrolls on the page, we calculate how much the page has been scrolled. We then scale down this scroll-height and move the background image up or down accordingly. Here’s the result we wish to achieve.Continue Reading