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);
}
Related
I am trying to make a widget that I can add to another website through code embedding, much like tawk.to.
I have tried using iframe and object with embed but for some reason it is slow. As a page it fetches the images fast but when I embed it, it is slow. Also I heard that it is not best practice.
So I searched what other websites are doing and I found out that disqus is using iframe and tawk is using the below code. As messaging widget don't use much data, iframe seems to work but in my case, my widget is fetching a lot of data from an API.
tawk.to is using this code:
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/APIKEY';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
I already have a page and I want to put in inside another website page using something?
And it is gonna display a small icon like tawk.to and when clicked it's gonna show the page inside the widget.
How can I achieve this?
Using an iframe as in itself is not slow however if you insert the iframe directly then it will load inline with the rest of the page. The approach that Tawk.to use is:
Simple javascript (as you have already pasted), which simply creates a second script element within the page, explicitly sets it to async, and then adds it to the DOM - this then triggers the script to load.
This script will then call the Tawk servers, and return a more complete javascript, containing their full code, but without slowing the page load down.
In the case of Tawk.to they do use an iframe to display their chat widget - which is generally a straightforward way of ensuring there are no styling clashes, or if wanting to load a remote page directly.
I have created widgets both in this way, and also by adding elements directly to the DOM. The key part here is the js chaining - the first script does nothing except construct the second and doesn't impact page load.
Applying this to your case, you could:
Use similar JS chaining to load your main JS script
Have the main JS script add a hidden iframe which loads the page you already have.
Add a button element to the DOM which toggles the visibility of the iframe you added.
Okay, so this one is gonna be a doozy!
NOTE: This will be for a windows desktop application running sqlite and mongoose, so loading times are not as important (to me, for now) and there will be no connection to a non-local server.
I have searched all over and couldn't find anything that is specific to my situation, most seem to load into an iframe or use that framework provided by css-tricks.com
I am using my own (sorta) framework. The libraries i am using are bootstrap 3, jquery 2.1.4, jqueryui 1.12.1, and Bootstrap-select v1.12.1
index.php will have all content dynamically loaded into a div#wrapper and will act as the head of all page loading. This is the skeleton of my index.php. In sidebar.html the links have the attribute 'pagetoload', jquery catches the click event and loads the data into div#wrapper
<body>
<?php require_once("res/sidebar.html"); ?>
<div class="container-fluid" id="body-container">
<div id="wrapper" style="border:1px black solid;">
<!-- dynamic page content will be loaded here-->
</div>
</div>
<script src="res/js/jquery.js"></script>
<script src="res/js/jquery-ui.js"></script>
<script src="res/js/bootstrap.js"></script>
<script src="res/js/bootstrap-select.js"></script>
<script src="res/js/menu-handling.js"></script>
<script>
//index.php js
$(document).ready(function () {
$.get("home.php", function (data) {
$("div#wrapper").html(data);
});
$("a.loader").click(function (e) {
e.preventDefault();
$.get($(this).attr("pagetoload"), function (data) {
$("div#wrapper").html(data);
});
});
//dateFormat 10/dd/yy to constrain input only to october
//get current month number and constrain to prevent additions to wrong month
$("#date-input").datepicker({
dateFormat: "12/dd/yy"
, constrainInput: true
});
$("#date-input").focus(function () {
$(this).datepicker("show");
});
});
</script>
</body>
Each page that will be dynamically loaded will ideally contain minimal php and only contain the necessary html/css/js for that page. My issue is for example, after loading one page such as my dbviewer.php (which contains js and gives me the asynchronous loading warning) and reloading home.php into the container, javascript no longer works. The javascript for each page are inline tags.
I have tried piling all the javascript for every dynamic page into index.php so that it's all loaded on startup, but the issue arises that it still won't work. What is the best method make this dynamic loading work while having each page modular. I have tried to researching this but only stuff like using the hashTag thing comes up.
If you need more code from my files please post, i think i explained it enough for you to understand as there is nothing too wild going on outside of index.php Just scripts inside each dynamic page that basically interacts with dom elements using jquery.
I'm leaving this answer because it helped you, and also can be usefull as a general rule of thumb for any developer out there that can find himself in similar situation.
So when developing the app you have to separate all javascript, css assets in master file to host them on first pageload. (maybe it's event better for performance)
All other server generated files (php, node.js etc) files you have do structure to only be data source for pages that users click or land to .. or at least try to..
after that you have to trigger
$.ajax().callback
function on frontend to do job on each page. Such as page effects, data manipulation and etc .. Callback is very important because that's when data was actually loaded!
cheers, k
I'm currently looking to improve the perception of a web application by ensuring that the company logo is downloaded ahead of the javascript.
To do this I moved the javascript references below the img element for the company logo.
For example:
<img src="/Images/Logo.jpg" alt="My Company"/>
<script type="/Scripts/MyScripts.js"></script>
When looking at Google Chrome Developer Tools I can see that the call for the logo is made however it remains as "pending" until all the javascript on the page has been downloaded.
Why is this happening? How can I ensure that the company logo is loaded ahead of the javascript?
Try to use $(window).load for your scripts if you're using jQuery.
$( window).load(function() {
//put js code here
});
According to the this site :
The window load event executes a bit later when the complete page is
fully loaded, including all frames, objects and images. Therefore
functions which concern images or other page contents should be placed
in the load event for the window or the content tag itself.
As for separate files that you have to add to your site using <script src='path/to/file'>, I recommend using $.getScript.
$.getScript("path/to/file");
Here is the $.getScript manual.
Browser has to download and execute JS files as soon as one occurs during HTML markup parsing (at least due to possible usage of document.write in the scripts).
One of the best solutions would be adding onload event handler which loads your script dynamically when page is ready:
<script type="text/javascript">
window.addEventListener("load",function () {
var elem = document.createElement("script");
element.src = "file.js";
document.body.appendChild(element);
, false);
</script>
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.
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();