StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POProblems using .replaceWith(); with youtube iframe
primarykey
Id
8162633
data
AcceptedAnswerId
0
AnswerCount
1
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2011-11-17T05:40:20.697
FavoriteCount
0
LastActivityDate
2011-11-17T07:32:08.017
LastEditDate
2011-11-17T05:52:14.150
LastEditorUserId
1051065
OwnerUserId
1051065
ParentId
0
PostTypeId
1
Score
0
ViewCount
830
LastEditorDisplayName
text
Body
I made a jQuery slider that moves divs around to make the sliding effect. Links are like this: <pre><code><ul id="navigation"> <li class="element"><a href="#item1" class="panel , current" id="no"></a></li> <li class="element"><a href="#item2" class="panel" id="no"></a></li> <li class="element"><a href="#item3" class="panel" id="no"></a></li> <li class="element"><a href="#item4" class="panel" id="yes"></a></li> <li class="element"><a href="#item5" class="panel" id="no"></a></li> </ul> </code></pre> I have a YouTube iframe in the #item4 div and to stop the audio from playing when the user navigates I am using .remove(); eg. <pre><code>$('ul#navigation li.element a#no').click(function () { $('#video').remove(); }); </code></pre> This works fine on its own. The video loads and is playable then if any of the #no links are clicked the divs slide and the video stops playing. I am trying to add the video back in when the #yes link is clicked using: <pre><code>$('ul#navigation li.element a#yes').click(function () { $('#video').replaceWith('<iframe id="video" title="Showreel" width="780" height="480" src="http://www.youtube.com/embed/XR3xr8PAuJY?rel=0" frameborder="0" allowfullscreen></iframe>'); }); </code></pre> Which doesn't work and stops the .remove from working as well. I assume it is because of all the " 's that are flying everywhere within the iframe. How can I get around this problem? I tried using .show and .hide plus .css("display" "none") but the audio keeps playing. Is there are a better way than .remove and .replaceWith to do this? Thanks people EDIT I just realised I could probably do away with the .remove and just use .replaceWith to insert the iframe when the #yes link is clicked but I still have the syntax problems. Could the problem be because I am trying to replace #video with an html string containing the same id? EDIT 2 I can't figure out the markdown for comments. I just tried: <pre><code>$('#videobox').append('<iframe id="video" title="Showreel" width="780" height="480" src="http://www.youtube.com/embed/XR3xr8PAuJY?rel=0" frameborder="0" allowfullscreen></iframe>'); </code></pre> where #videobox is the div that the iframe was sitting in before it was removed. This still breaks the .remove()
Tags
<jquery>
Title
Problems using .replaceWith(); with youtube iframe
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USAmpersand
UserOwnerUserId
1. USAmpersand
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 POProblems using .replaceWith(); with youtube iframe
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTApproveEditSuggestion
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.