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
JavaScript Show Element on Click
How to Style a Title? (And with CSS or Js)
Customize Ng-Repeat in Angularjs for Every Nth Element
How to Show the Child Div on Mouse Hover of Parent Div
Impossible to Hide Navigation Bars in Safari iOS 7 for Iphone/Ipod Touch
How to Host Material Icons Offline
Twitter's Typeahead.Js Suggestions Are Not Styled (Have No Border, Transparent Background, etc.)
Include CSS and JavaScript in My Django Template
Android Keyboard Shrinking the Viewport and Elements Using Unit Vh in CSS
Get the Height of an Element Minus Padding, Margin, Border Widths
Google Maps Zoom Control Is Messed Up
How to Get the Opacity of an Element Using JavaScript
Dynamically Changing Stylesheet Path Not Working in Ie and Firefox
Listing Known CSS Classes Using JavaScript