How to Make a Web Page Show Up Only Once

How to make a webpage accessible only once at one time?(JS+HTML)

local storage with trigger on body load/unload events:

function session1() {
var result = localStorage.getItem("session");
if (result != "running") {localStorage.setItem("session", "running");} else if (result == "running") {localStorage.setItem("redirect", "yes");window.location.replace("http://www.google.com");}}
function session0() {var stats = localStorage.getItem("redirect");
if (stats == "yes") {} else {localStorage.setItem("session", "done");}localStorage.setItem("redirect", "no");}
<body onload="session1()" onunload="session0()"><div style="background:skyblue">SESSION RUNNING</div>

How to display one section only (of a web page)

You'll need JavaScript to check location.hash like so:

window.location.hash="#2";
let a = document.querySelectorAll("a[name]");
a.forEach(function(e) {
if ("#" + e.getAttribute("name") != location.hash) {
e.style.display = "none";
}
})
<a name="1">
First content
</a>
<br/>
<a name="2">
Second content
</a>
<br/>
<a name="3">
Third content
</a> etcetera.

How to appear a pop-up only once / browser?

Have you tried to use a Bootstrap Modal instead? It helps heaps and could save a lot of time:)

I want to allow a specific webpage to open only once in every 24 hours for users

You should record in a suitable location, possibly in a separate table if there's going to be many pages that each user can only view once a day. For the first time a user visits one of the restricted pages, record the page and the timestamp.

For any subsequent attempt to view that page, check the table for a viewing record, if the difference to the current time is less then 24hrs, show an appropriate error message, if it's over 24hrs, allow them to view it.

A possible table structure could have fields for user_id, page and timestamp (be aware that both page and timestamp might be reserved words on some database servers).

How to show page preloader only once

if (!$.cookie('loaded')) {
// show preloader
// your code
// create cookie
$.cookie('loaded', true, {expires: 365});
}

or try this:

$(document).ready(function($) {

if ($.cookie('preloader'))
{
$('#loader-wrapper').hide();
}
else {
setTimeout(function(){
$('body').addClass('loaded');
$('h1').css('color','#222222');
}, 3000);

// and now we create 1 year cookie
$.cookie('preloader', true, {path: '/', expire: 365});
}
});

Download from here JavaScript API for handling cookies: https://github.com/js-cookie/js-cookie
Include after jquery jquery.cookie.js

How to show website preloader only once

Here is an example of how you might use sessionStorage to show the preloader once per visit per tab or window.

<script type="text/javascript">
$(document).ready(function() {
$(window).load(function() {
function Preloader() {
var preloader = $ ('.loader');
preloader.delay(1000) .fadeOut (500);
var preloader = $('.preloader');
preloader.delay (1500) .slideUp(500);
}
if ( ! sessionStorage.getItem( 'doNotShow' ) ) {
sessionStorage.setItem( 'doNotShow', 'true' );
Preloader();
} else {
$ ('.loader, .preloader').hide();
}
});
});
</script>


Related Topics



Leave a reply



Submit