Is it possible to get the height of a 'text' field from mysql?
Or the number of linebreaks would also work!
I have a table which fetches the 'text' field from my mysql database.
The background image of the table is sort of a container...
I want the background to change to another (taller) background if the text is vertically high!
Possible, if so how?
Thanks
UPDATE: I am not going to use word wrapping...
In your query you can count how many instances of '\n' are found. You can do this in javascript or php as well. This wouldn't be totally accurate though if you're word wrapping.
How to do it with php
Alternatively... to grab the height with javascript:
document.getElementById('mytable').clientHeight;
Very difficult, as you're never going to be able to predict font size with 100% certainty (Users could have enlarged text in their browser, for instance, or be using a different font).
If you want to make 100% sure, you would need to use Javascript to measure the actual size.
Otherwise, for most cases, as #Chris Klepeis says, counting the line breaks should work.
I think this will be help but i used textarea here and i test it will be working fine u just need apply it on table.
<textarea data-adaptheight rows="3" cols="40" placeholder="Your input" style="padding: 16px; line-height: 1.5;"></textarea>
<script>
(function() {
function adjustHeight(textareaElement, minHeight) {
// compute the height difference which is caused by border and outline
var outerHeight = parseInt(window.getComputedStyle(el).height, 10);
var diff = outerHeight - el.clientHeight;
el.style.height = 0;
el.style.height = Math.max(minHeight, el.scrollHeight + diff) + 'px';
}
var textAreas = [].slice.call(document.querySelectorAll('textarea[data-adaptheight]'));
textAreas.forEach(function(el) {
el.style.boxSizing = el.style.mozBoxSizing = 'border-box';
el.style.overflowY = 'hidden';
var minHeight = el.scrollHeight;
el.addEventListener('input', function() {
adjustHeight(el, minHeight);
});
window.addEventListener('resize', function() {
adjustHeight(el, minHeight);
});
adjustHeight(el, minHeight);
});
}());
</script>
Related
Class:
public class FieldsWrapper {
public String apiName ;
public Integer columnNumber;
}
html:
<div class="case-section">
<repeat tag here which repeats each value value="{!lstCaseAPIName}" var="eachApiName">
<div>
<!--api Name here-->
</div>
</repeat>
</div>
the lstCaseApiName will contain values from server side : public List<FieldsWrapper> lstCaseAPIName, which will have column number and field name.
Expected: If a column number is 1, then it should display in full width : 100%
if column number is 2, then it should display div two divs in single row with each width as 50%.
Is there any attribute in html to do this, or do I need to do this via JS?
For ex: If my loop is 5, then I don't want each div width to be 20%. I want the width to be based on the column number. Say first div has column number 2, then only its width should be 50% and it should come at left side, the second column is 2, the width 50% and should come at right side. if column is 1 then it should cover the full width.
Update
Tried using width attribute :
<div style="width: calc(100%/{!eachApiName.columnNumber})">
<!--api Name here-->
</div>
It look like this :
Can I place all the divs whose size is 50 side by side, via javascript?
$('.case-section').children().each(function () {
let intDivWidth = $(this).width() / $(this).parent().width() * 100;
if(intDivWidth === 50){
// place yhe next div side by side and ignore the div in next iteration
}
})
I have two textareas in jsp page the values entered in first textarea value should be displayed in next text area frequently using jQuery.
Here is the code I've tried so far
function getMsg()
{
document.getElementById("chatBox").value =
document.getElementById("messageBox").value;
document.getElementById("messageBox").value=""; }'
}
$(function() {
$("#test1").keyup(function() {
$('#test2').val(this.value);
});
});
Is this you were expecting
$(document).ready(function () {
$('#firsttext_area').keyup(function () {
$("#sectext_area").val( $('#firsttext_area').val());
});
});
Demo in fiddle
In jquery you can try the following
$("#textAreaOne").keyup(function() {
$("#textAreaTwo").val($("#textAreaOne").val());
});
Update:
It sounds from your comment that you want to append text to the second text area, you would have to create a button that the user will click to fire your event
Create a button, for example
<button id="chatButton">Chat</button>
Then wire the buttons onclick event to perform the append functionality, for example
$("#chatButton").click(function() {
$("#textAreaTwo").val($("#textAreaTwo").val() + "\n\n" + $("textAreaOne").val());
});
This is what the exact answer for my question. I tried with this and it is working.
<script>
var tempMsg;
function getValue()
{
var userMsg="Me: "+document.getElementById("messageBox").value;
var chatMsg=document.getElementById("chatBox");
tempMsg=chatMsg.innerHTML+=userMsg+"\n\n";
}
</script>
You can implement this by event onChange.
I want to get cursor position or the location from RichTextArea.
I do not know how to get current cursor position Without any mouse event.
e.g. TextArea has method getCursorPos(), but RichTextArea does not have method like TextArea.
Anyone have any idea?
Thanks in advance...
If you you want to insert something in the RichTextArea at the cursor position, you can do it with the formatter:
RichTextArea.Formatter formatter = richText.getFormatter();
formatter.insertHTML("My text is inserted at the cursor position");
To find a cursor position using JavaScript, try the solution proposed by Tim Down:
Get a range's start and end offset's relative to its parent container
In Vaadin 7.5 #AndreiVolgin answer seems not working. But if somebody wants only to paste some text in cursor position, then CKEditor wrapper for Vaadin add-on may help (link).
Here is an example for posterity:
CKEditorTextField textArea;
// and for example in some listener function we could call:
textArea.insertHtml("<b>some html</b>");
textArea.insertText("sample text");
Don't know if this is still required, but I have been trying to do exactly the same today and could not really find a definitive answer. I did find this non-GWT solution (Get caret (cursor) position in contentEditable area containing HTML content), which needed tweaking everso slightly. Hope this helps someone.
public static native int getCursor(Element elem) /*-{
var node = elem.contentWindow.document.body
var range = elem.contentWindow.getSelection().getRangeAt(0);
var treeWalker = $doc.createTreeWalker(node, NodeFilter.SHOW_TEXT, function(node) {
var nodeRange = $doc.createRange();
nodeRange.selectNodeContents(node);
return nodeRange.compareBoundaryPoints(Range.END_TO_END, range) < 1 ? NodeFilter.FILTER_ACCEPT
: NodeFilter.FILTER_REJECT;
}, false);
var charCount = 0;
while (treeWalker.nextNode()) {
charCount += treeWalker.currentNode.length;
}
if (range.startContainer.nodeType == 3) {
charCount += range.startOffset;
}
return charCount;
}-*/;
Try this out, worked for me. basically you insert a unique text in the rich text area, then you get the index of the inserted text then you remove it.
richText=new RichTextArea();
basicFormatter=richText.getFormatter();
basicFormatter.insertHTML("dummydata");
int cursor=richText.getText().indexOf("dummydata");
basicFormatter.undo();
I want to show a panelGroup dynamically.
In this code, I have boxes which can be filled up. When the last available box is filled up with data, a panelGroup with a new set of boxes should show up.
<ice:panelGroup binding="#{myPage.boxes0to9}" />
<ice:panelGroup binding="#{myPage.boxes10to19}" />
How do I let the second panelGroup display only when the last box in #{myPage.boxes0to9} has been filled in?
Thanks!
You can achieve it by wrapping the <ice:panelGroup> with a div and show/hide it by a javascript check:
<script type="text/javascript">
var arrInputs = new Array(9);
function checkInputsFulfilled(value, index) {
arrInputs[index] = (value == "");
var filled = true;
for(var i = 0; i < arrInputs.length; i++) {
if (arrInputs[i]) {
filled = false;
break;
}
}
document.getElementById("myDiv").style.display = filled ? "block" : "none";
}
</script>
<ice:panelGroup binding="#{myPage.boxes0to9}">
<!-- your 9 inputs (or more) here, I'll write 1 as a sample -->
<h:inputText value="#{myBean.attribute1}" onchange="checkInputsFulfilled(this.value, 0);" />
</ice:panelGroup>
<div id="myDiv" style="display:none">
<ice:panelGroup binding="#{myPage.boxes10to19}">
</ice:panelGroup>
</div>
You can also do it using an ajax support and rendered a JSF component that wraps the second <ice:panelGroup> but this will have a big impact when you just empty one of yout starting inputs and the group should hidden. Of course, this last behavior is controlled in the javascript, if you dont want it just modify it :).
I'm new to GWT and therefore need help with the following:
I am working with UIBinder and need to arrange three gwt buttons with dynamic labels in a special way (see picture attached). How do I do this? I'm grateful for any help!
As I said in my comment you just arrange your widgets with an additional CSS style to float them left. As a GWT container, there is FlowPanel.
CSS:
.yourWidget {
float: left;
..other styles..
}
.container {
width: 300px;
overflow: hidden;
}
Code:
YourButtonWidget w1 = new YourButtonWidget("Some long label");
w1.addStyleNames("yourWidget"):
YourButtonWidget w2 = new YourButtonWidget("Label");
w2.addStyleNames("yourWidget"):
YourButtonWidget w3 = new YourButtonWidget("Another Label");
w3.addStyleNames("yourWidget"):
FlowPanel container = new FlowPanel();
container.add(w1);
container.add(w2);
container.add(w3);
Obviously you can integrate the CSS style as part of your widget representing your button. Just remember that your widget must assign a width to itself or float: left; obviously won't work.
UPDATE: I just read your last comment, for that you would have to just develop an algorithm to adjust the button 1 and 2 width to fill all available space in the container. float: left; will stil work, you just have to work out the size of the buttons.
With 3 buttons it's easy (where button1Width and button2Width are dynamic and button3Width is fixed), here is how to work out the final widths (continuing from above):
int containerWidth = container.getElement().getOffsetWidth();
int button1Width = w1.getElement().getOffsetWidth();
int button2Width = w2.getElement().getOffsetWidth();
int button3Width = w3.getElement().getOffsetWidth();
if ( (button1Width + button2Width) > containerWidth ) {
button1Width = containerWidth;
if (( button2Width + button3Width ) > containerWidth) {
button2Width = containerWidth;
} else {
button2Width = containerWidth - button3Width;
}
} else {
button2Width = containerWidth - button1Width;
}
w1.getElement().getStyle().setWidth(button1Width,Unit.PX);
w2.getElement().getStyle().setWidth(button2Width,Unit.PX);
w3.getElement().getStyle().setWidth(button3Width,Unit.PX);
Just make sure that you do these adjustments after you attach everything to the DOM, otherwise the widths will not be available obviously.