Inserting DIV element before HTML comment - javascript

I am trying to insert div with iframe before HTML comment (it is the only unique element at this position).
So I have comment like: <!-- Comment --> and I would like to insert code like this before the comment:
<div id="test">
<noscript>
<iframe src="https://test.net" frameborder="0" scrolling="no" width="742" height="92"></iframe>
</noscript>
</div>
I tried methods like .append() and prepend(), but without success.
The result should be:
<div id="test">
<noscript>
<iframe src="https://test.net" frameborder="0" scrolling="no" width="742" height="92"></iframe>
</noscript>
</div>
<!-- Comment -->
Many thanks for any help!

Try using .filter() return element where nodeType is 8
var div = "<div>abc</div>";
var comment = $("body").contents().filter(function() {
return this.nodeType === 8
});
$(div).insertBefore(comment);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<!-- Comment -->
</body>

HTML comment has is a Node in DOM hierarchy and it's nodeType property is 8.
$(document).ready(function () {
var _html = '<div id="test">'
+ '<noscript>'
+ '<iframe src="https://test.net" frameborder="0" scrolling="no" width="742" height="92"></iframe>'
+ '</noscript>'
+ '</div>';
$('body').contents().each(function (i, elem) {
if (elem.nodeType == 8 && elem.data == " Comment ") {
$(_html).insertBefore(elem);
}
});
});
So traverse through all the comments find the one which you want and insert the HTML before that comment node.
Working fiddle

Related

Why do I get function undefined error from html doc?

I have written a small chat app.
At first, all the code was contained in the one HTML document, and worked ok.
After seperating the CSS, HTML, and JS into seperate files.
The function, register_popup, invoked from within the HTML doc, now gererates;
"ReferenceError: register_popup is not defined"
I can see that the script is loading and from the developer tools I see no issues, all 200's and 302's.
THE HTML
<div class="sidebar-name">
<a href="#" onclick="register_popup('user4',
'USER4');">
<img width="30" height="30" src="" />
<span>user4</span>
</a>
script can be seen loading...
Am using,
<script>
var url = "static/js/chatpop.js";
$.getScript(url);
</script>
Have alos tried changing the HTML:
<div class="sidebar-name">
<a href="javascript:register_popup('user3', 'USER3');">
<img width="30" height="30" src="" />
<span>user3</span>
</a>
</div>
but that does not work either. As mentioned, I get a 200 on loading the script, and when contained in the same page everything worked. Only after separating the code into respective files does the error happen,
The following can also be seen loading ok.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3 /jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Any help welcome ...
The Function
function register_popup(id, name)
{
for(var iii = 0; iii < popups.length; iii++)
{
//already registered. Bring it to front.
if(id == popups[iii])
{
Array.remove(popups, iii);
popups.unshift(id);
calculate_popups();
return;
}
}
var element = '<div class="popup-box chat-popup" id="'+ id +'">';
element = element + '<div class="popup-head">';
element = element + '<div class="popup-head-left">'+ name +'</div>';
element = element + '<div class="popup-head-right">✕</div>';
element = element + '<div style="clear: both"></div></\
div><div class="popup-messages">\
<form action="chatpop/post" id="chat-form" method="post">\
<textarea style="resize:none;"cols="41" rows="14" >\
</textarea><input type="submit" id="chat-form" value="Send">\
</input></form></div></div>';
document.getElementsByTagName("body")[0].innerHTML = document.getElementsByTagName("body")[0].innerHTML + element;
popups.unshift(id);
calculate_popups();
}
Here
<script>
var url = "static/js/chatpop.js";
$.getScript(url);
</script>
You're attempting to import the script in an asynchronous way and invoke some functions defined in the script immediately in your html (before the script is actually loaded).
You should either refer your script in the header in a blocking manner like:
<script src="static/js/chatpop.js" />
or changing your anchor tag once the script is fetched:
...
<a id="myAnchor">
...
$.getScript(url).done(function(){
$("#myAnchor").attr("href", register_popup('user3', 'USER3'))
});
}

please fix code append() and empty()

this is my code
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#stopmusic").click(function(){
$("#musicbox").empty();
});
$("#playmusic").click(function(){
if ($('#musicbox').visible( true )) {
$('#musicbox').append('');
}
else {
$('#musicbox').append('<iframe src="youtube_playlist" width="300px" height="60px" scrolling="no" />')
}
});
});
</script>
</head>
<body>
<center>
<button id="playmusic">Play</button>
<button id="stopmusic">Stop</button><br>
<div id="musicbox">
<iframe src="youtube_playlist" width="300px" height="60px" scrolling="no" />
</div>
</center>
</body>
</html>
The empty() is ok but the append() is not working. I want to remove the playlist from my website when the button "Stop" is clicked and show the playlist again when the button "Play" is clicked.
My previous code is not include the if/else so when I click "Play", the playlist appear another, another , another again but i want it appear 1 time and if i click "Stop", it's gone, if i click "Play", it's appear again.
Can anybody help? Please.
Instead of manipulating the inner HTML,
you could simply show / hide
$(document).ready(function(){
$("#stopmusic, #playmusic").click(function() {
$("#musicbox").toggle();
});
});
I'm not sure if your iframe contains playable video content (since you've used a pseudo src).
In the case you want to stop your iframe from playing:
$(function(){ // DOM ready shorthand
var $mBox = $("#musicbox");
var iframe = $("iframe")[0].outerHTML;
$("#stopmusic, #playmusic").click(function() {
$mBox.html( this.id==="stopmusic" ? "" : iframe );
});
});
Note that <center> tag is deprecated in HTML5.
jsBin demo
Isn't it $(SELECTOR).is(':visible') more appropriate ? There is no such a function $(SELECTOR).visible(true) in jQuery.
if ($('#musicbox').is(':visible') {
//do stuff
}
Try something like this:
$("#stopmusic").click(function(){
$("#musicbox").empty();
});
$("#playmusic").click(function(){
if ($('#musicbox iframe').length < 1) {
$('#musicbox').html('<iframe src="youtube_playlist" width="300px" height="60px" scrolling="no" />')
}
});
$("#stopmusic").click(function(){
$("#musicbox").empty();
});
$("#playmusic").click(function(){
if ($('#musicbox').html() == '') {
$('#musicbox').append('<iframe src="youtube_playlist" width="300px" height="60px" scrolling="no" />')
}
});
Here is the working example
$(document).ready(function() {
$("#stopmusic").click(function() {
$("#musicbox").empty();
});
$("#playmusic").click(function() {
$('#musicbox').html('<p>Test</p>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<center>
<button id="playmusic">Play</button>
<button id="stopmusic">Stop</button>
<br>
<div id="musicbox">
<p>Test</p>
</div>
</center>
Try this,
.......
$("#playmusic").click(function(){
if ($('#musicbox > iframe').length>0) {
$('#musicbox').append('');
}
else {
$('#musicbox').append('<iframe src="youtube_playlist" width="300px" height="60px" scrolling="no" />')
}
});
.........
Try with below updated script code
$(document).ready(function(){
$("#stopmusic").click(function(){
$("#musicbox").empty();
});
$("#playmusic").click(function(){
if ($('#musicbox iframe').is(':visible')) {
$('#musicbox').append('');
}
else {
$('#musicbox').append('<iframe width="560" height="315" src="https://www.youtube.com/embed/flMDiQib1J4?list=PL7W4kY6q3mxsiAgJNh1BlEWGI3PXBUqju" frameborder="0" allowfullscreen></iframe>');
}
});
});

How to use JQuery .find() properly when using multiple divs

I have an HTML page where users can create a newsitem. Each news item is displayed in a new div, with multiple divs inside to divide content into multiple columns, to hide some content etc. The following code is a stripped down version of 1 newsitem:
<div class="news-item clearfix" id="c-b504b780-06a8-49bc-ba04-84d1fbba1a94">
<h2>This is a title</h2>
<div class="news-image div-right">
<a class="img-gallery" href="Images/Dynamic/700x700/NewsItem/44951/example.png" rel="lightbox-This is a title"><img class="img-responsive clear" src="Images/Dynamic/200x200c/NewsItem/44951/example.png" /></a><br />
</div>
<div class="preview one-image">
<p>Text here</p>
</div>
<div class="full div-hide">
<p>Text here</p> <img src="Images/Dynamic/full/NewsItem/44951/example.png" class="img-responsive" />
</div>
As you can see, each newsitem has a generated code attached to it which is used to identify unique newsitems, the code is also used in my javascript:
<script type="text/javascript">
(function () {
var newsdiv = $('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94');
$('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94 > .full').find('img').wrap(function () { return "<a href='" + $(this).attr('src') + "'></a>"; });
})();
</script>
This script is supposed to put an anchor tag around the image found in my full div-hide class, however this is not working properly. I assume my jquery selector is not selecting the right div, but I do not know what it should be. Do you have an idea how I can wrap my anchor tags around images inside the class="full" div?
You have two issue in document ready function:
1) You have not added jquery selector($) in front of ready function.
2) You dont need to call the document ready function.
$(function () {
/*^^missing selector here*/
var newsdiv = $('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94');
$('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94 > .full').find('img').wrap(function () { return "<a href='" + $(this).attr('src') + "'></a>"; });
});
/*^^ () not required here*/
and to make it work for all the divs:
$('.news-item .full img').each(function(){
$(this).wrap("<a href='" + $(this).attr('src') + "'></a>");
});
Working Demo
Try this:
$('#c-b504b780-06a8-49bc-ba04-84d1fbba1a94 > .full img').each(function() {
$(this).wrap(function () { return "<a href='" + $(this).attr('src') + "'></a>"; });
});
$('div.full').find('img').each(function() {
// your code here ..
});

prependTo closest specified Parent div from an iframe

I'm trying to use JQuery from inside an iframe to .prependTo a .class div inside the Parent.
This has multiples of the same .class. **EDIT And iframes
Everything is on the same domain.
So, from inside the Main document:
<div class="NewPHOTOS">
**<!--PUT ME HERE!-->**
<div class="LinePhoto">
<a href="images/518279f07efd5.gif" target="_blank">
<img src="images/thumb_518279f07efd5.gif" width="50" height="50">
</a>
</div>
<iframe class="uploadLineID_55" width="800px" height="25px" src="../../uploads/uploadiframe.php" scrolling="no" seamless></iframe>
</div>
Script inside the iframe:
$(document).on("click", '#TEST', function() {
appendImagetoParent();
});
function appendImagetoParent() {
var data = '<div class="LinePhoto"><img src="images/thumb_TEST.gif" width="50" height="50"></div>';
$(".NewPHOTOS", window.parent.document).each(function() { $(data).prependTo($(".NewPHOTOS"));
});
/* $(data).prependTo( $(".NewPHOTOS", window.parent.document) ); This prepends to Every .NewPHOTOS */}
I've been running around in circles and googleing for hours now. I can't figure this out.
What am I doing wrong here?
EDIT
I used, works great!
$(parent.document).find('.' + frameElement.className )
.closest('.NewPHOTOS')
.prepend( data );
$(document).on("click", '#TEST', appendImagetoParent);
function appendImagetoParent() {
var div = $('<div />', {'class':'linePhoto'}),
a = $('<a />', {href:'images/TEST.gif', target:'_blank'}),
img = $('<img />', {src:'images/thumb_TEST.gif', width:'50', height:'50'});
$(parent.document).find('.' + frameElement.className )
.closest('.NewPHOTOS')
.prepend( div.append( a.append(img) ) );
}
Get the class of the containing iFrame with frameElement.className, and use that class to find the right iFrame in the parent document, then find the closest .NewPHOTOS element, and prepend the content, created in a more jQuery'ish way.

Showing/Hiding Divs with the same class name - Javascript

I am trying to replicate something similar to what the Google Javascript from the Ground up Accomplishes
http://code.google.com/edu/submissions/html-css-javascript/#javascript
Basically have multiple div classes with the same name and show/hide those based on adding removing classes to the original class name.
Heres my markup
<div class="vidItem" id="vidItem">
<div class="vidTitle">
<h2></h2>
</div>
<div class="vidContain" id="vidContain">
<iframe class="testtt" width="560" height="315" src="-----" frameborder="0" allowfullscreen> </iframe>
</div>
</div>
<div class="vidItem" id="vidItem">
<div class="vidTitle">
<h2></h2>
</div>
<div class="vidContain" id="vidContain">
<iframe width="560" height="315" src="----" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Heres my javascript
var toggleExpando = function() {
var expando = this.parentNode;
if (hasClass(expando, 'hide')) {
removeClass(expando, 'hide');
addClass(expando, 'show');
} else {
removeClass(expando, 'show');
addClass(expando, 'hide');
}
};
var expandos = getElementsByClass('vidContain');
for (var i=0; i < expandos.length; i++) {
addClass(expandos[i], 'hide');
var expandoTitle = document.getElementById('vidItem');
addEventSimple(expandoTitle, 'click', toggleExpando);
}
}
Onload both of the divs seem to set their classes to hide just fine but when I click on the top one everything disappears but when I click on the bottom one nothing happens. I am assuming there is a problem with my for loop and also where it says (expando = this.parentNode). I have no idea where to go from here.
Any help or ideas would be appreciated.
Javascript assumes that there is only one element with specific id (and this is what standard say). So when you say..
var expandoTitle = document.getElementById('vidItem');
here the variable contains only first item with id vidItem and attaches event to that element only.
This can be corrected by using class names instead of id.
jQuery might be a good option for this. ID needs to be unique but classes don't, so you can query for all element with a class name in the same way you would with id's in straight javascript by using jQuery. Not sure on what you want the initial state to be so i'm hiding all on inital load. Something along the lines of below is what i mean. (code is untested. place it in the html head)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.vidItem').addClass('hide');
$('.vidItem').click(function(){
$('.vidItem').addClass('hide');
$(this).removeClass('hide');
$(this).addClass('show');
});
});
</script>
If you want to make it look nice with transition effects you can use some of the build in jQuery ones such as:
$('.vidItem').fadeOut();
$(this).fadeIn();
or
$('.vidItem').slideUp();
$(this).slideDown();

Categories