Only load link from <iframe> when mouse is hovering over - javascript

I use the following bit of code for a template I append in my index.html. The issue is that I have thousands of <td>'s that gets appended in a loop. And I have a feeling that when I append all of this it loads the http://en.wikipedia.org for all the <td>'s before actually hovering over the link. This is obviously not a usable solution as it takes hours, if not days, to load up the page. I had to kill the site when I tried. Is there a way to set <iframe> so it ONLY loads the page when hovering over it?
template += " <td>";
template += "<a target='_blank' href="+entry['insta_url']+" style='display:block;'>";
template += entry['id'];
template += "</a>";
template += "<div class='box'><iframe src='http://en.wikipedia.org/' width = '500px' height = '500px'></iframe></div>";
template += "</td>";

You could omit the <iframe>'s src attribute, then capture, via JavaScript, the mouseover event, and set the src when the event fires.

Related

JS eventListener click disappearing

I created simple fidlle
var cnt = 1;
function add() {
var root = document.getElementById('root')
root.innerHTML += '<br /><a id= "a_' +cnt + '" href="#">click</a>'
var a = document.getElementById("a_"+cnt)
a.addEventListener('click', function(event) {
alert('click:a_'+cnt)
})
cnt++
}
When Add button is clicked once new link is added and after clicking on this link alert appears.
When more links are added with Add button only the last link works(others does not have click event listener according to devel tools).
Why does only the last link work and how can I make all links working?
Because you are reinserting the anchor tags in the html.
The question is similar to Appending HTML string to the DOM.
You can use
root.insertAdjacentHTML( 'beforeend', '<br /><a id= "a_' +cnt + '" href="#">click</a>');
instead of
root.innerHTML += '<br /><a id= "a_' +cnt + '" href="#">click</a>'
Working fiddle https://jsfiddle.net/0nm4uLvd/
Just to improve answer, here is another reference why event listeners are removed when dom element is removed => If a DOM Element is removed, are its listeners also removed from memory?
thanks to these guys :)
You're modifying the innerHTML of your root element. This will cause the complete 'root' to be destroyed en recreated, so only the new event will work.
See Manipulating innerHTML removes the event handler of a child element?.
You can set a class to your links: class="some-class".
Then you can use jquery to listen to click event on elements of this class.
$(document).on('click', '.some-class', function(event) {
alert('click:'+$(this).attr('id'));
});
Runnable example https://jsfiddle.net/2d99hq1h/1/
Check in the console your variable cnt.
You did not post the whole context where the function add is called, but I have a strong guess that this variable stays always 1.
And write a semicolon after your cnt++
For the possible benefit of anyone who finds this page many years after the initial question was asked:
The culprit that destroys existing event listeners seems to be
.innerHTML +=
so use a different technique.
For example:
HTML Insertion Technique 1 (which inserts the HTML but also inadvertently seems to erase any existing event listeners on other unrelated elements, so is NOT recommended):
document.body.innerHTML += '<div id="something"</div>';
Technique 2 (which works and does not affect existing event listeners):
document.body.insertAdjacentHTML( 'beforeend','<div id="something"</div>');
...or any other way (such as with append and so on).

How to iterate through all the bootstrap tabs and print contents on a button click

How to iterate through all the bootstrap tabs and print contents (not only the one for the active tag , but the inactive ones too) on click of a Print button present in any of the tabs .
Each tab has dynamically inserted content. Tried some suggested css changes I found in related SO solutions. Those did not work for me.
onclick function for my print button is here
function printMe() {
var theWork = window.open('', 'PrintWindow');
var tabs_html = "<html><head><title>Print</title>";
tabs_html += "<style>body { padding: 15px; }</style></head>";
$(".tabs").each(function() {
$(this).find(".nav-tabs li").each(function(index, element) {
tabs_html += "<h2>" + $(this).text() + "</h2><br/>";
tabs_html += $(".tab-content .tab-pane").eq(index).html() + "<br/><br/>";
});
$(this).after(tabs_html + "</body></html>");
});
theWork.document.open();
theWork.document.write(tabs_html);
theWork.document.close();
theWork.print();
}
Fiddle
There are two issues with your code.
You are appending the closing body and html tags inside the each loop.
You are selecting the elements with the class tabs. But there seems to be no such element in the provided DOM/ Fiddle.
I have fixed the above two issues by 1. Moving the closing body and html tags out of the loop, and 2. Replacing the .class selector with an #id selector, and voila! it works.
DEMO

