I need help with positioning a child window created using
var win:myWindow = new myWindow();
where myWindow.mxml contains <s:Window.......
The child window does open as desired. However I would like to place it at a specific (x,y) position with reference to the WindowsApplication.
I have tried
var parentWindowHandle:* = nativeApllcaition.nativeApplication.openedWindows[0];
win.x = parentWindowHandle.x + 200;
However, this does not work. The content of the myWindow gets shifted by 200. (myWindow.mxml contains only a label. This label shifts by 200 to the right. Not exactly what I wanted).
The parentWindowHandle is correct. I have checked it using Alert.show(parentWindowHandle.title) which is displayed correctly.
I am pretty new to Adobe AIR.
EDIT:
I tried to do win.x=200 as suggested. However the content seems to be moving not the window.
for moving the window :
win.nativeWindow.x = 200;
Related
I am trying to create a time line using http://visjs.org/timeline_examples.html
I want the time line to have fixed height (which I can set using height attribute in options). But As I zoom in/out the timeline, It is displaying the points one below another. This feature is affecting the height of the graph.
Can anyone help me how to make the points overlap?! so that I can have the height of the groups constant?
Actual behavior
In the options for your timeline you can specify stack: false e.g.
var options = {
stack: false
};
var timeline = new vis.Timeline(container, dataset, options);
This will cause the time line items to overlap rather than stack up on top of each other. You can see this in action here:
http://visjs.org/examples/timeline/other/groupsPerformance.html
I am having difficulties copying properties from one fram and create a similar one (See picture below). The picture to the left, flower-ish, Is the properties I want. I wanna add this to the image to the right ( blue one). I have tried using the google chrome edit component but I can't figure it out.
I only want the image to the right to have the same properties (size and frame) as the left image.
The URL to this scenario
Looking your page, i think you should do something like this (I'm using jQuery).
$(document).ready(function(){
var img = $('.attachment-shop_catalog');
var width = img.width();
var height = img.height();
//give an id or a class to identify your target img, i'm using id target-img
$('#target-img').css('width',width+'px');
$('#target-img').css('height',height+'px');
});
I write page, which shows sellers of used items. There is many short info elements on the map with price, state of item and period of availability of seller. I want to reduce free space of info windows so more of them can fit the screen. I try new functionality in 6.5.0 of wicket-stuff gmap3 - "panels inside info windows", but no luck - picture shows result of css:
border : 1px solid black ;
margin : 0;
padding : 0;
How can i minimize free space of info winfo window and fit it to content?
P.S. It will be best if i can make clickable group of digits with pointer. But info window not clickable, so there is markers. Idea - user first make brood choice based on main properties displayed in info windows, then click his choice and complete info displayed somewhere else on the page.
P.P.S. Hmm, i have one more idea now - i don't need digit with state. I just can paint info in different colors(green = "like new", blue="used hard, but works", red = "garbage") :).
Quick and dirty
var infowindow = new google.maps.InfoWindow({
content: '<div id="iw_content">3434 4 18-9</div>'
});
google.maps.event.addListener(infowindow,'domready',function(){
var el = document.getElementById('iw_content');
//* Get and set a class for the main content containers container
el = el.parentNode.parentNode;
el.setAttribute('class','iw_content_container_container');
//* Get and set a class for the div containing the close window image
closeEl = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
closeEl.setAttribute('class','closeInfoWindow');
//* Get and set a class for the div containing the close and main content
el = el.parentNode;
el.setAttribute('class','closeInfoWindowContainer');
//* Get and hide the troublesome background
el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
el.style.display = "none";
//* Get and hide the top image of the arrow
el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
el.style.display = 'none';
//* Get and hide the shadow (hiding commented out for now as not strictly requested)
el = el.parentNode.parentNode;
el = (el.previousElementSibling)?el.previousElementSibling.previousElementSibling:el.previousSibling.previousSibling;
//el.style.display = 'none';
});
That might work for you to put some hooks in the code which you can then address with css
#iw_content{background:#fff}
.iw_content_container_container{height:auto!important;text-align:center}
.closeInfoWindow {top:22px!important;right:22px!important}
.closeInfoWindowContainer{position:absolute;top:52px;height:auto!important}
You may want to mess about with the .closeInfoWindowContainer top value as this is dependant on the amount of text. Basically tested with just that one line of yours.
I tried actually removing widths and heights in the code itself (so adding/changing within the javascript) but Maps have an annoying habbit of putting them back in again depending on state and position of cursor when loading.
...
Info Windows are clickable. They are just a normal div element in the page and can be treated as such. I have made the various values in your example hyperlinks to show this.
Sorry it isn't wicketstuff but I thought I should still post a solution.
I am building a Flex 4 application which uses a <s:Scroller> component to vertically scroll overflown content. Let me explain what happens before I ask my question:
The body of the page is loaded from a database
Once the information has loaded, the "body" of the application (in this case the list of items you see below) is constructed
Once the list is constructed, the entire encapsulating component is transitioned into view using TweenMax, like so:
myComponent.visible = true;
TweenMax.to(myComponent, 1, {
alpha : 1,
y -= 20 //Slides the component up 20px from its original location
});
Below is the result. Notice how the scrollbar is scrolled the whole way down, but you can see the tips of a few white letters that were cut off at the very bottom.
Using my custom menu, I can navigate away from the page, and come back to it, and Flex will correctly recalculate the range of the scroller so I can scroll down and see all of the desired content. This issue only happens if the initial URL that the user enters is a longer page like this one.
Any ideas on how I can force Flex to recalculate the range of the scroller?
Thank you for your time.
Ok, after many hours of researching, piecing together, and trial and error here is what I came up with.
What I was doing wrong:
When I first posted this question, the "component" that I had mentioned was already added as a child element of the <s:Scroller>, but collapsed and hidden away, like this:
<comp:MyComp alpha="0" height="0" visible="false"/>
When the data would be loaded and the component's visual appearance would be restored and transitioned into place, like this:
myComp.visible = true;
myComp.height = NaN;
myComp.invalidateSize();
myComp.height = myComp.measuredHeight;
TweenMax.to(myComp, 1, {
alpha : 1,
y -= 20 //Slides the component up 20px from its original location
});
This method of approach didn't force the <s:Scroller> to recalculate its proper size until later, sometimes not until myComp was transitioned away and another component was transitioned into place using the same method. Even then, the size of the scroller would fit the size of the previous component, not the one that is currently displaying.
Now, what I am doing correctly:
My research showed me that anytime the addElement() method is called, either directly within the <s:Scroller> itself or by any of its children, the scroller's measure() method is called, and properly re-sizes the scroller.
Instead of placing the components inside of the scroller and simply hiding them until I need them, I dynamically created them in ActionScript, set their properties, and added and removed them as needed using the addElement() and removeElement() methods respectively. Now, as old elements are transitioned away and new ones take their place, the scroller re-sizes itself correctly.
There was one final problem that I was faced with. If the very first page the user was viewing (i.e. there was no previous component that was transitioned away and destroyed) required a scroller, it wouldn't show up.
I corrected this final issue by adding an event listener that listened for when the new component had finished transitioning into place. Inside of the event handler, I explicitly set the height of the component using this code:
newComp.height = NaN;
newComp.invalidateSize();
newComp.height = newComp.measuredHeight;
Now that the component has an explicit height, the scroller now appears, even if it is the first page.
The scroller now works as expected in all cases, and does not cut off any content or disappear when it shouldn't.
I hope that it is helpful to someone.
I've two different stages on top of another.
And, I'm adding layers to them and placed two image objects.
Now, I've given "click" event to those image objects.
However, since recently added layer is on top of other layers, Only top layer is triggering the events.
Problem : Clicking on purple indicator , I'm getting the alert. But, yellow indicator does not trigger any event since it is behind the layer.
(Check JSFiddle Link which is provided at the bottom)
How to overcome this issue..?
Here is the code sample that I'm using to add & position the image.
Working JS Fiddle Link : http://jsfiddle.net/v4u2chat/aqf9Y/8/
NOTE : Use the Slider to change the position of the image.
Image Positioning Code
$function positionImage(stage,centerX,centerY,radius,startingAngle,endingAngle,targetValue4ImagePositioning,divIdvalue)
{
var imgLayer = new Kinetic.Layer();
var angleInDegress = 360*targetValue4ImagePositioning-90-5;
var angleInRadians = (Math.PI/180)*angleInDegress;
imgLayer.rotate((Math.PI/180)*(360*targetValue4ImagePositioning));
var arcEndX = centerX+ ((radius+25)*Math.cos(angleInRadians));
var arcEndY = centerY+ ((radius+25)*Math.sin(angleInRadians));
imgLayer.setX(arcEndX);
imgLayer.setY(arcEndY);
var kineticImage = new Kinetic.Image(
{
x: 0
,y: 0
,width:18
,height:22
,image: $('#'+divIdvalue)[0]
,id:'kineticImage_'+divIdvalue
});
kineticImage.on("click", callBackFn);
imgLayer.add(kineticImage);
stage.add(imgLayer);
}
Thanks **Steve** for your input.
The actual problem lies in Stage. I'm using two different stages which is not required.
Now, I changed my code to single Stage and it works like charm :)
Layer will not occupy the whole canvas area. It'll occupy only the area of the shape for which we have created the layer. So, No fuss or problem with Layers.
Updated JS Fiddle can be found from the below mentioned link.
http://jsfiddle.net/v4u2chat/aqf9Y/9/