Comments (14)
Now we want to make it a modal, like Instagram or Facebook pictures.
from courseography.
With SVG, the tooltip is defined by the <title/>
tag, whereas in HTML the tooltip is defined by the title
attribute. The tooltip function from jQuery has so far been unsuccessful. For the PCRS, I created functions that would dynamically create divs based on where you clicked. I can do something similar here.
The div would also have some sort of time decay until it disappeared. I hate tool tips that are destroyed on mouseout.
from courseography.
Indeed, dynamically generating divs, or perhaps svg elements, is the best approach. It should be easier for us than PCRS because where the element appears should depend only on the node that was clicked.
from courseography.
For future reference, jQuery's tooltip
function uses the title attribute. https://github.com/jquery/jquery-ui/blob/master/ui/tooltip.js
from courseography.
The rect's positions are translated some way. Is this due to the viewbox? Do you know how I can get their absolute position? I've tried many many things, but nothing has worked yet. My current approach is to get the X and Y values from the pos upon node hover.
from courseography.
It's almost certainly due to the viewbox. This isn't an issue if the popup we create is an SVG element, though, right?
from courseography.
This isn't an issue if we use an SVG element, and I have already tested this. However, jQuery becomes an issue. jQuery offers us many features that we would like to use. I'll look into SVG adapted jQuery libraries. d3 (data driven documents) may also be an option. May.
from courseography.
I'm not entirely sure what the problem with jquery is, but perhaps it would be better to talk about that in person.
If you're getting annoyed with that, you could also work on the modal itself (I'm not sure if you have or not).
On August 8, 2014 12:13:50 AM EDT, Ian Stewart-Binks [email protected] wrote:
This isn't an issue if we use an SVG element, and I have already tested
this. However, jQuery becomes an issue. jQuery offers us many features
that we would like to use. I'll look into SVG adapted jQuery libraries.
d3 (data driven documents) may also be an option. May.
Reply to this email directly or view it on GitHub:
#10 (comment)
Sent from my Android phone with K-9 Mail. Please excuse my brevity.
from courseography.
No, it's alright. jQuery doesn't always play well with SVG, but d3 is very nice to work with. The custom tool tip is a bit annoying, but with a little work it can be really strong and nicely done. I'll be playing more with the modal.
from courseography.
The features that we want within the modal are:
- Course description
- Video
- Relevant Timetable information
- CSSU wiki page link (we haven't discussed this before. Thoughts?)
Is there anything else that you can think of?
from courseography.
That sounds fine. Link to past/current course webpages would be nice. Pretty sure we can just use CDF links (see http://www.cdf.toronto.edu/cs_courses/current_course_web_pages.html).
from courseography.
Mmm. Agreed. I'll think of a good way to display relevant links. Perhaps a 'Relevant Links' section.
from courseography.
@david-yz-liu I'm using Course
in Graph now. Take a look and let me know what you think.
from courseography.
Alright, I'm pretty much done. Feel free to take a stab at the style whenever you get the chance.
from courseography.
Related Issues (20)
- Front End Testing: Variables are inserted into the global scope HOT 2
- Full year courses should increase the FCE Count by 1.0
- Add Cypress.io tests to CircleCI
- Message Port closed before a response was received error HOT 1
- Remove the data-testid attribute in the production webpack config
- Error when running `stack exec courseography docs` HOT 2
- Some courses with grade requirements not separated from the grades
- Prerequisites with grades in the format of "A in coursecode"
- Grade after course not found if grade is followed by other characters
- Misc parser issues with various non-grade related numbers parsed as grades
- Link to courseography differs between readme and actual page
- page does not properly handle unspecified URLs which have a correct prefix
- Timetable search does not work
- Graph Page Redesign HOT 1
- Support more math courses
- Add a graph max zoom cap
- Responsive UI for smaller screens?
- [Proposal] Modernize Frontend HOT 2
- [Square brackets] not grouping requirements properly
- Choosing CSC110 in the Graph incorrectly increases FCE Count
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from courseography.