JavaScript - Formatting Date Before Updating Span Text?

Hey I was just wondering how I could do this...

I currently have this
Code:

<span id="span_1">Title</span>

What I want to know is if the span is something like 240px in width how can I make it so if the text inside the span tag is to long and puts the text onto a second line how can i make a cut off point in the text to stop the text moving to a new line and adding '...' if the text is to long??

Hello,

I have tried on many forums, mayby here I will find answer.

I have many divs with spans inside(just like it is below-no extra ids,classes for spans:/).

Code:

[...]
<div>
<span style="color:red;">a</span>
<span style="color:blue;">b</span>
<span style="color:white;">c</span>
</div>
<div>
<span style="color:red;">d</span>
<span style="color:blue;">a</span>
<span style="color:white;">a</span>
</div>
[...]

What I would like to achieve: user selects with mouse "ab", click button(input type=button) which remove style from selected span/spans. Similar behavior like it is in TinyMCE.

Is there a way to call javascript functions based on the text between a span element?

In other words if I have <span id="mySpan">Bronze</span> then it will call a javascript function but if I have <span id="mySpan">Silver</span> then it will call a different function?

Thanks!

Hello,

I wrote this script (well, not really wrote)

Code:

<script>
<!--

var today_obj=new Date()
var today_date=today_obj.getDate()
var tips=new Array()
var tiptitle='<img src="https://sites.google.com/site/psychally/home/10393545_s%20-%20Copy.jpg"> <b>.... Learn more 

at Psych Wiki</b><br><br>'
tips[1]='Tip 1 goes here'
tips[2]='Tip 2 goes here'
tips[3]='Tip 3 goes here'
tips[4]='Tip 4 goes here'
tips[5]='Tip 5 goes here'
tips[6]='Tip 6'
tips[7]='Tip 7 goes here'
tips[8]='Tip 8 goes here'
tips[9]='Tip 9 goes here'
tips[10]='Tip 10 goes here'
tips[11]='Tip 11 goes here'
tips[12]='Tip 12 goes here'
tips[13]='Tip 13 goes here'
tips[14]='Tip 14 goes here'
tips[15]='Tip 15 goes here'
tips[16]='Tip 16 goes here'
tips[17]='Tip 17 goes here'
tips[18]='Tip 18 goes here'
tips[19]='Tip 19 goes here'
tips[20]='Cotard Syndrome: The Cotard delusion or Cotards syndrome or Walking Corpse Syndrome is a rare neuro-

psychiatric disorder in which people hold a delusional belief that they are dead (either figuratively or literally), 

do not exist, are putrefying, or have lost their blood or internal organs. In rare instances, it can include 

delusions of immortality.'
tips[21]='Cotard Syndrome: The Cotard delusion or Cotards syndrome or Walking Corpse Syndrome is a rare neuro-

psychiatric disorder in which people hold a delusional belief that they are dead (either figuratively or literally), 

do not exist, are putrefying, or have lost their blood or internal organs. In rare instances, it can include 

delusions of immortality.'
tips[22]='Cotard Syndrome: The Cotard delusion or Cotards syndrome or Walking Corpse Syndrome is a rare neuro-

psychiatric disorder in which people hold a delusional belief that they are dead (either figuratively or literally), 

do not exist, are putrefying, or have lost their blood or internal organs. In rare instances, it can include 

delusions of immortality.'
tips[23]='Cotard Syndrome: The Cotard delusion or Cotards syndrome or Walking Corpse Syndrome is a rare neuro-

psychiatric disorder in which people hold a delusional belief that they are dead (either figuratively or literally), 

do not exist, are putrefying, or have lost their blood or internal organs. In rare instances, it can include 

delusions of immortality.'
tips[24]='Cotard Syndrome: The Cotard delusion or Cotards syndrome or Walking Corpse Syndrome is a rare neuro-

psychiatric disorder in which people hold a delusional belief that they are dead (either figuratively or literally), 

do not exist, are putrefying, or have lost their blood or internal organs. In rare instances, it can include 

delusions of immortality.'
tips[25]='Cotard Syndrome: The Cotard delusion or Cotards syndrome or Walking Corpse Syndrome is a rare neuro-

psychiatric disorder in which people hold a delusional belief that they are dead (either figuratively or literally), 

do not exist, are putrefying, or have lost their blood or internal organs. In rare instances, it can include 

delusions of immortality.'
tips[26]='Cotard Syndrome: The Cotard delusion or Cotards syndrome or Walking Corpse Syndrome is a rare neuro-

psychiatric disorder in which people hold a delusional belief that they are dead (either figuratively or literally), 

do not exist, are putrefying, or have lost their blood or internal organs. In rare instances, it can include 

delusions of immortality.'
tips[27]='Cotard Syndrome: The Cotard delusion or Cotards syndrome or Walking Corpse Syndrome is a rare neuro-

psychiatric disorder in which people hold a delusional belief that they are dead (either figuratively or literally), 

do not exist, are putrefying, or have lost their blood or internal organs. In rare instances, it can include 

delusions of immortality.'
tips[28]='Cotard Syndrome: \nThe Cotard delusion or Cotards syndrome or \nWalking Corpse Syndrome is a rare neuro-

psychiatric disorder in which people hold a delusional belief that they are dead (either figuratively or literally), 

do not exist, are putrefying, or have lost their blood or internal organs. In rare instances, it can include 

delusions of immortality.'
tips[29]='Cotard Syndrome: The Cotard delusion or Cotards syndrome or Walking Corpse Syndrome is a rare neuro-

psychiatric disorder in which people hold a delusional belief that they are dead (either figuratively or literally), 

do not exist, are putrefying, or have lost their blood or internal organs. In rare instances, it can include 

delusions of immortality.'
tips[30]='Cotard Syndrome: The Cotard delusion or Cotards syndrome or Walking Corpse Syndrome is a rare neuro-

psychiatric disorder in which people hold a delusional belief that they are dead (either figuratively or literally), 

do not exist, are putrefying, or have lost their blood or internal organs. In rare instances, it can include 

delusions of immortality.'
tips[31]='Cotard Syndrome: The Cotard delusion or Cotards syndrome or Walking Corpse Syndrome is a rare neuro-

psychiatric disorder in which people hold a delusional belief that they are dead (either figuratively or literally), 

do not exist, are putrefying, or have lost their blood or internal organs. In rare instances, it can include 

delusions of immortality.'

document.write(tiptitle)
document.write(tips[today_date])


</script>

Can someone please tell me how can I format the text that appears on the page from using the script? THANKS

I am not too familiar with java but found a script to use on my web page. I would like to formate the text and cahnge the color. In the jvav script I can't find those attributes. How can I make these cahnges? Thanks!

Alexis

I have text being called from an array, however my HTML formatting in the array is not working.

How do I add formatting to text in an array? Also how do I make a portion of the array a link?

For example:
Code:

var Text = new Array(
		"<br /><font style="color:red">URL:</font> <a href="www.google.com">www.google.com</a>",
		"<br /><font style="color:red">URL:</font> <a href="www.yahoo.com">www.yahoo.com</a>"
	);

I'm trying to reduce the height of input buttons, but am unable to center the text vertically. Tried every css trick I know, but the text is still too low (I can make it lower :P). Any way to do this?

Hi all,

im sure this will be pretty simple, at the moment i have some code which sends text from a textarea to a php file, the php file then stores the data into a database.

the javascript post is as follows:

Code:

		var text = document.getElementById(area).value;
		http.open('post', 'autosave.php?text='+text);

there is a little bit more to this(just a handle response).

My issue is that when the data is passed through javascript newlines and breaks disappear, so when i call the saved data it is presented as one long string with no formatting.

