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.
Related
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've been creating a metrics module (using timeseries) with c3js. I'm now trying to plot out events over my metrics data, which are date-spans (startDate to endDate). Using c3js' regions seemed to be a good choice for it, it only took a little tinkering to make them short and appear above of all my graphed data.
Problem is, the actual SVG Group called g.c3-regions is automatically displayed behind the graphed data. Makes sense, there hasn't been any real need allow any user interaction with regions. I need it in the forefront, so I can bind hover and click functions to each event.
I tried doing this with jQuery: $('.c3-regions').insertAfter('.c3-chart'), which simply places it in front. Works fine - that is, until my c3js instance re-renders. Then it spits out an error that it's having trouble re-rendering the regions (since they obviously moved)
I've also tried cloning it and putting that in front, but it doesn't seem to copy over the SVG information.
Any help would be truly appreciated, can provide any code samples on request.
Cheers - - Andrew
To expand on Robert Longson's comment, what you want to add is
.c3-event-rect {
pointer-events: none;
}
.c3-chart {
pointer-events: none;
}
This will allow the clicks to go through to the region layer.
I am implementing an Angular component which has many little areas where user can click.
I see 2 ways how to do it:
use background image and define map areas where user can click, add click handler on the image.
use div for each clickable part and attach the click handler to parent element (so I don't have many click handlers on each div). Use the CSS to style each div so it looks like the image in 1.
The problem with 1. is that when the image changes I have to change the map coordinates too.
The advantage here is that it should work without problem in many browsers.
The advantage of the 2. is that I can style the component as I need (so it can be smaller, bigger, different font, etc.), but it can have performance impact when I need to show more than one such component.
Which way would you choose and why? Or are there any other possibilities?
Edit:
forgot to mention that the component should also work on mobile devices
I don't remember where but i just read a nice article about:
div(webkit-transform) vs svg vs canvas
To make it simple:
1-50 elements = divs & images
50-500 elements = svg
500 and more elements = canvas
this are here just to give you an idea ...then everything depends on every element and device.
Canvas would be the best solution for everything.
The problem on canvas is the click handler.You need to create a collision detection script.
(i used a canvas with a background image(worldmap),to show the dots in real time of the current users.).but it's not clickable... (there is a clickable legend under/over the map)
SVG is prbably the best solution in your case
like #mainguy said u can draw stuff and add eventHandlers (or one like on the parent element).and the performance is better than divs.
DIVS
Most of the time i use div sets with one eventhanlder. they are so easy to use and style.. but only squares or circles.. and if you start to style them you loose alot performance (box-shadow..).
If you don't style the divs you can use alot of them.Especially if you put the eventhandler on the parentNode.
that way you can handle 1000's of elements without problems.(but don't use position:absolute)
Image Map
Again ... if there are not too many elements this is prolly also a good solution.. the simplest ... (the simplest way to draw your simple shapes).As soon you have you static MAP values you can then transform your imagesize recalculation the map with the ratio.. so thats not a problem.
I would go for the image map if there are not to many elements.
else SVG.
Everything depends on how many elements you have.
is that when the image changes I have to change the map coordinates too
if you use divs you don't have to change coords?
** Mobile devices support more than ie browsers.
I would do this with a SVG library which are fast, easy to style and suporrted by most browsers.
D3.js
is available for Angular as directive. Have not worked with his one yet. But it seems to be very popular. Just look on their homepage for a WOW! effect.
Raphaël JS
Was used by me in many projects. It has the big advantage that it supports even old IEs (sic!).
Just make a search for Angular SVG and/or JS and you will find a lot of solutions.
Not knowing the exact requirements, my default choice would be 2.
There are drawbacks, such us inability to easily map non-rectangular areas. The advantages however are huge, including easy maintenance, possible responsiveness, more robust styling possibilities and more.
The sole amount of divs shouldn't cause any problems and I wouldn't worry about it.
There are cases in which I would look for different implementation, though.
my link: http://dl.dropbox.com/u/7727742/playlistsite6/index5.html
I have a 3d cube using a variation of zachstronaut's demo
(link: http://www.zachstronaut.com/lab/galaxy-box/ ). It uses javascript, translate3d, scale3d, etc...
I've tried assigning different z-index values in the css file, but with no luck. I can access the objects outside the cube(you can see this with the hover effect), but not the objects inside the cube. I have a hunch it is because it's not doing a z-sort type of function like pre3d.js. I was wondering if anyone could offer some insight into where I should look for a solution.
Object coordinates are generated randomly, so you may have to refresh once or twice to get some objects that are inside the cube.
Thanks!
EDIT:
Only tested in safari and chrome dev
Webkit ignores z-indexes on anything that has translate3d defined, as it logically should. z-index is meant for a 2D world, it's like taking a bunch of paper and saying "this one is on top" -- you still have a flat surface. Unfortunately, if you want to be able to select one of the "stars" inside of your box, you're all but out of luck since you're using HTML nodes.
The normal way of doing this is using a click-map -- basically every object gets rendered twice. Once normally and once in a single color with no shading, etc. The 2nd rendering is never shown and is simply used to tell what the user clicked on. You get the color where they clicked and that color maps to a specific object. If you were using canvas, you would do it that way and just change the rendering order on the 2nd render.
Since you're using HTML nodes, you can't do that. You have a couple of options:
You can calculate which star is under the mouse on mouse-move based on viewport rotation and x/y/z position of the star
you can attempt the above method by overlaying an identical rendering without the cube and where the stars have a 0% opacity. Each star in your new rendering would map to a star in your existing one, and you'd have easy mouse-over detection.
Post the results! :)
First of all, I'm glad you found my demo interesting!
You're not going to have much luck trying to do a hover or capture a click event on objects inside of a 3D CSS3 cube for the exact same reason you wouldn't have much luck capturing a hover or click events on a div underneath another div... in HTML all the DOM events go to the top most DOM node. If one div overlaps another div, you can't click the one that is underneath. Everything inside the 3D cube is "underneath" another DOM node.
Things are further complicated because you're taking objects in 3D space and asking a user to interact with them on a 2D plane (the browser window) using a 2D input device (the mouse).
You could hide the faces of the cube so that they wouldn't block the user's clicks. You could do something like cwolves suggested.
Sorry I couldn't be more help... HTML kind of fails us a bit here. Welcome to the bleeding edge!
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)