How to Add Multiple Locations on Embed Google Maps

Nowadays, it's a trend to show office locations in contact page. For this, front-end developers always embed Google map API. Sometimes, its required to show multiple office locations in same google map. In most cases, frontend developer always stuck at this requirement. But, It’s very easy! Thanks to google API. I am sharing this method. HTML, CSS and JavaScript is written after Demo/Preview. Preview The HTML <div id="map"></div> The CSS #map { height: 400px; width: 500px } The JS var locations = , , , , , , , , , , , , ]; var map = new (('map'),…
Continue Reading »
CSS - Cascading Style Sheets

Disable mouse scroll / wheel Zoom on embedded iframe Google Maps

Web Designer / Developer usually embed Google Maps using iFrame in most websites. But, page scrolling stuck when user use mouse scroll in Google map area, and now it is working as Map zoom in/out. So, we always wonder that, "is there a way to disable the zoom via mouse scroll wheel on all of them using css or JavaScript?" Answer is "Yes", and here is powerful CSS's property - POINTER-EVENTS. For this, I am wrapping the Google map's iframe in a DIV. Default behavior of mouse in this DIV has been fixed to "pointer-events: none". It will terminate the zoom-in…
Continue Reading »
CSS - Cascading Style Sheets

Request Desktop view and disabled zoom viewport meta tag for all mobile browsers

Today, I am going to brief about the working of - "Request a Desktop Site" & "Switch from a Mobile Site" or, Choose “Request Desktop Site” link and let the current webpage reload to the full desktop version of that site. I mean to say that, i am sharing a trick about disabling the responsiveness of webpage in mobile browser. As we know, there are several mobile Operating Systems and that's why each browser has it's own implementation of the viewport meta tag according to respected OS. Different combinations will work on different browsers & OS. Android OS: Android : viewport…
Continue Reading »
CSS - Cascading Style Sheets

Pure CSS Heart Beat / Pulsing Animation

Before working on Heart pulsing animation, first We have to think about How does the Heart beat? It expands and Each pulsing is in same duration/period of time. This can be easily done with CSS3 animation. No flash or images are required. A heart does not double in size when it beats. 10% change in size looks better to me. I like it getting both larger and smaller When it stops moving altogether it looks dead to me. Even when it isn't beating. So, it needs to expand or contract a little to look alive :). I explicitly have the heart start…
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 »
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

Convert Color images to Grayscale, Sepia, Blur & more with CSS Filter

"Is there a simple way to display a color bitmap in gray-scale with just HTML/CSS?" - This was a question for most of web designer / developer. Meanwhile for achieving this effect, they were using JavaScript Library like or two different images.  After the end of Flash for website development, Adobe and others have been hard at work bringing this amazing technology to CSS. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. With advancements in the standards of…
Continue Reading »
CSS - Cascading Style Sheets

Animated aquarium with pure CSS

Here is a pure CSS experimental work to create a aquarium. Image / javascript hasn't been used for aquarium or it's animation. I have used jQuery only for random air-bubbles. All these animation is created by Pure CSS. Some times ago, I had written a article about "Animated bubbles upwards continuously with pure CSS". You can also use this trick for air-bubbles. For Creating Aquarium's water, sand, rocks and plants few lines of HTML required. The HTML <div class="bubbles"></div> <div class="ground"></div> <div class="rock_1"></div> <div class="rock_2"></div> <div class="rock_3"></div> <div class="rock_4"></div> <div class="rock_5"></div> <div class="rock_6"></div> <div class="rock_7"></div> <div class="plant_1_wrap"> <div class="plant_1"></div> <div…
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 »