The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

IE 6 Blocker Script

View previous topic View next topic Go down

IE 6 Blocker Script

Post by mehmoodriaz123 on October 17th 2010, 5:41 am

IE 6 Blocker Script



IE 6 Blocker Script
By: Chris Coyier on 9/1/2008


Fed up with supporting IE 6? Ready to just cut it off? I don’t blame you. I generally feel that most problems people have with IE 6 are pretty easy to work around with practice, but that is not always the case, and I feel like the JavaScript support is even more problematic for developers.

Many times it just comes down to how best to spend your time. If you have to choose between designing and coding a neat new feature of your website that 80% of your audience will use and enjoy or work on troubleshooting IE 6 bugs for the 20% (and shrinking) portion of your audience, I’d go with the new feature.

But then the question arises as to just HOW you are going to stop supporting IE 6. Do you just do nothing, and let layouts be borked and functionality be severed? I would argue that is a bad idea. If you stop supporting IE 6, do it with confidence and inform that portion of your audience of what they can do!

Enter the IE 6 Blocker Script. Using a little simple JavaScript browser detection and some jQuery, we can drop our IE 6 support with a very clear message.


Below we’ll detail a how it works and how to use it.

Includes and Browser Detection

In the <head> section of the site, we’ll need to include both jQuery and the script file.

Code:
...
    <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="jquery.ie6blocker.js"></script>
</head>

The ie6blocker.js script does the browser detection on its first line:

Code:
var IE6 = (navigator.userAgent.indexOf("MSIE 6")>=0) ? true : false;
if(IE6) {
  ... do stuff ...
}

Alternatively, we could have done our browser detection right within the HTML file with a conditional comments statement:

Code:
<!--[if IE 6]>
    <script type="text/javascript" src="jquery.ie6blocker.js"></script>
<![endif]-->

However, since with our technique we’ll need JavaScript enabled for it to work anyway, we might as well just let the JavaScript do the detecting. You could also do it both ways…

The jQuery

Now that we have detected for IE 6, we’ll be using jQuery to build some new page elements and insert them onto the page. The goal is a transparent black overlay for the whole screen (rendering the site recognizable but useless). Then above that, a centered message box explaining the sites intentional lack of support for IE 6. To lighten the blow a little, you may want to offer an alternate way of viewing your content (such as the blogs RSS feed). Some people are not able to upgrade their browsers, so a message telling them to do that alone may not be good enough.

Two div’s will be needed. One for the overlay, and one for the message box. We can create them, CSS, content, and all, right within the jQuery JavaScript:

Here is the overlay:
Code:
$("<div>")
    .css({
        'position': 'absolute',
        'top': '0px',
        'left': '0px',
        backgroundColor: 'black',
        'opacity': '0.75',
        'width': '100%',
        'height': $(window).height(),
        zIndex: 5000
    })
    .appendTo("body");

With a modern browser, we could just set the top, right, bottom, and left all to 0px, but IE 6 doesn’t like that, so we need to set the top and left to 0px, and the width to 100%. The height is a bit trickier. Setting it to 100% doesn’t work in IE 6. We could just use a really large static number, but that’s no fun, and will trigger a scrollbar that may not be necessary. Many “lightbox” overlays make use of the proprietary CSS “expressions” to get the window height like this:

Code:
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');

That’s not going to work for us here, because jQuery applies this styling “inline” and it won’t be calculated that way. Fortunately for us, jQuery now has the ability to calculate the window height. (The newer versions of jQuery have the old dimensions plugin built in). A high z-index value is also used here to make sure the overlay sits on top of all other content.

Here is the message box:

Code:
$("<div><img src='no-ie6.png' alt='' style='float: left;'/><p>
<strong>Sorry! This page doesn't support Internet Explorer 6.</strong>

If you'd like to read our content please <a href='http://getfirefox.org'>upgrade your browser</a> or <a href='http://feeds.feedburner.com/CssTricks'>subscribe to our RSS feed</a>.</p>")
    .css({
        backgroundColor: 'white',
        'top': '50%',
        'left': '50%',
        marginLeft: -210,
        marginTop: -100,
        width: 410,
        paddingRight: 10,
        height: 200,
        'position': 'absolute',
        zIndex: 6000
    })
    .appendTo("body");

Notice all the markup for the message box is right in there, in one big jQuery object. The CSS of interest here is that we set the left and top values to 50% and then pull it back into center with negative margins (the theory). Then we use a higher z-index value still to put it above the overlay.


Now Please my request for posting this topic by copying all the above contents from http://css-tricks.com/ie-6-blocker-script/ is to learn how can we use these scripts by templet editing ..

please guide step by step for the version phpbb2


mehmoodriaz123
Forumember

Male Posts : 98
Reputation : 0
Language : english
Location : in the heart of forumotions

Back to top Go down

Re: IE 6 Blocker Script

Post by Sanket on October 17th 2010, 8:22 am

Now what is this about?

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Re: IE 6 Blocker Script

Post by mehmoodriaz123 on October 17th 2010, 9:05 am

@Sanket wrote:Now what is this about?

This about for blocking home page while login or registering on internet explorer 6 browser


like Here

mehmoodriaz123
Forumember

Male Posts : 98
Reputation : 0
Language : english
Location : in the heart of forumotions

Back to top Go down

Re: IE 6 Blocker Script

Post by Sanket on October 17th 2010, 9:54 am

So its a tutorial kinds?

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Re: IE 6 Blocker Script

Post by mehmoodriaz123 on October 17th 2010, 11:31 am

@Sanket wrote:So its a tutorial kinds?

yes sir, it is a tutorial of how to block a page on internet explorer 6 .. as i have already given a link of forumotion forum where these scripts have been used .. now i need guidance where in templets these scripts should be placed inorder to take effect in phpbb2.

mehmoodriaz123
Forumember

Male Posts : 98
Reputation : 0
Language : english
Location : in the heart of forumotions

Back to top Go down

Re: IE 6 Blocker Script

Post by MrMario on October 17th 2010, 8:01 pm

Please contact a staff members with this tutorial if you like to share it.

=> Locked

MrMario
Helper
Helper

Male Posts : 22186
Reputation : 1830
Language : test

http://test.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum