Needed a simple solution to move a legend back and forth. This example shows the logic and uses javascripts offsetLeft to move the item (li in this case)
Created
May 29, 2015 09:33
-
-
Save eesur/bb447868dab07ebf9717 to your computer and use it in GitHub Desktop.
d3 | slider
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function() { | |
| 'use strict'; | |
| var data = d3.range(0, 11); // [0, 1, 2, 3, 4 etc] | |
| console.log('number of items in array: ' + data.length); | |
| // variables for convenience | |
| var ulID = 'ul-items', | |
| liPrefix = 'li-'; | |
| // use a variable to keep count | |
| var i = 0; | |
| // create a list and populate with the data array | |
| function addList() { | |
| var indexValue = function(d, i) { return liPrefix + i; }; | |
| var ul = d3.select('#container').append('ul').attr('id', ulID); | |
| ul | |
| .selectAll('li') | |
| .data(data) | |
| .enter() | |
| .append('li') | |
| .attr('id', indexValue) | |
| .text(indexValue); | |
| } | |
| // controls to navigate back and forward | |
| function controlsNav(index) { | |
| var nextBtn = d3.select('#legendNext'); | |
| var prevBtn = d3.select('#legendPrev'); | |
| nextBtn.on('click', function() { | |
| // ensure buttons can't be clicked where there are no items | |
| if (i < data.length-1) { | |
| // ensure buttons are 'visually' active | |
| nextBtn.style('opacity', 1); | |
| prevBtn.style('opacity', 1); | |
| // update value of counter | |
| i++; | |
| // set index to the value of i | |
| index = i; | |
| console.log('value of i NEXT: ' + i); | |
| // move forward one | |
| moveList(liPrefix + index); | |
| } else { | |
| // fade button out for user feedback | |
| nextBtn.style('opacity', 0.2); | |
| } | |
| }); | |
| prevBtn.on('click', function() { | |
| if (i >= 1) { | |
| prevBtn.style('opacity', 1); | |
| nextBtn.style('opacity', 1); | |
| i--; | |
| index = i; | |
| console.log('value of i PREV: ' + i); | |
| // move back one | |
| moveList(liPrefix + index); | |
| } else { | |
| prevBtn.style('opacity', 0.2); | |
| } | |
| }); | |
| } | |
| // offset items in list via their id // http://stackoverflow.com/a/24361041/1711570 | |
| function moveList(reference) { | |
| var list = document.getElementById(ulID), | |
| targetLi = document.getElementById(reference); // id tag of the <li> element | |
| list.scrollLeft = (targetLi.offsetLeft -28); | |
| console.log('offset value: ' + targetLi.offsetLeft); | |
| } | |
| // call the function(s) | |
| addList(); | |
| controlsNav(i); | |
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>d3 | slider</title> | |
| <meta name="author" content="Sundar Singh | eesur.com"> | |
| <link rel="stylesheet" href="main.css"> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <style> | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <button id="legendPrev">Prev</button> | |
| <button id="legendNext">Next</button> | |
| </header> | |
| <section id="container"></section> | |
| <script src="d3_code_slider.js" charset="utf-8"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400,600); | |
| body { | |
| font-family: "Source Code Pro", Consolas, monaco, monospace; | |
| line-height: 1.5; | |
| font-weight: 400; | |
| background-color: #130C0E; | |
| padding: 20px; | |
| } | |
| header { | |
| width: 960px; | |
| background: #130C0E; | |
| height: 40px; | |
| } | |
| button { | |
| font-family: "Source Code Pro", Consolas, monaco, monospace; | |
| font-size: 14px; | |
| background: #130C0E; | |
| color: #7AC143; | |
| border: none; | |
| outline:none; | |
| padding: 4px 8px; | |
| letter-spacing: 1px; | |
| } | |
| button:hover { | |
| background: #7AC143; | |
| color: #130C0E; | |
| } | |
| #container { | |
| font-size: 18px; | |
| letter-spacing: 2px; | |
| text-align: center; | |
| white-space: nowrap; | |
| width: 800px; | |
| margin-top: 20px; | |
| } | |
| ul { | |
| padding: 0; | |
| margin: 0; | |
| list-style: none; | |
| background: #FDBB30; | |
| overflow: hidden; | |
| } | |
| li { | |
| display: inline-block; | |
| width: 100px; | |
| padding: 40px 20px; | |
| margin-right: 40px; | |
| background: #7AC143; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment