Scrolling up and down in the TextArea - javascript

Is there any specific function for scrolling up and scrolling down in the TextArea. "onscroll" triggers when scrolling up/down happens in the TextArea.
Also, how to go to the new line after the last line in the text area and put "dash"(--) when clicking(scrolling) down. Thanks.

I might be wrong but as I understand it you're after a function that actually programmatically scrolls the textarea for you. If this is correct the following works:
var scrollUp = function(elementId) {
"use strict";
var element = document.getElementById(elementId);
element.scrollTop = 0;
};
var scrollDown = function(elementId) {
"use strict";
var element = document.getElementById(elementId);
element.scrollTop = element.scrollHeight;
};
See jsFiddle example here: http://jsfiddle.net/WnHpj/3/
You can of course use scrollTop to move the scroll in smaller increments if that is what you wish.
I don't really understand what you are looking for with your last question, please explain further if you still want help with that.
EDIT
The dashes... add this function:
var addDashes = function(elementId) {
"use strict";
var element = document.getElementById(elementId);
if(element.value.substring(element.value.length - 4, element.value.length) !== "\n--\n") {
element.value = element.value + "\n--\n";
element.focus();
}
};
See the updated jsFiddle example: http://jsfiddle.net/sQVe/WnHpj/7/
Hope that is what you wanted.

$("#textbox").scroll(function(e){
//this happens when there is a scrolling action in your element
})

Related

Responsive collapsible tables one at a time:

First time on stackoverflow, so please don't beat me up too much.
I'm working with an existing code from codepen and trying to figure out how to make the tables expand one at a time.
Currently if we click on more than one "+" icon, they remain open, wondering how we can make it so that previous items expanded will close when clicking on the "+" sign.
I tried adjusting the layout here to no avail:
$('.js-tdToggle').on('click', function(){
if(window.innerWidth < 681){
$(this).toggleClass("fa-plus-square fa-minus-square");
var trParent = $(this).parent().parent();
trParent.toggleClass("collapse");
} else {
$(this).toggleClass("fa-plus-square fa-minus-square");
var tdParent = $(this).parent();
tdParent.next("td").toggleClass("collapse");
}
});
Original Source Codepen
You have to add code where you do the opposite action on every other toggle. JQuery's .not() function is very useful for this. With my changes the JavaScript looks like this:
$('.js-tdToggle').on('click', function() {
var $otherToggles = $(".js-tdToggle.fa-minus-square");
if (window.innerWidth < 681) {
$(this).toggleClass("fa-plus-square fa-minus-square");
$otherToggles.not(this).toggleClass("fa-minus-square fa-plus-square");
var trParent = $(this).parent().parent();
trParent.toggleClass("collapse expand");
var $otherParents = $otherToggles.parent().parent();
$otherParents.removeClass("expand").addClass(" collapse");
} else {
$(this).toggleClass("fa-plus-square fa-minus-square");
$otherToggles.not(this).toggleClass("fa-minus-square fa-plus-square");
var tdParent = $(this).parent();
tdParent.next("td").toggleClass("collapse expand");
var $otherParents = $($otherToggles).not(this).parent();
$otherParents.next("td").toggleClass("expand collapse");
}
});
You can refer to my forked pen to see it in action: codepen.io

How to fix reverse text in javascript live syntax highlighting?

