So I have a php helpdesk script and I was wondering if it was possible to preload any page the user wants to view before the browser switches to it?
Like if the user is one page1.php and clicks on a link that leads to page2.php; is it possible to have a loading gif or something pop up; the next page is loaded and then the browser instantly changes the view from that of page1.php to page2.php.
In short, visually eliminating the page loading process.
Thanks in advance!
Do users ever go to Page 2 without going to page one? One possible solution would be to load both when the user browses to the page, hide page 2, and then when the user 'navigates' hide the first page and show the second page. They'd both be loaded, so you'd not need any spinner.
The HTML:
<div id="page1">
This is page one.
<div onclick="showNextPage()">Go to page two</span>
</div>
<div id="page2">
Page two.
</div>
The JS:
function showNextPage()
{
$("#page1").hide();
$("#page2").show();
};
The CSS
#page2 {
display:none
}
Is that helpful? Probably need to know more about your implementation to make a better suggestion :).
Related
Actually I am making a web page using HTML,CSS and Javascript in which there is only one html page with functions like when a person clicks on a particular button, that the current div will not be displayed but the another div will be displayed. At last there will be a home div which will act like the home page of the website.
I want to make that home page to be displayed once a person fills all the credentials and always only the home page should be displayed even after reloading that web page or reopening the web page.
I have researched everywhere but couldn't find the exact solution of the code.
Thanks
Try with LocalStorege, hold information, and check if the condition is true, if it is just immediately execute the logic.
This should solve the problem for you.
Take a look at https://stackblitz.com/edit/web-platform-uawtkc
Tried to simulate the problem and solve it
I want to display to the user an initial page with some loading animation while loading the main page in the background.
Once the main page is loaded, the first page will redirect the browser to the main page.
I've tried putting the animation and the main page content on one page, but it still taking a long time until the user sees the animation itself.
Simple loading example I've tried in JSFiddle. The real page contains much more content.
<div id="preloader">
<div id="loader"></div>
</div>
<div id="map"></div>
So I have this as my source code and all is well, apart from when I try to load up the pages with a slow internet connection. What happens is that the current page gets faded out and back in, and after the content from the external html file is loaded it just pops in.
I'm trying to tackle this with just loading everything once the page is loaded initially, how would that work?
Main JS script link - here
I'm posting this as a separate answer as it focuses on your current approach.
Instead of using .load(), use .get() so it isn't replacing the content of your div right away. Then .fadeOut() the div, replace the HTML, and .fadeIn() upon success.
$.get("news.html", function(data) {
$("#content").fadeOut(function() {
$(this).html(data);
}).fadeIn();
});
I was only able to test this with a slow connection simulator (Network Link Conditioner for Mac OS X), but it ran smoothly for my tests.
A better method than my comment suggestion to store in variables would be to render the HTML in hidden divs and display them as needed. That way you're only rendering once.
HTML
<div id="content">
<div class="hidden" id="home"></div>
<div class="hidden" id="news"></div>
<div class="hidden" id="contact-us"></div>
</div>
CSS
.hidden { display: none }
Now use .load() in the background to populate the divs. I'd defer loading until the page is ready for the user so you aren't blocking user interaction. Your menu clicks would then be responsible for adding / removing the .hidden class from each div.
When I load the page for the first time, I have a menu, element in the menu might have "current_page" class which I add via PHP if the current page is the menu element. Now the problem is when I enter the page for the first time or refresh it with ctrl+f5, which is the same, the slider that is suppose to go under the "current_page" class is slightly off. Different in Firefox and Chrome (see pictures below), but after I refresh the page with normal f5 or click on some links, so the page reloads, everything goes bask to the right and works until I hardreload the page again. I tried to make a JS fiddle but there it works every time. So I will post the link online, so you can see it there and tell me if you also have the problem.
<nav>
<div class="menu_slider"></div> <div class="navigation current_page">Home</div>
<div class="navigation">About Us</div>
<div class="navigation">Blog</div>
<div class="navigation">Magazine</div>
<div class="navigation">Contact me</div>
</nav>
I have to paste some code or it won't let me post the comment.
Thank you for any help possible.
Use jquery or put your code into a window.onload method. That will most probable help it. Please let me know.
I posed a question that related where I could display "Page loading" in asp.net page using jQuery. But, I had no luck.
So, say I have page1 and it navigates to page2 and page2 doesn't some heavy data access. Is there any way I could show the "preloading" page while the page2 is finished.
I want to navigate from Page1 -> "Preload" -> Page2(once page2 is completed).
I want to know if this is possible using Javascript in the code behind.
Thanks.
The way you would typically do this is have a page that shows the message and uses AJAX, in my example using jQuery, to load the other page onto the current page.
<body>
<div id="content">
Page loading
</div>
<script type="text/javascript">
$(function() {
$('#content').load('/url/to/other/page');
});
</script>
</body>
I've omitted loading jQuery itself.
Note: you could do this on a single page by having it generate different content based on some query parameter. You don't need to actually have a separate "loading" page -- though you could probably make that work for several different pages as well.
If using JavaScript is OK, redirect the user to the Preload page, and then use JavaScript to take the user to Page2. This will make the Preload page stay visible while Page2 is loading.
(Also, "JavaScript in the codebehind"? Don't tell me you're using JScript.NET or something as your server side language)
No matter what you do, to begin loading Page2 you'll have to navigate away from Page1 (unless you get complicated and wrap your pages in another container on a single page and navigate within your container).
Otherwise the default content for Page2 should be a "Preloading" message that gets taken away once the document has finished loading its content.
Is a possible solution to have an almost empty page with a few placeholder divs in the right places containing a loading image. Then run web service calls to populate each placeholder in jquery/javascript?