Perform javascript on html content from js file

Question

This is a big headache.

I have a simple js file consisting of nothing but document.write() blocks of html content, that I need to perform jquery on.

To put things in perspective, the js file, included like this:

<script language="JavaScript" src="http://external-java-file.js"/>

dumps news in a batch of div's. the trouble is, I need to perform javascript on each seperate article-div (to include it into a custom javascript "scroller". is there anyway for me to firstly "hide" the entire block of news, and then per-div add it it my scroller. Basically I have this from the js file:

<div class="newsContainer">
<div class="newsArticle">bla bla bla</div>
<div class="newsArticle">bla bla bla</div>
<div class="newsArticle">bla bla bla</div>
</div>

Since it's all coming from this stinking external js file through document.write, I can't access it with a seperate code block like this:

<script>
$(document).onload(function(){
$("div.newsContainer").css("display","none");
});
</script>

I'm pretty sure I'm at the end of the road, but I'd like to see if any smart minds have genious solution

is there any change if we use $(document).ready() instead of onload — Murtaza
– Murtaza, Commented Dec 12, 2011 at 10:23

Russell · Accepted Answer · 2011-12-12 10:22:22Z

2

You want to use

$(document).ready(function() {
// .. put code here.
});

This will make sure the page and other JS has loaded first.

Firebug console in Firefox is your friend, as you will be able to test your jQuery on the page.

answered Dec 12, 2011 at 10:22

Russell

17.8k24 gold badges84 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

El Ronnoco Over a year ago

You can also use $(function() { //..code }); which is the jQuery shorthand equivalent.

Russell Over a year ago

I prefer to use the above, makes it clearer to the next person to support it that it will only be executed when the DOM has loaded. Comes down to preference I guess. :)

El Ronnoco Over a year ago

that's fair enough, just thought I'd include it for lazy people (like me) :)

Jason · Accepted Answer · 2011-12-12 10:25:01Z

1

Try this:

HTML

<div id="news">
    <script language="JavaScript" src="http://external-java-file.js"/>
</div>

JavaScript

$(function() {
    $('#news .newsArticle').hide();
});

If the script is using document.write(), then you will be able to access it's container, #news, once the page has loaded and edit it that way.

answered Dec 12, 2011 at 10:25

Jason

3,50328 silver badges32 bronze badges

Comments

alessioalex · Accepted Answer · 2011-12-12 10:25:14Z

0

Make a css style to hide the newsContainer initially:

.newsContainer {
  display: none;
}

Then add your other stuff in the document ready function of jQuery:

$(function() {
  // do your stuff here
});

If you don't know when that external script does it's job with the news divs, make use of JavaScript's setTimeout. Also remember to set .newsContainer to visible after you're done.

answered Dec 12, 2011 at 10:25

alessioalex

63.8k16 gold badges158 silver badges123 bronze badges

Collectives™ on Stack Overflow

Perform javascript on html content from js file

3 Answers 3

3 Comments

HTML

JavaScript

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

HTML

JavaScript

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related