We Keep Coding

How to Make PopUp Not Showing Again After User Close the Popup [duplicate]

There have already been answers to this question but I am still unsure exactly how it works.
I am using the following HTML in my footer.php:
<div id="popup">
<div>
<div id="popup-close">X</div>
<h2>Content Goes Here</h2>
</div>
</div>
and the following Javascript:
$j(document).ready(function() {
$j("#popup").delay(2000).fadeIn();
$j('#popup-close').click(function(e) // You are clicking the close button
{
$j('#popup').fadeOut(); // Now the pop up is hiden.
});
$j('#popup').click(function(e)
{
$j('#popup').fadeOut();
});
});
Everything works great, but I want to only show the pop up once per user (maybe using the cookie thing all the forum posts go on about) but I do not know exactly how to incorporate it into the JS above.
I know that I will have to load the cookie JS in my footer with this:
<script type="text/javascript" src="scripts/jquery.cookies.2.2.0.min.js"></script>
But that is all I understand, can anyone tell me exactly how the JS/jQuery should look with the cookie stuff added?
Thanks
James

*Note : This will show popup once per browser as the data is stored in browser memory.
Try HTML localStorage.
Methods :
localStorage.getItem('key');
localStorage.setItem('key','value');
$j(document).ready(function() {
if(localStorage.getItem('popState') != 'shown'){
$j('#popup').delay(2000).fadeIn();
localStorage.setItem('popState','shown')
}
$j('#popup-close, #popup').click(function() // You are clicking the close button
{
$j('#popup').fadeOut(); // Now the pop up is hidden.
});
});
Working Demo

This example uses jquery-cookie
Check if the cookie exists and has not expired - if either of those fails, then show the popup and set the cookie (Semi pseudo code):
if($.cookie('popup') != 'seen'){
$.cookie('popup', 'seen', { expires: 365, path: '/' }); // Set it to last a year, for example.
$j("#popup").delay(2000).fadeIn();
$j('#popup-close').click(function(e) // You are clicking the close button
{
$j('#popup').fadeOut(); // Now the pop up is hiden.
});
$j('#popup').click(function(e)
{
$j('#popup').fadeOut();
});
};

You could get around this issue using php. You only echo out the code for the popup on first page load.
The other way... Is to set a cookie which is basically a file that sits in your browser and contains some kind of data. On the first page load you would create a cookie. Then every page after that you check if your cookie is set. If it is set do not display the pop up. However if its not set set the cookie and display the popup.
Pseudo code:
if(cookie_is_not_set) {
show_pop_up;
set_cookie;
}

Offering a quick answer for people using Ionic. I need to show a tooltip only once so I used the $localStorage to achieve this. This is for playing a track, so when they push play, it shows the tooltip once.
$scope.storage = $localStorage; //connects an object to $localstorage
$scope.storage.hasSeenPopup = "false"; // they haven't seen it
$scope.showPopup = function() { // popup to tell people to turn sound on
$scope.data = {}
// An elaborate, custom popup
var myPopup = $ionicPopup.show({
template: '<p class="popuptext">Turn Sound On!</p>',
cssClass: 'popup'
});
$timeout(function() {
myPopup.close(); //close the popup after 3 seconds for some reason
}, 2000);
$scope.storage.hasSeenPopup = "true"; // they've now seen it
};
$scope.playStream = function(show) {
PlayerService.play(show);
$scope.audioObject = audioObject; // this allow for styling the play/pause icons
if ($scope.storage.hasSeenPopup === "false"){ //only show if they haven't seen it.
$scope.showPopup();
}
}

You can use removeItem() class of localStorage to destroy that key on browser close with:
window.onbeforeunload = function{
localStorage.removeItem('your key');
};

