Open all links in a DIV in a new window + widget critique

[mariahlullaby]

Do any of you know if there is a way to make all the links contained within a specific div open in a new window?

I have a widget I made (I am not a developer by any means, so I realize it's a bit shoddy....) that has an RSS feed from another site displayed on it (via JSS). I want the links from that feed to open in a new browser, as they otherwise open within the widget itself which basically is the old problem of being locked inside a frame.

The widget is available here:http://w3promotions.com/blog/

Try click on "news" and then clicking on one of the links -- see what I mean? But since it's a feed, I can't attribute target_blank to them. I also don't want a blanket "open ALL LINKS in new window" for the widget, as I need the links along the bottom to open in the widget.

Lastly, any visual tips for the widget?

Thanks!!

 

[angelwatt]

You can use a base target for the page, but it's a deprecated tag, and not 100% it would work.

Being inside an iframe makes it quite hard, and possibly impossible. I know some JavaScript that can add some attributes to links to do this, but it wouldn't effect any links inside an iframe because that code is elsewhere.

 

[mariahlullaby]

You can use a base target for the page, but it's a deprecated tag, and not 100% it would work.

Being inside an iframe makes it quite hard, and possibly impossible. I know some JavaScript that can add some attributes to links to do this, but it wouldn't effect any links inside an iframe because that code is elsewhere.

Thank you! It's not an iFrame, though, it's a div with an overflow:scroll, does that help?

 

[angelwatt]

Thank you! It's not an iFrame, though, it's a div with an overflow:scroll, does that help?

Hmm, guess I wasn't looking at the right part of the code. Then yes, that does change things. Here's the JavaScript to do it, at least one way.

function Init()
{
  // Grab the appropriate div
  theDiv = document.getElementById('theDiv');
  // Grab all of the links inside the div
  links = theDiv.getElementsByTagName('a');
  // Loop through those links and attach the target attribute
  for (var i=0, len=links.length; i < len; i++) {
    // the _blank will make the link open in new window
    links[i].setAttribute('target', '_blank');
  }
}
window.onload = Init;

As a visual design tip: I found the orange text in the content hard to read. Not enough contrast for me.

 

[mariahlullaby]

Hmm, guess I wasn't looking at the right part of the code. Then yes, that does change things. Here's the JavaScript to do it, at least one way.

function Init()
{
  // Grab the appropriate div
  theDiv = document.getElementById('theDiv');
  // Grab all of the links inside the div
  links = theDiv.getElementsByTagName('a');
  // Loop through those links and attach the target attribute
  for (var i=0, len=links.length; i < len; i++) {
    // the _blank will make the link open in new window
    links[i].setAttribute('target', '_blank');
  }
}
window.onload = Init;

As a visual design tip: I found the orange text in the content hard to read. Not enough contrast for me.

You rock my socks. Thank you so much

Regarding the orange, do you mean the graphics down the side of the widget (TRL, BET, etc.) or the text itself (like on the news reader)?

 

[angelwatt]

You rock my socks. Thank you so much

Regarding the orange, do you mean the graphics down the side of the widget (TRL, BET, etc.) or the text itself (like on the news reader)?

Cool, glad it works.

As for the color; The links, not the widget. For instance the 'like,' 'micro site,' and 'clearspring' links near the top of the content (from the page you linked). Part of it depends on my angle to my laptop screen, but doesn't take much of angle change for it to get hard to read. The headers using the same orange works OK because it's bold and larger so compensates