HTML

Disable landscape orientation for mobile users in responsive website

Sometimes, a responsive website looks great on Portrait orientation, but messed up on Landscape. So, a UI Developer wish to disable Landscape orientation for mobile devices (Android & iOS) before getting the website live. Before Viewport meta tag, this is always a challenge to UI Developer to show the website in correct Zoom and also doesn't allow user to Scale the website's content. But nowadays it can be easily fix with viewport. For this viewport meta tag trick please read this article. But you can't disable toggling of landscape/portrait on a mobile web app (Android Browser/iOS-Mobile Safari) through viewport meta…
Continue Reading »
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 »
JAVASCRIPT

JQuery or JavaScript tricks for mobile devices like – Android, Windows, BlackBerry, Apple, iphone, ipad

JavaScript support is very good on modern mobile browsers. The mobile version of Firefox and Chrome provide pretty much desktop-level support for HTML5(CSS 3 + JavaScript + HTML 5 ) features. Most mobile phones are running some version of WebKit (what Chrome runs on), so you're pretty much guaranteed better support than IE8 provides if you're developing for mobile. Detecting Mobile Devices Instead of using jQuery you can use simple JavaScript to detect it: if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera () ) { // some code for mobile } or you can combine them both to make it more accessible through jQuery. $. =…
Continue Reading »
CSS - Cascading Style Sheets

Animated bubbles upwards continuously with pure CSS

Here is a pure CSS experimental work to create floating bubbles without using JavaScript. These animated bubbles are also with popping effect. All these animation is created by Pure CSS. For our little demo, we use a simple image for the conical flask and then create the bubbles entirely with markup and CSS. The HTML <div id="beaker"> <span class="bubble"> <span class="glow"> </span> </span> </div> With our bubbles all made, now we need them to act like bubbles. We could use JavaScript but that's no fun. Just use CSS! There are a few things we need to animate. The vertical positioning…
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

CSS3 Modal Window Popups – sliding forms with fancybox effect

Today, I will describe you how to create cool CSS3 modal popup windows (or boxes). Literally, not so long ago, in order to achieve such effects, we used jQuery. But, as it turned out, CSS3 has all the necessary tools for making modal windows too. In our demonstration I have prepared single page with two popup elements: join form and login form. Welcome to test results (domo) and understand how it was made. HTML First, lets create the main HTML markup. As you can see – the structure is quite easy. Here are one panel with buttons and two popups.…
Continue Reading »
CSS - Cascading Style Sheets

Animated Color wheel spinning with CSS3 Keyframes animation, Transform and Transition

I have done some experimental work to create CSS3 Animation without using JavaScript. I end up creating some animations using CSS3 Keyframes and Transform and like to share. I have done this animation using border-color tricks and CSS Transform: CSS scale and CSS3 rotation. Note: Before going I like to make something clear, Internet Explorer 10, Firefox, and Opera supports the @keyframes rule and animation property. Chrome and Safari requires the prefix -webkit- in css. Important: Internet Explorer 9, and earlier versions, does not support the @keyframe rule or animation property. The HTML <div id="colorWheel"> <span class="color01"></span> <span class="color02"></span> <span…
Continue Reading »