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...
Related
In looking at this image you can see in an ideal world each box would have the same height of content in each box. However in the real world we can't control how many characters the client uses for a heading. Wondering thoughts on how to deal with a situation like this? Is it ok to just let it be as is?
This will create an array of heights of an element by class, then find the tallest, and then make them all that height.
<script>
var headerHeights = [];
var mclength = document.getElementsByClassName("myClass").length;
for (i = 0; i < mclength; i++) {
headerHeights[i] = document.getElementsByClassName("myClass")[i].getBoundingClientRect().height;
}
var headerMaxHeight = Math.max(...headerHeights);
for (i = 0; i < mclength; i++) {
document.getElementsByClassName("myClass")[i].style.height = headerMaxHeight+"px";
}
</script>
You will likely want to make this a function which replaces "myClass" with a function parameter so that you can call it for each class you add. You will also want to add a listener for when a person resizes their window to rerun the function.
I am trying to make a custom full screen mode for my media player. It basically assigns content to resized movie clip and displays. However when comes to particular contents it is unable to show in full screen mode. Actually there is no problem in default but only in FS. Here is the code that activates FS Mode.
function FSMode(e:MouseEvent):void
{
fullScreenToolbar = new ExitFSClass();//this exits full screen
_coordinate.x = contentLdr.content.x;
_coordinate.y = contentLdr.content.y;
_width = contentLdr.content.width;
_height = contentLdr.content.height;
contentLdr.content.x = -250;
contentLdr.content.y = -135;
this.setChildIndex(contentLdr, this.numChildren - 1);
if(contentTypArr[currentCategory] === "animation")
{
addChild(fullScreenToolbar);
this.setChildIndex(fullScreenToolbar, this.numChildren - 1);
if(Capabilities.screenResolutionX >= 1920)
{
contentLdr.content.width = 1800;
contentLdr.content.height = 1012.5;
}
else
{
contentLdr.content.width = Capabilities.screenResolutionX;
contentLdr.content.height = Capabilities.screenResolutionY;
}
fullScreenToolbar.x = 0;
fullScreenToolbar.y = 965;
fullScreenToolbar.width = contentLdr.content.width;
fullScreenToolbar.addEventListener(MouseEvent.CLICK, openToolbar);
fullScreenToolbar.buttonMode = true;
}
}
Why some contents cannot be displayed? I am unable to see related problem or conflict with code.
Basically the Loader content resolution is different (greater in this situation) than the displaying area. There are overflowing parts that makes fs not working properly. Fixing the content resolution makes no problem and the function operates well.
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);
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/