Develop Reference

How to use cookies to make a certain window only need to be displayed once when you log in again [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 😅😛

Is this a right code to disable MathJax right-clicking menu?

I use the code below
<script type="tet/x-mathjax-config">
MathJax.Hub.Config({
showMathMenu: false
});
</script>
to disable right-clicking menu on my math website, however It seems not to work. Is it an outdated code or something?

For Mathjax version 3, the information is here: https://docs.mathjax.org/en/latest/options/menu.html
Use this configuration:
<script>
MathJax = {
...
options: {
enableMenu: false
...
}
}
</script>
For version 2 the corresponding setting is documented here: https://docs.mathjax.org/en/v2.7-latest/options/hub.html#configure-hub
and involves the showMathMenu property listed in the question.

Well, if you want to disable the right clicking, you can use the event listener for it and prevent the default behavior, something like:
window.addEventListener('contextmenu', (e) => {
e.preventDefault();
}, false);

JS plug-in breaks other scripts when not required on page

I'm using a plug-in for my responsive navigation (http://responsive-nav.com). The plug-in works great, the problem I'm having is there is not navigation on every page. When this is the case I've noticed other javascript doesn't load and I get an error in reference to "responsive-nav.js":
Uncaught Error: The nav element you are trying to select doesn't exist
Here's how I load the script in the main.js file.
$(function(){
var navigation = responsiveNav(".site-nav__list", {
customToggle: "#site-nav__toggle",
open: function(){
$("#site-nav__toggle").addClass('open');
},
close: function(){
$("#site-nav__toggle").removeClass('open');
}
});
});;
The file is called on each page (/js/responsive-nav.js) but removing it doesn't resolve the issue, commenting out the code I've typed above does - so I'm guessing it's something to do with that?
Hope someone can help, cheers!

After speaking with the author of the plug-in he advised I just wrap the script in an 'if statement'.
Here's what we ending up using:
$(function(){
if ($(".site-nav__list").length) {
var navigation = responsiveNav(".site-nav__list", {
customToggle: "#site-nav__toggle",
open: function(){
$("#site-nav__toggle").addClass('open');
},
close: function(){
$("#site-nav__toggle").removeClass('open');
}
});
}
});
Simple. Works like a charm :)

Stay focused on element if click and hold starts inside it

I am using the qtip jquery plugin, and ran into a strange problem. I have a large "tooltip" that scrolls. fiddle here: http://jsfiddle.net/yu9tb1wn/
In firefox if I click and try to select text, the div will scroll when I leave through the top or bottom. This is expected and desired because that's how most windows behave.
However in IE and Chrome the tooltip disappears, because it is supposed to disappear on mouseleave.
How can I get IE and Chrome to behave like Firefox? Maybe there are some events I need to use that I'm unaware of.
If you try that fiddle in the different browsers, try to select all the text and you should see the behavior I'm talking about.
simple qtip code:
$('a[title]').qtip({
hide: {
delay:250,
fixed: true,
}
});

I manage to make this work on Chrome : http://jsfiddle.net/d6b5wmLk/12/
var b = true;
$('a[title]').qtip({
hide: {
delay:250,
fixed: true,
},
events: {
hide: function(event, api) {
if(!b) {
event.preventDefault();
}
}
}
});
$( "html" ).mousedown(function() {
b = false;
});
$( "html" ).mouseup(function() {
b = true;
$('a[title]').qtip('hide');
});

i was looking and the library and i believe that you can increment the delay a little more to achieve that. But besides that i don't see any other way without modifying the library

jquery fancybox - prevent close on click outside of fancybox

I'm using the Fancybox plugin for my modal windows. It seems like no matter what options I use I can't prevent the fancybox modal window from closing when the user clicks outside of the fancybox modal window (grayed out area).
Is there a way to force the user to click the X or a button that I trigger the close event? This seems like it should be simple so I'm hoping I'm just reading the examples wrong.
I've tried hideOnContentClick: false but that doesn't seem to be working for me. Any ideas?

