JAVASCRIPT

10 Useful Beginners JavaScript / jQuery tips and tricks

I consider myself as a advanced when it comes to coding in JavaScript or jQuery however recently I played a bit more with this language and stumbled upon a number of random things i assumed were worth sharing. As you know, JavaScript is the best programming language in the world, the language of the web, of mobile hybrid apps (like PhoneGap or Appcelerator), of the server side (like NodeJS or Wakanda) and has several other implementations. So, if you are new to JavaScript or simply don’t understand it as well as you'd like, I hope you find this article helpful. 1. 0 ==…
Continue Reading »
CSS - Cascading Style Sheets

Add style to console log statements

Searching for errors in programming code is called code debugging. Debugging is not easy. But fortunately, all modern browsers have a built-in debugger. Built-in debuggers can be turned on and off, forcing errors to be reported to the user. With a debugger, you can also set breakpoints (places where code execution can be stopped), and examine variables while the code is executing. Normally, otherwise follow the steps at the bottom of this page, you activate debugging in your browser with the F12 key, and select "Console" in the debugger menu. Have you recently checked out Google Plus because they implement some awesome effects?  I…
Continue Reading »
HTML

Find Location With HTML5 Geolocation API

The Geolocation API is a new technology that’s introduced by W3C – the same organization behind HTML5. Probably for that reason, it is often correlated and grouped with HTML5 in many books and references, although it has actually nothing to do with HTML5 technically. In this post, we are going to use the API in its simplest form; we will create a set of functions to retrieve user’s location and show it in map with Google Maps. Let’s take a look. Why Geolocation API ? In many cases, obtaining user location would be extremely useful to establish better user experience, for…
Continue Reading »
CSS - Cascading Style Sheets

Animated 3D Background Pattern using HTML5 < canvas >

Hi friends, today we are going to see a cool example of animated 3D Background using HTML5 <canvas> and javascript. The <canvas> element is part of HTML5 and allows for dynamic, script-able rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap and does not have a built-in scene graph. The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images. What is canvas element in HTML? Canvas was initially introduced…
Continue Reading »
CSS - Cascading Style Sheets

Merry Christmas Greetings – JavaScript and CSS Parallax effect

I hope you have enjoyed my previous article about 3D Parallax effected webpage. Now, like previous year, on occasion of Christmas and winter Holidays, I thought to wish this festival by create a wonderful webpage greetings too. So, today I had created this Christmas greeting card using 3D Parallax effect with help of CSS3 and JavaScript. I hope you all will enjoy this holiday and my web-card too :) . Introduction - What is Parallax? Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two…
Continue Reading »
CSS - Cascading Style Sheets

3D Parallax effect with CSS, javascript or jQuery

Parallax effect is a long-known and widely used animation effect. Lately, the parallax effect has become a wide-spread and quite a trend element in web design, often referred to as "parallax scrolling". Internet if full on many great examples of application of this effect in web design. As I planned to create a cool parallax animated background, my first goal was to write the shortest and simplest code to achieve maximum awesomeness! I’ll show you how I did it. In this tutorial, I’ll teach you the simplest parallax scrolling technique. Here, I am going to introduce you, a most flexible/responsive slider  Parallaxfx_DG. It is…
Continue Reading »
CSS - Cascading Style Sheets

Creating a Puzzle game using jQuery

Today we are making a simple puzzle game called "Doraemon Puzzle". The purpose of the game is to slide 15 square blocks around to form an image. The goal of this tutorial is to look at this simple browser-based game and explain how it was made line by line. It’s a great way to learn jQuery. For this tutorial, We will use a 2D image of kid's favorite cartoon "Doraemon" for square-sliding game.  I will go over each line of code to demonstrate the train of thought. I really do believe that breaking this game up into explanations on per-line…
Continue Reading »
CSS - Cascading Style Sheets

Animate Full-Page Multiple Background images with fade-in & fade-out effect – jQuery

"How to change multiple background-image of body with effects?" - I think this is a major problem which all designers face. You can fade background colors but not background images. The way to work around this is to have your images as <img> tags and hide them by default display:none;. Give your images position:absolute and z-index:-1 so they act like backgrounds and are behind everything else. Here's a quick example of multiple images fading one after the other. The HTML Html is very simple. Just add a div with multiple images which you want to animate / change in background with fade…
Continue Reading »
CSS - Cascading Style Sheets

Responsive jQuery Banner Slider with Pagination circles – Responsive_DG_Slider

After working on Responsive_DG_Slider,  which is a most flexible/responsive image slider with different random transition effects. After full-screen example, I am sharing another example with different transition effects. It is very easy to implement. Here I am showing It’s Pagination circles with the height relative to the width functionality powered by the fantastic java-script library jQuery. Configuring Your Slider As we have done earlier, configuring the slider is very simple, you just need to place your images and call the initializer function and your slider is ready. Here’s how you can do this for liquid/responsive images slider with pagination. The HTML <div class="fluid_container"> <div class="fluid_dg_wrap fluid_dg_charcoal_skin"…
Continue Reading »
CSS - Cascading Style Sheets

Full-Screen Responsive jQuery Banner Slider – Responsive_DG_Slider

After working on responsive or flexy designs, I found some serious issues about fixed width in most of images/banner sliders which I have got online. So, I thought to develop a liquid/responsive images slider with different transition effects. Here, I am going to introduce you, a most flexible/responsive slider Responsive_DG_Slider. It is so easy and useful. I have decided that I will post a page dedicated to this slider with it's features and API later. Here I am showing It's full screen responsive image slider functionality powered by the fantastic java-script library jQuery. With a nice and simple design it adjusted automatically to the width of…
Continue Reading »