My script highlights the keywords but whenever it does, it messes with the string and does random things with the text like reverse it and mix it up.I was wondering if someone could tell me how to unreverse this text or move the cursor to the end of the contenteditable div or at most just fix it for me. I don't want any external libraries just javascript and jquery.
jsfiddle
JS Code:
function UnColor() {
var elem = document.getElementById("editor");
var text = elem.textContent;
elem.innerHTML = text;
}
function Color() {
UnColor();
var elem = document.getElementById("editor");
var code = elem.innerHTML;
code = code.replace("var","<span style='color:dodgerblue'>var</span>");
code = code.replace(/"(.*?)"/g,"<span style='color:green'>"$1"</span>");
code = code.replace(/<(.*?)>/g,"<span style='color:#F90'><$1></span>");
elem.innerHTML = code;
}
setInterval(Color,1000)
Thanks!
If the issue you're having is the cursor moving around while editing, you can fix that by grabbing the position of the cursor and putting it back at the end of the function. Do that by getting the selectionStart property of your editor textbox and then setting the selectionEnd property to that value after running the replacement.
Check out this answer for more information about selectionStart and selectionEnd.
Here's a simple code snippet from this answer that should get you rolling.
document.getElementById('target').addEventListener('input', function (e) {
var target = e.target,
position = target.selectionStart; // Capture initial position
target.value = target.value.replace(/\s/g, ''); // This triggers the cursor to move.
target.selectionEnd = position; // Set the cursor back to the initial position.
});
<p>The method <code>.replace()</code> will move the cursor's position, but you won't notice this.</p>
<input type="text" id="target" />
This issue is coming as the textContent of editor id being equated to its innerHTML. So change the variable name like the JS code I was written here :
function UnColor() {
var elem = document.getElementById("editor");
var text = elem.textContent;
var elem2;
elem2.innerHTML = text;
}
function Color() {
UnColor();
var elem = document.getElementById("editor");
var code = elem.innerHTML;
code = code.replace("var","<span style='color:dodgerblue'>var</span>");
code = code.replace(/"(.*?)"/g,"<span style='color:green'>"$1"</span>");
code = code.replace(/<(.*?)>/g,"<span style='color:#F90'><$1></span>");
var elem2;
elem2.innerHTML = code;
}
setInterval(Color,1000)

How to change a class to the nodeValue of the element? What am I doing wrong?

I want to change the effect (class) of my scroller to the effect on the button a user clicks. Here's my code:
var scroller=$('#main ul.stroll'); --> I know this is right.. just a var reference
function effectSelect(e){
var target = $(e.currentTarget);
$(target).click(function(){
var effectName=target.nodeValue;
var effect='stroll ' + effectName;
scroller.removeClass();
scroller.addClass(effect);
})
}
It worked at a certain point then suddenly stopped working. There are no errors in the console when I run it. What am I doing wrong? Let me know if you need more info
Figured it out finally. Hope this helps anyone in a similar situation!
function init(event) {
stroll.bind($scroller);
$('.nav li').on('click', function(event){
var target = $(event.target);
var effectName = target.text();
var effect = 'stroll ' + effectName;
$scroller.removeClass();
$scroller.addClass(effect);
console.log($scroller.attr('class'))
});
}

Scroll a textarea using JavaScript

I am using jQuery to append text into a textarea
var box = $('<textarea></textarea>')
.attr({id: 'log_viewer',
readonly: '',
cols: 100,
rows: 40})
.appendTo($(outputEntity));
When data is received from a WebSocket, it's appended to the content of the textarea:
ws.onmessage = function(msg) {
var data = decodeURIComponent(msg.data);
data = data.replace('<', '<');
data = data.replace('>', '>');
box.append(data);
}
What I need is for this box to scroll to the bottom automatically, so that the viewport is always centered on the last page of output. Following some other Stack Overflow suggestions on this topic, I tried:
$('#log_viewer').scrollTop = $('#log_viewer')[0].scrollHeight - $('#log_viewer').height();
However, that doesn't work -- at least, not in Chrome or Firefox on Linux, which is all I have access to. The box doesn't scroll.
How do I make this box auto-scroll to the bottom-most page from JS? Is using append() to add output somehow interfering with the underlying dimension detection mechanisms? Is append() even the right way to go there?
Or perhaps I should use not use a textarea at all, but rather a DIV with a scroll bar? Admittedly, I'm rather behind the times on HTML + CSS and don't know exactly how to best accomplish that and still get the monospace-formatted, wrapped output I'm after.
Thanks much for any suggestions!
SOLVED:
http://jsfiddle.net/Ua9qc/
var h1 = $('#log_viewer')[0].scrollHeight,
h2 = $('#log_viewer').height();
$('#log_viewer').scrollTop(h1 - h2);`
I am not sure this will help you. If you wanna scroll certain element at the bottom, you can use this function to scroll by passing div id. Add these function to script
function scrollme(id)
{
var scrollElem = scrollableElement('html', 'body');
var targetOffset = $(id).offset().top;
$(scrollElem).animate({scrollTop: targetOffset-100}, 1000, function() {
});
}
function scrollableElement(els)
{
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}

javascript get text at mose postion

How can I get text at mouse position?
I have now some like this
document.body.onmousemove = function(){
//todo:Get text at mouse position
}
One way of doing so is using [PrototypeJs][1]
Try this one let me know if there is any problem
$(document.body).observe('click', respondToClick);
function respondToClick(event) {
var element = event.element();
var source = element.innerHTML;
}

Categories