I am using contenteditable="true" in a div
What I want to do it to toggle true and false on this attribute everytime I click on a div.
example:
$( "#mylabel" ).click(function() {
$('#editablediv').attr('contenteditable','false');
});
I tried:
$( "#mylabel" ).toggle(function() {
$('#editablediv').attr('contenteditable','false');
});
but that didn't work
How can I do this?
Try this way:
$( "#mylabel" ).click(function() {
var value = $('#editablediv').attr('contenteditable');
if (value == 'false') {
$('#editablediv').attr('contenteditable','true');
}
else {
$('#editablediv').attr('contenteditable','false');
}
});
Keep me posted, hope this helped
Here is shorter than your shortest (Reusability and Character Count):
function editTheElement() {
var a = "contenteditable";
$(this).attr(a) === 'true' ? $(this).attr(a,'false') : $(this).attr(a, 'true');
}
or still
function editTheElement(e) {
var a = "contenteditable";
e.attr(a) === 'true' ? e.attr(a,'false') : e.attr(a, 'true');
}
or
function editTheElement(e) {
var a = 'contenteditable';
var v= e.attr(a);
e.attr(a,!v);
}
or
function editTheElement(e) {
var a = 'contenteditable';
e.attr(a,!e.attr(a));
}
or
function editTheElement(e) {
e.attr('contenteditable',!e.attr('contenteditable'));
}
JS is fun :)
In 2018 at least, most of these answers aren't working past the first on/off in Chrome 68. It's something with how jQuery or the browser is reading the value of this attribute, because the logic is pretty simple.
The code I found to work was
var el = $("{your selector}")
(el.attr('contenteditable') ?
el.removeAttr('contenteditable') :
el.attr('contenteditable', true));
Demo Fiddle
shortest solution I found:
$('[contenteditable]').attr('contenteditable') === 'true' ?
$('[contenteditable]').attr('contenteditable', 'false') :
$('[contenteditable]').attr('contenteditable', 'true');
$('#mylabel').click(function() {
editable = $('#editablediv').attr('contenteditable');
$('#editablediv').attr('contenteditable', !(editable == 'true'));
});
Related
I'm having trouble getting the "else" bit of this working. Anyone know what the problem is?
var navOpen = false;
if (navOpen == false) {
$("nav").click(function() {
$(this).css("bottom","0");
navOpen = true;
});
} else {
$("nav").click(function() {
$(this).css("bottom","-84");
navOpen = false;
});
}
The condition is in the wrong place.
var navOpen = false;
$("nav").click(function() {
if (navOpen == false) {
$(this).css("bottom","0");
navOpen = true;
} else {
$(this).css("bottom","-84px");
navOpen = false;
}
});
You are binding several handlers to the same element, you can use css method:
$("nav").click(function() {
$(this).css("bottom", function(i, bottom) {
return bottom === '0px' ? '-84px' : '0px';
// return navOpen ? '-84px' : '0px';
});
})
Try with
$(this).css("bottom","-84px");
You need to define metering (e.g px, %). CSS doesn't support just numering parameters like HTML attribute does.
I have a form with several <select> elements on it.
I'd like to check that the value of all select elements is '0'. How can I do this elegantly?
Currently I have this:
var all_zero = true;
$('myform select').each(function() {
if ($(this).val() !== '0') {
all_zero = false;
}
});
if (all_zero) { //do something
Does anyone know a nicer way to do it?
Test for the value in the selector.
var non_zero = $('myform select[value!="0"]').length;
if (non_zero === 0) { //do something
So if there's no select that does not have the value "0", non_zero === 0 will be true.
That is the correct way to do it, one way for getting it cleaner is only declaring a variable when necessary. like so:
$('myform select').each(function() {
if ($(this).val() !== '0') {
some_zero = true;
}
});
if (!some_zero) { //do something
Your code is nice and you can try :
var all_zero = $('myform select').filter(function(){return $(this).val()!='0'}).length>0
I have input boxes and textareas that need to be toggled between left-alignment and right-alignment (depending on the user's language, the direction would be different). How can I do this with jQuery?
As I don't know the key code for all Persian letters, I had to do it like this:
var str = $('#item').val(); //this is your text box
var firstChar = str.substr(0,1);
var characters = ['ا','ب','پ','ت','س','ج','چ','ح','خ','د','ذ','ر','ز','ژ','س','ش','ص','ض','ط','ظ','ع','غ','ف','ق','ک','گ','ل','م','ن','و','ه','ی'];
function checkPersian() {
var result = false;
for (i = 0 ; i<32 ; i++) {
if (characters[i] == firstChar) {
result = true;
}
}
return result;
}
if (checkPersian()) {
$('#item').css('direction','rtl');
} else {
$('#item').css('direction','ltr');
}
Here I have completely overhauled Mohammad's script but it's limited to its purpose: scanning if the first letter the user types in is Persian and changing the inputs direction according.
Here it is: jsfiddle.net/uPH7N/4
You can use dir="auto" attribute in modern browsers: Live Demo
<input type="text" dir="auto"><br>
Also you can do it by jQuery like this: Live Demo
$('input, textarea').keyup(function() {
$(this).val().charAt(0).charCodeAt(0) < 200 ? $(this).css('direction','ltr') : $(this).css('direction','rtl');
});
Toggle the elements' css with jquery (assuming the relevant inputs/textareas all have the class textdirectionBoxes):
$('.textdirectionBoxes').css('direction', 'rtl');
and
$('.textdirectionBoxes').css('direction', 'ltr');
What about
jQuery( document ).ready( function(){
var language = navigator.userLanguage || navigator.language;
if( jQuery.inArray( language, ['ar', 'he', 'ur'] ) != -1 )
jQuery( 'input[type="text"], input[type="password"], textarea' ).css( 'direction', 'rtl' );
});
?
edit: fixed little code-bug
function isUnicode(str) {
return (str.charCodeAt(str.length-1) > 255) ? true : false;
}
$('input[type=text]').each(function() {
$(this).keyup(function(e) {
$(this).css('direction',
isUnicode($(this).val()) ? 'rtl' : 'ltr'
);
});
});
I have a question actually I need one if/else for hide or show one div, I had wrote the following function but it didn’t work:
jQuery(document).ready(function(){ /*show div OtraUniversidad when option:selected = 165*/
var optionValue = $("#Universidad option:selected").val();
$("#OtraUniversidad").hide();
if(optionValue == 165){
$("#OtraUniversidad").show();
}
});
Actually works: $("#OtraUniversidad").hide();
I don't know what's wrong; I'm new in JavaScript and jQuery
Some help is always welcome.
I think this should work:
jQuery(document).ready(function() {
$('#Universidad').change(function() {
var optionValue = $("#Universidad").val();
if(optionValue == 165) {
$("#OtraUniversidad").show();
} else {
$("#OtraUniversidad").hide();
}
}).change();
});
Demo: http://jsfiddle.net/gGX2E/1/
optionValue == 165
This comparison is wrong, you must use this:
if(optionValue == "165")
Hands up - I can't figure it out what's wrong with it. Is that a bug or a wrong code ?
$(document).ready(function() {
$("#rem_but").click(function(){
var mail_name = $("#mail_rem").val();
var dataString = 'mail_name='+ mail_name;
if (mail_name.val() == "") { $("#rem_but").attr("disabled",true); }
else { $("#rem_but").removeAttr("disabled"); };
}); });
So when there's no input the button returns false correctly - when there's an input in the field - still the button returns false, hence the removeAttr() doesn't work - why ? Regards.
try (mail_name.val() == "") change to (mail_name == "")
Are you using jQuery 1.6.x?
If so then you should try using the .prop() function. See below:
Disable/enable an input with jQuery?
Also, in your if statement no need to keep selecting $("#rem_but"). Based on your code I would recommend $(this) instead -
$(this).prop('disabled', true);
This should work -
$(document).ready(function() {
$("#rem_but").click(function(e) {
e.preventDefault();
var mail_name = $.trim($("#mail_rem").val());
var dataString = 'mail_name='+ mail_name;
if (mail_name === "") {
$(this).prop("disabled", true); }
else {
$(this).prop("disabled", false); }
});
});
Here is the working jsFiddle code -
http://jsfiddle.net/4rPc5/
Updated code -
http://jsfiddle.net/4rPc5/2/
Perhaps you need to set the disabled attribute to 'false'?
if (mail_name.val() == "") { $("#rem_but").attr("disabled",true); }
else { $("#rem_but").attr("disabled",false); };
}
Or set it to an empty string
if (mail_name.val() == "") { $("#rem_but").attr("disabled",true); }
else { $("#rem_but").attr("disabled",""); };
}