There are two things I hate most in web development; Javascript and Internet Explorer. A stupid amount of my time is wasted trying to find hacks for Internet Explorer. I spent a month trying to fix this annoying little problem. IE for some reason, would not allow anchor links to work in tabs using jQuery after the database has been updated. It was a tiny little problem that I couldnt solve, then I found this one line solution.
<a onClick=”document.getElementById(‘linkName’).scrollIntoView();” style=”cursor: pointer;”>Link Name</a>
This scrolls down to your anchor link be it in Firefox or Internet Explorer. The style above gives it the right cursor so it looks like a hyper-link.
JavaScript is handy for making a load of impressive functions but when you are working on a large project it can make your website unnecessarily slow. Take Facebook for example, it takes far too long to load a page and it has a lot of annoying JavaScript features that consumers just do not want. JavaScript also has security issues, and some colleagues suspect that JavaScript may have been invented by the devil(joking).
Instead try to find CSS and XHTML solutions when you can.
This is one simple example. There a ton of JavaScript of tutorials out there that show you how to make boxes pop up when you hover some declared element. These can easily customised, but ask yourself, does it really need to that complicate? The below example leaves a simple help question mark for users to hover over, and it pops up a simple title text to display information.
It is easy and loads quickly.
<a href="#" title="Simply add any text you want to make a simple pop up help box"><b>(?)</b></a>
The code bellow greys out, thus disables the second and third checked box options if the first option is ticked. pretty simple and straightforward.
<script type=”text/javascript”>
window.onload = function() {
document.getElementById(“chkbx1”).onclick = disableThem;
}
function disableThem(){
if (document.getElementById(“chkbx1”).checked) {
document.getElementById(“chkbx2”).disabled = true;
document.getElementById(“chkbx3”).disabled = true;
}
else {
document.getElementById(“chkbx2”).disabled = false;
document.getElementById(“chkbx3”).disabled = false;
}
}
</script>
<form>
<input type=”checkbox” id=”chkbx1”>Option 1<br />
<input type=”checkbox” id=”chkbx2”>Option 2<br />
<input type=”checkbox” id=”chkbx3”>Option 3<br />
</form>
However if you want the default option that the first box is ticked and the the other two are grey-out.
<form>
<input type=”checkbox” id=”chkbx1” checked>Option 1<br />
<input type=”checkbox” id=”chkbx2” disabled>Option 2<br />
<option value=”“>Option 2</option>
<input type=”checkbox” id=”chkbx3” disabled>Option 3<br />
</form>
