Snap Shot widget for dynamic DOM nodes - javascript

I'm using Snap.com service to create snapshots to Wikipedia links on my web page. It works fine with the links in the page when page is loaded. But it doesn't work when new links are created and inserted into the web page via Javascript.
The Snap.com script is called once when the page is loaded:
<html>
<body>
...
<script type="text/javascript" src="http://shots.snap.com/ss/my-id/snap_shots.js"></script>
</body>
</html>
Is there a way to reacivate their script after new DOM nodes are created in the document? Or some other way to solve this issue?

I've found the solution by inspecting Snap.com sources.
The following code forces Snap.com to reprocess the page:
SNAP_COM.shot_main_js_called = false;
SNAP_COM.shot_main_js();

Related

HTML & JS: How to subscribe to events from an embedded webpage?

I'm experimenting with building modular stand-alone (serverless) websites that can be hosted on IPFS. One of the techniques I'm using to make the websites modular is by splitting single webpages across multiple HTML files and combining them by embedding them into each other,
for example:
Webpage files: Home.html, Sidebar.html
Code in Home.html:
<html>
<head></head>
<body>
<!some code>
<object id="Sidebar" data="Sidebar.html"></object>
<!some more code>
</body>
</html>
Here is an image of what the website looks like. Note the scroll-bar that shows the the sidebar is embedded.
Website-with-Embedded-Sidebar :
I want to make that when elements of text in the sidebar (in the embedded Sidebar.html) are clicked, the JavaScript in the main page (Home.html) can react,
i.e. I want my JavaScript in Home.html to subscribe to events in the embedded Sidebar,html.
Any ideas on how best to achieve this?
I found a workaround solution that can in some cases be a suitable alternative is to call functions in the parent html file from the context of the embedded document. So instead of subscribing to click events in the embedded document from the parent document, I do it the other way round: handling the events in the embedded document and from there calling functions in the parent document.
Here is some working code:
Embedded HTML document (in a file called embedded_file.html):
<body>
<div onclick="ClickHandler(this)">Test</div>
<script>
var ClickHandler = function(sender) {
parent.OnEmbeddedDocClick(sender);
};
</script>
</body>
Main HTML page:
<body>
<object data="./embedded_file.html"></object>
<script>
var OnEmbeddedDocClick = function(sender) {
window.alert("Text in embedded file got clicked.");
};
</script>
</body>
Note that to test this, most browsers require these two files to be hosted on some form of web server instead of being stored on the local machine's filesystem, otherwise the browser's same-origin policy blocks the embedded file from accessing the javascript in the parent html file.
Hosting the files on IPFS and testing it from there was enough to evade this issue.

jQuery selector not working on iframe contents

This part of a script works fine on a normal page:
<script>
$(function() {
$(".counter").countimator();
});
</script>
But when that same page is loaded in an iframe on a page on another domain, it doesn't work.
Is there a way to get this selector/code work when the page is loaded within an iframe? I want to give people a iframe code that they can use on their personal websites to get the content of my page on their website.
Edit
I published the basic code on http://joomlaground.com/iframe_test/
The http://joomlaground.com/iframe_test/clock.php runs standalone like it should.
Then I created a very basic iframe page iframe.php which iframe the clock.php. However then the clock.php is not counting any more.
How can I fix this?
If '.counter' element is outside of the iframe you're running the internal iframe script has no access to this element as the current document and iframe are separate documents. If you'll have any questions don't hesitate to ask below.
When you move this script in an iframe then it means you are running your script in a new window.
Now in new window you are trying to access some library function:
$(".counter").countimator();
That can only be done if you have that library included in the source of that iframe.

jquery "listview" and charts

I have some troubles with display charts (jquery Charts) into a web.
I have two pages (1.html and 2.html). The first contain a listview that links with the second page. The 2.html displays the chart. Here is the problem: When page 2 is launched through page 1, the chart doesn't appear!! But if I reload the page 2.. so the chart appears!
If I work with an only page using "href=#page" references the chart works fine and it's displayed, but my intention is to have different html files, one of them with the listview and the other one with the chart. Is it possible?
I have tested many types of jquery charts and all of them had the same behavior.
Any idea?
thanks for all,
Best Regards.
Here the files:
1.html ----
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
</head>
<body>
<div data-demo-html="true">
<ul data-role="listview" data-inset="true">
<li>Chart</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js">/script>
</body>
2.html with the code into the reference (jqwidgets - chart_bar)
To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.
First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM.
The most realistic solution would be to move all of your javascript into the original first HTML. Collect everything and put it inside a single js file, into a HEAD. Initialize it after jQuery Mobile has been loaded. I would also use that same index.js file and initialize it inside a HEAD of every possible other page.
Now you can ask me WHY?
Phonegap like jQuery Mobile is buggy, and sooner or later there's going to be an error and your app will fail (including loaded DOM) if your every js content is inside a single HTML file. DOM could be erased and Phonegap will refresh your current page. If that page don't have javascript that it will not work until it is restarted.
I've listed other ways to fix this problem (with examples) in my answer here: Why I have to put all the script to index.html in jquery mobile.

