How to increase width of label? - html

I am adding a div dynamically.It contains random amount of data that sometimes spreads over more than one lines. Problem is that it becomes conj-gusted in that case.
Sample
in other words, i want to increase the line spacing of that label.
Here is code i am adding label
var m=0;
var ttp = document.getElementById("T_" + (m + 1));
var LH = document.createElement('label');
LH.id = "H_" + element_name + "_" + (m + 1);
var pp = document.createElement('p');
pp.innerHTML = "<br>" + element_name;
LH.appendChild(pp);
ttp.appendChild(LH);

You can able to add styles for a particular element at the time of creating. you can assign your styles here: obj.style.cssText
var LH = document.createElement('label');
//Code for set line height
LH.style.lineHeight = "15px";
LH.id = "H_" + element_name + "_" + (m + 1);

Through Javascript u can change the css by this
document.getElementById("lableId").style.line-height="20%";
or u can set css via
$('#LabelID').css('attribute','value');

Related

How to replace RichTextEditor text without loosing the formatting in Flex

In my ActionScript code, I'm using a richTextEditor to do the following.
protected function createEmailTemplateContent(subRecord:String = null):void{
var index:int = emailTemplateContent.selection.beginIndex;
if(subRecord != null){
emailTemplateContent.text = emailTemplateContent.text.substring(0,index) + '{[' + fieldTypeDD.selectedItem + '].[' + insertFieldDD.selectedItem.toString().substring(0,insertFieldDD.selectedItem.toString().indexOf('(+)')-1) + '].[' + subRecord + ']}' + emailTemplateContent.text.substring(index,emailTemplateContent.text.length);
}else{
emailTemplateContent.text = emailTemplateContent.text.substring(0,index) + '{[' + fieldTypeDD.selectedItem + '].[' + insertFieldDD.selectedItem + ']}' + emailTemplateContent.text.substring(index,emailTemplateContent.text.length);
}
}
The above method implements when the user selects an item from a drop down list. Then that particular item will be populated inside the text area of the rich text editor.
My issue is that if the user has already done some formatting (using the formatting options in RichTextEditor) on the text, that also get replaced when the user selects an item and populates the text area.
In this, 'emailTemplateContent' means the RichTextEditor. I have included my RichTextEditor code in the following.
<component:RichTextEditorWithAllControls id="emailTemplateContent" dropShadowVisible="false" creationComplete="emailTemplatesContentInit()" headerHeight="0" width="100%" height="100%" htmlText="#{emailTemplateObject.emailContent}" showControlBar="false" verticalScrollPolicy="auto"/>
I assume this happens because when I populate the 'text' value in the richTextEditor, the 'htmlText' value is also get replaced.
Does anyone know a way to overcome this issue.
Thanks in advance.
First store the concatenated text in a String and then replace it in the html text. Something like below
protected function createEmailTemplateContent(subRecord:String = null):void{
var index:int = emailTemplateContent.selection.beginIndex;
var newText:String;
if(subRecord != null){
newText = emailTemplateContent.text.substring(0,index)
+ '{[' + fieldTypeDD.selectedItem + '].[' + insertFieldDD.selectedItem.toString().substring(0,insertFieldDD.selectedItem.toString().indexOf('(+)')-1) + '].[' + subRecord + ']}' + emailTemplateContent.text.substring(index,emailTemplateContent.text.length);
}else{
newText = emailTemplateContent.text.substring(0,index) + '{[' + fieldTypeDD.selectedItem + '].[' + insertFieldDD.selectedItem + ']}' + emailTemplateContent.text.substring(index,emailTemplateContent.text.length);
}
emailTemplateContent.htmlText = emailTemplateContent.htmlText.replace(emailTemplateContent.text, newText);
}

How do I make a JSON object produce HTML on the page

