How to find/detect any textarea in page in javascript - javascript

(document.getElementById('textarea').length > 0) doesn't work. Does anyone know anything else other than this?
Will
Here is the scenario from my previous question which was unanswered. I have Rich text Editor(Openwysiwyg) which is loaded into textarea when I go to that particular page where textarea is placed. The function uses textarea id to identify textarea to replace it with Rich Text Editor(RTE). Now the script to call this function is in header part of the page. I select a drop-down option for sending email, so my textarea for email shows up. With this script added for RTE, my textarea for email is replaced by RTE and I can send formatted emails. So this works perfectly fine in Firefox. With IE7, RTE shows up even before I select drop-down option for email and this makes whole page messed up.When I select drop-down option for email, I just see normal text area and RTE still sitting at top of page.

document.getElementsByTagName('textarea').length > 0

You can use (note the plural form!)
var e = document.getElementsByTagName("textarea");
You can use jQuery as well:
$("textarea").each( function() { /* ... */ } );
EDIT:
I faced a similar problem once. I was using fckedit, and when I tried reading the value of my textedit (document.getElementById('blabla').value) I was getting null, even tough the rich text edit was ddefinetly showing something on screen.
It turns out that the fckedit API opens a new element on top of the textearea, and only when you navigate from the page is syncs it's internal data (which is on an iframe, if I am not mistaking) into the original textarea.
The moral of the story: if you are using some richtext API - use it's API to query the status of your "textarea". Hope this helps you, as I don't know the library you are using.
PS: I actually used $("blabla").val() ... which is also JavaScript... for some reason people think that jQuery is not javascript. Why is that?

Pure JavaScript (You can use this code)
textarea is HTML element tag
JavaScript :
if(document.getElementsByTagName('textarea').length > 0) {
}
HTML CODE:
<div class="flavor">
<div class="value">
<textarea name="name" rows="8" cols="80"></textarea>
</div>
</div>
<script type="text/javascript">
var flavorbox = document.getElementsByClassName('flavor')[0]
.getElementsByClassName('value')[0]
.getElementsByTagName('textarea').length;
alert(flavorbox);
</script>

Since openWYSIWYG generates a iframe on the fly, its not so simple to get/set its content.
I am currently working on changing these settings in the source. will post here a link as soon as i get the changes.

Related

If HTML "Product A" exists, change it to "Price A" using Javascript

Okay, I’ve been trying to workaround an issue here. I’ve got so far and I may not be heading in the right direction so if there’s a better way to approach this then let me know.
I’m using Dynamic Text Replacement on a platform called Unbounce to pull form dropdown data from a form submission on my page and then place it onto a confirmation popup overlay.
What I’d like to do next is replace the dynamic text with something different based on which answer from the form has been placed there (answers are limited to 5 specific selections from a dropdown).
Basically, when someone selects product A from the dropdown in the form they would be shown a price for product A in the confirmation dialog popup (instead of being shown ‘Product A’).
I’ve come across some text replacement javascript that I’ve used and tested successfully on the page.
<h3 id="title"class="lato dark bold title">certain text</h3>
<span class="orange size22"><b id="subtitle" >this text</b></span>
<script>
if (document.getElementById('title').innerHTML == "certain text" ) {
document.getElementById('subtitle').innerHTML = 'new text';
}
</script>
My hope was to add an ID to <ub:clientsidedynamic> for it to find at least one of my dropdown options such as ‘Product A’ and replace it with my desired price.
I changed the original dynamic text source code with:
<ub:clientsidedynamic class="text-editor-dynamic-tag" id="title" contenteditable="true" method="" parameter="window_type" title="URL Parameter: window_type" wrap="true">PRICE</ub:clientsidedynamic>
adding the ID of ‘title’ in a hope that it would work with my above Javascript.
Does anybody have any idea as to why this doesn’t work? Or if I’m even heading in a plausible direction with this.
Many thanks.

Can i detect if a web page has been translated by Google?