i tried the nl2br() function and htmlspecialchars() function in the php file that the javascript passes the data to, this made no difference. I then tried to replace /n with <br /> in the javascript before passing the text variable again this made no differnce.

Does anyone have any ideas how to keep formatting during this process?

I am not very knowledgeable with javascript. I have the following code pasted into my website and it works, but I want to modify it in the following ways:

1) I want the text to only scroll for a maximum of two visible lines at a time.

2) I want the text to scroll only once and then remain in place.

3) I want the text color to be grey (#ABABAB)

---------------------
Here is the code I am using:
---------------------

<script type="text/javascript">
window.onload = WindowLoad;
var _hsSpeed=50; //lower value means faster speed!
var _hsData=new Array();
var _hsCounter=0;
function WindowLoad(event) {
InitializeHorizontalScroll();
}

function InitializeHorizontalScroll() {
var arrElements = document.getElementsByTagName("span");
for (var i=0; i<arrElements.length; i++) {
var element=arrElements[i];
if (element.getAttribute("horizontalscroll") == "1") {
_hsData[_hsCounter] = new Array();
_hsData[_hsCounter]["element"] = element;
_hsData[_hsCounter]["text"] = FindInnerText(element);
_hsData[_hsCounter]["index"] = 0;
_hsCounter++;
}
}
if (_hsCounter > 0)
window.setTimeout("HorizontalScrollTimer();", 100);
}
function HorizontalScrollTimer() {
for (var i=0; i<_hsData.length; i++) {
var element = _hsData[i]["element"];
var strText = _hsData[i]["text"];
var index = parseInt(_hsData[i]["index"]);
element.innerHTML = strText.substr(0, index+1);
index++;
if (index >= strText.length)
index = 0;
_hsData[i]["index"] = index;
}
window.setTimeout("HorizontalScrollTimer();", _hsSpeed);
}

function FindInnerText(objControl, innerText, nestingLevel)
{
if ((typeof nestingLevel != "undefined")&&(nestingLevel > 100))
return innerText;

if (typeof innerText == "undefined")
innerText = "";

if (!objControl)
return innerText;

if (typeof nestingLevel == "undefined")
nestingLevel = 0;

var text=objControl.nodeValue;
if (!text)
text = "";
if (objControl.nodeName.toLowerCase() == "br")
return "\n";


for (var i=0; i<objControl.childNodes.length; i++)
{
text += FindInnerText(objControl.childNodes[i], objControl.childNodes[i].nodeValue, nestingLevel+1);
}

return text;
}
</script>

---------------------
And this is inserted in the body of the page:
---------------------

<span horizontalscroll="1" style="font-family: helvetica;text-transform: uppercase;font-size: 10; letter-spacing: 3; font-color: #ABABAB;">text content</span>

---------------------
Thank to anyone who can assist.
---------------------

What am I doing wrong here? I am trying to make it where the user can name the link whatever he/she wants.... I think it might be this part... links[i] = name.linkPosition.value; Where linkPosition is a variable. Can I do this? Or is there another way?


Code:

<div id="navBar">
	<ul>
    	<li><a href="#" id="link0"><script>document.write(links[0]);</script></a></li>
    	<li><a href="#" id="link1"><script>document.write(links[1]);</script></a></li>
    	<li><a href="#" id="link2"><script>document.write(links[2]);</script></a></li>
    	<li><a href="#" id="link3"><script>document.write(links[3]);</script></a></li>
    	<li><a href="#" id="link4"><script>document.write(links[4]);</script></a></li>
	</ul>	

</div><!--end navBar -->


<form>
<label style="color: #FFF;">Change name of links! You can only change them once!</label><br />
<input type="text" class="customLink" size="15" name="link0"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>

<input type="text" class="customLink" size="15" name="link1"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>

<input type="text" class="customLink" size="15" name="link2"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>

<input type="text" class="customLink" size="15" name="link3"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>

<input type="text" class="customLink" size="15" name="link4"  onblur="this.value=removeSpaces(this.value);" maxlength="8"/>

<input type="button" onclick="replaceLinks(this.form)" value="Replace Link Names!"  />
</form>

Code:

<script>

var links = new Array("home", "portfolio", "stuff", "about me", "contact");

function replaceLinks(name){

	for (var i=0; i<=4; i++) {
		var linkPosition = "link"+i;
	links[i] = name.linkPosition.value;
		changeLink(i);
	}
	
}

function changeLink(number) {

document.getElementById("link"+number).innerHTML="<span style=\"text-transform: capitalize;\">" + links[number] + "</span>";	
}
</script>

ANY HELP WOULD BE AWESOME!!!

I just replaced the functions to look like this...

Code:

function replaceLinks(name){

	for (var i=0; i<=4; i++) {
	links[i] = name.linker+i.value;
		changeLink(i);
	}
	
}

function changeLink(linkNumber) {

document.getElementById("link"+linkNumber).innerHTML="<span style=\"text-transform: capitalize;\">" + links[linkNumber] + "</span>";	
}

Now the links are updating but I get NaN for each link.

I'm fairly new to JS so sorry in advance if this is a stupid question!

I have a textarea which uses ckeditor to make it a wysiwyg. I also have a bit of JS which watches the ckeditor and when a user types into it, whatever they type appears in a div elsewhere on the page.

My ckeditor allows the text to be bold, italic, underlined and resized. When I apply styles to the text in the ckeditor textarea, I want them to reflected in the div which updates. At the moment only underline and resizing the text works. Choosing bold or italic does nothing the text updates ok, but no bold or italic.

I've been told: "Ckeditor is using strong for bold, em for italics. My guess is that the browser or framework you are using doesn't apply bold and italics styles to those tags. You'll have to do that yourself."

I've tested on several browsers, I checked in FF Opera Safari Chrome IE8 & IE9 and its the same in all them. Underline works, resize works but neither bold or italic do. (Interestingly in IE7 bold and italic do work as well as the size and underline! What's going on with that?!?)

