Hide pdf toolbar with pdfjs with laravel 5 - javascript

Please I need to be guided on how to remove the pdf toolbar from a pdf document I dynamically display on a page on my website to discourage printing and downloading of the document from the website.
This is the toolbar
On web.php route page, I have the following route
Route::get('showresource/{id}','ResourceController#show');
Which returns the file and is then displayed in the following blade page
<object data="{{url('showresource/'.$current_lesson->resource_file)}}" type="{{$mime_type}}" height="600px" width="100%" id="resource-pdf" style=""></object>
I have added the following javascript to the page to no avail.
$(document).ready(function () {
$('#resource-pdf').contents().find('#toolbar').css('display','none');
});
This does not seem to be working.
I have also tried to use pdfjs but I don't know how to apply it to a laravel 5 project. I look forward to any support to solve this.
Thank you

In my case (chrome-based web browser) this bar is a <viewer-pdf-toolbar> HTML tag. If you add to your css file or between <style> tag this code
viewer-pdf-toolbar {
display: none !important;
}
The bar will disappear. Don't do this by inline method because this tag is often overwritten by web browser. My way is tested and works perfect.

Related

<iframe> automatically change height to content of <iframe>

At the moment, I am working on a website that works with Wordpress and Elementor (latest versions). I'm trying to implement an iframe using an html widget in the Elementor editor. The iframe works via an external website link (of a client) and I would like the iframe to automatically adjust in height to the content of the iframe. However, I am currently not getting this to work with the code below. In the Elementor editor itself it looks good, but on the website itself it is barely visible (due to the limited height) and it does not work. I have tried the following codes as well: height="auto", height="100%", but they didn't work either.
Does anyone know how I can fix this, please? I did try some solutions on other topics, but these didn't work either (and I'm not that good at coding). That's why I created a new topic.
The code used:
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.min.js"></script><script
type="text/javascript">iFrameResize({ inPageLinks: true },
'#externallinkname')</script><iframe id="externallinkname"
src="https:// externallink.com/"
width="100%" scrolling="no"></iframe>
- Note: The names of the following codes are changed, due clients privacy: #externallinkname, id="externallinkname", src="https:// externallink.com/"

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

Solution for 'Print to PDF button' with JavaScript

I will be happy if some body help me to get solution for my problem.
I have HTML5 + CSS page i need grab some main DIV and save it in PDF
i tied jsPDF library but it not rendering CSS and have some bugs in Mozilla =(
I found great API what rendering everything and send .PDF file but this project working only off-line and that should be local library.
I already create #print properties to my page and it printing perfectly! But my client want to see 'Save to PDF' button without any other 'dialog boxes'. Does somebody know a solution to silence print(i saw that working only for IE) or another library to render my HTML with CSS.
Thank u!

Twitter Widget doesn't work in IE8 when inside an iFrame

I'm using a Twitter widget and it works fine in IE8, until I put it inside an iFrame. The twitter widgets Javascript file is being loaded from within the iFrame, and as I said it works perfectly on it's own. Any ideas?
After a lot of testing it seems that the order in which the JavaScript is loaded was causing the problem. I had a lot of JavaScript on the page, and after moving the Twitter script tag above all other javascript or css tags in the head of my document it worked!

Trouble between an injected iframe and other web page (Google, Gmail, Pdf)

Well i'm currently developping my Toolbar for Google Chrome as a Extension. The main principe is that i'm all the time injecting the toolbar as an iframe by using the Content Script.
But now i see a couple of bug with gmail, google map/search, pdf an maybe other that i've not yet see...
Let me explain, when i go on gmail, i don't see my toolbar at all...
When i open Google, it seems really normal :
But then when i start a search my toolbar seems to overide the top link (web, images, videos, maps,...) I can't click on them anymore...
Next problem is when i'm trying to go on google map or trying to open a PDF, it seems to give the same css to these web pages from my toolbar...
Google Maps :
PDF :
Hope i where clear enough, do not hesitate to ask me question if necessary ;)
Why don't you use absolute/fixed positioning and style attributes? Using style attributes would remove the issue of the possible spread of CSS.
To remove the toolbar from pdf, you could write something that removes the element when on pdf?
Well, i've find a good solution to resolve the problem with PDF and Google Map it was a problem on my CSS.
About the google Search now it works perfectly by setting the body webpage as a fixed page like NeXXeus tell me but there is still a problem.
Check this out :
EDIT : We don't really see, the argument select/deselect is top: 0px;

Categories