Horizontal spacing using .setSpacing() within HorizontalPanels seems to work as expected when the App is included into a GoogleSite as App Gadget (Firefox), but I can't figure out how to control vertical spacing within widgets in VerticalPanels:
var panel_A = uiApp.createHorizontalPanel();
panel_A.add(t1).add(t2).setSpacing(30); // works as expected, horiz. space betw. t1 & t2
var panel_B = uiApp.createHorizontalPanel();
panel_B.add(t3).setSpacing(30); // shifts t3 widget to the right
var panel = uiApp.createVerticalPanel();
panel.add(panel_A).add(panel_B).setSpacing(10); // has no apparent effect
The docs do distinguish between a vertical setSpacing() and a horizontal setSpacing() but I'm clearly missing something. Thanks.
EDIT
Simplifying things further and combining various setHeight and setSpacing settings won't change the spacing between t1,t2,t3 (5 x 3 table charts). Ive tried enclosing the vpanel within an hpanel (I've been able to control the hpanel's width) but that didn't alter the vertical spacing between the three tables.
var uiApp = UiApp.createApplication();
var vpanel = uiApp.createVerticalPanel().setHeight('50%');
vpanel.add(t1).add(t2).add(t3);
uiApp.add(vpanel);
return uiApp;
Related
I am looking to replace a string within a Google Doc via an app script. The string will exist on a line, but after the replace, I want it to have a specific font, size and justification.
I've created a style to address all these attributes (I included both Horiz. and Vert. alignment) and most of it works fine. When the string is replaced, the replacement has the right font, size and bold attributes. For some reason, I cannot get the justification to get changed.
// Define the style for the replacement string.
var hdrStyle = {};
hdrStyle[DocumentApp.Attribute.HORIZONTAL_ALIGNMENT] =
DocumentApp.HorizontalAlignment.CENTER;
hdrStyle[DocumentApp.Attribute.VERTICAL_ALIGNMENT] =
DocumentApp.VerticalAlignment.CENTER;
hdrStyle[DocumentApp.Attribute.FONT_FAMILY] = 'Calibri';
hdrStyle[DocumentApp.Attribute.FONT_SIZE] = 24;
hdrStyle[DocumentApp.Attribute.BOLD] = true;
{ then later }
documentBody = DocumentApp.openById(fileId).getBody();
hdrElem = documentBody.findText("old string").getElement();
hdrText = hdrElem.asText().setText("new string");
// Force our 'header style':
hdrElem.setAttributes(hdrStyle);
I've tried setting the style after the findText and (as here) after, but no change in centering.
I see there is a paragraph centering, but I am not clear how to 'get' the paragraph associated with the element that is returned on the find.
I'm hoping this is some simple set of calls - but have run out of ideas (and patience)..!
Any help would be appreciated!
You can use getParent() on hdrElem to get the parent paragraph to apply the styling to.
https://developers.google.com/apps-script/reference/document/text#getParent()
documentBody = DocumentApp.openById(fileId).getBody();
hdrElem = documentBody.findText("old string").getElement();
hdrText = hdrElem.asText().setText("new string");
var hdrParent = hdrElem.getParent()
// Force our 'header style':
hdrParent.setAttributes(hdrStyle);
I am trying to mask an image on another so that I only view the specific portion of the unmasked image through the masked one. My problem is that I cannot see anything on the screen.. no Image, no effect at all
cardMask = new Image(Root.assets.getTexture("card_mask"));
cardMask.y = Constants.STAGE_HEIGHT*0.40;
cardMask.x = Constants.STAGE_WIDTH *0.48;
trace("it's add mask");
cardLight = new Image(Root.assets.getTexture("card_light_mask"));
cardLight.y = Constants.STAGE_HEIGHT*0.46;
cardLight.x = Constants.STAGE_WIDTH *0.48;
cardLight.mask=cardMask;
maskedDisplayObject = new PixelMaskDisplayObject(-1,false);
maskedDisplayObject.addChild(cardLight);
maskedDisplayObject.x=cardLight.x;
maskedDisplayObject.y=cardLight.y;
maskedDisplayObject.mask=cardMask;
maskedDisplayObject.blendMode = BlendMode.SCREEN;
addChild(maskedDisplayObject);
First, for masking an object the mask object should also be added to the display list. Your code does not add cardMask to display list anywhere. Second, if your maskedDisplayObject should be visible at all times, the mask should be assigned not to it, but to some other object which displayed part you desire to control. And third, it is also possible that this.stage is null, therefore the entire tree (this -> maskedDisplayObject -> cardLight) is plain not rendered. You need to check all three of these conditions to get something displayed.
Also, if you desire cardLight as an object to move independently of maskedDisplayObject, you should add it to this instead, and check that it's displayed on top of maskedDisplayObject (call addChild(cardLight) after addChild(maskedDisplayObject)).
This all totals to this code:
trace("Stage is null:", (this.stage==null)); // if this outputs true, you're out of display
cardMask = new Image(Root.assets.getTexture("card_mask"));
cardMask.y = Constants.STAGE_HEIGHT*0.40;
cardMask.x = Constants.STAGE_WIDTH *0.48; // mask creation unaltered
trace("it's add mask");
cardLight = new Image(Root.assets.getTexture("card_light_mask"));
cardLight.y = Constants.STAGE_HEIGHT*0.46;
cardLight.x = Constants.STAGE_WIDTH *0.48;
cardLight.mask=cardMask; // this is right
maskedDisplayObject = new PixelMaskDisplayObject(-1,false);
// maskedDisplayObject.addChild(cardLight); this is moved to main part of display list
maskedDisplayObject.x=cardLight.x;
maskedDisplayObject.y=cardLight.y;
// maskedDisplayObject.mask=cardMask; NO masking of this, you're only masking cardLight
cardLight.blendMode = BlendMode.SCREEN; // display mode is also changed
addChild(maskedDisplayObject);
addChild(cardLight);
Using a bar chart: https://developers.google.com/chart/interactive/docs/gallery/barchart when you have a lot of data, it crushes the bars to be very thin and the text to overlap each other. What options are there to get the data to render in the container properly (maybe guarantee each bar to be of a certain height if possible)? I want to avoid explicitly setting the height to say "1000px", then looking at the bar chart to determine whether it is scrunched up or not.
You can calculate a height for your BarChart dynamically, based on the number of rows of data in your DataTable:
// set inner height to 30 pixels per row
var chartAreaHeight = data.getNumberOfRows() * 30;
// add padding to outer height to accomodate title, axis labels, etc
var chartHeight = chartAreaHeight + 80;
var chart = new google.visualization.BarChart(document.querySelector('#chart_div'));
chart.draw(data, {
height: chartHeight,
chartArea: {
height: chartAreaHeight
}
});
After creating a Div 'MyParent' , and many childs with different widths&heights are added to this 'MyParent' . By the end, i want to know the final width & height of 'MyParent' in pixels. I've used the familiar functions to get a width & height , i got 0 in all attempts.
Here's a simple code :
var myPrt = document.createElement('div');
var C1 = document.createElement('div');
var C2 = document.createElement('div');
var C3 = document.createElement('div');
myPrt.appendChild(C1);
myPrt.appendChild(C2);
myPrt.appendChild(C3);
$(C1).css({position:absolute;left:-100px;top:100px;width:100px;height:50px;background:red});
$(C2).css({position:absolute;left:100px;top:-100px;width:75px;height:50px;background:yellow});
$(C3).css({position:absolute;left:150px;top:200px;width:90px;height:50px;background:black});
$(myPrt).height(); // returns 0
$(myPrt).css('height') // returns 0
$(myPrt).innerHeight(); // returns 0
$(myPrt).outerHeight(); // returns 0
myPrt.clientHeight; // returns 0
In simple way to get that ?
Because actually I've found a solution to this problem , but it acts in the Childs, create a loop that goes throw all the Parents Childs , then get the max left and min left of these childs , then it returns the distance between the min & max , and the same tip for the Height by getting the max/min top, however ,this tip needs childs to have an absolute position to get there left/top am looking for an existing jquery or javascript function that does that without absolute position for childs .
Thanks
Take a look at this JSFiddle, you're just being clumsy I think. You never added the myPrt div to the document for one.
The other issue is that you're not passing the css as a properly formatted javascript dictionary with string variables.
http://jsfiddle.net/FcSEG/1/
var myPrt = document.createElement('div');
$('body').append(myPrt);
var C1 = document.createElement('div');
var C2 = document.createElement('div');
var C3 = document.createElement('div');
myPrt.appendChild(C1);
myPrt.appendChild(C2);
myPrt.appendChild(C3);
$(C1).css('width','500');
$(C1).css('height','500')
$(C1).css('background','red');
alert($(myPrt).height());
What is the default height of a scroll bar(Horizontal)?
I couldn't find the document online.
UPDATED: Can we write a javascript function to get it? Please don't down vote it. It is hard to get it.
Thank you.
Found this here: How can I get the browser's scrollbar sizes?
function getScrollBarWidth () {
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild (inner);
document.body.appendChild (outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild (outer);
return (w1 - w2);
};
alert( getScrollBarWidth () );
That's going to depend on the clients screen resolution and browser. If you explain why your asking then I might be able to give a better answer.
Whatever the user's computer is set to. There is no hard-and-fast rule on this. For example, on my Ubuntu machine, the default scroll bar size is 0 - instead of a conventional scrollbar, it has a scroll line with arrows that appear when the mouse moves near it, and it takes no space on the document. However, on my Windows installation, the scrollbar size is 14 pixels, but I could set it from anything between about 8 and over 500...
Interesting question. My thought is: when a property you are interested in is not readily available, test.
One DOM property I can think of that would be affected by the scrollbar height is the clientHeight of the body (or whatever box has the scrollbar) if you set it to 100%. This is maybe a dumb approach, and not sure how useful it really is, but check it out:
get clientHeight before
expand width of an internal element, wide enough to cause a scrollbar
get clientHeight after
subtract
I made a fiddle of this. Like I said, not sure how useful this approach could be in real life, but maybe it's a start on something.
http://jsfiddle.net/brico/t6zMN/