We Keep Coding

Loading percentage of iframe

How to show loading percentage of iframe tag with javascript? I am using iframe tag and my program takes some time to load my program. So I am thinking off to show the user how much it is being loaded yet now. I searched about it and I got to know that it's not possible to do it with HTML5, so I guess it can be done with js
EDIT:
<iframe width="800" height="600" src="https://www.greenfoot.org/scenarios/26460?embed=true" style="-webkit-transform:scale(0.4);"></iframe>

How to embed a PDF in an HTML page?

I need to embed a PDF file in an HTML page for the users to see it on every major device.
Most of the approaches work fine on desktop but they start to show problems on iPad devices. The PDFs are no longer scrollable if placed inside an iframe or embed tag.
I used the following techniques to overcome the problem:
1) Using pdf-image for node and converting the PDF to images and then sliding them in a div.
The problem in this approach is that the image quality gets degraded and is not suitable for viewing on Web.
2) Using PDF.js by Mozilla
It works fine on every device but it makes the page extremely slow and unresponsive on iPad
3) Using Google PDF viewer
<iframe src="https://docs.google.com/viewer?url=http://public-Url-of-pdf.pdf&embedded=true" frameborder="0" height="500px" width="100%"></iframe>
The problem with this approach is that I need to make my PDFs publicly available which I don't want to do for security reasons.
None of the above method is working for me. Is there any solution available to embed PDF in a page which works on iPad also.
One of my colleagues told me about using LibreOffice(open office) headless to embed PDFs in my page but I cannot find any documentation about it usage?
Can anyone please help? :(
Thanks in advance!

<embed src="http://example.com/the.pdf" width="500" height="375" />
Try above one for pure HTML. But another option is if you'd like to use with javascript, try Pdf.js by mozilla. https://github.com/mozilla/pdf.js

I think the simplest way to embed a PDF into a web page is to use the object tag:
<object data="assets/test.pdf" type="application/pdf" width="100%" height="800px">
<p>It appears you don't have a PDF plugin for this browser.
No biggie... you can <a href="assets/test.pdf">click here to
download the PDF file.</a></p>
</object>
What the code above will do is:
- If the user browsing your site has a PDF viewer plugin (which is included by default in some browsers) it will open the PDF in the browser:
- If the user does not have a PDF viewer plugin, they will be presented with a link to download the PDF and view it on their site.

I spent a lot of time with this issue and finally reached a solution for embeeding PDFs in a HTML files, also inspired by this post. You mentioned that "converting the PDF to images and then sliding them in a div" was not satisfactory due to quality problems. Here I experienced the same since the images were blurry.
However, I tried converting the images to SVG instead of PNG and the situation was a different one: The fonts were crystal-clear when embedding the image like below:
<object type="image/svg+xml" data="https://ik.imagekit.io/nudvztcu8my/pdf2svg_example_Ft2FQgqWaG.svg">
<!-- Your fall back here -->
<img src="https://ik.imagekit.io/nudvztcu8my/pdf2svg_example_Ft2FQgqWaG.svg" />
</object>
You can directly paste that snippet into a HTML file and you will see the result. For producing this example I used a ramdom PDF from ArXiv.org and converted it to SVG using an online converter.
There are also free command line tools like pdf2svg or commerical APIs like Aspose and probably it is worth examining which approach gives the best results.
You can easily build a slider which is loading the SVG images dynamically and it is even possible to scale them to different viewports due to the vector character of the SVG images. The approach so far worked for all PDFs I tried but probably it is recommendable to implement a fallback solution still using PNGs.

Lazy loader suddenly stopped working. Images not showing at all

I've been using the same lazy loading script for years and after checking out my blog today, it's suddenly not working, no images are showing at all. I know it's the script because if I just put a basic image tag in, it works fine.
Honestly, the JS file is a mess as most of it is minified and I can't pick out just the lazyloader script. JS file is situated at:
https://helloarchie-helloarchie.netdna-ssl.com/themes/tootsweet/js/cbpHorizontalSlideOutMenu.min.js
Example URL where images should display (All images at top ARE working, but nothing underneath 'Headers-' etc. near bottom of page, because those are set to lazyload): https://helloarchie.co/design/
Here's the HTML I've always used to display image:
<img class="one img-responsive" alt="" data-src="https://helloarchie-helloarchie.netdna-ssl.com/img/rapeseed-field/family-two-young-brothers- yellow-seed-field-photoshoot-bobochoses-filemonkid-mum-nan-play-flowers- jump6.jpg" src="https://helloarchie-helloarchie.netdna-ssl.com/img/grey.gif" />
<noscript><img class="image-asset" src="https://helloarchie-helloarchie.netdna-ssl.com/img/rapeseed-field/family-two-young-brothers-yellow-seed-field-photoshoot-bobochoses-filemonkid-mum-nan-play-flowers-jump6.jpg" alt=""></noscript>
It's a total nightmare as I have thousands of images on my blog and I'd have to manually configure each one if I can't get this working. Can anyone help?

How to load html file into article content?

I download an extension from freefrontedit and upload it on my server to directory /accordeon.
When I point the browser to http://mysite/accordeon/index.html it works well.
But how could I load the index.html into article content?
I am using joomla template.
I try with <iframe src="http://mysite/accordeon/index.html" width="100%" height="100%"></iframe> but then the height is not same.
Is there other way to load accordeon/index.html into an article?

I wonder how this custom extensions can be used in cms like joomla and wordpress without iframe your own content because iframe height is never the same as the source. Pasting index.html code in article content works only when they dont have index.HAML file because neither article neither custom html module could understand HAML code and just display it as plain text

When does the browser load images into the working memory?

I'm building a image-intensive web-page. I just popped in all the images and the site got really slow. Not just loading but also browsing etc.
Is there any good way to tell a browser that images are not necessary to load yet? For example in css:
display:none
or maybe instantiating the images with javascript somehow.
Currently all images are specified in the html, if possible I would like to keep to like that.

<img id="myID" src="about:blank" alt="" />
document.getElementById("myID").src="/image1.jpg";
I have to admit though, I have not used a blank image tag before, but If needed I have always appended an image to a container dynamically
document.getElementById("myDivID").appendChild('<img id="myID" src="image1.jpg" alt="" />');