I have a web page, in Dutch, with a poll with a radio button.
I'd like to know which language the users speak. Is there a way I can detect if the page has been translated by Google when they submit?
I do not use a translation bar, I am talking about the spontaneous google translation.
Just check a known element if the text matches your text.
function isDutch() {
return $('#readmore').text() === "Meer lezen";
}
or a non jQuery solution:
function isDutch() {
document.querySelector('#readmore').innerText === "Meer lezen";
}
Just make sure the element you have is an easy translatable sentence like read more.
Then you update a hidden field in your form with the result.
You can do this the moment a click is registered on your radio button.
I just tested it on a russian site, lenta.ru and ran $('a[href="/parts/news"]').text(); after having translated it by right clicking the page and selecting translate this page(chrome). The content returned was in my language(dutch) in the jquery text().
When translated through Google Translate, the target language is injected into the lang attribute of the main html tag, you can retrieve it with:
document.getElementsByTagName('html')[0].getAttribute('lang')
which results in something like
en-x-mtfrom-nl... and this in turn you can log to your server or set as a cookie.

Editable Div - Highlights Specific Letter On Click

Everytime I click a div or I focus on a contenteditable div it highlights the text I've clicked. This is not the case for other sites I have tried so I know it's not my mouse, I have a fair amount of jquery and css so I don't think it's useful to post all the code. Could people provide suggestions/speculation to why it's doing this and how it could be fixed because at the moment I have no idea.. I have no specific code to highlight any text so I'm very confused.
Relevant Code:
//This is loaded on body load
$("body").click(function(el) {
if($("#menu").is(":visible")){
//The click handler function puts new textboxes in if clicked correctly.
clickHandler($(event.target));
}
<div class="container image">
<img src="https://placeimg.com/240/180/any" />
</div>
You can try
window.getSelection().removeAllRanges();
document.getSelection().removeAllRanges();
To make sure all your text is not selected.
Please take a look at these two entries:
How can I deselect text using Javascript or jQuery?
Select/Unselect Text on click Using jQuery
So I think this is actually a bug in chrome. After leaving it a few hours and then refreshing the page, it randomly started working with normal functionality. Thank you to everyone who attempted to help - guergana presents a possible solution if you have stumbled across this page looking for answers.

contentEditable and lastChild IE, Firefox & Chrome LastChild

Apologies for the long question, but I've tried a lot of things and done some research and havent found much of a solution. I have a content editable div.
<div contentEditable=true onkeyup='showResult(this.lastChild.textContent)'></div>
When a user types something into this div, the showResult javascript runs which is basically an ajax request which returns a list of items that match. When a user clicks on one of the suggestions, say the name "John", a span with the suggestion is added into this contentEditable div like so:
<div contentEditable=true onkeyup='showResult(this.lastChild.textContent)'>
<span id='uniqueId1' class='SpanClass' contentEditable='false'>John</span>
</div>
Having selected one Name, the user may want to search for another name. It HTML terms, that means that they would be typing the following:
<div contentEditable=true onkeyup='showResult(this.lastChild.textContent)'>
<span id='uniqueId1' class='SpanClass' contentEditable='false'>John</span>
New User Text Goes Here
</div>
On Chrome, the right behaviour happens when the user continues tries typing in the div - the showResult function runs on the new text that the user types in and ignores the span elements. For Example, if the user types in "Fr" having already selected John, it ignores the first children (John), and sends what the user typed off via ajax and returns suggestions like Fred and Frankie.
However, in IE the span is still content editable and the user can't add any text other than within the span, which seems to make no sense as it is clearly contentEditable=false The ajax request is therefore run on the "John" text plus whatever the user types in next, which is not what I'm trying to achieve.
Finally, in Firefox, the span is not contentEditable BUT the lastChild bit only picks up text within the span, and ignores the text the user puts in.
I've console logged the results of showResult(this.lastChild.textContent) to see what is being sent to the ajax request.
In Chrome, typing in "Fr" in the box after the "John" span sends "Fr" to the ajax and returns the right result.
In IE, typing in "Fr" in the box sends "JohnFr"
In Firefox, typing in "Fr" just sends "John".
As the issue is with this lastChild and the span, I've also included the Javascript that creates the span element. This only activates after a successful result is return and the result is clicked on. (please excuse the very messy Javascript/Jquery)
$('body').on("click", '.TagHints', function(){
//Once you click on the suggestion
var ThisData = $(this).data("id");
var ThisId = $(this).attr("id");
var ThisTag = $(this).data("tag");
//delete the text that the user typed in
elementToRemove = document.getElementById("FakeInput").lastChild;
document.getElementById("FakeInput").removeChild(elementToRemove);
var TagDiv = document.createElement('span');
TagDiv.className = 'SpanClass';
TagDiv.id = ThisId;
TagDiv.innerHTML = ThisTag;
TagDiv.contentEditable=false;
//append the Span to the contentEditable div
document.getElementById("FakeInput").appendChild(TagDiv);
var TagHints = document.getElementsByClassName("TagHints");
while(TagHints.length > 0){
TagHints[0].parentNode.removeChild(TagHints[0]);
}
});
Why are the three browsers behaving completely differently and how do I get them all to behave like Chrome is? Is there a better way of getting the text not in the spans?
I read on another answer that firefox likes inputs and IE likes breaks in this context but both do not seem to work for me. :-(.
One big stopper to good solutions is that jQuery stops working after about line 6, which has also completely baffled me. If anyone can explain why its not working, that would also be cool. Maybe something to do with it being an ajax query and content being created after jquery is loaded?
Thanks for your help!
So, although I haven't had any responses I've come up with a workaround. However, lastChild is still behaving differently between the three browsers so would appreciate any further input.
The answer was to have a function in the document ready section which cloned the original div, stripped it of its children and grabbed the text on key up using Jquery. This then passed the result to the showResult function like so:
$('#FakeInput').keyup(function(){
var ThisClone = $('#FakeInput').clone()
.children()
.remove()
.end()
.text();
showResult(ThisClone);
});
Equally, rather than trying to remove the text that the user typed in from the divs when the user makes a selection I simply cloned the items in the span, using their class, then emptied the contents of the div and reappended these cloned divs.
var TagItems = $('.TagItems').clone();
$('#FakeInput').empty();
$('#FakeInput').append(TagItems);
This solution works across the three browsers.

Popup preview of textarea input

I want to create a preview function for posts that allows people to view the output of what they enter into a textarea how it would appear once submitted. The forum uses bbcode and does not allow html in posts and the id of the textarea box is "message"
Can anyone help me create a popup that would preview this post in a popup window without passing any of its data to a database and back?
I should really have supplied more info, I realise... Basically we have a post form in the form of
<textarea id=\"message\" name=\"message\" style=\"width:515; height:160; font-family: Verdana; font-size: 8pt; color: #000000\" onKeyDown=\"countit()\"></textarea>
with a submit button
<input type=\"image\" src=\"newlayout/images/reply.png\" height=\"35\" width=\"109\" border=\"0\" alt=\"Submit\">
When it's clicked, the form gets sent to another page, from where it's inserted into the database. I would like there to be a preview button like the one on livejournal, where a new popup gets created and shows what the post would look like. I looked at the source code on livejournal and it supplied jQuery, so I tried the code given here: http://haacked.com/archive/2009/12/15/live-preview-jquery-plugin.aspx
However, this did not work, as nothing showed up and also I wasn't fond of the live preview idea.
I also tried a javascript code from here: http://www.codingforums.com/showthread.php?t=174810, but once again, it didn't come up with anything...
I hope that's good info, if I should include anything else, please let me know :)
This question is getting close to "write my code for me", but if you're just trying to get help with the best approach, here are a few:
The cleanest would be have a button that (via javascript) changes the action and target of the form and triggers a submit()... this would send all the data via post to a template page which can pick up the $_POST data and place it into a template that mimics the live template.
Alternately, you could have JavaScript/Jquery grab all the field values, and build the HTML template in javascript and then pass this into div on the page that has been styles to look (a) like a pop-up and (b) has css that mimics the live page.
There are lots of ways to do this, but those would both work. If you try something and get into a tight spot, let us know and we'll give you a hand.
You would want to bind a keyup event to the textarea. Every time a user releases a key it would fire the function. Then your function grabs the value of the textarea and parses it for the BBCode, which I'm not familiar with. It then would take that output and place it as the contents of any element.
HTML:
<textarea id="myText"></textarea>
<div id="preview"></div>
JavaScript (jQuery):
$(document).ready(function() {
var $textarea = $('#myText'),
$preview = $('#preview');
$textarea.on('keyup', function() {
var $this = $(this),
output = $this.val();
// Do something with the value of the code to parse out the BBCode stuff.
$preview.html(output);
});
});
Why don't you try a WYSIWYG editor like TinyCME, or CKEditor?

Categories

Resources