Develop Reference

Escape hyphen in javascript variable

The content of variable originalText= "Pending - Submitted for Initial Review"; However when I hover over the div, the tooltip text is truncated after hypen. I have tried escaping the hypen but it's not letting me do it. It always shows the truncated text.
$('#study_header').append('<img src="images/Infow.png" class="tooltip" title=' + originalText + '/>');
If anyone knows the solution pls let me know.
After hovering it shows up as below in the source code of the browser:
<img src="images/Infow.png" class="tooltip" title=" Pending" -="" submitted="" for="" initial="" review ="">
Thank you.

You're missing quotation marks around the value of the title attribute. You can see it's treating the words in originalText as additional attributes.
You can sort of fix the problem by changing:
'...title=' + originalText + '/>'
to (note the added " marks):
'...title="' + originalText + '"/>'
I say this will "sort of" fix it, because if originalText contains certain characters (like ") this will break again, so you really should be escaping originalText. jQuery provides methods for this.
In general you don't want to build HTML with simple string concatenation, because you'll run into escaping issues like this.

Javascript add linebreak, \n not working

I want to add a linebreak in Javascript, but \n is not working and nothing else I found so far is not working (like <br> or \n). Also, because of the programming I cannot use .appendChild.
for (i=getchilds();i<number;i++){
container.appendChild(document.createTextNode("\n" + "Pers. " + (i+1) + " \u00a0"));
var input = document.createElement("input");
input.type = "number";
container.appendChild(input);
}

I think you may be confusing whitespace with the representation of whitespace. In your case you're appending characters that represent white-space to a string that you intend to be displayed as a line-break. I assume you're then appending it to an element whose style is not set to display it as white-space.
There are four basic ways to fix this:
Use an ordered list. If you can, do this, since it will be both structural and semantic. Notice the link shows how to control the list-item text (controlling the start number is more challenging).
If the container-referenced element accommodates this, add white-space: pre to it's style. This will cause your line-breaks to come into view. It's best to do this with CSS, but you can do it with Javascript too.
Replace the \n with a <br>. Denys Séguret has an example of this.
Use a pre tag for the container-referenced element. <pre> automatically respects and displays line-breaks in content. This of course implies your content accommodates using a pre-formatted tag.

Change your code to insert into a textarea or a set of pre tags.
You might see your code injecting a single space in place of the line breaks in a plain text input of your browser is Firefox chrome or opera.

You can't insert \n in text node and have them correctly rendered in an element with standard white-space rendering.
Two solutions here:
insert <br> elements
container.appendChild(document.createElement("BR"));
container.appendChild(document.createTextNode("Pers. " + (i+1) + " \u00a0"));
use innerText in SPAN
var node = document.createElement("SPAN");
node.innerText = "\n Pers. " + (i+1) + " \u00a0";
container.appendChild(node);
The first one is the most relevant in your case, but the fact innerText doesn't remove newlines (contrary to textContent) is often useful.

Removing spaces between lines in JavaScript

I'm just learning JavaScript, and I've come up with the following page that "draws" a guitar fretboard by creating a 6X16 grid of images (the first column is the set of "open notes" on the very left hand side of the image grid). The page is here.
Each of the six rows represents a string on the guitar so, six strings, six rows. But what I can't figure out is how to make the rows butt up right next to each other, with no whitespace between the top of one row and the bottom of the next. So, what I get is this:
But what I want is this:
The way that the JavaScript works is to run through a loop that is 16 items long - one "open string" image, and 15 "fretted note" images, and at the end of the loop it generates a <br/>tag. These strings are inserted into an InnerHTML value of a <p> element, and the grid of images gets drawn. Here is the line of code that generates, as an example, the fretted note image:
for(frets=0; frets < 17; frets++){
GuitarNeckImg.innerHTML = GuitarNeckImg.innerHTML + "<img title=" + allNotes[frets + 1] + " src=images\\" + allFretImages[frets + 1] + ">";
continue;
}
What I don't understand is:
What CSS attribute/value pairs do I need to enter to get the images
to not have any space between them above and below,and
How do I write the JavaScript code to add those CSS attribute/value pairs to the tag in my code?
Add'l information:
I have tried, as an example, to write the following code in my JS file:
GuitarNeckImg.innerHTML = GuitarNeckImg.innerHTML + "<img title=" + allNotes[frets + 1] + " style=padding:0px; margin:0px;" + " src=images\\" + allFretImages[frets + 1] + ">";
But this produces the following HTML output:
<img title="F.Esharp.Gbb" style="padding: 0px;" src="images\F.jpg" margin:0px;="">
So the first problem is specifically around JS syntax and how I need to craft the code statement to generate multiple attribute/value pairs for the style tag, and the second is which CSS tags I should use to get my desired results.
Thanks in advance, and please feel free to let me know what additional information I can provide.

An appropriate line-height value, such as 0.70, should do exactly what you want.

Try this...
//We define the text variable that needs to be cleansed of line breaks.
Var someText = "Here's some text.\n It has some line breaks that will be removed \r using Javascript.\r\n";
//This javascript code removes all 3 types of line breaks
someText = someText.replace(/(\r\n|\n|\r)/gm,"");
Best of luck...

prevent execution of innerHTML

I have a Chrome extension in which I'm fetching tab title and url, and putting them into one single line. Same as Chrome History. I want to separate them visually, dark title, lighter url.
and for that I'm using this code
nodeTitle.innerHTML = tabs[j].title + "<span id='url'>" + ' - ' + tabs[j].url + "</span>" ;
CSS for #url is set and everything works fine, unless page title have some actual HTML code/tag in it, and title get messed (ofc. innerHTML works as it supposed to).
example page...look at title
innerText doesn't help in this situation, because I need < span > treated as it is.
Is there any way to cancel HTML execution for that first part (which can be any variable) or I have to separate them into two different elements and style them?
(and I'm really trying to avoid that)
...maybe check for tags and insert space if any exist??!... relized while writing this question, span tag in pointy brackets :)

You can use createTextNode as an easy (though perhaps not very efficient) way to do this:
function textToHtml(str) {
return document.createTextNode(str).innerHTML;
}
nodeTitle.innerHTML = textToHtml(tabs[j].title) + "<span id='url'>" + ' - ' + textToHtml(tabs[j].url) + "</span>" ;

ASP.Net Change ImageButton.ImageUrl on mouseOver

I am learning ASP.Net. I have a dynamically created ImageButton that I would like to change the ImageURL for when the user hovers over the control. I have tried this but it does not work:
imgStars.Attributes.Add("onmouseover", "this.src= '~/Images/4Stars.png'")
If I set the imgStars.ImageURL in the codebehind to ~/Images/4Stars.png it works. But it does not work in javascript.
Please help. I have tried searching for my answer for hours, but I do not have a clue what to do.

"xanadont" answered you right but your solution will not work for every scenario. To ensure that every relative directory will be usable by the client, use this code snippet:
imgStars.Attributes.Add("onmouseover", "this.src= '" + this.Page.ResolveClientUrl("~/Images/4Stars.png") + "'");

in VB you should use the following code:
*imgBtnRegister.Attributes.Add("onmouseover", "this.src='" + Page.ResolveClientUrl("~/Images/Register_2.jpg") + "'")
imgBtnRegister.Attributes.Add("onmouseout", "this.src='" + Page.ResolveClientUrl("~/Images/Register_1.jpg") + "'")*
use *Page.ResolveClientUrl("~/Images/Register_2.jpg")* instead of *this.Page.ResolveClientUrl("~/Images/Register_2.jpg")*