We Keep Coding

Lazy-load a javascript script?

Is there a way I can wrap an external JS script embed with lazy-load behavior to only execute when the embed is in the viewport?
Context: I have an external javascript embed that when run, generates an iframe with a scheduling widget. Works pretty well, except that when the script executes, it steals focus and scrolls you down to the widget when it’s done executing. The vendor has been looking at a fix for a couple weeks, but it’s messing up my pages. I otherwise like the vendor.
Javascript embed call:
<a href=https://10to8.com/book/zgdmlguizqqyrsxvzo/ id="TTE-871dab0c-4011-4293-bee3-7aabab857cfd" target="_blank">See
Online Booking Page</a>
<script src=https://d3saea0ftg7bjt.cloudfront.net/embed/js/embed.min.js> </script> <script>
window.TTE.init({
targetDivId: "TTE-871dab0c-4011-4293-bee3-7aabab857cfd",
uuid: "871dab0c-4011-4293-bee3-7aabab857cfd",
service: 1158717
});
</script>
While I'm waiting for the vendor to fix their js, I wondered if lazy-loading the JS embed may practically eliminate the poor user experience. Warning: I'm a JS/webdev noob, so probably can't do anything complicated. A timer-based workaround is not ideal because users may still be looking at other parts of the page when the timer runs out. Here are the things I’ve tried and what happens:
I tried:
What happened:
Add async to one or both of the script declarations above
Either only shows the link or keeps stealing focus.
Adding type=”module” to one or both script declarations above
Only rendered the link.
Wrapping the above code in an iframe with the appropriate lazy-loading tags
When I tried, it rendered a blank space.
Also, I realize it's basically the same question as this, but it didn't get any workable answers.

I actually also speak french but I'll reply in english for everybody.
Your question was quite interesting because I also wanted to try out some lazy loading so I had a play on Codepen with your example (using your booking id).
I used the appear.js library because I didn't really want to spend time trying some other APIs (perhaps lighter so to take in consideration).
The main JS part I wrote is like this:
// The code to init the appear.js lib and add our logic for the booking links.
(function(){
// Perhaps these constants could be put in the generated HTML. I don't really know
// where they come from but they seem to be related to an account.
const VENDOR_LIB_SRC = "https://d3saea0ftg7bjt.cloudfront.net/embed/js/embed.min.js";
const UUID = "871dab0c-4011-4293-bee3-7aabab857cfd";
const SERVICE = 1158717;
let vendorLibLoaded = false; // Just to avoid loading several times the vendor's lib.
appear({
elements: function() {
return document.querySelectorAll('a.booking-link');
},
appear: function(bookingLink) {
console.log('booking link is visible', bookingLink);
/**
* A function which we'll be able to execute once the vendor's
* script has been loaded or later when we see other booking links
* in the page.
*/
function initBookingLink(bookingLink) {
window.TTE.init({
targetDivId: bookingLink.getAttribute('id'),
uuid: UUID,
service: SERVICE
});
}
if (!vendorLibLoaded) {
// Load the vendor's JS and once it's loaded then init the link.
let script = document.createElement('script');
script.onload = function() {
vendorLibLoaded = true;
initBookingLink(bookingLink);
};
script.src = VENDOR_LIB_SRC;
document.head.appendChild(script);
} else {
initBookingLink(bookingLink);
}
},
reappear: false
});
})();
I let you try my codepen here: https://codepen.io/patacra/pen/gOmaKev?editors=1111
Tell me when to delete it if it contains sensitive data!
Kind regards,
Patrick

This method will Lazy Load HTML Elements only when it is visible to User, If the Element is not scrolled into viewport it will not be loaded, it works like Lazy Loading an Image.
Add LazyHTML script to Head.
<script async src="https://cdn.jsdelivr.net/npm/lazyhtml#1.0.0/dist/lazyhtml.min.js" crossorigin="anonymous" debug></script>
Wrap Element in LazyHTML Wrapper.
<div class="lazyhtml" data-lazyhtml onvisible>
<script type="text/lazyhtml">
<!--
<a href=https://10to8.com/book/zgdmlguizqqyrsxvzo/ id="TTE-871dab0c-4011-4293-bee3-7aabab857cfd" target="_blank">See
Online Booking Page</a>
<script src=https://d3saea0ftg7bjt.cloudfront.net/embed/js/embed.min.js>
</script>
<script>
window.TTE.init({
targetDivId: "TTE-871dab0c-4011-4293-bee3-7aabab857cfd",
uuid: "871dab0c-4011-4293-bee3-7aabab857cfd",
service: 1158717
});
</script>
-->
</script>
</div>

set placeholder fo external form

One of my costumer wanted a landing page visible HERE. He wanted us to use wooform external service to achieve this form because it is already linked in their managing software. CSS is currently blocked because we need an ssl certificate to make them run properly. By the way you can view the result clicking on the shield in the right -top corner in chrome and loading the "unsafe script".
The problem is that wooform doesn't allowme to set placeholder but just default value. I want to display a placeholder and I'm trying to do that in javascript by this way:
document.getElementById("Field1").placeholder = "Type name here..";
Unfortunately it is not working and I think it depends on the delay wooform is loaded with. So I tried to do this:
<script type='text/javascript'>
$.getScript("http://site.resicert.com/placeholder.js", function(){
alert("Script loaded and executed.");
});
</script>
But still no luck...
What can I do? I'm newbie in Javascript...
Thanks guys

The jQuery library included with WordPress is set to the noConflict() mode. This is to prevent compatibility problems with other JavaScript libraries that WordPress can utilize.
The way to make your second code block work would be to change it to the following:
<script type='text/javascript'>
jQuery(document).ready(function($) {
$.getScript("http://site.resicert.com/placeholder.js", function(){
alert("Script loaded and executed.");
});
});
</script>
Update:
Try the following:
<script type='text/javascript'>
jQuery.getScript("http://site.resicert.com/placeholder.js", function(){
alert("Script loaded and executed.");
});
</script>

