search

oxfordinternetinstitute / InteractiveVis

The InteractiveVis project, funded by JISC from May to September 2012, aims to allow easy creation of interactive visualisations for geospatial and network data using native web technologies (HTML5, CSS3, and SVG) and allow these visualisations to be self-contained so that they may run entirely offline in ebooks and other media. The project will survey existing solutions and build the necessary components to fill in missing features and smooth over incompatibilities in between existing libraries. The project will further provide online hosted wizards to allow for the easy creation of these interactive visualizations. All code is open source and released under the GNU GPL v3 license.
http://blogs.oii.ox.ac.uk/vis
130 stars 51 forks source link

Regression: Nodes under #zoomcontainer not selectable #26

Closed computermacgyver closed 11 years ago

computermacgyver commented 12 years ago

div#zoomcontainer should be as small as possible. Elements underneath this div are not selectable. In the current layout, zoomcontainer is 100% width and also quite tall due to it including the copyright and zoom buttons. This creates a large area in which nodes are viewable but not selectable. I think this should be reworked to remove the copyright from the div, and make the div as small in width and height as possible.

computermacgyver commented 12 years ago

Updated description: tracked this problem back to introduction of zoomcontainer. Affects all network diagrams

jthrilly commented 12 years ago

It is 100% width as this is the preferred CSS technique for centring horizontally as I understand it. Obviously we cannot have it preventing nodes from being clicked though. Can you think of a way of centring without this technique?

computermacgyver commented 12 years ago

:-( I wasn't sure the best way myself whichc is why I left it. I've seen some other hacks to get centering. One option would be to dynamically set the left margin in JavaScript where we can know the screen width. I've also seen some solutions using "left:50%;" but by default this places the left edge of the div at 50% of the width (whereas we'd like the center of the div there). I'll have a look about as well. If we both give it some thought it might work. I don't remember exactly what we were doing before?

computermacgyver commented 12 years ago

Not sure this is the best way and I'm offline at the moment so haven't checked this re: standards compliance, but it seems we can do something like: width: 100px; margin-left: -100px; left: 50%; to achieve what we want.

computermacgyver commented 12 years ago

I've juggled this around a bit to try to minimize the area the div's cover. I think the result looks all right, but welcome feedback/changes/reversion.