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
Related
I have this code which I don't understand:
JFrame jframe = new JFrame("Risultati protocolli cercati");
jframe.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JPanel body = new JPanel();
Container c = jframe.getContentPane();
body.setSize(100, 100);
body.setLayout(new GridLayout(1000, 1));
for (int i = 0; i < 1000; i++)
body.add(new JLabel("JLabel " + i));
JScrollPane jsp = new JScrollPane(body);
c.add(jsp);
jframe.setSize(100, 100);
//jframe.add(body);
jframe.setVisible(true);
If I leave the penultimate line commented then everything appears, both labels and scroll. Instead if I uncomment that line, I see nothing. Only the JFrame. Why does it happens? For the main window of my program I had to perform jframe.add(body)...
Instead if I uncomment that line, I see nothing. Why does it happens?
The below line
jframe.add(body);
internally calls
jframe.getContentPane().add(body);
JFrame by default uses BorderLayout and add(component) method directly add it in the center section, if you add again then last one is replaced with latest one.
You can use overloaded add() method of JFrame to add it in another section east, west, north and south as shown in below snapshot:
for e.g.:
frame.add(comp,BorderLayout.NORTH); // add in north section
frame.add(comp,BorderLayout.WEST); // add in west section
You can use other Layout Managers as well as per the design or your application:
It's worth reading How to Use BorderLayout
One more suggestion:
Use frame.pack() instead of frame.setSize() that fits the components as per component's preferred size.
Interesting problem caused by the layout managers.
A component can only have a single parent. First you add the "body" to the scrollpane but then the "body" gets removed from the scrollpane when you add it to the content pane of the frame (for the reasons mentioned by #braj). Not a big deal as it just means you won't see any scrollbars.
Since the component is directly added to the content pane you should still see the labels however they do not display and this is the confusing part. Change your code to use "100" for the GridLayout and the number of components you create in the loop. When the frame first displays the panel will be empty. Now, increase the height of the frame and you will see the components appear. What is happening is that you are trying to paint too many components in a small area and because of rounding issues the height of every component becomes 0, so there is nothing to paint. When you increase the height to at least 100 pixels every component can now be 1 pixel high so you get garbage.
The only solution is to keep the "body" panel in the scrollpane so that all components will be displayed at their preferred size. Then you can scroll through all the components as required.
A tip for when using a GridLayou. You can use:
body.setLayout(new GridLayout(0, 1));
Then means the grid will have unlimited rows and a single column.
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 want to move a display object from one container to another, but have it appear in the same place on screen.
I thought I'd understood this years ago, but the following does not work:
function moveToNewContainer(obj:DisplayObject, newParent:DisplayObjectContainer):void {
var pos:Point = new Point(obj.x, obj.y);
var currentParent:DisplayObjectContainer = obj.parent;
pos = currentParent.localToGlobal(pos);
currentParent.removeChild(obj);
newParent.addChild(obj);
pos = newParent.globalToLocal(pos);
obj.x = pos.x;
obj.y = pos.y;
}
This doesn't position the object in the same place as I would have expected.
Does anyone know what I am doing wrong, please?
Thanks,
James
Using localToGlobal/globalToLocal and setting the x and y properties like you showed calculates the correct position for the object in its new parent, but does not adjust for other aspects of the transformation such as scaling or rotation. In other words, the object's registration point will indeed remain in the same place, but the object may be rotated, scaled, or sheared differently.
The solution to your problem will need to take into account the transform.concatenatedMatrix properties of the old and new parents--you'll need to multiply the object's transformation matrix by one and then by the inverse of the other, or something along those lines. Leave a comment if you need help working out the math.
There is nothing wrong with your code, provided that both containers have no transformations applied. If your clips are scaled, rotated, etc.. you need to handle that in addition to the coordinate space transformations that localToGlobal and globalToLocal do.
You have to check if your containers are actually placed on stage. If your new container isn't added as a child to stage, function globalToLocal fails, just because it doesnt know how to correctly calculate that data.
I'm using a flip mechanism to navigate through my site (flip file & demo). The problem is, once it's flipped the content been displayed good just like I want it, but there's some offset from the flipped (right) parts en the solid left part (visible when you look closely). Also the right part is now a little blurred (which is the disturbing part of my issue). This all caused by the flip (I think the rotationY is causing the problem).
When I click a button I do the following:
flip=new Flip(currentPage,nextPage,richting);
content.addChild(flip);
currentPage=nextPage;
nextPage = new MovieClip();
there is a fix for it, consider the following:
// store original matrix
var origMatrix:Matrix = box.transform.matrix;
// set initial position
box.rotationY = -180;
// start animation
TweenLite.to(box, 1, {rotationY:0, onComplete:cleanBlur})
// execute after animation complete
function cleanBlur():void {
box.transform.matrix = origMatrix;
}
maybe you can find better results using other 3d library.
EDIT: sorry the "box" object, I was testing in flash, but box would be any of your pages to flip. Just apply the same logic.
Matteo at Flash & Math has an excellent solution for this. He actually found that when you bring an object into native 3D space it expands the object by one pixel in both the width and height. This can be counteracted by scaling your object back and then setting it's z to 0 which will scale it back up. Now the object is ready to play with without the blur.
http://www.flashandmath.com/flashcs4/blursol/index.html
adding: This fixes the scale issue, but not the blurriness. You will still need to use the matrix transformation fix posted above.