I was wondering if anybody knows how I would go about detecting when the scrollbar appears inside a textarea.
I am currently using mootools for my JavaScript and I am having issues getting it to detect a scrollbar.
function has_scrollbar(elem_id)
{
const elem = document.getElementById(elem_id);
if (elem.clientHeight < elem.scrollHeight)
alert("The element has a vertical scrollbar!");
else
alert("The element doesn't have a vertical scrollbar.");
}
See this jsFiddle http://jsfiddle.net/qKNXH/
I made a jQuery "compatible" version of Tommaso Taruffis code
function resize_until_scrollbar_is_gone(selector) {
$.each($(selector), function(i, elem) {
while (elem.clientHeight < elem.scrollHeight) {
$(elem).height($(elem).height()+5);
}
});
}
It can handle multiple elements and accepts: selectors, jQuery objects, or DOM elements.
It can be called like this:
resize_until_scrollbar_is_gone('textarea');
Tommaso's solution works perfectly, even with a text area. But if the user were to type in the textarea and suddenly the textarea gave itself a scrollbar, your javascript wouldn't know or be triggered.So you might want to add something like
onKeyUp='has_scrollbar("textareaID")'
For React I've found https://github.com/andreypopp/react-textarea-autosize
import Textarea from 'react-textarea-autosize';
...
<Textarea maxRows={3} />
Related
I wonder if you could help me with an issue.
I am building a content template for an events page, that pulls data through using Advanced Custom Fields.
I have a field in the admin side which will be filled out when adding a new event. The field is called show_info with the ID #acf-editor-46.
On some events however this will be left blank, but the DIV that wraps around the content on the frontend will still show on the template, the DIV has the class .show-info-wrapper.
I would like it so when the show_info field is blank, the DIV .show-info-wrapper does not display on the front end.
I have made some progress from browsing around, you can see the code I have so far here:
HTML (Just a quick testing set up):
<textarea id="acf-editor-46" class="wp-editor-area" aria-hidden="true">1111</textarea>
<div class="show-info-wrapper">CONTENT</div>
JavaScript + jQuery:
$(document).ready(function() {
if($('#acf-editor-46').val() == '' ){$('.show-info-wrapper').hide();}
$('#acf-editor-46').on('change' , function() {
if( this.value != ''){
$('.show-info-wrapper').show();
}
else{
$('.show-info-wrapper').hide();
}
});
});
It works on JSFiddle (http://jsfiddle.net/ha2nedfb/), however, it seems that on my WordPress site as the input and the DIV are not on the same DOM, it does not work.
Could anyone help me with this?
Thank you!
Just change the event of #acf-editor-46 to input.
$(document).ready(function() {
if($('#acf-editor-46').val() == '' ){$('.show-info-wrapper').hide();}
$('#acf-editor-46').on('input' , function() { // Just change event to input
if( this.value != ''){
$('.show-info-wrapper').show();
}
else{
$('.show-info-wrapper').hide();
}
});
});
if (!$("#acf-editor-46").val()) {
// textarea is empty
}
try this to check textarea is empty or not
You can delegate event if textarea is rendered later.
$(document).on('change', '#acf-editor-46', callback);
Links:
https://api.jquery.com/on/
https://learn.jquery.com/events/event-delegation/
Assuming the <textarea> and <div> are really siblings in this very order (your text contradicts the example) & if you're OK with adding a placeholder to the textarea & you only need new-ish browsers, there is a pure CSS solution:
<textarea ... placeholder=" "> </textarea>
.show-info-wrapper {
display: block;
}
.wp-editor-area:placeholder-shown + .show-info-wrapper {
display: none;
}
Here's a pen.
I am using jQuery plugin version 3.10 to use custom scrollbars. I have numerous horizontal slides and each uses its own custom scrollbar. I want to include javascript .onclick function that expands text. However, the scrollbar does not appear when I expand the text and it overflows. I am using the following code to select the headings which should have the onclick function (tag "h3", class "click"):
function toggleNext(el) {
var next=el.nextSibling;
while(next.nodeType != 1) next=next.nextSibling;
next.style.display=((next.style.display=="none") ? "block" : "none");
}
function getElementsByTagAndClassName(tag,cname) {
var tags=document.getElementsByTagName(tag);
var cEls=new Array();
for (i=0; i<tags.length; i++) {
var rE = new RegExp("(^|\s)" + cname + "(\s|$)");
if (rE.test(tags[i].className)) {
cEls.push(tags[i]);
}
}
return cEls;
}
function toggleNextByTagAndClassName(tag,cname) {
var ccn="clicker";
clickers=getElementsByTagAndClassName(tag,cname);
for (i=0; i<clickers.length; i++) {
clickers[i].className+=" "+ccn;
clickers[i].onclick=function() {toggleNext(this)}
toggleNext(clickers[i]);
}
}
window.onload=function(){toggleNextByTagAndClassName('h3','click')}
Example of HTML:
<article class="slide" id="lorem">
<div class="inner">
<h3 class="click">Lorem Ipsum</h3>
<div class="content">
<p>Sample text, is sample text, is sample text</p>
</div>
I know from previous research that I've done that I have to call the resize function from niceScroll jQuery plugin, which is as follows.
$(name-of-div).getNiceScroll().resize()
I have tried using the resize function with the name-of-div as content, however this does not yield the expected results. Please help if you can. I am not sure how to implement the two together.
Not sure if understood what's going on but I had a similar problem. Try using the resize() inside a setTimeout.
Note that the "name-of-div" must be the name of the scroll's container.
The jQuery code would looks like:
setTimeout(function(){
$('name-of-div').getNiceScroll().resize()
}, 500);
I used 500 as an example, but if your div's text expand while animate you must use a number greater then your div animation, and of course, the code must execute after all interactions
See the question below. There are two answers and both work for me. Basically, I have applied the second method(See the second answer) suggested there. Because, it works instantly and the first method doesn't seem to work instantly after the div has been resized.
Jquery Nice scroll not working
I am looking for a very minimal jQuery rich textbox plugin for a web app I am working on.
The user will only need to see the 'textbox', and not any toolbars as all of the rich formatting will be coded depending on what they type.
I have attempted to create my own with an iframe, but there are problems. One of them being when wrapping strings in divs, the caret is moved to the beginning and it can't be moved inside the div without clicking. http://jsfiddle.net/DVjYa/
This is a problem because I need it to behave like a normal textbox. In a normal textbox, you would be able to navigate with the arrow keys without having to click. Hence why I am looking for a plugin which has already overcome these problems.
You can use CLEDITOR which is very lightweight. You can disable all the toolbar buttons and hide the toolbar as well. In addition to this, it lets you make the selection bold/italic using keyboard shortcuts (CTRL+B/CTRL+I) even though the toolbar does not exist.
Demo: http://jsfiddle.net/Rft3A/
var editorDoc;
$(function() {
var editor = document.getElementById ("editable");
if (editor.contentDocument) {
editorDoc = editor.contentDocument;
} else {
editorDoc = editor.contentWindow.document;
}
var editorBody = editorDoc.body;
if ('contentEditable' in editorBody) {
// allow contentEditable
editorBody.contentEditable = true;
}
else { // Firefox earlier than version 3
if ('designMode' in editorDoc) {
// turn on designMode
editorDoc.designMode = "on";
}
}
});
will add another answer although post is a little old
Trumbowyg A lightweight and amazing WYSIWYG JavaScript editor - 15kB only (from github page)
I am trying to display a table (or ul) that will contain a navigation bar on my page, but only displays the tabs that will contain jquery called divs present on the html.
Essentially, it's a single html document that contains all divs, jquery hides all divs but the first, and the nav bar will allow to navigate through each.
Now I am trying to make it easy to use for my client, so that the menu items will only exist if the div for it also exists. I've got most of it done, the only thing is actually knowing if a div exists.
I tried using this:
if(document.getElementById("page1")) {
document.write("<b>Good morning</b>");}
else
{
document.write("<b>Bad morning </b>");
}
When I place the above code within the div page1, it returns true. Is there no way to do it from the top of the page and not within the div?
Thanks!
Update:
As suggested by many, I have used the following:
$j(document).ready(function(){
//Hide the sections we don't need right away
$j("#page2").hide();
$j("#page3").hide();
$j("#page4").hide();
if ($j('#page1').length > 0) {
var page = 'Excellent Morning' ;
}
});
Then when I try to use:
document.write(page);
It displays the following instead:
[object HTMLBodyElement]
Why not use jQuery since you are already?
if ($('#page1').length > 0) {
// do stuff...
}
EDIT: As davin pointed out, your code should be evaluated after the DOM has been rendered. You can do this by placing it in a $(document).ready call:
$(document.ready(function() {
if ($('#page1').length > 0) {
// do stuff...
}
});
EDIT 2: Based on the OP's edits, a better solution would be to add a placeholder element and to set its content (like FishBasketGordo suggested). An example of this:
$(document.ready(function() {
//Hide the sections we don't need right away
$("#page2, #page3, #page4").hide();
if ($('#page1').length) {
$('#myPlaceHolder').html('<b>Good Morning</b>');
}
else
{
$('#myPlaceHolder').html('<b>Bad Morning</b>');
}
});
Somewhere else in the document...
<span id="myPlaceHolder"></span>
If you place it at the top of the page, the page1 div doesn't exist when the code runs. If you are using jQuery, place the code in a $(document).ready event. Then, you can put it where you want it within the markup. Here's an example:
$(document).ready(function() {
if (document.getElementById("page1")) {
document.write("<b>Good morning</b>");
} else {
document.write("<b>Bad morning </b>");
}
});
Although, rather than doing a document.write, I would consider having a placeholder span or div, and setting it's innerHTML property (or use jQuery's html method). I would also use CSS for my style instead of <b> tags, but that's another matter entirely.
You can use
if ($(selector).length > 0) {
// element exists
}
or you can check out this post for a more elegant solution
Is there an "exists" function for jQuery?
I have javascript that working fine in Firefox 3.x.x, but it does not work in IE*, Chrome, Safari. Simple alert work before calling function. Here is the code
function showDiv(div){
//alert(div);
document.getElementById(div).style.visibility='visible';
document.getElementById(div).style.height='auto';
document.getElementById(div).style.display='block';}
function hideDiv(div){
//alert(div);
document.getElementById(div).style.visibility='hidden';
document.getElementById(div).style.height='0px';
document.getElementById(div).style.display='none';
}
here is the html page code
<td align="center"><a onclick="showDiv('<?=$val['keyname']?>')" style="cursor:pointer;">Edit</a></td>
if I put alert() before showDiv('<?=$val['keyname']?>') then alert box is displayed but the function is not called in other browsers other than fire fox
Please tell me the solution for this.
The syntax looks okay to me.
Make sure there are not multiple elements with the same ID in the document and that your element IDs are valid.
There is nothing inherently wrong in the code you have posted. I suggest you post a reproduceable non-working example: the problem will be elsewhere in the page. Maybe the div ID string isn't unique (this is invalid HTML and will make behaviour unreliable); maybe there's some other script interfering, maybe you have event code firing this that's not written in a cross-browser way
However your attempts to hide an element in three different ways seem like overkill to me. Just a single display change would do it fine.
Another way to do it is to set className='hidden' or '', and use a CSS rule to map that class to display: none. The advantage of this is that you don't have to know whether the element in question is a <div> (that should revert to display: block), a <span> (that should revert to display: inline) or something else. (The table-related elements have particular problems.)
Maybe you could try that:
function showDiv(div) {
var obj = document.getElementById(div);
if (obj) {
obj.style.display = "block";
obj.style.height = "auto";
} else {
alert("DIV with id " + div + " not found. Can't show it.");
}
}
function hideDiv(div) {
var obj = document.getElementById(div);
if (obj) {
obj.style.display = "none";
} else {
alert("DIV with id " + div + " not found. Can't hide it.");
}
}
Do not call document.getElementById several times in the same function, use a variable to store the div element.
The if (obj) test will only execute the code if it has been found by document.getElementById(...).