The code to show only one time the popup (Bootstrap Modal in the case) :
modal.js
$(document).ready(function() {
if (Cookies('pop') == null) {
$('#ModalIdName').modal('show');
Cookies('pop', '365');
}
});
Here is the full code snipet for Rails :
Add the script above to your js repo (in Rails : app/javascript/packs)
In Rails we have a specific packing way for script, so :
Download the js-cookie plugin (needed to work with Javascript Cokkies) https://github.com/js-cookie/js-cookie (the name should be : 'js.cookie.js')
/*!
* JavaScript Cookie v2.2.0
* https://github.com/js-cookie/js-cookie
*
* Copyright 2006, 2015 Klaus Hartl & Fagner Brack
* Released under the MIT license
*/
;(function (factory) {
var registeredInModuleLoader = false;
if (typeof define === 'function' && define.amd) {
define(factory);
registeredInModul
...
Add //= require js.cookie to application.js
It will works perfectly for 365 days!

You might be using an API for fetching user from database, so use any unique data like id or email or name to identify user then use localstorage method suggested by #Shaunak D. Just replace key with user's unique field and value with popup state.
Like:
ID : popup_state
Sorry for the mistakes in the reply. I am not on my pc today 😅😛

add a class to an ancer tag on click and save it with cookie

straight to the point , this is my simple code .
$(".vm-options a").click( function() {
$(this).addClass("vmselected").siblings().removeClass("vmselected");
});
<div class="vm-options">
List view
Grid view
</div>
now i need it to remember my choices every time i click on 'a href' tag , how can i add cookie to it .
thank you .

Use Javascript Cooke plugin and write Cookies.set('name', 'value');
Or the jQuery Cookie plugin and write $.cookie('name', 'value');

This example uses the js-cookie library, which you'll need to include in your page like so:
<script src="https://rawgit.com/js-cookie/js-cookie/master/src/js.cookie.js"></script>
You can use it to store and retrieve the ID of the selected link, this way:
// Select the currently saved VM at page load
selectVM();
// Do it on click too
$(".vm-options a").click(selectVM);
function selectVM()
{
var elem = $(this);
// If the call doesn't come from a click (eg on page load),
// get the one saved in a cookie or the default one: "#list"
if(this === window) elem = $('#' + (Cookies.get('selectedVM') || 'list'));
elem.addClass("vmselected").siblings().removeClass("vmselected");
// Save it for 7 days
Cookies.set('selectedVM', elem.id, { expires: 7 });
}
Here, the ID is saved in a cookie named selectedVM using:
Cookies.set('selectedVM', value);
and retrieved using:
Cookies.get('selectedVM');
It's that simple!

Is there a way to disable href link on click for n days use cookies in JavaScript

Is there a way to use cookies to disable a link after click for 5 days and be active again until click then disable for 5 days ...etc
I have use this for disabling but refreshing page link is active again. I was just thinking using $_user cookie I might be able doing this my problem is getting things together. Google a lot on how to use cookies but can't seem to get the logic of using it to get my results
Download
Delete
<script>
jQuery(document).ready(function($) {
$('a.disabled').on('click', function(e) {
e.preventDefault();
});
});
</script>

Follow these step to check to obtain the result you desire:-
Now a create function as follow to take in account of the cookie:-
function onclickLink(event, this1){
if($.cookie('link_disabled') === null || $.cookie('link_disabled')==undefined) {
/* do whatever you want with link*/
$.cookie("link_disabled", 1, { expires : 5 });/*setting the cookie for 5 days*/
}
else{event.preventDefault();}
}
Modifiying current event accordingly:-
jQuery(document).ready(function() {
$(parent).on('click', 'a.disabled',function(e) {
onclickLink(e,$(this));
});
});
Demo
This fiddle will not work chrome as chrome does not allow to set cookie locally. So here is the version of the code that is running on the server: link it works in all browsers. Comment if any one faces any bug.
The plugin used is jquery.cookie.js
Follow these answers to know more about cookies and other stuff:
https://stackoverflow.com/a/8537083/3190165
https://stackoverflow.com/a/2824037/3190165

jQuery Dialogue Box Not Closing

I have a javascript/jQuery cookie confirmation box on my site as shown here: http://jsfiddle.net/x7rAk/1/
var checkCookies = document.cookie;
var cookieNotice = '<div id="continue_box" class="cookie_box"><p>This website uses cookies to improve the user experience. For more information on cookies please see this link. By clicking continue, you agree to the use of cookies.</p><p class="cookies_accept"><span class="cookie_button" id="continue"><img src="/images/tick.png"/><span> Continue</span></span></p></div>';
$('body').ready(function() {
$('body').prepend($(cookieNotice).fadeIn(2000));
});
var continueButton = 'span#continue.cookie_button';
var closeButton = 'span#close.cookie_button';
var closeNotice = '<div id="close_box" class="cookie_box" style="display:none"><p>You have agreed to the use of cookies. This allows us to bring you a better service by remembering your preferences.</p><p class="cookies_accept"><span class="cookie_button" id="close"><img src="/images/cross.png"/><span> Close</span></span></p></div>';
$('#continue_box.cookie_box').ready(function() {
$(continueButton).click(function() {
$('#continue_box.cookie_box').fadeOut(1000, function() {
$('body').prepend($(closeNotice).fadeIn(1000));
});
});
});
$(closeButton).click(function() {
$('#close_box.cookie_box').fadeOut(2000);
});
This is missing images and fonts etc. but it works exactly the same as on my site.
If you run the code, you will see that the box doesn't disappear when you click close.
First of all, how do I fix it, and secondly why does mine not work (I like to know why so I don't have to waste your time again :) ).
Thank you,
Connor
P.S. On my site it checks whether you have a cookie called cookiesAgree before showing it so the code is normally more sophisticated.

This should work
$(document).on("click", closeButton, function() {
$('#close_box.cookie_box').fadeOut(2000);
});
The content is being added dynamically, so you need to register the event handler.

Initialize media player only if query string parameter is present

I have a SharePoint page that has a hyperlink which points to a video clip. Clicking on the link will play the video in an overlay window (uses Silverlight). If Silverlight runtime is not present, it displays the "install Silverlight" prompt. When the page is invoked with a IsDlg=1 query string, the hyperlink is hidden (it is in the left navigation bar), and only the main content page is shown. But I still get the "install Silverlight" prompt. I want to get rid of the prompt when IsDlg=1 is present.
Below is the relevant javascript code on the page. I've modified it slightly to initialize the media player only if IsDlg=1 is not present. But it is not working as expected. Any ideas?
// original code
$(function () {
mediaPlayer.createOverlayPlayer();
mediaPlayer.attachToMediaLinks(document.getElementById('videoList'), ['wmv', 'avi', 'mp4']);
});
// modified code
$(function () {
var field = 'IsDlg';
var url = window.location.href;
if (url.indexOf('?' + field + '=') != -1) {
} else {
mediaPlayer.createOverlayPlayer();
mediaPlayer.attachToMediaLinks(document.getElementById('videoList'), ['wmv', 'avi', 'mp4']);
}
});

As long as the HTML which embeds the Silverlight control is present, it will show the "Install Silverlight" dialog. If you don't want the dialog to show, you'll have to change the HTML source. You could add JavaScript code to add the HTML dynamically, so that it only shows when necessary. That answer would depend on how you're currently embedding the Silverlight control.
EDIT: You could try code like this:
$(function () {
if (window.location.search.indexOf('IsDlg=1') === -1) {
$.getScript('/_layouts/mediaplayer.js', function () {
mediaPlayer.createOverlayPlayer();
mediaPlayer.attachToMediaLinks(document.getElementById('videoList'), ['wmv', 'avi', 'mp4']);
});
}
});

Your code should work, so you probably want to debug for other possible issues.
$(document).ready(function () { // add explicit wait until dom ready
console.log(window.location.search); // just to check that the parameter is present
if(window.location.search.indexOf("IsDlg=1") < 0){ // testing the query string part only
mediaPlayer.createOverlayPlayer();
mediaPlayer.attachToMediaLinks(document.getElementById('videoList'), ['wmv', 'avi', 'mp4']);
}
});
Try that and see how you get on.