Here is my JSON
var gal = [
{
"folder":"nu_images",
"pic":"gd_42.jpg",
"boxclass":"pirobox_gall",
"alt":"Rand Poster 1",
"title":"Rand Poster 1",
"thfolder":"th",
"thumbpic":"th_gd_42.jpg"
},
{
"folder":"nu_images",
"pic":"gd_13.jpg",
"boxclass":"pirobox_gall",
"alt":"Explosive Pixel Design",
"title":"Explosive Pixel Design",
"thfolder":"th",
"thumbpic":"th_gd_13.jpg"
}
];
and here is my for loop
for (i = 0; i < gal.length; i++) {
document.getElementById("gallery").innerHTML = "" + "<img src=\"" + "http:\/\/galnova.com\/" + gal[i].folder + "\/" + "th\/" + gal[i].thumbpic + "\"" + "border=\"0\"" + "alt=\"" + gal[i].alt + "\"" + "title=\"" + gal[i].title + "\"\/>" + ""
};
I am trying to make my JSON show all of the objects in HTML one after the other. I can get it to show the first one or whatever number I put into the array but I don't know how to make it generate a list of them.
Here is a link to my jsfiddle. Any help you can offer would be greatly appreciated.
http://jsfiddle.net/o7cuxyhb/10/
It's being generated here <p id="gallery"></p> just not correctly.
You're overwriting your html with every loop iteration:
document.getElementById("gallery").innerHTML = ...
^---
Perhaps you want something more like
document.getElementById("gallery").innerHTML += ...
^---
which will concatenation the original html contents with your new stuff.
And technically, you shouldn't be doing this in a loop. Changing .innerHTML like that causes the document to be reflowed/re-rendered each time you change .innerHTML, which gets very expensive when you do it in a loop. You should be building your html as a plain string, THEN adding it to the dom.
e.g.
var str = '';
foreach(...) {
str += 'new html here';
}
document.getElementById("gallery").innerHTML += str;
for (i = 0; i < gal.length; i++) {
document.getElementById("gallery").innerHTML += "" + "<img src=\"" + "http:\/\/galnova.com\/" + gal[i].folder + "\/" + "th\/" + gal[i].thumbpic + "\"" + "border=\"0\"" + "alt=\"" + gal[i].alt + "\"" + "title=\"" + gal[i].title + "\"\/>" + "" };
Add a += instead of an = after innerHTML
Try this:
function displayJson(jsonArray){
var container = document.getElementById("gallery");
for (var i=0; i<jsonArray.length; i++){
var newElement = document.createElement("a").innerHTML = jsonToHtml(jsonArray[i])
container.appendChild(newElement);
}
}
function jsonToHtml(jsonObj){
//Define your dom object here
var el = document.createElement("a").innerHTML = '' // you code here
...
return el;
}
displayJson(gal);

Javascript ReGEX for JSON

This is all so confusing, I've seen so many examples of how to do different things and cannot seem to find a valid example for what I am trying to do.
I'm using the YQL for the stock quotes only to get just the major indexes, DOW S&P 500 and NASDAQ.
The project is getting the data and working, but I need to determine if the stock value is returning + or - (up or down).
if the market is up or flat, I want to add a CSS class to set it to green, if it is down, I want to set a CSS to red.
One other issue, this only seems to work when I place the function between the head and body, not in the head, not in the body.
<script type="text/javascript">
function stock_quotes(obj)
{
var items = obj.query.results.quote;
var output = '';
var num_quotes = items.length;
items[0].symbol = "DOW ";
items[1].symbol = "NASDAQ ";
items[2].symbol = "S&P 500 ";
//var posquote = {"\d\.?\d{0,9}\.\d{0,9}\s\+"};
//var negquote = {"\d\.?\d{0,9}\.\d{0,9}\s\-"};
for (var i = 0; i < num_quotes; i++) {
var link = items[i].url;
var symbl = items[i].symbol;
var Change_PercentChange = items[i].Change_PercentChange;
var LastTradePriceOnly = items[i].LastTradePriceOnly;
output += "<table><tr><td>" + "<a href='" + link + "'>" + symbl + "</a>" + LastTradePriceOnly + " " + Change_PercentChange + "</td></tr></table>";
}
// Place news stories in div tag
document.getElementById('results').innerHTML = output;
}
This is the HTML with the query
<div id='results'></div>
<script type="text/javascript" src='http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22DOW%22%2C%22%5EIXIC%22%2C%22%5EGSPC%22)%0A%09%09&format=json&diagnostics=true&env=http%3A%2F%2Fdatatables.org%2Falltables.env&callback=stock_quotes'></script>
Ideally I'd like to predefine the html elements which would make it easier to set the css class but one headache at a time.
In the end, this seemed to work just fine
var match_nas_neg = nas_result.match(/\-/);

