Automate scrolling through a PDF on a display screen - javascript

I have a PDF with c.17 pages, which I want to display on a screen, but want to find a way to automate displaying each page for a minute or so, before it moved onto the next page (and cycles around and around etc) without someone having to manually scroll or click.
I'm sure there is some code I can add to my PDF (I have pro) that will run this automated transition? Please help!
I haven't tried anything yet, apart from searching for various code options

Related

Zoom in on an element while still being able to navigate page

I'm trying to create the effect of zooming in on a webpage but focusing on one particular element and allowing navigating / scrolling to be present.
I found a few plugins online but none do what I'm really looking for and I've found nothing else. Fancybox, Zoomooz etc are great but I need to be able to scroll.
The element in question is a PDF document. I need the user to be able to zoom in and still navigate up/down the page.
Possible?
Here is an example of what you could do... http://www.sitepoint.com/html5-javascript-mouse-wheel/ and http://blogs.sitepointstatic.com/examples/tech/mouse-wheel/index.html
However I would consider the above as a secondary option. There are many other ways to present the presentation and embed it onto your page. A slider is limited to "slide" only. You can for example use a presentation software and embed it onto your page as a widget e.g. http://prezi.com/ as freeware.
Hope that helps.

Possible to make a jquery hide function run until the item it is hiding is ready to be viewed or modify a slider to be more intelligent?

I have a page with a pdf that gets displayed inside a slider. When it's loaded it's fantastic however it looks a touch ugly until that point as the scroll arrows will be on screen but the dimensions of the slider haven't yet been established so it's all bunched up.
I created a white div that was larger than the pdf and targeted it with a jquery function that after a certain amount of time would hide and reveal the pdf underneath.
Th problem is that some pdf's take longer than others to load. I don't want someone to have to wait 5 seconds when only 1 may be needed and I also don't want someone to wait 5 seconds only to then see the 'mess' that I was trying to hide as that pdf may take longer to load especially taking net speed into account.
What I'd like is either for the function to know when it should hide or a way for the slider to be 'better', possibly already knowing the size of the page, loading the first and then while that it being read the others could be loaded in the background?
Any ideas / help would be appreciated.
Thanks.

Recommendation for small lightbox script to refresh internal div

There is a piece of functionality that I am trying to emulate on a .net e-commerce site, where you have a target area (I'll use the term "window" here, but I'm not talking about an actual window, more a div) which contains a large image. Next to the large image container, there are several smaller thumbnails. I want to emulate the functionality where as you either mouseover or click on the thumbnails, it refreshes the larger window with the fullsize version of that thumbnail. I guess it's a lightbox at the end of the day.
This isnt one of those cases where I've googled around and can't find any solutions... actually the polar opposite, i've found too many of them. I'm asking the community if there is any prebuilt script that is better than the others, or if anyone has done anything custom like this that's easy to implement. We aren't talking about pages of thumbnails here, maybe 2-3 per image. Again, I'm not trying to pop it in a lightbox, but refresh a div thats already inside the page.
What is structure of those divs?
If I get it right. Each thumb has responding to it 'big div' that is shown when clicked.
I would join then each small div with big via and attach action:
var b1 = $('#big1');
$('#small1').data('big',b1).click(function(){
var big = $(this).data('big');
big.someShowFunction();
});

Loading large number of images without affecting user experience

This is basically a design question.
Preface
I have a web page which shows a list of thumbnails. The number of images can be anything, maybe hundreds.
What I need to do is this?
Get the number of total thumbnails.
Get the web url for each image.
Load each thumbnail into a box (div) and add each box dynamically to
scrollable container div.
User should be able to interact with the boxes ASAP.
I have other AJAX calls happening in the page.
The default method, set the src to each box and add it to the container. When loading stops, the image shows. The problem is that, all these image loading will hog the network and my other AJAX calls may timeout, which I can't allow. Also, the user should see the page as loading complete (loading bar should not show activity).
My Solution
The solution I have come up is this:
Use a local image as space holder.
Set the src of all the boxes as local image.
Change the src for first image to the web url.
When onload of the image fires, change the src of next image and so on.
Pros:
Only one image will be loading at a time.
User will be able to interact with the boxes.
Cons:
Only one image at a time may be a waste of bandwidth (what about 5 images at a time?)
What happens if user scrolls to the end, the images won't show up until all the other images have loaded.
Your opinion
I need expert opinions on how to improve this solution.
Requirements:
Some bandwidth should be available for other AJAX calls
User should be able to interact with the page.
Questions:
Is this solution having any other issues?
Is this cross browser?
Am I correct in saying this will not affect the other AJAX calls?

how to load part of the HTML page which is currently on display?

i have an ebook(relatively large size say 800 pages),in HTML format. I am opening that book as webpage using webkit-gtk+. If i load the whole book at a time,it takes too much memory(RAM ).So i dont want to load the whole book at a time, but load the part of the book which is currently on display. and when the user scrolls down, next part should be displayed.How can i implement that ?
The most simple solution is to cut the book into pages and then use links at the top and bottom to move between them.
If you really want to try the "endless scrolling book" metaphor, then you must also split the book into pages on the server. Now, you can use JavaScript to watch for the scrolling events and load the next page with AJAX as soon as the visitor comes close to the edge.
The problem here is when to get rid of the parts the visitor has read. Also, the scroll bar will jump around a lot. So the experience for the user won't be that great either way. To get an idea how it feels, load a huge RSS feed into Google Reader. It won't drop articles that you've seen, so the browser slowly eats more and more memory. On the positive side, the scroll bar doesn't jump that madly.

Categories