Change Rel External to Target Blank using Prototype
- Simple Hide and Show with Prototype
- Event Observe and Event Listeners with Prototype
- JavaScript Script.aculo.us Fade with a Timer
- Evolving Styles: Add, Change Remove Classes with Prototype
- First, Last, Active and Only List Styles With Prototype
- Alternating Colors Using Prototype
- Limit Characters in a Textarea with Prototype
- Zip Code, Phone Number and Replacing Empty Fields with Really Easy Validation
- Change Rel External to Target Blank using Prototype
- Open Links to a Different Site in a New Window with Prototype
When coding strict XHTML sites it's important to not use the target attribute in your anchors. <a href="http://www.example.com">example</a> validates but <a href="http://www.example.com" target="_blank">example</a> will not. I know it's better for my experience if windows don't open in new windows but clients always want it.
There's been a popular trend to use JavaScript to add target="_blank" to anchors with rel="external". So in the name of making everything in my site Prototype based I worked out a script to do just that.
JavaScript
<script type="text/javascript">
Event.observe(window, 'load', function() {
$$('a[rel="external"]').each(function(link){
if(link.readAttribute('href') != '' && link.readAttribute('href') != '#'){
link.writeAttribute('target','_blank');
}
});
});
</script>
It's nice, quick and easy. By using Event.observe it will automatically apply the changes when the page is done loading, no matter if the script is in the header, in the body or in an external included JavaScript file.
Popularity: 38% [?]
the newest discoveries, stories and shared tips!Come on, all the cool kids are doing it ;)
