A couple of useful snippets for web developing. The list will grow over the years.
Jumping to anchors with JS
If we want to jump to an anchor dynamically (using javascript):
/* dont use this!!! */
//location.href = location.href + '#searchbox';
/* and not this either: */
//location.href = '#searchbox';
/* this is the correct way to go */
window.location.hash = "searchbox";This has still some flaws if you click the anchor multiple times.
This worked for me:
var destinationLink = document.getElementById('targetId');
var destx = destinationLink.offsetLeft;
var desty = destinationLink.offsetTop;
scrollTo(destx, desty);So the above method should be used to set the hash of the page. The below one for jumping to anchors.
Prevent Right Click
This should be used wisely and only where it makes sense. It it neither waterproof nor convenient in most cases. Simply by displaying the source code the content can still be accessed (Shortcuts like STRG+U).
<body oncontextmenu="return false">
...
</body>I like the browser solution more than the js solutions out there 🙂
Get HTML5 ready
<input name="url" placeholder="http://"/>This is only one example of many. The Google Chrome browser already understands it as well as some beta browsers like FF4 etc.
Combine this with a javascript/jquery fallback and you have a nice (placeholder) functionality that will some day run natively in all user browsers.
And some more snippets from different external sources:
Forcing long strings to wrap
biostall.com/forcing-long-strings-and-urls-to-wrap-with-css
Do you really think there will EVER be a day there’s only browsers that support HTML5? We’re already dead by then.
Anyways, a great blog you have. I’ve been following you a couple of months.
Cheers
maybe not completely – but similar to the shitty IE6 problem it might only effect a minority. and thats where the fallbacks will have to be used 🙂
Hi Mark,
I think the "Prevent Right Click" method is senseless.
Most people use it to prevent "Picture Piracy", but if you use Firefox (for example), you can simply "Save as…" nearly every embedded media.
But the other snippets are pretty nice 😉