Javascript one page dynamic div for mini pages - javascript

I have a one page website.
I have an area of the screen that is a div.
I want to be able to show different "mini" pages within this div based
on if the user clicks a button.
The contents of the div are html,javascript and images.
What is the best way to solve this?
I want it to be very responsive and fast, without re-loading the page itself.
Thank you

angular framework is great for single page apps. You can use the default ngRoute or the angular-ui-router to achieve the content swapping you want.

Related

Any option available to load content inside iFrame faster?

I've a typical use case where i need to load content in a iFrame on my home page.
As user experience point of view, i see my Angular App renders in 2 sec & i see content inside iframe take around 3 more seconds which is a very bad user experience
Options Evaluated:
server side rendering via angular universal but I hope this case is irrelevant to SSR
Trying to show loader but all content in the Home page loads and user seeing loader in particular block it's very bad
Is there any way we can don't let the browser do the heavy job or better way to load content faster. Appreciate your views
are both parent and iFrame angular apps? if so, you should not use iFrame but an Angular Library instead.
if the iFrame content isn't angular, there isn't much you can do I guess...
To improve the UX you can render a loading spinner over the iFrame and listen for the "load" event and then remove the spinner.
If the iFrame is not in your HomePage but on a secondary page, you could load the iFrame in the HomePage but hide it, and then when you need to display it you can just place it in the right spot and show it to the user instantly.

Display pdf document on website (mobile friendly) with vue.js

I'm working with vue.js, and I want to display a pdf on a website. I keep seeing a lot of complicated examples of pdf viewers that require an upload button and a conditional display - this is NOT what I need.
I just need to display a hardcoded pdf document within a div on my web page.
This is what I have so far using iframe
I need the width of the actual pdf page to fill up 100% of the width (for legibility). I don't want the grey background to show. The page should also be mobile friendly.
Open to suggestions that include not using iframe, especially if it would make the page more mobile friendly. If you're going to bring up vue-pdf or PDF.js, please include some clear instructions on how to use them.
PS: I am using some parameters to remove the toolbar and navpanes like so:
src="<MY PDF HERE>.pdf#toolbar=0&navpanes=0&scrollbar=1"
I've tried adding &zoom=100 or &view=Fit and that does not fix my problem.
Here is a list of all the parameters.
I lied. Adding &zoom=140 to the end of my pdf url solved my issue.

Page Transition between pages

I have a question i have been searching for how do these websites do page transition like when i click on a button or on a link it move to the next page with no time or with animations like these websites :
First site
Second site
They are Single Page Applications (SPA). Actually, they don't go to some other pages when you click a link. They change the URL and load a view to DOM accordingly. You can use one of Vue.js, React.js, Angular.js, and Svelte.js (I guess) to create those types of pages.

Enter full screen whenever page is loaded

I'm working on asp.net quiz application. The mandatory requirement of this application is: when the application starts (page is requested), it automatically enters into full screen.
Now I tried dozen of solutions (JS & Jquery's plugins)
JS Solution
Mozila's
Jquery Plugins
a number of different jquery's plugins, but Chrome & Firefox are not allowing me to do so. Because it states that it needs user interaction for that.
Can somebody please help me out of this situation? Solution can be browser dependent.
Details about application:
Total 5 aspx pages.
One page is an iframe/frame in another page.
Quick and dirty solution. Let's create another page which will be our container page. Put an Iframe there, calculate Iframe height width attribute based on the screen size. make the first page as iframe source. on the iframe put frameborder=0, so from user perspective it will look like single page
For full screen check this link http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/

Firefox extension that overlays persistent iFrame?

Is it possible to build a Firefox extension that displays a floating, persistent iFrame over the page content?
I know it's possible to add iFrames using XUL. For instance, you can add an iFrame to a persistent sidebar. However, I want the iFrame to float over the page content, not cause the content to shrink. So far, my only option is to add the iFrame to the DOM, then use CSS "fixed" positioning to float the iFrame.
The iFrame must also persist across page loads, exactly as the sidebar does. Adding an iFrame to the DOM, unfortunately, causes the iFrame to vanish when the browser renders a new page (e.g., after clicking a link).
Any clues?
Thanks!
Another add-on you can look at is Shopping Helper It has an iframe at the bottom whenever the page is displayed a product
Yes. I was able to do this by setting the attribute noautohide in the panel you use.
E.g.
<panel id="yourOverlay" noautohide="true">
You might be able to do something like this with Greasemonkey, it allows you to customize how web pages look and you could make your script available to others.

Categories