jQuery(".lightbox").fancybox({
helpers : {
overlay : {
speedIn : 0,
speedOut : 300,
opacity : 0.8,
css : {
cursor : 'default'
},
closeClick: false
}
},
});

<script type="text/javascript">
$(document).ready(function() {
$("#your_link").fancybox({
'hideOnOverlayClick':false,
'hideOnContentClick':false
});
});
</script>

I'm using fancybox 1.3.1, if you wanna force the user to close the modal box ONLY by clicking on the button, you can specify in the configuration:
<script type="text/javascript">
$(document).ready(function() {
$("#your_link").fancybox({
'hideOnOverlayClick':false,
'hideOnContentClick':false
});
});
</script>

For this issue, please try this way
$("YourElement").fancybox({
helpers: {
overlay: { closeClick: false } //Disable click outside event
}
Hope this helps.

If you are using Fancybox 1.2.6 (like I am on a project), I found out the option hideOnOverlayClick. You can set it to false (e.g. hideOnOverlayClick: false).
I found this option while exploring to modify the code based on the suggestion givn by Scott Dowding.

There is no option for that. You will have to change the source code.
In jquery.fancybox-1.2.1.js you need to comment out (or delete) line 341 in the _finish method:
//$("#fancy_overlay, #fancy_close").bind("click", $.fn.fancybox.close);

I ran into the same "issue". This worked for me:
$("#fancybox-overlay").unbind();

none of the above worked for me, so i just wrote a simple bit for latest version of fancybox.
function load(parameters) {
$('.fancybox-outer').after('');
}
$(document).ready(function () {
$(".various").fancybox({
modal: true,
afterLoad: load
});
});
Hope this helps :)

The $("#fancybox-overlay").unbind() solution given for this question by #Gabriel works except I needed to bind it to the fancybox after it loads its content, and I couldn't unbind immediately. For anyone who runs into this issue, the following code solved the problem for me:
$('.fancybox').fancybox({'afterLoad' : function() {
setTimeout(function() { $("#fancybox-overlay").unbind(); }, 400);}
});
The 400ms delay got it working for me. It worked with 300ms but I didn't want to take chances.

Set the closeClick parameter to false inside your function:
$(".video").click(function() {
$.fancybox({
width: 640,
height: 385,
helpers: {
overlay: {
closeClick: false
}
}
});
return false;
});

Just add following line to your function, you do not have to change anything in jquery.fancybox-1.2.6.js
callbackOnStart : function() {$("#fancy_overlay").bind("click","null");},

you can prevent the fancy box to close by applying these setting
'showCloseButton'=>false, // hide close button from fancybox
'hideOnOverlayClick'=>false, // outside of fancybox click disabled
'enableEscapeButton'=>false, // disable close on escape key press
get the fancybox setting from following link
http://www.fancybox.net/api

I had to use a combination of all of the above answers, as all of them include errors. Certainly, no editing of the source code is necessary.
In my case, I wanted to disable overlay clicks closing the box as I had a progression of questions that would be displayed sequentially inside the fancybox, so I didn't want users to lose their progress by accidentally clicking on the overlay, but wanted to keep that functionality elsewhere on the page.
Use this to disable it:
$(".fancybox-overlay").unbind();
Use this to re-enable it:
$(".fancybox-overlay").bind("click", $.fancybox.close);

Just use the following code:
$(document).ready(function() {
$("a#Mypopup").fancybox({
"hideOnOverlayClick" : false, // prevents closing clicking OUTSIE fancybox
"hideOnContentClick" : false, // prevents closing clicking INSIDE fancybox
"enableEscapeButton" : false // prevents closing pressing ESCAPE key
});
$("a#Mypopup").trigger('click');
});
<a id="Mypopup" href="images/popup.png"><img alt="Mypopup" src="images/popup.png" /></a>

You can set the default closeClick on the overlay to false. Has worked for me in version 2.1.5.
$.fancybox.helpers.overlay.defaults.closeClick=false;