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 »
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

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 »
CSS - Cascading Style Sheets

Responsive CSS design – Web Design Tips

For designers, the most difficult and interesting aspect of responsive web design has been the flexible nature of it. We've constantly in the process of trading in our tenacity for pixel perfection and embracing the web for what it really is; fluid. Today we’ll cover some steps to help you transition towards flexible web design, or as I like to call it, 'Getting’ Flexy'. Responsive CSS for a web site will increase a websites visitors by attracting the mobile and tablet visitors also along with the visitors who enjoy their post in desktop the number of people who are using the tablets…
Continue Reading »