I have the following Javascript to disable buttons on CKEditor:
CKEDITOR.replace( 'text', {
on : {
instanceReady : function(ev) {
ev.editor.commands.image.disable();
ev.editor.commands.justifyleft.disable();
}
}
});
This works well to disable the buttons on load, but on click of any other non-disabled buttons, they all re-enable. I tried placing the code in a few other places but had no luck.
Where is the correct place to place the disable code so it won't re-enable?
If you really want to disable buttons, not hide them, then check my answer in - Show but disable wysiwyg buttons.
If you want to remove them completely then check this guide - http://docs.ckeditor.com/#!/guide/dev_toolbar
Related
I tried to disable auto focus of input search inside select2 especially on mobile to disable keyboard popup. However, as documented here:
select2 will not be triggering the native events. select2 will also
not be triggering non-native versions of the events, which is less of
an issue as we still have the option to add the native events without
breaking compatibility.
So the only way I could do is to try to get every input box inside select2 that was currently on focused and set lose focus, but has no luck.
$("select").select2().on("select2-open",":input",function(){
setTimeout(function(){
$(":focus").blur();
}, 50);
});
Is there any possibility that I could achieve that result above? Thanks.
Finally, I managed to find solution which works just fine for me as below:
/* Hide keyboard on select2 open event */
function hideSelect2Keyboard(e){
$('.select2-search input, :focus,input').prop('focus',false).blur();
}
$("select").select2().on("select2-open", hideSelect2Keyboard);
$("select").select2().on("select2-close",function(){
setTimeout(hideSelect2Keyboard, 50);
});
Tested on Tablet, and iOS device. In function hideSelect2Keyboard(), I searched for every current focus element, include input field which could be used to initialized select2, setting .prop('focus',false) which will remove focus and consequently disable keyboard popup on select2-open and select2-close event, by chaining .blur() is to remove focus border from element. Then I attached this function to select event open and close and it works just fine.
I hope this will help other who searching for this as me too. Thanks.
I think I've found a solution for select v3 - tested in v3.5.4.
We can use the option shouldFocusInput, which must be a function that should return true or false.
So initialize the plugin with the following code:
$(document).ready(function() {
$('select').select2({
shouldFocusInput: function() {
return false;
}
});
});
Codepen demo: https://codepen.io/andreivictor/pen/JmNzvb
If you want to disable the auto-focus only on mobile devices, my approach is to use Modernizr library, which can test for the existence of Touch Events in the browser.
So the complete code should be:
$(document).ready(function() {
$('select').select2({
shouldFocusInput: function() {
if (Modernizr.touch) {
return false;
}
return true;
}
});
});
I am not sure why, but the above solutions didn't work for me. But this one worked-
$('select').on('select2:open', function (event) {
$('.select2-search input').prop('focus',false);
});
Problem:
I'm trying to implement a dropdown form from a button. However, I'm having issues with the form not staying visible even after the condition is met. I'm new to javascript and css, so bear with me if it's a silly error. Thanks in advance.
What I want to do:
The form will be hidden by default.
When a user hovers over an image button, the form should be shown and hidden after the mouseleave.
If the user clicks the button, then the form should stay visible so that the user can enter the data and sumbit it.
Observation:
The objectives #1 and #2 from above are working as expected.
As opposed to objective #3, the form automatically hides even after the button click.
Unsuccessful Methods:
Using .show() instead of .css("display","block")
Using form:hover to set display:block.
Using setTimeout(hide_function,500) hides the form after 500ms regardless of the button click.
Code:
Here's the link to my jsfiddle that you can use to test it out.
References:
For button click detection.
For changing display property.
Just change data attr:
$('#dropbtn').click(function() {
$(this).data('clicked', 'yes');
$('#loginForm').css('display', 'block');
});
https://jsfiddle.net/d3h8gvek/3/#run //fixed result
i have modified your code little bit please check with the fiddle
$('#dropbtn').click(function() {
$(this).data('clicked', 'yes');
$('#loginForm').addClass('activate');
});
https://jsfiddle.net/d3h8gvek/7/
Example
https://jsfiddle.net/e80tL2kL/
To start with you can click the text in the bars and they will all
open up google in a new tab.
Proceed to click the edit button and you will be able to drag the
tabs around but not be able to click the text to open google.
Click edit again and it should disable movement and enable links
again.
However clicking the text of a bar which has been moved does not open the link on the first click but clicking it a second time will.
For this example I'm using
$('a').attr('onclick', 'return true;');
to re-enable links.
However I have tried using:
$('a').attr('onclick', '');
$('a').attr('onclick', null);
$('a').attr('onclick', '').unbind('click');
$('a').prop('onclick',null).off('click');
All of which have the same result.
Why does this "first click doesn't work after moving" happen and how can I fix it?
Probably a bug with jquery-ui, but you can fix it easily. There's a bind that doesn't get unbind on disable. You can unbind it manually like this:
} else if (edit == true) {
edit = false;
$("#sortable").sortable('disable');
$("#sortable").unbind('click.sortable');
$('a').attr('onclick', 'return true');
}
https://jsfiddle.net/rh27oxph/1/
I am working on an application using html and jquery. It has 4 buttons that are used to perform various tasks when i click them. what i want now is to show user the state of the button when mouse hover over it. For example for an ON/OFF button if mouse hover over the button it shows user that button is currently OFF or ON.
one way to do this is to use an alert() but with that each time i go to button it will show an alert which i dont want i just want a simple text etc to be displayed on top of the button when mouse hover over it.
anyone can help me how can i do it ?
Change the text of the button on button hover by using jQuery .hover():
$('button').hover(function(){
$(this).text('ON');
},function(){
$(this).text('OFF');
});
Demo Fiddle
Presuming you already know how to get the state of the button, let's assume you assign that state to a variable named... well, state. :)
Then it's pretty straightforward from there:
$("button").hover(function() { // You may choose a different selector for your buttons
var curButton = this,
$curButton = $(this);
curButton.oldHTML = $curButton.html(); // Cache old button label
$curButton.html(state); // Change button label to reflect state
}, function() {
var curButton = this,
$curButton = $(this);
$curButton.html(curButton.oldHTML); // Restore old HTML
});
I am using PrimeFaces 4.0 and tomcat-6.
I have used tab view for edit of a profile, by default the submit button is disabled using jQuery. And on change or key press of those input fields I'm enabling the button again using jQuery. But the button is disabled and not getting enabled again if i change the value in the input text.
MY scenario is editing of a profile,in that the submit button is disabled till any one of the field is changed. These are the ID's of those text fields.
I am disabling the button by
$(function() {
jQuery("button[type=submit]").prop("disabled", true).addClass('ui-state-disabled');
})
and to enable
$(function() {
$('#productName,#majorVersion,#minorVersion,#buildVersion,#revision,#productDescription')
.on('change keypress paste textInput input',
function() {PF('submitButton').enable();
});
});
I'm not sure if I understood your question correctly!
But as I can see that you are having a problem with disabling and enabling a button using PrimeFaces.
Here's a quick example:
Button
<p:commandButton value="THE BUTTON" widgetVar="thebuttonVar"/>
JS
$(function() {
// disables the button on the page load
thebuttonVar.disable();
// register the enabling event
$('#formId')
.on('change keypress paste textInput input', '#productName,#majorVersion,#minorVersion,#buildVersion,#revision,#productDescription', function() {
thebuttonVar.enable();
});
});
Again, your code would be working even if you are using only the change event.