Bootstrap tooltips and popover for JS dynamic entries

Bootstrap 3 tooltips and popovers work perfectly within html code, but it seems it does not apply to dynamically built entries. For example :
urlline += '<a href="' + this + '" target="_blank" ';
urlline += 'data-content="' + ircline + '" ';
urlline += 'data-placement="bottom" ';
urlline += 'data-container="body" ';
urlline += 'data-toggle="popover">';
urlline += this + '</a>';
In that scenario, a hover on the created links won't show any popover. Same result with tooltips.
I have popover initialized with $('[data-toggle="popover"]').popover({trigger: 'hover'}); and it works for existing HTML, just not for dynamically created entries.
I'm no JS expert so I might be missing something, any hint?
Are you inserting urlline into DOM using jQuery, something like this $('#somelementID').html(urlline); ?
If yes, then initialize bootstrap popover/tooltip after inserting that element into DOM using jquery, using $('a#id').popover({trigger: 'hover'});
try use a function in js with the popover's properties even in your content you can use a ajax o put a html code or finally parameters as you prefer (this work for me in datatable):
function popovers(object, title, content, placement){
$(objet).popover({
html:true,
title: title,
content: content,
placement: placement
})
}

JQuery: wrapping variable's contents

I have a variable that contains a bunch of HTML that I retrieve from a HTML5 SQL database.
I can .append() this to an element in the DOM and it appears fine. But I want to .wrap() the HTML contents first, thus I have written:
content = $(content).wrap(function() {
return '<div class="event_holder" />';
});
$('#mydiv').append(content);
However, I get the error
Syntax error, unrecognized expression: ~HTML contents of variable~
I have also tried:
content = $(content).wrap('<div class="event_holder" />');
Would anyone know whats going on here and how I can correctly wrap this?
EDIT: the contents of 'content' is:
<input id="e1coords" class="coords" name="e1coords" type="hidden" value="-27.482359,153.024725">
The problem could be content = $(content).wrap('<div class="event_holder" />'); still returns the inner content not the wrapped element, you need to append the parent of the content.
Try
content = $(content).wrap('<div class="event_holder" />').parent();
Demo: Fiddle
i don't know why are you using callback of wrap() when you can do it directly
content = $(content).wrap('<div class="event_holder" />');
and it will be better if you can show us what actually the content contents..
updated
try this
content = $('#e1coords').wrap('<div class="event_holder" />');
OR
var content = $('#e1coords');
content = content.wrap('<div class="event_holder" />');
I found out the because the content variable was actually retrieved from a (html5) database it was not part of the DOM, thus JQuery was having issues with it.
I did the wrap manually and it worked
content = '<div class="event_holder">' + content + '</div>';

Appended h1 tag not recognized

I have this page where I append my h1-tag with jquery like:
$('.name').append('<h1 style="margin-bottom=20px;">' + name +'</h1>');
The h1 tag, and the content of the tag, displays nicely, but when I test my page in various seo tools ( for example this one: http://www.seositecheckup.com/) I get the message that the page has no h1 tag.
Which of course is not so good from a seo point of view. Does anyonme recognize this problem? On a similar note: On the homepage I print out a list with with a javascript for loop and append the listing html and content:
$('#list').append("<div class='point'><a href='" + str + "&id=" + id + "' onmouseover='infoShow(" + i + ")' onmouseout='infoClose(" + i + ")'><H3>" + titel +
"</H3></a><div class='address'>" + name + "</div>" + trivsel + "<div class='star"+i+"'></div></div></a>");
I looks fine on the page, but when I look at googles cahced version of the site, the listing is not there and the page looks blank.
Web crawlers don't execute your JavaScript, so the <h1> tag isn't created. If you want this tag to be visible to web crawlers, you need to generate it with your serverside language.
What are you expecting? The "different seo tools" like the one you linked does not execute any javascript (usually). They work with the original state of your HTML.

Categories