IE 6 Blocker Script
3 posters
Page 1 of 1
IE 6 Blocker Script
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.
The ie6blocker.js script does the browser detection on its first line:
Alternatively, we could have done our browser detection right within the HTML file with a conditional comments statement:
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:
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:
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:
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
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
- Posts : 98
Reputation : 0
Language : english
Location : in the heart of forumotions
Re: IE 6 Blocker Script
Now what is this about?
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
Re: IE 6 Blocker Script
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
- Posts : 98
Reputation : 0
Language : english
Location : in the heart of forumotions
Re: IE 6 Blocker Script
So its a tutorial kinds?
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
Re: IE 6 Blocker Script
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
- Posts : 98
Reputation : 0
Language : english
Location : in the heart of forumotions
Re: IE 6 Blocker Script
Please contact a staff members with this tutorial if you like to share it.
=> Locked
=> Locked
MrMario- Helper
- Posts : 22186
Reputation : 1839
Language : test
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum