I need to have a splash page, but I don't want to make it my index, so I am using this solution.
I am using this technique:
http://jsfiddle.net/JjvzT/
on this page:
http://www.kineticoriginsofrhythm.com/
But I cant get the "Enter" button to reveal the index page below. Any Suggestions? It just flickers and jumps back to the Video Splash Page.
Also whats the js cookie code that makes it only appear once per day?
Thank You Very Much.
Also, if you can save your "anti-Splash" debates for another time that would be great. Client "MUST HAVE" this splash page. Not my idea.
Change the href attribute for your "Enter" anchor to "#". Right now you are redirecting them to the same page after hiding the splash, which is forcing them to load the page in its initial state again.
EDIT: For the cookie,
jQuery(function(){
if(document.cookie.indexOf("firstvisit") != -1){
$("#splash").hide();
$("#container-index").show();
}
else{
$("#splash span").click(function() {
$("#splash").hide();
$("#container-index").show();
var expireDate = new Date();
/* sets expire date to current date + 1 day */
expireDate.setDate(expireDate.getDate() + 1);
var newCookie = "firstvisit=0;expires=" + expireDate.toUTCString();
document.cookie = newCookie;
});
}
});
Caveat: I haven't tested this. See here for more on JavaScript and cookies: http://www.w3schools.com/JS/js_cookies.asp
I took ZDYN's answer and created splash.js, which can simply be added to your splash page (not a hidden div) and to the page that you want to redirect from, ie. index.html or something.
Anyway, here's the commented, working code:
/*
1. Create a separate html page to be the splash page
2. Out a referrence to this script in the splash page
-put below the "jquery.js" script reference
<script type="text/javascript" src="Scripts/splash.js"></script>
3. Put a reference to this script in every page that you want to have the splash page appear on
-put below the "jquery.js" script reference
<script type="text/javascript" src="Scripts/splash.js"></script>
4. Set the "splashPageName" below to the file name of the splash page
5. Set the date variables below
*/
var splashPageName = "splash.html";
var endSplashDate = new Date("12/7/2011");
var expireCookieDate = new Date();
(function() {
var url = window.location.toString();
if (url.toLowerCase().indexOf(splashPageName) >= 0) {
/* sets expire date to date + 1 day */
expireCookieDate.setDate(expireCookieDate.getDate() + 1);
var newCookie = splashPageName + "=0;expires=" + expireCookieDate.toUTCString();
document.cookie = newCookie;
}
else {
if (document.cookie.indexOf(splashPageName) != -1) {
//stay here, they've already seen the splash page
}
else {
var today = new Date();
if (endSplashDate > today) {
window.location = splashPageName;
}
}
}
} ());
Try this
$(document).ready(function(){
$("#splash").click(function() {
$(this).hide();
$("#container-index").show();
});
});
Related
Good day everyone i'm having a trouble about working my onload only once . because when i refreshes the page or if i am going to another page it always load.
here is my code so far:
JS
<!--Auto load the on overlay function-->
<script>
window.onload = function openNav() {
document.getElementById("myNav").style.width = "100%";
splashScreen();
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
and here's my js functionality for my splashscreen.js
//use onload when in your html the context is not inside
//the <header>
//create a splashScreen function
function splashScreen(){
//get the element on the html side with the id of "skip"
var skipButton = document.getElementById("skip");
//counter for the countdown
var counter = 5;
//create an element <p>
var newElement = document.createElement("p");
newElement.innerHTML = "Skip this 5 seconds";
var id;
skipButton.parentNode.replaceChild(newElement, skipButton);
id = setInterval(function(){
counter--;
if(counter < 0){
//replace the newElement on else condition statement
newElement.parentNode.replaceChild(skipButton, newElement);
clearInterval(id);
} else {
newElement.innerHTML = "You can skip this in " + counter.toString() + " seconds.";
}
}, 1000);
}
and this is how i call it on my html
<html>
<body>
<!--SplashScreen JS-->
<script src="<?php echo base_url('assets/public/js/splashscreen.js');?>">
</script>
When you refresh the page or go to another page, then back to your original page, the page is reloading, thus the onLoad handler is being called.
If you want certain functionality to only happen once, then one thing you can try is setting a cookie that you can check on page load. If the cookie is set, you know you already loaded it once, and don't run the code again. If not, you run the code, then set the cookie.
Useful link for cookies:
https://www.w3schools.com/js/js_cookies.asp
To be able to know that the splash screen has already been displayed for a given user, you need to store something to that effect that persists between page load events. Since the page will reload when the refresh button is clicked or when coming back to the page after being there earlier, this stored item can't be in the page itself, because it will just get reinitialized every time the page loads.
Cookies (as mentioned in another answer) are an option, but localStorage, I think is much simpler. It works like this:
// Once the window is loaded...
window.addEventListener("load", function(){
// Check localStorage to see if the splash screen
// has NOT already been displayed
if(!localStorage.getItem("splash")){
// Splash has not been displayed, so show it:
splashScreen();
// Store a value in localStorage to denote that the splash screen
// has now been displayed
localStorage.setItem("splash", "true");
}
});
One approach is to set .name property of window, which remains set after window.
const NAME = "once";
window.onload = function openNav() {
document.getElementById("myNav").style.width = "100%";
if (this.name !== NAME) {
this.name = NAME;
splashScreen();
} else {
// do other stuff
console.log(this.name)
}
}
I have two tab. One is home tab and another one is home-1 tab. Here i tracking the time count for login to logout time. I have following code in one java script file. this work as two instance.
home tab -> www.example.com/home //(my java script file contain this directory) first instance.
home-1 tab -> www.example.com/home-1 //(required script file include from home tab into this tab) second instance.
Any key/mouse event will reset the counter.
var sestmout=0;
var idletm=60*1;
var idletmcntr=0;
var idletimeout=null;
var lastUpdate1 = new Object();
var lastUpdate = 0;
var curdttm = new Date();
$(document).ready(function(){
initidletm();
});
lastUpdate1.cntr = idletmcntr;
lastUpdate1.ctme = curdttm.getMilliseconds();
lastUpdate1.time = curdttm.getTime();
function reset_cnt(){
if(idletmcntr != 0){
curdttm = new Date();
lastUpdate1.cntr = idletmcntr;
lastUpdate1.ctme = curdttm.getMilliseconds();
lastUpdate1.time = curdttm.getTime();
var a = moment();
lastUpdate1.utme = a.valueOf();
}
idletmcntr=0;
}
document.onclick=function(){
reset_cnt();
};
document.onmousemove=function(){
reset_cnt();
};
document.onkeypress=function() {
reset_cnt();
};
In each tab I include above lines in java script file. Now I trigger the mouse/key event on home tab that reset counter value in home-1 tab.
Using this code.
function initidletm(){
if(window.name == "home-1"){
window.opener.document.onkeypress = document.onkeypress;
window.opener.document.onclick = document.onclick;
window.opener.document.onmousemove = document.onmousemove;
}else if(window.name == "home-2"){
window.opener.document.onkeypress = document.onkeypress;
window.opener.document.onclick = document.onclick;
window.opener.document.onmousemove = document.onmousemove;
}
else{ // home tab
document.onkeypress=function() {
reset_cnt();
};
document.onclick=function() {
reset_cnt();
};
document.onmousemove=function() {
reset_cnt();
};
}
}
clearTimeout(idletimeout);
idletimeout=setTimeout(trackidletm,1000);
function trackidletm() {
initidletm();
}
This approach is write or wrong. Only home tab reset the counter value to the home-1 and other tabs. The other tabs like home-1 tab does not reset the home tab and other tabs. What reason? And How to reset the other tab counter value from working tab?
Well you can write a functionality in such a way that, it would store a value in the HTML5 localStorage when you do something.
if (typeof(Storage) !== "undefined") {
localStorage.setItem("reset", "true");
}
And if you not doing anything it will set it to false.
localStorage.setItem("reset", "false");
You can check these values like this :
localStorage.getItem("reset");
So when you have different tabs of the same domain, you can check out and see if you did anything in another tab.
Ref : http://www.w3schools.com/html/html5_webstorage.asp
Hope it helps.
I have no clue what I'm doing wrong. It works it just shows the popup for a split second. Would a timeout option be better? Which part is the problem? I'm a little new to Javascript so I don't really know what to exactly look for.
<script language="javascript" type="text/javascript">
/** Create a html cookie and set expiry as a day. **/
function createCookie(name,value,days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = date.toGMTString();
document.cookie = name+"="+value+"; expires="+expires+"; path=/";
}
/** Check if already a cookie has been created. **/
function readCookie(name) {
var flag = 0;
var dcmntCookie = document.cookie.split(';');
for(var i=0;i < dcmntCookie.length;i++) {
var ck = dcmntCookie[i];
while (ck.charAt(0)==' ') {
ck = ck.substring(1,ck.length);
}
if(ck) {
cparts = ck.split('=');
if (cparts[0] == name) flag=1;
}
}
if(flag) {
return true;
} else {
return false;
}
}
/** Check if cookie exists else create a new one. **/
function checkCookie(name) {
if (readCookie(name)) {
document.getElementById('google').style.display = "none";
document.getElementById('google').style.visibility = "hidden";
}
else createCookie(name,"cookie 4 the day",1);
}
</script>
<script type="text/javascript">
function closeThisDiv()
{
var openDiv = document.getElementById('google');
openDiv.style.display = 'none';
}
</script>
<body onLoad="checkCookie('MyCookie')"
If your goal is to have the element with id="google" to be hidden from the very beginning of the page display (so it never shows), then you should add a CSS rule that loads in the head section like this:
#google {display: none;}
Or, you should add a style element to the HTML itself:
<div id="google" style="display:none"></div>
As your code is currently written, it sounds like it is doing what it is supposed to. It waits for the entire document to be loaded (including images) and then it hides the element with id="google". That means the item will show briefly while the page is loading and then your code will hide it.
If you can't modify the CSS or the HTML for the google object and you're just trying to hide it as soon as possible with javascript and the google object is present in the HTML of your page (not added programmatically), then you can do this:
<body>
other HTML here
<script>
// script that executes right before the /body tag
checkCookie("MyCookie")
</script>
</body>
This will at least not wait for all images to load before hiding it.
I fixed it like this:
Create a css property of display:none; for #google
#google{display:none;}
Then switch around the last portion of code to display only if they don't have the cookie, and to create the cookie.
/** Check if cookie exists else create a new one. **/
function checkCookie(name) {
if (readCookie(name)) {
}
else document.getElementById('google').style.display = "inline";
document.getElementById('google').style.visibility = "visibility";
createCookie(name,"cookie 4 the day",1);
In case anyone runs into this problem. Worked great for me.
When someone requests a chat, an entry is made in the database. I have an hidden iframe on our dashboard that checks the database every 20 seconds to see if there is a chat and if there is it launches a popup window. Even if the popup is open the iframe still refreshes the popup every 20 seconds. Want I am trying to achieve is a javascript to check the status of the popup. If it is closed I want it to reopen it... if it is open then it bring it into focus... but I dont want the popup to refresh.. as I have an ajax script doing this..
Here is my code:
<script language="javascript" type="text/javascript">
function myOpenWindow(winURL, winName, winFeatures, winObj)
{
var theWin;
if (winObj != null)
{
if (!winObj.closed)
{
winObj.focus();
return winObj;
}
}
else
{
theWin = window.open(winURL, winName, winFeatures);
return theWin;
}
}
</script>
<% IF ChatSessionID <> "" THEN %>
<script language="javascript" type="text/javascript">
var gmyWin = null;
window.onload = function()
{
var w = 900;
var h = 500;
var l = (screen.width-w)/2;
var t = (screen.height-h)/2;
var params = 'status=0,resizable=0,scrollbars=0,width=' + w + ',height=' + h + ',left=' + l + ',top=' + t;
gmyWin = myOpenWindow("/chat/chat_window.asp?ChatSession=<%=ChatSessionID%>&id=3", "myWin", params, gmyWin)
}
</script>
<% END IF %>
Any help you could provide would be greatly appreciated..
Best Regards,
Paul
I am not sure, but I believe if you name the window (e.g. myWin) when you call window.open, then later call window.open again using the same name, it will return the existing window if its already open or open/re-open the window and return a handle to that.
Edit
Ah, there you go -- from window.open:
If a window with the name
strWindowName already exists, then,
instead of opening a new window,
strUrl is loaded into the existing
window. In this case the return value
of the method is the existing window
and strWindowFeatures is ignored.
Providing an empty string for strUrl
is a way to get a reference to an open
window by its name without changing
the window's location. If you want to
open a new window on every call of
window.open(), you should use the
special value _blank for
strWindowName.
I believe according to the above mentioned specs, this might work:
var hChatWindow = window.open("", "ChatWindow", "whatever features"); // url intentionally left blank
// hChatWindow now contains a reference to new, existing or re-opened window
hChatWindow.focus();
if (hChatWindow.location=="about:blank") { // not sure; you need to experiment here
hChatWindow.location = "/chat/chat_window.asp?whatever";
}
Demo here, source here.
Register a callback on gmyWin.onunload.
You will find it tricky to subvert "block pop-up windows" in most browsers. However, if it is disabled, the following will work.
Main window:
var status = false;
function winOpen(){
window.open("child.html");
}
function winStatus(){
alert(status);
}
Pop-up window:
window.opener.status = true;
window.onblur = window.focus;
window.onunload = function(){
window.opener.status = false;
};
I have a set of links with #anchors pointing to a single webpage and I would like to smoothly move to a model with a separate webpage for each of those links. I want the old links to keep working using a redirect.
Old link style:
/all_products#A
/all_products#B
/all_products#C
New link style:
/products/A
/products/B
/products/C
I know that the server does not receive the #anchor name in the request but Javascript might.
Is it possible to automatically redirect from /all_products#A to /products/A using Javascript?
JQuery would be fine, it's being used on the site anyway.
I added this new answer to include some best practices for both extracting the hash from the url and doing a redirect.
// Closure-wrapped for security.
(function () {
var anchorMap = {
"A": "/products/A",
"B": "/products/B",
"C": "/products/C"
}
/*
* Best practice for extracting hashes:
* https://stackoverflow.com/a/10076097/151365
*/
var hash = window.location.hash.substring(1);
if (hash) {
/*
* Best practice for javascript redirects:
* https://stackoverflow.com/a/506004/151365
*/
window.location.replace(anchorMap[hash]);
}
})();
Put this as close to the top of your HTML <head> as you can so that it can execute before the rest of the page resources download:
<script>
function checkURL() {
var old_path = '/all_products';
if (window.location.pathname != old_path) {
// Not on an old-style URL
return false;
}
// Some browsers include the hash character in the anchor, strip it out
var product = window.location.hash.replace(/^#(.*)/, '$1');
// Redirect to the new-style URL
var new_path = '/products';
window.location = new_path + '/' + product;
}
checkURL();
</script>
This will check the current page URL and redirect if it matches the old-style path.
This code makes use of the window.location object which contains all the parts of the current URL already split up into component parts.
Making this script more generic is left as an exercise for the implementer.
I hope this can help :)
var urlSplit = document.URL.split("#");
if (urlSplit[1]) {
location.href = "http://www.example.org" + "/" + urlSplit[1];
}
else {
location.href = "http://www.example.org";
}
With jquery, either just replace the href with the correct one:
$('a').each(function() {
this.href = this.href.replace(/all_products#/, 'products/');
});
or capture clicks and redirect:
$('a').click(function() {
window.location = this.href.replace(/all_products#/, 'products/');
return false;
});
this might help:
A
B
C
D
E
<script type="text/javascript">
function redirectMe(a){
var aa=a+"";
window.location=aa.replace(/#/g,"/");
}
</script>