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.

how to change the default text selection color in Browser


One of those cool CSS3 declarations that you can use today is ::selection, which overrides your browser-level or system-level text highlight color with a color of your choosing. The biggest hit is in the fact that only Safari and Firefox are supporting this, and both in slightly different ways. IE totally ignores them. Fortunately, this can be thought of as one of those “forward-enhancement” techniques. It’s a nice touch for those using modern browsers, but it just gets ignored in other browsers and it’s not a big deal.

I feel it’s worth a mention and am posting it. The solution for this text highlighting is a small CSS fix shown below:

::selection {
background: #ffb7b7; /* Safari */
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
}

[ VIEW DEMO ] – Try using your mouse to select the text.

If you are able to find a fix for this in IE, please feel free to share it.

Styling a file upload control or input type = “file”


FileUpload control has weird styles, especially when you view them across browsers. The normal look and feel of the control, would look like something below:

The Safari one looks really worth a bug for the testers.

This solution to style fileupload controls is a concise and verified version of the solution by Michael McGrady.

Step 1 : Copy the following code to you javascript file that loads along with the page.

var W3CDOM = (document.createElement && document.getElementsByTagName);

function initFileUploads() {
if (!W3CDOM) return;
var fakeFileUpload = document.createElement(‘div’);
fakeFileUpload.className = ‘fakefile’;
fakeFileUpload.appendChild(document.createElement(‘input’));
var image = document.createElement(‘img’);
image.src=’search.gif’;
fakeFileUpload.appendChild(image);
var x = document.getElementsByTagName(‘input’);
for (var i=0;i<x.length;i++) {
if (x[i].type != ‘file’) continue;
if (x[i].parentNode.className != ‘fileinputs’) continue;
x[i].className = ‘file hidden’;
var clone = fakeFileUpload.cloneNode(true);
x[i].parentNode.appendChild(clone);
x[i].relatedElement = clone.getElementsByTagName(‘input’)[0];
x[i].onchange = x[i].onmouseout = function () {
this.relatedElement.value = this.value;
}
}
}

Step 2 : Add the initiFileUploads function to the onload event of the body. You must have your file upload control to be styled, placed on the page. The javascript will handle the styling of the controls of type file input.

<body onload=”initFileUploads()”>
<div>
<input type=”file” />
</div>
</body>

Step 3 : Add the following CSS class to your css.

div.fileinputs {
position: relative;
}

div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}

input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}

Step 4 : Sit back and enjoy!!!

The output would look like something below:Images I used:

In case you want to get into the technical details of this styling, i strongly recommend you to visit Quirks Mode input styling.

Try to style the textboxes with one of these shared images, your file upload control will look cool.

By the way, It is browser independent, but javascript dependent.

Even if your javascript fails, your original upload control stays there. So don’t worry much about the functionality, in case javascript is disabled.

Setting screen width for Web sites to be viewed on iPhone


Fixing the width of the page in iPhone to a certain value is not direct. Safari is assuming an 800px width. The best solution to this is just by using the meta tags.

Check the snippet below:

To set the width to the screen width based on the mode he is in, be it landscape or potrait:

<meta name=”viewport” content=”width = device-width” />

To avoid scalability for the user:

<meta name=”viewport” content=”initial-scale=1, user-scalable=false” />

To fix the width to 320px always:

<meta name=”viewport” content=”width=320″>

I would suggest you go ahead with the first two always. In this case, the screen will get a fluid layout on mode change and also browser wont scale your page based on the change. Basically you will get the site as it is.

If you dont give the scalability false, then your site will scale like a picture.

Avoid Resizing of textarea in Safari


Safari has its own amazing styles with it. Most of them are pretty cool and makes the browser stand out. But some of them can affect the screen structure. One of them would be the resizing of the multiline textboxes or textarea in Safari. But the solution is quite simple css fix.

In the css for textarea, add the following section:

textarea{

resize : none;

}

Voila! This would solve the resizing issue of Safari.