CODEWITHSUNDEEP
javascriptjqueryhtml
Heinzen
Heinzen

Reputation: 183

jQuery - Append embed stream

I am trying to append an embed livestream using jQuery's append method doing the following:

function whatever() {
    var $insaneLivestream = $('<iframe class="livestream" src="http://www.twitch.tv/gamesdonequick/embed" frameborder="0" scrolling="no" height="378" width="620"></iframe><a href="http://www.twitch.tv/gamesdonequick?tt_medium=live_embed&tt_content=text_link" style="padding:2px 0px 4px; display:block; width:345px; font-weight:normal; font-size:10px;text-decoration:underline;"></a><iframe class="chat" src="http://www.twitch.tv/gamesdonequick/chat?popout=" frameborder="0" scrolling="no" height="600" width="350"></iframe>');
    $(".embedbox").append($insaneLivestream);   
}

Althought I thought this was supposed to work, the element seems to be created but not appended to embedbox at all. If I explicitly add the embed's DOM to the document it works like a charm.

Edit: also tried

$(document).ready(funtion() {
    $(".embedbox").html('<iframe class="livestream" src="http://www.twitch.tv/gamesdonequick/embed" frameborder="0" scrolling="no" height="378" width="620"></iframe><a href="http://www.twitch.tv/gamesdonequick?tt_medium=live_embed&tt_content=text_link" style="padding:2px 0px 4px; display:block; width:345px; font-weight:normal; font-size:10px;text-decoration:underline;"></a><iframe class="chat" src="http://www.twitch.tv/gamesdonequick/chat?popout=" frameborder="0" scrolling="no" height="600" width="350"></iframe>')
});

and still doesn't work.

Upvotes: 1

Views: 906

Answers (1)

chiliNUT
chiliNUT

Reputation: 19573

The key seems to be not the change to html() instead of append(), but just the ready. whatever() must have been getting called before the DOM was loaded. Also, were you actually calling whatever(), or just defining it?

I would venture that this would also work:

function whatever() {
    var $insaneLivestream = $('<iframe class="livestream" src="http://www.twitch.tv/gamesdonequick/embed" frameborder="0" scrolling="no" height="378" width="620"></iframe><a href="http://www.twitch.tv/gamesdonequick?tt_medium=live_embed&tt_content=text_link" style="padding:2px 0px 4px; display:block; width:345px; font-weight:normal; font-size:10px;text-decoration:underline;"></a><iframe class="chat" src="http://www.twitch.tv/gamesdonequick/chat?popout=" frameborder="0" scrolling="no" height="600" width="350"></iframe>');
    $(".embedbox").append($insaneLivestream);   
}

$(document).ready(function () {
    whatever();
});

Additionally, $(document).append(//...) is bad syntax and will error out, see Why $(document).append() doesn't work in jQuery 1.9.1?

I've never tried to append to document, but I didn't know it didn't work, so that was interesting to learn when researching this question.

Upvotes: 1

Related Questions