Horizontal text scrolling with JavaScript function? - javascript

I currently have a text box with some default text in it. When a button is clicked, the text is changed. Is it possible to have the new text scrolling? I've looked at marquee but it seems it doesn't have good rep, and I'm not sure how to incorporate it with JavaScript. Here's the coding I have:
HTML text box:
<tr>
<td colspan="4" class="message">
<p class="displaymessage">
<marquee behavior="scroll" direction="left">innterHTML Page</marquee>
</p>
</td>
</tr>
(this currently scrolls the default text)
HTML Button:
<input type="button" value="1" class="button" onClick="changeText1()">
Javascript:
function changeText1() {
var paragraph = document.getElementsByClassName('displaymessage');
var changeText = paragraph[0].innerHTML = "New text";
}
Any suggestions? Thanks

I don't understand what you want to do. But if you want to add new text and want to scroll it left as your previous text is scrolling i.e ** innterHTML Page** then you can use the following code in javascript:-
function changeText1() {
var paragraph = document.getElementsByClassName('displaymessage');
var changeText = paragraph[0].innerHTML = '<marquee behavior="scroll" direction="left">New text Here</marquee>';
}
It will work Fine. If you have any questions you can comment :)

Related

How to restore the original height of the textarea when the button is pressed through javascript?

everyone, I am not familiar with javascript.
I would like to ask you a question! I have a message block. The default block height is to retain the input height of 1 row. The height of the textarea will increase as more text is input. the maximum height is 3 row, I currently write directly textarea above
oninput = "this.style.height = '';
this.style.height = Math.min (this.scrollHeight -3, 67) + 'px'"
is It can be achieved, but the question arises how to restore the height to the original height of 1 row after pressing send?
.demo{
resize:none;
max-height:120px;
}
<div id="app">
<textarea oninput="this.style.height='';
this.style.height = Math.min(this.scrollHeight -3 ,67)+'px'" class="demo">
</textarea>
<br>
<input type="button" value="SEND">
</div>
I got your question that you want to restore the height of the Text area.
The answer is simple, you can set the height of the text area by assigning the number of rows.
Note : This does not affect the function abilities of the textarea. It just affect the height of the textarea.
To do that check out my solution,
$(document).ready(function(){
$("#btnDefault").click(function(){
$('#Sometext').attr('rows', 2);
});
$('#Sometext').keyup(function(){
$('#Sometext').attr('rows', 10);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnDefault">
Set to defaults
</button>
<textarea id="Sometext" rows="10">
</textarea>
To achieve this
I set the rows attribute to the textarea in the html tag.
wrote the button click event in which I am resetting the number of rows of the
text area.
Further ahead you can clear the text area after click if you want to by,
$('#Sometext').val('');
If you find it useful please let me know, feel free to comment on the answer!
What should be done with the input of the textarea on click send button?
If you only want to set the textarea height to the first state (as your css says max-height:120px;) you can remove the height of the textarea via jquery:
jQuery('input').on("click", function(){
jQuery('textarea').css('height','');
})
But I think you want to remove the content of the textarea on click!?
jQuery('input').on("click", function(){
jQuery('textarea').html('').css('height','');
})
https://jsfiddle.net/rince1984/ad8u23b5/3/
When the button is clicked, just unset your textarea height like this:
const txtarea = document.querySelector('.demo');
const submitBtn = document.querySelector('.someBtn');
txtarea.addEventListener('input', () => {
txtarea.style.height = Math.min(txtarea.scrollHeight -3, 67) + 'px';
});
submitBtn.addEventListener('click', () => {
txtarea.value = ''; // remove this line if you already have code that resets your field
txtarea.style.height = 'unset';
});
.demo{
resize:none;
max-height:120px;
}
<div id="app">
<textarea class="demo">
</textarea>
<br>
<input class="someBtn" type="button" value="SEND">
</div>

Apply superscript to the selection using JavaScript

Can any one help me how can I apply superscript to the selection in my content editable div using javascript?
I have this div and a button:
<div contenteditable="true">Apple Grapes Orange</div>
<input type="button" onclick="applySuperScript" value="Apply SuperScript">
Suppose if I have selected the text "Orange" from my content editable div and click on button, javascript should be called to apply super script for the text "Orange".
Slight modification to the html.
<div id='text' contenteditable="true">Apple Grapes Orange</div>
<input type="button" id='super' value="Apply SuperScript">
This is our click handler
document.getElementById('super').onclick = function() {
var textarea = document.getElementById('text');
var anchorOffset = window.getSelection().anchorOffset;
var focusOffset = window.getSelection().focusOffset;
var str = textarea.innerHTML.substring(anchorOffset,focusOffset)
textarea.innerHTML= textarea.innerHTML.replace(str,'<sup>'+str+'</sup>');
};
Here is the fiddle.

Adding text from specific instance of div to textarea

So i'm trying to add some text to a textarea when a user clicks on an edit link. The user will click the edit link, which will then show a pop-up box with a textarea that shows the user their current comment.
There are going to be multiple instances of .comment-block with various different texts, as this text will be a user input comment. I want to take the .text text from the specific .comment-block depending on which .edit link was clicked. So if one comment-block has the text of "hello" and the other has text of "world", i want to take either "hello" or "world" and put it in the textarea, depending on which edit link was clicked from within the parent comment-block.
Hope that makes sense.
<div class="comment-block">
<div class="row">
<div class="col-xs-1">
<img src="/graphics/blank-avatar.jpg">
</div>
<div class="col-xs-11">
<p>
<span class="name">David Johnson</span>
<span class="text">Nice selection of images! Well done!</span>
<span class="edit">Edit</span>
</p>
<div class="date-posted">
Posted at 14:10 on 23rd September 2014
</div><!-- .date-posted -->
</div><!-- .col-xs-10 -->
</div><!-- .row -->
</div><!-- .comment-block -->
The JS
$("span.edit").click(function() {
//Get the text
var text = $.trim($(".comment-block p span.text").text())
//Create a text area selector (container, rather)
var textarea = $("#community-message-alt");
//Give the textarea a value
$("textarea", textarea).val(text);
textarea.show();
});
Something like this?
$(".edit").click(function(){
var text = $(this).parent().find(".text").first().html();
$("#ta1").html(text);
});
DEMO FIDDLE
You can do something like this:
$(".edit").click(function(){
var text = $(this).prev(".text").text();
var textarea = $("#community-message-alt");
textarea.text(text);
textarea.show();
});

JavaScript - change value of button when text is selected within a DIV (and combine it in one simple function)

I have two simple JavaScript functions: getSelectedText() and doSomethingWithSelectedText() that I found in a different example.
Now I've adjusted it more to my needs: http://jsfiddle.net/83T7U/.
The example currently works but not the way it should. Currently, when text is selected, there is an alert(), but instead the text on button should change from Reply to Quote.
So, instead:
alert("Text selected - it should change "Reply" to "Quote" text button ONLY if text was selected within one of these DIVs and text should change only in the div within which the text was selected.");
It should be like document.getElementsByTagName("button") or similar.
My goal is to:
Change the value of the button from Reply to Quote as soon as text from a particular div is selected. When the text is de-selected, then button should change back to Reply.
Make sure the Reply<>Quote change applies only when text is selected within one of these DIVS (and not in other parts of the page).
Minimize the functions - I think instead of the two functions one is enough because I don't want to know the value of selection - I just want to check if there is something (ie. at least one character) selected/highlighted.
The JavaScript should work correctly with all the major browsers.
Please note I cannot use jQuery here. Thank you!
HTML:
<div id="first" style="background:yellow">DIV1: First some test text for you to select
<br>
<button>Reply</button>
</div>
<br>
<div id="second" style="background:green">DIV2: Second some test text for you to select
<br>
<button>Reply</button>
</div>
<br>
<div id="third" style="background:lightblue">DIV3: Third some test text for you to select
<br>
<button>Reply</button>
</div>
<br>
<i>(there could be more similar divs on a page)</i>
JavaScript:
function getSelectedText() {
var text = "";
if (typeof window.getSelection != "undefined") {
text = window.getSelection().toString();
} else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
text = document.selection.createRange().text;
}
return text;
}
function doSomethingWithSelectedText() {
var selectedText = getSelectedText();
if (selectedText) {
alert("Text selected - it should change Reply to Quote text button ONLY if text was selected within one of these DIVs and text should change only in the div within which the text was selected.");
}
}
document.onmouseup = doSomethingWithSelectedText;
document.onkeyup = doSomethingWithSelectedText;
Look at this fiddle
with following html (yours with additional class for divs):
<div id="first" class="specialDiv" style="background:yellow">DIV1: First some test text for you to select
<br>
<button>Reply</button>
</div>
<br>
<div id="second" class="specialDiv" style="background:green">DIV2: Second some test text for you to select
<br>
<button>Reply</button>
</div>
<br>
<div id="third" class="specialDiv" style="background:lightblue">DIV3: Third some test text for you to select
<br>
<button>Reply</button>
</div>
<br>
<i>(there could be more similar divs on a page)</i>
and the javascript:
function doSomethingWithSelectedText() {
//relabel quoteButton to standard-label
var buttons = document.getElementsByClassName('quoteButton');
if(buttons.length){
var button = buttons[0];
button.innerHTML = 'Reply';
var classArr = button.className.split(' ');
classArr.splice(classArr.indexOf('quoteButton'), 1);
button.className = classArr.join(' ');
}
//check if new quoteButton should be labeled
if (window.getSelection && window.getSelection().toString()) {
if(window.getSelection().anchorNode.parentNode && window.getSelection().anchorNode.parentNode.className && window.getSelection().anchorNode.parentNode.className.split(' ').indexOf('specialDiv') > -1){
var button = window.getSelection().anchorNode.parentNode.getElementsByTagName('button')[0];
button.innerHTML = 'Quote';
button.className += ' quoteButton';
}
}
}
document.onmouseup = doSomethingWithSelectedText;
document.onkeyup = doSomethingWithSelectedText;
In this article is mentioned to get the element that is selected by window.getSelection().anchorNode.parentNode. So I simply let check if the selected element has the newly added class 'specialDiv'. If it has search for the button and relabel it. Additonaly add a class to the button to be able to find relabeled buttons again. At any selection let the button be reset to the standard label, before maybe relabeling other buttons.
EDIT :
It's a little sad but there's one way the solution above wont work: Selecting text and then clicking into it. Thats the only way that at the timepoint of mouseup-event the old selectedText is still set (and will be unset immediatly after mouseup-event).
To fix this use onclick instead of onmouseup
Look at this fiddle... it uses onclick instead of of keyup since click will be triggered at a timepoint at that the new selection has been set in any case
Try following example. I hope it will help you. To try following example just copy following code and pest it in blank notepad and save it with .html extension and run it in any browser.
<html>
<head>
<style>
.head {
border:1px solid #666;
background-color:#f0f0f0;
padding:3px;
cursor:pointer;
}
.content {
border:1px solid #666;
background-color:#fff;
height:100px;
padding:3px;
}
</style>
<script type="text/javascript">
function getSelectedText(i) {
var pi = document.getElementById("pi").value;
var str = window.getSelection();
if(str!="") {
if(pi=="") {
document.getElementById("btn"+i).value="Quote";
}
else {
document.getElementById("btn"+i).value="Quote";
document.getElementById("btn"+pi).value="Reply";
}
}
else {
document.getElementById("btn"+i).value="Reply";
document.getElementById("btn"+pi).value="Reply";
}
document.getElementById("pi").value = i;
}
</script>
</head>
<body>
<div>
<div id="head1" class="head">Head 1</div>
<div id="content1" class="content" onMouseUp="getSelectedText('1')">Content 1 Div. Select text in this div.</div>
<input type="button" id="btn1" value="Reply" />
<div id="content2" class="content" onMouseUp="getSelectedText('2')">Content 2 Div. Select text in this div.</div>
<input type="button" id="btn2" value="Reply" />
</div>
<input type="hidden" id="pi" name="pi" value="" />
</body>
</html>

How to change the content of a span depending on the content of a form?

Universal Converter - question #2
Question 1 - How to input the content of a form as a variable?
Hello again. I'm having some more trouble with my converter (see link.) I was wondering how I could change the content of a span depending on what was inside of a form (in this case, looking at the link, the form with the ID of "unit").
How it would work was, the span with the ID of invalidUnit would be called in a function, and the function would be used to change the content of the span to tell the user if the unit they input into the form is valid or not.
The HTML and JavaScript are below.
HTML:
<form>
<input type="text" id="unit">
</form>
<br>
<button class="btn btn-sm btn-danger" id="confirm">Confirm</button>
<br>
<br>
<h4>Pick two units of <span id="unitType">[?]</span> you want to convert.</h4>
<h5><span id="invalidUnit">[?]</span></h5>
JavaScript:
function invalidUnit() {
var unitInput = document.getElementById("unit").value;
var invalid = document.getElementById("invalidUnit");
if (unitInput.value == "temperature") {
invalid.innerHTML = ("temperature is a valid unit");
}
}
So, how would I make this work? It seems like I have it right, but...
change this:
var unitInput = document.getElementById("unit").value;
to this:
var unitInput = document.getElementById("unit");
Also, I think you'll want to add onClick="invalidUnit();" to your button.
Working JSBin

Categories

Resources