Get a div's Width & Height after adding childs to it - html

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());

Related

Getting width of div class row

I need to get the width of this div
<div class='row WidthAdjust'></div>
But it is proving way more difficult than I anticipated, below is some of the things I have already tried
// var row = document.getElementsByClassName("WidthAdjust").width()
var row = document.getElementsByClassName("WidthAdjust")
var rowWidth = parseFloat($(row).width())
You can use var data = row.getBoundingClientRect() to get DOMRect object. This object will have the size of the element and its position relative to view port.
Use data.width to get the width specifically.

Google Apps Script: How to copy text and preserve formatting?

Consider the document represented by the next 3 lines.
..some text..
6 7 8 9 10 11
..some text..
Imagine that all the numbers are their respective font sizes(i.e. 10 is font size 10). Now I want to insert an inline image in the space between 8 and 9, and remove that space, but NOT destroy the formatting(sizes in this example) of the unaffected text. The result would be
..some text..
6 7 89 10 11
..some text..
However, when I try
function placeImage() {
var s = DocumentApp.getActiveDocument().getBody();
//Find in Document
var found = s.findText("8");
if(found==null)
return 0;
var foundLocation = found.getStartOffset(); //position of image insertion
//Get all the needed variables
var textAsElement = found.getElement();
var text = textAsElement.getText();
var paragraph = textAsElement.getParent();
var childIndex = paragraph.getChildIndex(textAsElement); //gets index of found text in paragraph
//Problem part - when removing the space, destroys all formatting
var textRemaining = text.substring(foundLocation + 2);
textAsElement.deleteText(foundLocation, text.length-1);
if(textRemaining != "")
paragraph.insertText(childIndex+1, textRemaining);//destroys formatting for the rest of the child index
//Insert image
var imgSource = UrlFetchApp.fetch("https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Red_information_icon_with_gradient_background.svg/48px-Red_information_icon_with_gradient_background.svg.png");
var ingBlob = imgSource.getBlob();
paragraph.getChild(childIndex+1).insertInlineImage(foundLocation, ingBlob);
}
The problem is that when I remove the space and create another child element in the paragraph to insert the image at, the substring also deletes the remaining text formatting. I have tried looking into copy(), but I'm not sure how that would work efficiently.
I have researched many other places, both answers here don't preserve formatting, and position.insertInlineImage() seems to be broken, as asked here.
It basically depends on the content of your document how it is set with paragraphs. Tried with simple content in the document and insert the image.
It is inserting the image well and also not changing the formatting of rest of the text aswell.
Check the code below:
function placeImage()
{
var s = DocumentApp.getActiveDocument().getBody();
var number = '8'
//Find in Document
var found = s.findText(number);
if(found==null)
return 0;
var foundLocation = found.getStartOffset(); //position of image insertion
//Get all the needed variables
var textAsElement = found.getElement();
var text = textAsElement.asText().copy();// getText();
textAsElement.editAsText().deleteText(foundLocation + number.length ,textAsElement.asText().getText().length -1)
text.asText().editAsText().deleteText(0, foundLocation + 1 );
//Insert image
var imgSource = UrlFetchApp.fetch('https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Red_information_icon_with_gradient_background.svg/48px-Red_information_icon_with_gradient_background.svg.png');
var ingBlob = imgSource.getBlob();
var children =DocumentApp.getActiveDocument().getBody().getChild(0).asParagraph().appendInlineImage(ingBlob);
DocumentApp.getActiveDocument().getBody().getChild(0).asParagraph().appendText(text);
var child = DocumentApp.getActiveDocument().getBody().getNumChildren();
}
The document content tested is:
6 7 8 9 10 11
(The size of the text is similar to as you mentioned. '8' is size 8 and so on)
You have to test using trial and error method as per your document content.
Hope that helps!

How to center align Alert.show() in flex

I have a tall Flex application that uses Alert.show( ) to display error/warning messages. This created problems when the error messages were centered on the screen, but not visible when the screen was at an extreme scroll position (top or bottom). is there any way that i can display the Alert in the center of the user's viewable page. I've tried the following, but didn't work.
var errorMsg:Alert = Alert.show("Error message");
PopUpManager.centerPopUp(errorMsg);
Thanks in advance.
Alert usually centers on the parent which you provide in the params.
Use (FlexGlobal.topLevelApplication as parent) as parameter in the following static method parent param.
Alert.show(text:String = "", title:String = "", flags:uint = 0x4, parent:Sprite = null, closeHandler:Function = null, iconClass:Class = null, defaultButtonFlag:uint = 0x4, moduleFactory:IFlexModuleFactory = null);
Here is the solutions for my problem, i've used javascript calls to achieve this.
var viewPoint:Number = ExternalInterface.call("eval", "window.pageYOffset");
var browserHeight:Number = ExternalInterface.call("eval", "window.innerHeight");
//the following calculation finds the center y coordinate in user's viewable page.
var viewableY : Number = ((browserHeight/2)+viewPoint-50);
var alert : Alert = Alert.show("Error Msg");
PopUpManager.centerPopUp(alert);
alert.move(400,viewableY);
I hope this helps someone...

Resizing floated first div's based on second floated div contents?

I want to have to floated columns side-by side. If second column has contents then the first column should resize its content based on the second column, is that possible with CSS? Widths are not defined.
It's possible using javascript but not with straight CSS. Here are some ways to do it:
Using javascript:
var rightDiv = document.getElementById("straightJ2");
var rightWidth = rightDiv.clientWidth;
var leftDiv = document.getElementById("straightJ1");
if($('#straightJ2').text() || rightDiv.hasChildNodes()) {
leftDiv.style.width = rightWidth + "px";
}
Or more minimal (and possibly overwhelming/hard to follow) javascript:
if($('#minimal2').text() || $('#minimal2').firstChild) {document.getElementById("minimal1").style.width = document.getElementById("minimal2").clientWidth + "px";}
Using jQuery:
if($('#secondColumnId').html() != '')
{
$('#firstColumnId').width($('#secondColumnId').width());
}
Each of these check the second div for text or a child element and change the width of the first if one of those conditions is met
All examples can be found used in this jsFiddle

How do I select a part of an array? Or match parts of one array with parts of another?

I have some drag and drop function where there are 8 items (dragArray) that can be dropped onto 2 big 'landing zones' (matchArray). But since I don't want them lie on top of each other, I've made an array where they are given positions (posArray).
var dragArray:Array = [drag_1, drag_2, drag_3, drag_4, drag_5, drag_6, drag_7, drag_8];
var matchArray:Array = [drop_1, drop_1, drop_1, drop_1, drop_2, drop_2, drop_2, drop_2];
var posArray:Array = [{x:412,y:246},{x:530,y:218},{x:431,y:186},{x:470,y:152},{x:140,y:111},{x:108,y:162},{x:179,y:210},{x:113,y:254}];
When all 8 items are dropped, a check button appears and I want to check if they are dropped onto the correct big landing zone. I tried using the following:
if (posArray[i].x != dragArray[i].x || dragArray[i].y != posArray[i].y )
But then, not only the landing zone must match, but the positions must also match.
When I use
if (matchArray[i].x != dragArray[i].x || dragArray[i].y != matchArray[i].y )
it doesn't work, because the positions of the (dragArray) items don't match with the registration points of the (matchArray) landing zones.
Is there any way of checking if the first 4 (drag_1, drag_2, drag_3, drag_4) items match with ANY of the first 4 posArray positions and the last 4 (drag_5, drag_6, drag_7, drag_8) match with ANY of the last 4 posArray positions?
If the goal is to check each element of one set against all elements of another set then you'll need to have two loops, one "nested" within the other. The general form of this algorithm in AS3 looks like
var allMatched:Boolean = true;
for(var i:Number=0; i<array1.length; i++)
{
var matchFound:Boolean = false;
for(var j:Number=0; j<array2.length; j++)
{
if(array1[i]==array2[j])
{
matchFound=true;
break; //exit the inner loop we found a match
}
}
if(!matchFound)
{
allMatched=false;
break; //we found an element in one set not present in the other, we can stop searching
}
}
if(allMatched)
trace("Everything from array1 was found somewhere in array2"); //For an element a in the set A there exists an element b in set B such that a = b
Let me know if this helps