IE Flash z-index problem – Solution

Problem:

I was trying to open fancybox ontop of a page with a flash player. The border and sometimes all the iframe was being displayed beneath the flash player in Internet Explorer, making it very ugly and impossible to use. Setting z-index to the flash player did not work.

Solution:

Wrap the flash player in a divider and add styling “z-index: 0” to the container and add an extra parameter to the flash player “wmode” with value “transparent”.

Example:

<div style=”z-index: 0;”>

</div>

Detecting IE10 and IE11Browsers

Since IE10, browser detection tags such as (.ie or .ie9 etc) are no longer support to identify the version of the IE browser. As a matter of fact, IE is no longer even recognized as an IE browser. Instead, if you search for the User-Agent in your request header, you will see that IE10 and IE11 have a User-Agent of a Mozilla Browser: “User-Agent Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko”

ie11

I thought that this means, all rendering should look like any other Mozilla rendering (Firefox). However, it was not the case. I needed to specify a certain css styling only for IE10+ browsers and could not seem to find a way of doing so without using JavaScript.

Paste the following code between script tags at the end of your page before the body closing tag:

if (document.body.style["msScrollLimit"] == undefined){
//NOT IE10+ Browser
alert("You are not using IE10 or IE11");
}
else if (document.body.style["msScrollLimit"] != undefined){
//IE10+ Browser

    //msTextCombineHorizontal is a css property only accepted using IE10+
if (document.body.style["msTextCombineHorizontal"] == undefined){
//IE10 Browser
alert("You are using IE10");
}
if (document.body.style["msTextCombineHorizontal"] != undefined){
//IE11 Browser
alert("You are using IE11");
}
}

View Live Demo Here.

Goodluck 🙂

Customized Input Type Range

What and Why?

So, here I am using the input type range to create sliders. One day I needed to use a range for a volume bar and could not find a decent vertical range customized with css so I decided to create one and share it with all of you. I was using the default setting “appearance: vertical” but was not working properly so I came up with an idea to use CSS3 transformations. Here I have created 8 different sliders, 4 horizontal and 4 vertical.

Before starting, you can take a look at the DEMO .

In order to create a customise your range, first create an input type range element given a min and max of 0 and 1 with a stepping value of 0.1. We also need to assign the class “range”:

<input type=”range” class=”range”  min=’0′ max=’1′ step=’0.1′ value=’1′ >

In your style sheet or between the <style> </style> tags add the below css classes explained using comments:

Continue reading

Enable and Disable Links using only CSS

All you need to add is pointer-events property to the css class desired. None will not allow the link to fire, while auto or inherit would open the link:

<style>

a.disabled { pointer-events: none; }

a.enabled { pointer-events: auto; }

</style>

<a href=”https://rochcass.wordpress.com&#8221; class=”enabled” target=”_blank”> Enabled Link </a>
<a href=”https://rochcass.wordpress.com&#8221; class=”disabled” target=”_blank> Disabled Link </a>

Step by Step CSS3 Animation for beginners

css3animation

CSS3 has been introducted recently with the aim to phase out flash. Older browsers do not support CSS3 so make sure to have the latest version of whatever browser you prefer using. I will be using Chrome for this tutorial so we will need the google webkit. Even if you will not use Chrome, it is still suggested that you keep the webkit to make sure that users visiting your site with Chrome can view the CSS3 animation properly.

The most basic and important rule we need to know is called the @keyframes where we specify the animation we would like to have from beginning to end.

When using the @keyframes we can specify at what time we want the animation to take place. We can use from{} and to {} or percentage values such as 0%{}, 50%{}, 100%{} etc.

Lets create some simple examples….  Continue reading

Most Common Screen Resolutions you need to know!

Desktops and Laptops:

Wide Screen desktop: 1920 x 1080 pixels  (Common)

Normal Screen desktop: 1280 x 720 pixels (Most Common)

Small Screen desktop: 1024 x 768 pixels (Less Common)

Smallest Screen desktop: 800 x 600 pixels (Not so common anymore)

 

SmartPhones:

Nokia Lumia 900 screen resolution: 480 x 800 pixels at 217 ppi

Nokia Lumia 920 screen resolution: 768 x 1280 pixels at 332 ppi (Most Common)

iPhone 3 screen resolution: 320 x 480 pixels

iPhone 4 screen resolution: 640 x 960 pixels (Most Common)

iPhone 5 screen resolution: 640 x 1136 pixels (Most Common)

Samsung Galaxy s2 screen resolution: 480 x 800 pixels at 217 ppi

Samsung Galaxy s3 screen resolution: 1280×720 resolution (Most Common)

Samsung Galaxy s4 screen resolution: 1920×1080 pixels (Most Common)

 

Tablets:

Microsoft Surface screen resolution: 1366 x 768 pixels (Most Common)

Microsoft Surface Pro screen resolution: 1920 x 1080 pixels

iPad 1 screen resolution: 1024 x 768 pixels at 132 ppi

iPad 2 screen resolution: 1024 x 768 pixels at 132 ppi

iPad 3 screen resolution: 2048 x 1536 pixels at 264 ppi (Most Common)

iPad Mini screen resolution: 1024 x 768 pixels at 163 ppi

Galaxy Note 8.0 screen resolution: 1280 x 800 pixels

Galaxy Note 10.1 screen resolution: 1280 x 800 pixels

Galaxy Tab 2 7.0 screen resolution: 1024 x 600 pixels

Galaxy Tab 2 10.1 screen resolution: 1280 x 800 pixels

Create a textbox watermark using CSS and jQuery

Step 1: –

First of all, we need to reference the latest jquery plugin (at the time being  version 1.9.1):

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js“></script>

Step 2:-

Add some styling to the textbox watermark, which is usually a light grey text font

<style>

.watermark
{

font-family: Calibri, Arial;

font-size: 14px;

color:gray;

}

</style>

Continue reading

background-postion middle not working

Issue:

background-position: center middle;

I once encountered an issue when aligning my background to the center of the page both vertically and horizontally.

Explanation:

So lets start by explaining how to use background-position. Background-position takes two values, a horizontal value and a vertical value as demonstrated below:

Cause and Solution:

Now, the issue rises when using middle for the vertical alignment which is the second value of the background-position. A simple fix for this would be to use 50% which is excepted for both horizontal and vertical values.

background-position: left 50%;        //background would start from the left side of the page, and vertically centered within the page.

background-position: center 50%;     //background would be aligned in the center of the page  //here we could also use 50% rather than center.