Does anyone know how to prevent a Vis.js Timeline from resizing "unnecessarily"? By "unnecessarily" I of course mean relative to a visual context not the "code context". In the screengrab below, I understand that the code is "doing its job", as it were, but the visual result is not acceptable.
I've tried all the various settings I could find under the setup options but they didn't help. It is a huge codebase and I'd rather not muck around with it, if I can help it.
While you can't configure it in the javascript, a bit of css can do the trick for you :)
.vis-label .vis-inner {
min-height: 200px;
}
I had similar issues so I thought I would post a response here in the event someone else is experiencing the same problems I had. Changing the CSS didn't work for me. This just created gaps on the Y Axis inside the first or last group item and pushed the timeline items out of whack. There's an option called 'stack' which I had overlooked. For items that overlap slightly their corresponding group will expand in height to accommodate them. In my case I had an item that ended at 16:00 and the item directly after this would have a start time of 16:00. This was causing some overlap but I did not want the height of the group to expand. Setting 'stack: false' in the options prevented the expanding effect. There was still some minor expanding in the region of a couple of pixles but nowhere near the height issues I was having with multiple items sharing the same start/end times.
Related
I have an app that uses Highcharts and several other components and the app is used, among many other things, to produce bar charts. Users can select time ranges against which they view data. One of the templates that we've put together does a side by side comparison and when the user chooses a short'ish timespan, the chart is cut off at the outside edges. I've looked at overflow and some other CSS solutions but this one just continues to perplex. When the app is looking a longer time ranges, it has no issue squeezing & adjusting to accommodate. But when the app tries to render shorter periods - like quarter by quarter - the result is that the outermost bars are cut off.
I included a screenshot. Does this look like anything that anybody has seen. And if so... any ideas on how to tackle it? The page template is liquid/responsive/elastic and should be able to accommodate this. Going further, Highcharts seems to do well in other areas where the width is elastic so I am wondering why this thing doesn't seem to be able to detect its own width and display the bars without cutting off.
If anyone has any ideas about this, I'd love to hear about it.
Thank you in advance!
I'm trying to do a menu of sorts with a d3.js treemap. It mostly works, but I'm having a few glitches that I can't pinpoint.
Basically, sometimes my chart doesn't zoom correctly and instead of seeing the children take the whole SVG area, they show up "unzoomed".
I suspect it must have something to do with the animation's timing vs. some data manipulation for hiding/showing the different nodes, but can't actually figure it out. Other thing I thought might be borking up the behavior relates to the click events being registered by both "parent" and "children" nodes.
I have a similar example setup in JSBIN.
So, I was wondering how I could register/unregister click events in the parent/child nodes on zoom - if that's even the problem - and also if there was a simpler or less-error prone way to change the nodes' visibility.
Any help is welcome!
Well, this might be a bit unorthodox, but I found a way to overcome this.
Basically, instead of trying to mess around with event registering/unregistering, I simply ran the zoom only if the click wasn't from the node at the current zoom level.
So, in my zoom function, I wrapped the zoom handling in an if check:
function zoom(d) {
if(node!=d){
// the rest remains the same
}
}
Either way, I still think that this was happening due to the source elements where the click events were coming from being overlapped in the SVG area - simply put, the click event was being triggered by several overlapping elements, being the first (topmost) in the SVG tree order triggered inadvertently.
Here's a working version.
Hope this helps someone else!
EDIT: This solution isn't perfect, though. Now sometimes the click just doesn't do anything - But it's better than borking the UI. If anyone has other ideas, they're welcome.
I'm pretty new to event-handling inside svgs and there is a little weirdness happening here. I'm doing an infovis where I build an interface and want to display different column-graphs.
That's rather easy and working pretty nicely.
But I'm using hover-events to show the actual numbers when hovering a rect. it works with the one chart I'm generating first. But even though that chart is hidden (I tried both: visibility: hidden and display: none properties) the one that's drawn first still gets the event.
Do I need to remove that one completely in order to generate a new one? So should I better work with separate SVGs and have an external interface, hiding the different svgs?
Any advice/best-practice would be welcome!
Thanks already!
Suse
The other way of hiding things is to push them off the screen, as with hidden iframes. Just give them a negative x/y position. That should take care of mouse-over issues.
i am trying to combine my draggable sortable stuff with some scale code that works well for me. i just failed to find a good solution yet.
take a look at that:
http://jsfiddle.net/UXLAE/7/
i've commented out the scale code so that you can see how the app should actually works.
you have the top panel and can drag items from there to the bottom panel (items are cloned).
in the bottom panel you must be able to sort the items.
now i also want to be able to scale every item on mouseover, both in the top and the bottom panel. the scale must be an overlay and must have the same center as the source item. i failed to do it with .animate() or .effect("scale") which would have made things a lot easier, but i managed to write some custom code that works pretty well (the part i commented out). my problem is that now i have no idea how to combine the custom code with what i already have. they kinda break each other ;) but look for yourself.
would be nice if you could post some ideas or even a solution.
greetings
You have your original element working well enough but I see that your commented out code breaks the functionality.
Have a look at your droppable code:
accept: "#topSquareList li",
Your scaling function has made a clone which is not a part of #topSquareList. I suspect this is why.
When you use clone(), this clone is not a child of #topSquareList (only the original is) which is why your selector does not match it in your droppable code. You need to sort out what you want to drop and make an appropriate selector.
Update:
After some fiddling around, I came up with this: http://jsfiddle.net/UXLAE/27/
Your scale code is now working in conjunction with dragging/dropping/sorting. You should compare what I made to your original code to figure out why it wasn't working - there were more than a few reasons why. Does it help?
If you can use CSS transformations, then simply adding the following rule will accomplish the scaling without any JavaScript and therefore zero impact on the jQueryUI dragging, dropping or sorting.
.square:hover {
-webkit-transform:scale(1.2);
-ms-transform:scale(1.2);
-o-transform:scale(1.2);
-moz-transform:scale(1.2);
transform:scale(1.2);
}
Native browser support for transform is not complete, but the major modern browsers are fully supported. There is a workaround for IE < v9 if you need to support those browsers.
I've already achieved this on my iPhone app, but I want to know if it's possible on an HTML page, maybe using CSS effects or similar.
As you can see, the current view is split, the bottom part is moved down, and another view is revealed underneath. I have a page I'd like to try this on. Any ideas if this is possible, and any specifics as to how I can do it? I'm quite new to HTML coding, so please take it easy on me. :)
Thanks in advance!
Here's an example to get you started http://jsfiddle.net/Cquhj/
A few things to take away from this pattern:
The middle div has an overflow: hidden; property and height: 0px.
The trigger icon has an event that tweens the height of the middle div to the size you want.
Edit:
I really like the resources and answers given and I would add this to the list http://wiki.forum.nokia.com/index.php/Mobile_Design_Pattern:_Accordion_Menu
here an update, more iphone-like
http://jsfiddle.net/mFeyn/1/
it miss the triangle in the bottom of the folder once is clicked and calculate the height of the container when there is more than 4 icons.
Yes, it's absolutely possible, nothing out of the ordinary and CSS will definitely be needed.
As it is, your question is extremely generic and an answer would be: learn about HTML and CSS and the combination of the two for creating standard compliant web page layouts. You might want to read about the box model too. To solve your problem you need to know about the use, positioning and floating of a series of <div>s to achieve the desired layout.
If you want to add animation, like some part of the split view floating down into position, you will need Javascript as well.
Possible starting points for your research on SO:
Why not use tables for layout in HTML?
https://stackoverflow.com/search?q=css+div+column
Here is a code example that might give you a little bit more if your plan is to emulate iOS 4 folder behaviour using jQuery.
The view is basically split into rows and I played around w/ the background position css attribute to allow the background split illusion.
http://jsfiddle.net/hKHWL/
This is very possible, but it's kind of like asking "I want to program Civilization, and I'm quite new to C; how do I do it?" ;-)
I would strongly recommend picking up a good "DHTML" (Dynamic HTML) book. For instance, I rather enjoyed this one, from SitePoint: http://www.sitepoint.com/books/dhtml1/
If you're not the book-buying type, sites like SitePoint and AListApart can certainly explain things too, but not in as organized of a format.
Good luck.
I know this is an old post/question...
but I'm doing this with dynamic heights and positions here:
http://webkit-os.pixelass.com/iframe/
(only works in Chrome and Safari)
I am using jQuery and two divs with the same image.
Dynamic positions means.. you can move the folder to a different position or page.
Dynamic height means... the height is relative to the number of Icon-rows in the folder.
The folder even opens above and below if the content is too hight to be displayed below.
(opening the folder from the Dock does not work yet)