I referred to this thread to get a transparent div to display on top of the web site content and make it disappear when clicking on it...
however, when someone visits a page within the site and they click on the home button they are displayed the transparent div again...
is there a way to have the div appear only one time and do not appear again after they close it?
The best way to do is by setting a cookie. On this way, you can hide it forever, or hide it for a specified time.
document.cookie = "transparentdivShow = false";
And now you can check if this cookie exists, and if so, don't show the div:
if(document.cookie.indexOf("transparentDivShow") >= 0) {
return true; // Don't show it
} else {
return false; // Show the div
}
As the above poster mentioned, you could use a cookie. Alternatively, you could use HTML5 Local Storage! Local Storage allows data to be stored locally within a user's browser.
In this instance, you could have something like a clickcounter that counts to see if the clickcounter is greater than 1. If it is greater than 1, give the div a hidden attribute or just get rid of it.
if (sessionStorage.clickcounter) {
<div hidden> You can't see me. I'm invisible. </div>
} else {
sessionStorage.clickcounter = 1;
<div visible> Hi! I'm not transparent. </div>
}
I hope that this helps. Here's a page with more information on it as well!
http://www.w3schools.com/html/html5_webstorage.asp
Related
I have a issue with adding a button that should become visible after a Java script function is completed.
Code source:
"https://codepen.io/arcs/pen/rYXrNQ"
Note: code is not mine obviously and I take no any credit for this
Elaboration:
I moved this code to a simple html page, everything went fine.
Once the registry form is finished, text message will display with a small time delay.
What I would like to have here is, a button with timeout function (a bit longer than text message) under the text message, from where I can navigate the user to the next page.
Once again, when the entire process of this code is finished, text message will load.
I need a button to load below that text.
I need button to move user to the next page, so it should contain a link and open in same tab could be also added.
Any help with this would be highly appreciated.
First off create an 'a' tag with the link to the next page. Make sure you give it an id for the javascript part.
<a id="button" href="path_to/nextpage.html">Text for the button</a>
Do add basic CSS to it like position, width, and height. Set the opacity to 0 and pointer-events to none.
//other properties
opacity:0;
pointer-events:none;
//other properties
Once you have done this, just get a variable to point to the tag and add another setTimeout function which sets the opacity to 1 and pointer-events to all
var nextbtn = document.getElementById("button"); //or whatever id you gave the <a> tag
setTimeout(function() {
nextbtn.style.opacity = "1";
nextbtn.style.pointerEvents="auto"
}, 500);// you can change the delay to suit your requirements
I hope this clears your issue. Have a good day!
my goal is to hide the content of my homepage when someone visits. onClick to begin button the content should be shown. Content should stay open when user goes to other page and comes back to homepage. But it will be hidden when user closes the window and opens up the homepage again. To achieve this goal I have put the following code but it keeps the content open even when user closes and opens the window. So please help me out.
if (! localStorage.noFirstVisit) {
// hide the element
$("#content").hide();
// check this flag for escaping this if block next time
localStorage.noFirstVisit = "1";
}
Another issue is when the content shows the design gets little messed up(by widening the divs, bringing horizontal scroll)
$(".roll-button").click(function(){
$("#content").show();
});
I would highly appreciate if you check website, suggest me fix or show me proper way to achieve this goal. url:iamicongroup.com
You can totally use sessionStorage to detect whether it is new tab(window) or not.
When you first visit this page, set sessionStorage.noFirstVisit = "1";.
After you go to another page and back, sessionStorage.noFirstVisit is still "1".
But when you close the tab or browser and open the page newly again, sessionStorage.noFirstVisit will be undefined.
Documentation is here
The documentation also provide the difference between sessionStorage and localStorage.
I would suggest reading this: Detect Close windows event by Jquery
It goes over window unloading (beforeunload), which I believe is what you're after. You can set/unset your localstorage values there based on certain criteria being met; for example:
$(window).on("beforeunload", function() {
if(localStorage.noFirstVisit = "1" {
// do something
localStorage.noFirstVisit = "[someValue]"
}
else {
// do something
localStorage.noFirstVisit = "1"
}
})
Another issue is when the content shows the design gets little messed up(by widening the divs, bringing horizontal scroll)
how about adding something like 'ng-cloak' in angular, to avoid the undesirable flicker effect caused by show/hide.
when clicking the roll-button, it prevents the divs from showing unfinished..
I have a page with an HTML FORM to add/edit/delete Project Task rows. They are saved to a Database.
As this page can be very long/tall, right now there is a SAVE button at the top and bottom of page that uses AJAX to save all changes.
To make things easier, for the user to make a SAVE I am wanting to show a FIXED DIV across the top of the screen with a SAVE button.
This FIXED DIV should only show up when there are Un-Saved changes. So when the page load you do not see this right away until you make a change on the page. At that point it comes into view.
Clicking the AJAX Save button saves the Task records to Database and then the Fixed DIV/SAVE Button will go hidden again until another Change is detected.
Right now I have this like 90% working.
I have JavaScript which has EVENTS which call my showTaskUnSavedChangesHeaderBar() Function which is shown below when:
Text Input is changed
Textarea changed
Selection dropdown changed
Button Clicked to Add a New Task Row
Button Clicked to Delete Task Row/record
So as you see I have the code in place to Detect a CHANGE on the page. This then Triggers my Function which makes my Fixed DIV with Save button come into view.
Now once you click the Save button I saved the Data using AJAX and then call my hideTaskUnSavedChangesHeaderBar() Function which is also shown below.
This makes the Fixed DIV with Save button go back to being Hidden with it's CSS display: none property set.
Up until this point everything described above works as expected, except in my showTaskUnSavedChangesHeaderBar() Function I added some code to make the Fixed DIV only show when you are scrolled down the screen at least 100px so that it is not shown at the very top of screen right now.
This scroll trigger part also works fine.
The problem is, once you make a save and hideTaskUnSavedChangesHeaderBar() is called, it Hides the Fixed DIV but as soon as you scroll at all again, it keeps showing back up, even though no new CHANGES have been made to the Data on screen.
Just looking at the code below, can someone tell me what I am missing? When my hideTaskUnSavedChangesHeaderBar() Function is called and the DIV is hidden, it should Re-set the process until another Change on page is made but I must be missing something because as soon as it goes hidden a single px scroll up or down triggers it back into view again
UPDATE
It seems like when my hideTaskUnSavedChangesHeaderBar() Function is Called, I need to somehow kill this Event $(window).scroll(function() until the showTaskUnSavedChangesHeaderBar() Function is called again, is that even possible though?
I realize a JSFiddle page might be helpful, I will work on setting one up if there isn't a simple solution posted soon. I held off as my page is really complex and i'll have to dumb it down a lot to get a Fiddle working for the demo
// When there are Un-Saved changes on the Task Edit view, show a Fixed Header DIV with a SAVE Button
function showTaskUnSavedChangesHeaderBar(){
if ($('#task-edit-unsaved-header-bar').length > 0) {
var unSavedChangesHeaderBar = $('#task-edit-unsaved-header-bar');
var fixmeTop = 100;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= fixmeTop) {
unSavedChangesHeaderBar.css({
display: 'block',
position: 'fixed',
top: '0',
left: '10'
});
}
});
}
}
// When there are Un-Saved changes on the Task Edit view, show a Fixed Header DIV with a SAVE Button
function hideTaskUnSavedChangesHeaderBar(){
if ($('#task-edit-unsaved-header-bar').length > 0) {
var unSavedChangesHeaderBar = $('#task-edit-unsaved-header-bar');
unSavedChangesHeaderBar.css({
display: 'none'
});
}
}
You bound an event in your function
$(window).scroll(function() {
So after that this code will always fire on scroll. If you call showTaskUnSavedChangesHeaderBar it will even bind the handler multiple times, making it fire multiple times.
Solution
You have to unbind this event handler when not needed anymore. Even better would be to put it somewhere outside and just switch a flag variable in your functions so that your scroll handler knows what to do.
.hide-me { display: none !important; }
For hideTaskUnSavedChangesHeaderBar method call addClass('hide-me') and in showTaskUnSavedChangesHeaderBar call removeClass('hide-me')
Now the scroll event won't override display to 'block'.
My js app is an advent calendar where users can open a 'door' on or before today's so the div background image changes.
I would like to set up a cookie so when they return the following day the divs still have the background image in place.
I have set up the cookie and door open code but I'm not sure how to integrate the cookie into the door open function. Any help would be appreciated, many thanks.
Link to App: http://p3.katecooperuk.com
Door Open - select Random background image from Array:
$('.doors').click(function () {
if (today.getMonth() !== 11) {
return;
}
// Check if the date is tomorrow or later
if (+($(this).attr('id').split('dec')[1]) > day) {
// Show image telling user to come back
$(this).css('background-image', 'url(/images/come_back.png)');
return;
}
// Otherwise it is today or earlier
// Select Random Image
var doorImage = getRandomImage(calendarImg);
// Change background image of door that was clicked
$(this).css('background-image', doorImage);
});
Cookie
//on document ready, checks if the cookie is set, and if so, sets the background with it's value
$(function(){
if($.cookie('background-image') != null){
$(this).css('background-image', $.cookie('background-image'));
}
});
// Set cookie
$(function() {
$(this).css('background-image', doorImage);
$.cookie('background-image', doorImage);
});
W3Schools have a great newbie tutorial on cookies here
Basically, what you want to do is set the cookie value to the date it was created and whatever other parameters you want to set when the user comes back (such as the id's of the background images.) Then when the user enters your site you check to see if they have a cookie. If they do, check its date parameter. If it's not today (this is really easy to check with JavaScript) then use your extra parameters to set whatever background you want.
Make sure that whenever they change their backgrounds you reset your cookie data to the current backgrounds.
Hope this helps!
*
From you code, I'm having a hard time understanding exactly what it is you're trying to achieve. Also, I'm looking at your site and I don't see any saved cookies.. Try starting with a simple example, 1 door and 1 cookie. Then do a simple check to see if your cookie is working, for example, set a specific background when a cookie is detected and another if not. Once you successfully manage your cookie you can start making it more complex with more data in it.
I have created a site where the user can change the image of a page from 4 available imges(which works fine), but when you go to another page, the image changes back to the default.
I'm new at Javascript and trying to create an if else statement but I can't seem to get it to work.
This is something I am after:
if (currentpage == body.style.backgroundImage="url('image1.png')")
{
allotherpages == body.style.backgroundImage="url('image1.png')";
}
else if (currentpage == body.style.backgroundImage="url('image2.png')")
{
allotherpages == body.style.backgroundImage="url('image2.png')";
}
I would appreciate any help or a point in the right direction. Thank you.
You want to save the current user's background when he changes page?
Use cookies to save the current background or store it in a database
Set the background
Save it
When you change page, load the saved background
Save the background name in cookie for exemple:
$.cookie("currentBackground", "image1.png");
When you load your page:
$(document).ready(function(){
var currentBackground = $.cookie("currentBackground");
});