Using Processing.js across multiple pages

I have a problem using processing.js across multiple pages.
I have a master page (test.html) which loads, via jquery, all pages into a div named "contentarea". This is just an exerpt of "test.html", just so you get the idea:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/processing.js"></script>
<script>
$(document).ready(function(){$("#contentarea").load("page1.html");
etc...
</script>
<div id="contentarea">...</div>
As you can see the Test.html contains the processing reference "src="js/processing.js"" and will intercept any static "canvas data-processing-sources" on its own page ("test.html" - only).
When page1.html is loaded into test.html, processing.js does not initialise the canvas. But when viewing the page (page1.html) on its own, processing.js intercepts "canvas data-processing-sources" and loads fine.
Here is a working example of the problem:
EXAMPLE
http://78revelationscom.ipage.com/site/test/test.html
QUESTION:
How can I get processing.js to initialise (or re-initialise, or refresh, or load) a canvas that is dynamically loaded?
Thank you in advance!
This might still be a problem since it won't be solved in the library until the next version: For now, the solution is to not rely on Processing auto-loading, since that only happens on DOMContentLoaded events. Instead, when you change page content you can grab the canvas's data-processing-sources attribute and create a new Processing instance from the indicated source code:
function loadSketchOnContentSwap() {
var canvas = /* get the relevant canvas however you want */
var sources = canvas.getAttribute("data-processing-sources").split(/\s+/);
Processing.loadSketchFromSources(canvas, sources);
}

How to manipulate a DOM tree before it is displayed on screen ? ( javascript, jquery, ...)

The problem is simple, but can't figure out a solution. Many thanks for those who helps.
I want to modify a web page (DOM tree) before it is displayed on screen.
I understand that the DOM tree is fully loaded in memory before being processed.
Do any of you knows a way to process this fully loaded DOM tree while it is on memory
and then let it be displayed with its new structure ?
The reason i want to do that, is because i'm working on an addon that is adding content to an existing web site.
added-> Just need to mention that the existing web site is not mine, so i can't use php to modify the website content is not mine.
But right now, the web site is displayed without the addon content
and you see the content coming after 1 second (because i append the content after website is already displayed), so you see the website content moving.
Thanks for helping.
It's not very difficult. Just hide the body using CSS and on the onload-event of the document do your manipulation and show the body.
Short example:
<html>
<head>
<title>example</title>
<style type="text/css">
<!--
html.scripted body{display:none;}
-->
</style>
<script type="text/javascript">
<!--
//set class for html-element, so the css-rule above will be applied to the body
document.getElementsByTagName('html')[0].className='scripted';
//on page load
window.onload=function()
{
//do the manipulation
document.body.appendChild(document.createElement('em')).appendChild(document.createTextNode('dynamic content'));
alert('manipulation done');
//show the body
document.body.style.display='block';
}
//-->
</script>
</head>
<body>
static content
</body>
</html>
In regard to Brad's comment below you may consider if there may be other ways. As the real issue seems to be the moving content, it could be possible to place a static placeholder where the dynamic content will appear later.
You mention PHP in your tags, so why not build your document server-side? Then, it doesn't matter.
If you must do this client side, then I also wouldn't worry about this. Web pages are rendered progressively anyway. Maybe you have a fast computer and a quick connection to your servers, but I guarantee you that most of your users do not.
Just add some code to the bit where the DOM is ready to make your page enhancements. Relevant: Javascript DOM ready without an entire framework
The only way to manipulate the DOM before it's loaded is by using a pre-processor like php.
Javascript can only manipulate the DOM after it's loaded.
For any further help beyond that you would have to provide a more specific example :-)
I finally found a solution.
I make the addon looking at web page navigation. In fact, it looks at url changes so that I know the user is moving to a different location (therefore I know I have to do something before I even got the 'Load' event of the web page).
Then I just try to access an element (that I know will be in the DOM, like the header) using a loop. Then when the element appears (before the 'Load' event) I insert the code and stop looping/listening.
If anyone need more details of how it is all done, I'll gladly answer your question.
Thanks.

Categories

Resources