Displaying PDF on website using pdf.js - pdf

I want to put a file sample.pdf on my website, and want it to be displayed using pdf.js. What I want is to display my own file like the demo, with a toolbar, zooming in/out, etc. So far I can't do that yet.
I did check out the helloworld example, but it simply shows the file like an image, without toolbar, zooming in/out, etc. When I put another file with many pages instead of helloworld.pdf, it just shows the first page.

I am not quite sure what you are looking for but I was able to get this working exactly like the demo. Although you may not want to use that example viewer for your project, you can use the working code as a starting point for your own requirements.
For a simple test you can just clone the project somewhere under a web server into a directory like myproject and visit http://yourservername.com/myproject/web/viewer.html. You should see the pdf appear. This can be a starting point to working with this project. I did this running a very basic Apache server on Linux.
If you are not looking for an example styled like that the demo above you can also see this jsbin from the docs that show how to do something completely customized with working next/previous buttons to move between the pages (as you mentioned you were only seeing the first page).
As a note, it seems that this library does not work properly with Safari. You can see an issue about it here. Unfortunately this makes it unusable for me now as I need to support all current browsers.
Also, remember to watch for the warnings concerning CORS.

Related

How do I modify Docusaurus appearances of the blog from a component library?

Creating Modified Blog Entries
I am new to React, and very much to Docusaurus, however, I've managed to get a decent looking DS site going. I am trying to capture some simple snippets to as "blog entries", just small factual snippets, etc. simple project summaries. I’ve hit the limit of the Docusaurus.config options and not sure how to expand the out of box components.
How do I begin to alter and edit Docusaurus to change the Blog page to be like "Cards" in component-speak? Ive seen some example in Infima, but not sure how to bridge that gap?
How can I easily replicate the Announcement Bar to also be at the bottom, like a Banner?
Thank You!
One possible arena for you to use is Bootstrap — specifically React-Bootstrap. They have a card component you could use where you link individual blog entries to that card. If you're comfortable with JavaScript, there's probably an automation you can build there, but hand-coded text is somewhat part and parcel with static-site generators.
If you want a different solution with the CSS code in your src file outright, CSSCodeLab has a React Card layout entry with an attached source code file. Some hand-coded text required, and not automatically integrated with a separate blog setup, but YMMV.
Otherwise Docusaurus' Showcase page does provide the card formatting. The source code for the page (coded at index.tsx) as well as the components are available.

Bootstrap carousel doesn't start automatically

It may appear a repeated question but it is a serious one and I found no solution for it in any related question.
I have downloaded a bootstrap theme from ShapeBootstrap website
Demo theme
I use Firefox 30. As you may see in the demo page too, the slider doesn't start automatically! however if one click on the next slide it starts running!
I did anything I read in the similar questions but nothing happened!
The order of scripts is OK
It is in the end of file
No error reported in console ...
You can view and follow the source code of the demo page. Everything is in its place. But I wonder why it has this problem even in the official website of the theme.
Please guide me what can I do.
To understand what was going wrong was difficult!
I replaced the carousal section(html) with this one from http://startbootstrap.com/templates/full-slider/
I added full-slider.css to the list of my css files and used the latest version of bootstrap script and now it works!

Identify the Content Carousel

Can anybody identify the carousel used on this site? It seems to work seamlessly with responsive sites and would with little css changes suit my design perfectly. The source shows something called anchorScroll.js but a search comes up with nothing.
It's a custom solution and not a plugin. Look for Application_NewsSpinner in http://cdn12.grohe.com/application/resources/javascript/scripts/common.js at line :1072
But don't steal code! It's fine to get inspired but you should find your own solution or take an official plugin! Take a look at http://finnrudolph.de/ImageFlow or http://www.jcoverflip.com/demo

UNC Linking to Network Share in Chrome

I have a UNC link something like this on an ASP.NET page which links to an Network Share location. This link works perfectly in IE (surprisingly), and even in Chrome and Firefox if I copy/paste into the address bar, but the link is completely broken. I can't even right click to copy the link. I know this is a known issue, that was supposed to have been fixed several versions ago, but I still need a work around.
I've been looking into adding "content-disposition", "attachment; filename=sample.pdf" to the header, but I don't know how to reference the actual file because the link still doesn't work relative to the server. It keeps trying to save the aspx page rather than the pdf. Ideas? I would LOVE help on this. Thanks ;)
Download
I'm actually implementing the link forming in the VB.NET codebehind, but I can't even get it to work properly with a statically defined link. What gives?
The Reason "\\Server\AppShares\Files\sample.pdf" is not excepted is that it is not a valid URI so not acceptable in a html link. The correct format is file://Server/AppShares/Files/samples.pdf http://blogs.msdn.com/b/ie/archive/2006/12/06/file-uris-in-windows.aspx provides a guide on translations from UNC paths to URIs and back again

Problems Embedding Video using FCK Editor

I am using FCK Editor 2.6.4 and having problems trying to embed a (non-YouTube) video into a content area.
I found this previous question / post:
[EDIT -- as a new user, I am only able to post one link in this post. The post in question is titled, "Can I embed video using FCK Editor?")
and have investigated all of the proposed solutions, but none of them work properly:
1 -- Using the "Embed Flash" button in the control panel almost works. However, the video I am attempting to add contains a querystring with parameters, like this:
http://static.animoto.com/swf/w.swf?w=swf/vp1&e=1275795594&f=mGQklEgxXKs9vfEIdGnWsA&d=132&m=p&r=w&i=m&ct=Homes%20in%20Eagle%20Creek&cu=http://hometoindy.com/eagle-creek-real-estate.php&options=
and in using the Flash embed tool, it encodes all of the "&" characters to "& amp;", thus breaking them. If it were just for me, I could manually change them back, but clients who use this will not know how to do that.
2 -- I have installed the YouTube video plugin, and it works great... for YouTube. But it cannot be used to embed non-YouTube videos (it automatically changes the URL to YouTube, no matter what).
3 -- I have installed the EmbedMovies plugin, but it throws a javascript error when attempting to add a video file (such as the above) to a page. (The EmbedMovies plugin page on SourceForge says it has been updated for FCK Editor 2.6, but it does not work.)
4 -- Pasting directly into the editor window (of course) does not work. The only way I've been able to make this work is by pasting into the Source panel, and this is not a good option for clients who are not familiar with HTML.
So, is there a good, working plugin for FCK editor that will allow me to quickly and easily embed a video such as the one above into a content area? I don't need to be able to see or preview it in the editor window; I just need it to work when the page is loaded on the front end.
Thanks!
Given the question you found, and scarcity of answers to that, chances are that the plugin you want does not exist.
If your videos are actually from one, though non-standard, source, I can only repeat my advice from that topic - write your own plugin. I have code of plugin I wrote linked there, it should be easy to change it to accomodate your needs.