getRange(),setFormulas doesn't want to work

I have the following code and when I run it I get the right number of items in sheetFormulas (4), and the array values look correctly formed.
However, I get an error right after the sheetFormulas Browser.msgBox pops up, indicating the getRange().setFormulas line has an issue, but I can't see what it is.
function test(){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var testingTarget = ss.getSheetByName("Testing");
var sheetFormulas = new Array();
for (l=0;l<10;l++) {
sheetRowCount = l + 2;
var monthlyTotalCompanyCosts = '=F' + sheetRowCount + '/$F$29*$I$14';
var monthlyTotalCompanyCostsPerEa = '=IFERROR(H' + sheetRowCount + '/C' + sheetRowCount + ')';
var monthlyMargin = '=D' + sheetRowCount + '-F' + sheetRowCount;
var monthlyMarginPctg = '=IFERROR(J' + sheetRowCount + '/D' + sheetRowCount + ')';
sheetFormulas.push(monthlyTotalCompanyCosts,monthlyTotalCompanyCostsPerEa,monthlyMargin,monthlyMarginPctg);
Browser.msgBox("sheetFormulas.length is: " + sheetFormulas.length);
Browser.msgBox("sheetFormulas is: " + sheetFormulas);
testingTarget.getRange(sheetRowCount,8,1,4).setFormulas(sheetFormulas);
sheetFormulas = [];
}
}
Any help is appreciated,
Phil
First, sheetFormulas has to be a 2D array. So try doing
/* Notice the [] around sheetFormulas */
testingTarget.getRange(sheetRowCount,8,1,4).setFormulas([sheetFormulas]);
If you still see other problems, then put your code inside a try{}catch{} block and print out the exception in the catch block.
I also suggest that you print out the formula using Logger.log() before setting it on the spreadsheet.

ActionScript 3.0 add border to movie clipe

I had created the script below but the cordinate is not working right. please see my scripts and let me know what is wrong with my scripts.
thanks
/*mcc is the Instance name*/
var myMovieClip:Sprite = new Sprite();
trace("x" + mcc.x + "y" + mcc.y + "width" + mcc.width);
myMovieClip.graphics.lineStyle( 1, 0xFF0000 );
myMovieClip.graphics.drawRect( 0, 0, mcc.width+1, mcc.height+1 );
myMovieClip.graphics.endFill();
myMovieClip.x = -(mcc.x/2);
myMovieClip.y = -(mcc.y/2);
mcc.addChild(myMovieClip);
would need to know more about mcc looks like we're assuming that mcc has the content centered instead of the top right corner of mcc being at [0,0]
Try using the getBounds method instead.
something like this... though I haven't tested it
var bounds:Rectangle = mcc.getBounds(this)
myMovieClip.graphics.drawRect(
bounds.left-border/2, bounds.top-border/2,
bounds.width+border, bounds.height+border
);
myMovieClip.x = (mcc.x);
myMovieClip.y = (mcc.y);
mcc.addChild(myMovieClip);
thank you, it is working now, i used the getBounds and set the myMovieClip.x = (0); . It doesn't make sense but it works good now.
Anyway, the mcc could be anything, event rotate angle too.
var border=1;
var myMovieClip:Sprite = new Sprite();
myMovieClip.graphics.lineStyle( border, 0xFF0000 );
trace("getbound on mcc" + mcc.getBounds(mcc));
trace("parser" + mcc.getBounds(mcc).y)
trace("getbound on this" + mcc.getBounds(this));
trace("Other x " + mcc.x + " y " + mcc.y + " width " + mcc.width+ " height " + mcc.height);
var bounds =mcc.getBounds(mcc)
myMovieClip.graphics.drawRect(bounds.left-border/2, bounds.top/2,bounds.width+border, bounds.height+border);
myMovieClip.graphics.endFill();
myMovieClip.x = (0);
myMovieClip.y = (bounds.y)/2;
mcc.addChild(myMovieClip);
trace("New bound" + mcc.getBounds(mcc));