How to enable javascript in various browsers – help file


This is a help reference for those sites, which are javascript critical. You can use this in a page to which you redirect in your javascript disabled scenario.

Microsoft Internet Explorer
1. On the Tools dropdown menu, click Internet Options, and then click the Security tab.
2. Click on the earth «Internet» icon, and then the Custom Level button.
3. Scroll to the bottom of the Settings list, and locate the section named Scripting.
4. Under the subsection Active Scripting, click Enable. Click OK.
5. Answer Yes to the confirm box that pops up. Click OK.
6. Reload the page, by clicking the reload button or pressing F5 in the keyboard or select the url in the address bar and click enter key in the keyboard.

Firefox
1. Go to the «Edit» drop-down menu and click on «Preferences…».
2. In the «Category» list, click on «Advanced».
3. Click on «Scripts & Plugins».
3 Click the «Activate Javascript for» option, and then click okay.
4. Reload the page, by clicking the reload button or pressing F5 in the keyboard or select the url in the address bar and click enter key in the keyboard.

Netscape Navigator
1. Go to the «Edit» drop-down menu and click on «Preferences…».
2. In the «Category» list, click on «Advanced».
3 Click the «Enable Javascript for Navigator» option, and then click okay.
4. Reload the page, by clicking the reload button or pressing F5 in the keyboard or select the url in the address bar and click enter key in the keyboard.

Safari
1. Click the Settings (gear symbol) icon in the browser and go to “Preferences”. or press (Ctrl + ,) in your keyboard.
2. Go to the “Security” tab.
3. Check the “Enable Javascript” check box.
4. Close the popup window.
5. Reload the page, by clicking the reload button or pressing F5 in the keyboard or select the url in the address bar and click enter key in the keyboard.

You can use this content in the page, to which you redirect under noscript scenarios. Hope this helps.

Large CSS background moves on resize, in IE 8


This post is in continuation to the a solution given by webdesignerWall, regarding the use of large CSS backgrounds in your website. You can check the site below:

http://www.webdesignerwall.com/tutorials/how-to-css-large-background/

The solution he states is that of using display:table; for body tag wherein you are specifying your large background.

The solution works quite fine! But when it comes to IE 8 – unfortunately, you end up in a mess.

I have a small work around for this issue. It works totally cool in almost all the browsers.

Solution:

All you need to do is load the same image twice – one for the body, and the other for a header div container. Difference being the body will be showing the full width of 100% but the header container will show only say 1000px, of center of the image.

Have a look at the CSS to get an idea:

body {
background:url(Images/bg.png) no-repeat center top;
background-color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
width:100%;
}
#ms-container
{
background:url(Images/bg.png) no-repeat center top;
margin:0 auto;
position:relative;
width:1000px;
}

Trick here is – during resizing to higher resolution, the background keeps showing, while the center section remains steady, you get a continuous image- actually overlapping, one with 1000px centered to your screen, while the other being the big image, 100% to the body, in its full glory.

And when you resize to smaller resolution, the 1000px guy comes into play, while the body background image keeps on moving in the behind (who cares 😉 all you see is the div container, which is stationary)

Worked successfully in almost all the browsers. But do verify it.

One note:Ensure that you play with paddings, borders, positioning and any css property that can shift the div container position by a pixel or two. You dont wanna show the end user that you are loading two images. Also, site performance wud be affected a bit. Can’t help it.

Hope this solves the problem!

Javascript to maximise window on load


Well this is simple script to get your browser maximised onload:

<html>

<head>
<script language=”JavaScript”>
window.onload = maxWindow;
function maxWindow()
{
window.moveTo(0,0);
if (document.all)
{
top.window.resizeTo(screen.availWidth,screen.availHeight);
}
else if (document.layers||document.getElementById)
{
if (top.window.outerHeight<screen.availHeight||top.window.outerWidth<screen.availWidth)
{
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;

}
}
}
</script>
</head>
<body>Testing</body>

</html>

I just tested it it IE. Hope this works fine in other browsers.

You can also open up a new window as maximised. Check the script snippet below:

function fullScreen(theURL) {
window.open(‘testwindow.html’, ”, ‘fullscreen=yes, scrollbars=auto’);
}

If you would like to use jQuery here, you can use the following jQuery methods:

var height = $(window).height();
var width  = $(window).width();

Hope this helps.

CSS fixes based on Browser versions


IE Specific CSS loading:

There can be scenarios wherein you might want to load IE version specific CSS. Say an IE6.css file for IE 6 and below, IE7.css for IE 7 alone. In these scenarios, it is good to exploit the conditional comments that IE layout engine Trident look upon.

Check the code below to check out how to implement these comments:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<link href=”main.css” rel=”stylesheet” />
<!–[if IE 7]>
<link href=”ie7.css” rel=”stylesheet” />
<![endif]–>
<!–[if lt IE 7]>
<link href=”ie6.css” rel=”stylesheet” />
<![endif]–>

<title>Conditional Comments Structure</title>
</head>
<body>

</body>
</html>

In the above example, the main.css will be loaded always. While depending on the IE browser versions, the other css will selected. IE7.css will be selected only for IE 7.0 browsers and IE6.css will be selected for IE 6 and below. The styles applied by the selectors in main.css will be overridden by the respective selectors in these css files, if any.

Conditional comments cannot be inserted into the css file, however they can be used with the style tag. For example:

<style type=”text/css”>
.MyStyle {
background-color: red;
}
</style>

<!–[if lt IE 7]>
<style type=”text/css”>
.MyStyle {
background-color: blue;
}
</style>
<![endif]–>

The other possible operators that can be used in the conditional comments are:

Operator Description Example
! not <!–[if ! IE 7]>
lt less than <!–[if lt IE 7]>
gt greater than <!–[if gt IE 7]>
lte less than or equal <!–[if lte IE 7]>
gte greater than or equal <!–[if gte IE 7]>

To target styles for IE 5, IE5.5, IE6.0 and IE 7.0 separately, you can use the following snippet:

h3{

background: #00f;   /* all browsers including Mac IE */
*background: #f00; /* IE 7 and below */
_background: #0f0; /* IE 6 and below */
_bac\kground: #f60; /* IE 6 only */
_background:/**/ #f62; /* IE 5.5 only */
_background/**/: #0f0; /* IE 5.0 */

}

Targeting Firefox Browser:

I would suggest your design your CSS for Firefox and then get back to IE to fix the IE specific bugs. Even under such cases, if you want Firefox specific fix, you can use the code below to load style specific for Firefox browser.You can also add the section inside the css file.

<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
@-moz-document url-prefix() {
h1 {
color: red;
}
}

/* Firefox 1 and 2 specific */
body:empty h1 {
color: red;
}

</style>
</head>
<body>
<h1>This should be red in FF</h1>
</body>
</html>

Targeting  Safari & Opera Browser:

Add styles specific for safari browser, you can use the following snippet:

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Opera 9 rules here */
}

Targeting Opera Browser only:

Opera hacks work out of the negation in CSS.

/* Opera Specific */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
head~body #h1{ display: block; }
}