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);
Related
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 :)
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
Using the newest version of the froala editor (v2) doesn't seem to work when destroying an inline editor.
It leaves this element in the editor element: <i class="fa fa-code"></i>. You can see this behaviour if you go to the inline example-site: https://www.froala.com/wysiwyg-editor/v2.0/docs/examples/inline
And enter the following into the developer console: $('div#froala-editor').froalaEditor('destroy');
Does anyone know how to mend this? It also leaves the editors wrappers inside the editorcontainer and preserves editorclasses on it even though the documentation states that the destroy command will remove the editor in its entirety and the element back to its pre-init state.
Thank you very much!
Please refer this JSFiddle -
https://jsfiddle.net/froala/8yxLcg5k/
$(function() {
$('div#froala-editor').froalaEditor();
});
// Destroy action.
$('a#btn-destroy').on('click', function (e) {
e.preventDefault();
if ($('div#froala-editor').data('froala.editor')) {
$('div#froala-editor').froalaEditor('destroy');
}
});
// Initialize action.
$('a#btn-init').on('click', function (e) {
e.preventDefault();
if (!$('div#froala-editor').data('froala.editor')) {
$('div#froala-editor').froalaEditor();
}
});
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;
I need to know that fancybox has been open up that to allow or deny another function to start.
Build-in functions Fancybox like 'onStart' or 'onClosed' not work.
I'm talking about version 1.3.0 RC2
$.fancybox.isOpen (bool) indicates, whether fancybox is open.
The version your using apparently doesn't match the documentation; I looked at the source and saw the names of the options were different the the online docs. I just tested the following with 1.3RC2:
$(document).ready(function() {
function myStartFunction() { alert('fancy box opened'); }
$("a#inline").fancybox({
'onStart': myStartFunction
});
});
The option you're looking for is 'onStart' - the alert in myStartFunction goes off every time I open a box. I'm not sure when they changed the option but you can look at the source of any version you use at the bottom, and see what the option should be called.
EDIT
I just double checked on v1.2.5 - the version I use - and the callbacks are indeed named different. callbackOnStart works with 1.25 but, as I said, not 1.3
Try to use methods
beforeLoad, // Before loading
afterLoad, // After loading
beforeShow, // Before changing in current item
afterShow, // After opening
This code work fine
$(".fancybox").fancybox({beforeShow:function(){alert('blah');}});
If you're looking for a way to determine whether fancybox is open or not (instead of an event that is fired upon opening fancybox) then as of fancybox v2 you can use the $.fancybox.isOpen property. It's not documented (at least I didn't find any reference) but it works.
Example:
if(!$.fancybox.isOpen) {
$.fancybox.open({
href: '#newsletter-campaign-popup',
height: 385,
width: 510,
type: 'inline'
});
}
The example above prevents opening a second fancybox if one is already open.
I'm not sure what you mean by built-in functions. Fancybox has callbacks which call user-defined functions (that you must make yourself).
Like:
function myClose()
{
alert('close');
}
function myStart()
{
alert('start');
}
$("a#single_image").fancybox({
'callbackOnClose': myClose,
'callbackOnStart': myStart
// etc, etc..
});
Alternatively you could check the fancy_content div to see if it has anything inside.
(if it has, then fancybox is open).
if ( $('#fancy_content:empty').length > 0 )
{
// Is empty
}
this seems to work for me:
isLoaded : function(){
return $('#fancybox-content').html()!='';
}
If you have multiple div's that you are using for fancybox, following code might be better and more universal solution:
if ($('.fancybox-opened').length == 0) {
//there is no fancybox opened at all
}
Note also that fancybox content might not be always empty, even if fancybox is closed.
Answer for 2018 December.
if ($('.fancybox-content').length == 0) {
//there is no fancybox opened at all
}
Details:
function checkf()
{
if ($('.fancybox-content').length == 0) {
alert('there is no fancybox opened at all.');
}
else
{
alert('there is a fancybox opened.');
}
}
$("#ffbox").click(function()
{
setTimeout(checkf,1000);
});
checkf();
<head>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/#fancyapps/fancybox#3.5.2/dist/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/#fancyapps/fancybox#3.5.2/dist/jquery.fancybox.min.js"></script>
</head>
<body>
<a data-fancybox data-options='{"iframe" : {"css" : {"width" : "80%", "height" : "80%"}}}' href="https://www.google.com/maps/search/?api=1&query=China" class="btn btn-primary" id="ffbox">Display Google Map</a>
</body>