Get FB statuses without using PHP

I basically want to pull the text only from statuses I've written on facebook (no comments, likes, etc) for a website written in classic ASP. So it cannot be PHP coded.
It can be in ASP or just JS and HTML, ideally I'd like to spit out what's returned (top 10) in a loop, each status nested in a div, that way I can put them in one surrounding div using some jquery that shows one at a time, animating the transition.
Sounds so easy, Facebook's graph (v2) api seems reasonable but I'm just stuck as every example I can find is PHP based. I'm not sure where to start. I see from the API i'll need an access_token (should I create an App and use AppID|SecretID for permanency?) and I'll need my profile ID (no probs).
Can you offer a good starting point or example I can easily customise? I'd like to keep code to a minimum.

here a simple tutorial i used for a previous full javascript implementation
http://codesamplez.com/development/access-facebook-graph-api-using-javascript-sdk
and here the official documentation :
https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/

It took some reading but here is the pure JS solution with no ASP or PHP. You need to go into FB developer section and create a blank app and make it active/live. You'll need the App ID, the App secret and you'll need your Facebook Page ID (found at the end of the URL of your Facebook page.
I only wanted to show posts I've made as page manager so I do an IF statement checking it's a 'shared_story' so i'm not showing others posts/comments etc.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajaxSetup({ cache: true });
$.getScript('//connect.facebook.net/en_UK/all.js', function(){
FB.init({ appId: 'Your_App_ID_Here' });
FB.api(
"/Your_Page_ID_Here/posts?access_token=Your_App_ID_Here|Your_App_Secret_Here&limit=50",
function (response) {
if (response && !response.error) {
var $ul = $('#statuses');
for(i=0;i<response.data.length;i++) {
if(response.data[i].message && response.data[i].status_type != 'shared_story') {
$ul.append($('<li>').html(response.data[i].message + '</li>'));
}
}
}
}
);
});
});
</script>
</head>
<body>
<ul id="statuses"></ul>
</body>
</html>

Execute Javascript on new HTML-Page

I have two HTML-Pages (A.html and B.html). On Page A there is a button called "UploadButton"
<input id="UploadButton" type="button" value="Dateien auswählen" />
This is connected to some jQuery code
<script language="javascript" type="text/javascript">
$(function () {
$().SPServices({
operation: "GetList",
listName: "Doc",
async: false,
completefunc: function (xData, Status) {
id = $(xData.responseXML).find("List").attr("ID");
}
});
reference = "./_layouts/Upload.aspx?List=" + id + "&RootFolder=";
$('#UploadButton').click(function (event) {
NewItem2(event, reference);
return false;
});
});
</script>
So far so good... The Button or a little closer the NewItem2() method open up a new HTML Page (Page B). On page B there is an anchor I want to click.
So my question is, how can I click an anchor on page B with a Script from page A. Is there a possibility to do that? I don´t know how to do that properly.
The NewItem2() is not written through my hands, so I cant tell you whats happening in there. I tried to find something via Google or in the forum but I don´t know how to call my problem so I found nothing, sorry.
Thankls for all effort!

Simple - You cant´t use Page A`s scriptvariables on Page B.
When you just want to click an HTML anchor, why don´t you simply add #anchorname to your reference to create the same effect?
The easiest way to submit information between pages is the QueryString.
Just pass the ID of the control which you want to click and write some javascript to read the QueryString and execute the .click().

Should use external JavaScript file by copying your JavaScript/jQuery code to the onther file and set extencion .js in last include your this this file in both page (A.html and B.html) as shown below.
<SCRIPT TYPE="text/javascript" SRC="|YOUR FILE NAME|" />
So you does not need to specify different methods for different pages where same type of action are being done.

If window.open is used to open that new window, than you can take a refference to that window like this:
var newWindow = window.open("...new window url here...");
and than, using newWindow you can access its content:
newWindow.$("#anchore_to_click").click()
(assuming jquery is available there too)

How do I Programmatically Enable/Disable Firebug Lite at Runtime?

How can I show or hide the entire Firebug panel and its icon at runtime ?
I browsed through Firebug.chrome but could not find anything appropriate.
I tried the following snippet which did not have any apparent effect, Firebug Lite was still there.
Firebug.extend(function (FBL) {
alert('TEST'); // This is run
FBL.Firebug.chrome.deactivate(); // No errors but nothing happens
});
The anonymous callback function is definitely invoked.

Quite an old post, but still popping on google search for such a question.
I'm not even sure which version of Firebug Lite you were using, but the following works well with 1.4.0 (once the page has loaded):
Firebug.chrome.open();
Firebug.chrome.close();
Firebug.chrome.toggle();

Firebug-Lite is enabled through the javascript function in the bookmark, and from there it just loads the javascript hosted at getfirebug.com.
If you control the website you're looking at, and want firebug to pop-up for that website, then you can add this to your code:
<script type="text/javascript">
function bookmarklet(F,i,r,e,b,u,g,L,I,T,E){
if(F.getElementById(b))
return;
E=F[i+'NS']&&F.documentElement.namespaceURI;
E=E?F[i+'NS'](E,'script'):F[i]('script');
E[r]('id',b);
E[r]('src',I+g+T);E[r](b,u);
(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);
E=new Image;
E[r]('src',I+L);
}
$(document).ready(function() {
bookmarklet(document,'createElement','setAttribute',
'getElementsByTagName','FirebugLite','4','firebug-lite.js',
'releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');
});
</script>
Or, did you mean that when you're browsing you always want Firebug / Firebug-Lite at the bottom?