So I assume it is the framework? Can anyone tell me if this is right and if so, how do I go about doing that myself?

heres the JS I'm using to update the div:

Code:

<label for="editor1">Background Story</label>
<textarea id="editor1" name="editor1">This is sample text</textarea>
<div id="story"></div>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
timer = setInterval('updateDiv()',100);
function updateDiv(){
var editorText = CKEDITOR.instances.editor1.getData();
$('#story').html(editorText);
}</script>

Why fail? --> <span onclick="document.bgColor = 'grey';">Grey</span>
<span onclick="document.bgColor = 'grey';">Grey</span>
does not change the page grey on this page:

u s e r s (dot) r c n (dot) c o m / r o b e r t (dot) a c k e r t / g r e y . h t m

any ideas why? I think something is blocking it.

I have a database script that returns dates in the following format:

yyyy-mm-dd

I have been using the following code to change this format to dd-mm-yyyy:

Code:

<script type="text/javascript">
var myString = "[[date]]";
var mySplitResult = myString.split("-");document.write(mySplitResult[2] + "/" + mySplitResult[1] + "/" + mySplitResult[0] );
</script>

However, I now want to display the date in text format, e.g. 01-08-2009 would be displayed as 01 August 2009.

Could anyone please let me know how I change the script to show this format?

Many thanks in advance,
Neil

Not sure if this is possible in javascript:

I'm looking for two different dates (bill date and due date) on an invoice that are captured by OCR. If one of them exists, but the other does not, I want the empty field to be 14 days before (or after) the other.

For example:
if the bill date is 7/27/2010 and the due date was not captured, I want to set the due date as 8/10/2010 (14 days after the bill date).

If the due date was captured as 8/10/2010, but the due date is blank, I want to assign the bill date as 7/27/2010 (14 days before the due date).

if both dates have values, do nothing.

Thanks.