javascript - Clicking in the top corners of my webpage causes the flex boxes to misbehave -
i have been making simple page using flexboxes should expand 1 flex box majority of page on click. however, page make sizes of of flexboxes equal (see below picture). i've notices when click in corners of page on yellow or blue sections. have idea of going on?
edit: added relevant code , removed js bin links
html
<!doctype html> <html lang="en"> <head> <title>home page</title> <link href="/stylesheets/flex.css" rel="stylesheet" type="text/css"> </head> <body> <div id="yel" class="page selected"> <h2>home </h2> </div> <div id="green" class="page"> <h2>about me </h2> </div> <div id="red" class="page"> <h2>portfolio </h2> </div> <div id="blue" class="page"> <h2>playground </h2> </div> </body> </html> css
* { margin: 0; padding: 0; } html { height: 100%; } body { width: 100%; height: 100%; display: -webkit-flex; -webkit-flex-flow: row; } .selected { min-width: 90%; } #red { background-color: #f00; } #yel { background-color: #ff0; } #green { background-color: #008000; } #blue { background-color: #00f; } .page { flex: 1; min-width: auto; min-height: 100%; -webkit-transition-duration: 750ms; } .page h2 { font: 20px helvetica, tahoma, sans-serif bold; color: #ccc; -webkit-transform: rotate(90deg); margin: 5px; } .content { margin: 10% auto auto auto; padding: 10px; width: 90%; height: 50%; border: 1px solid #000; } js
var $ = function(sel, e) {return (e || document).queryselector(sel)}; var $$ = function(sel, e) {return (e || document).queryselectorall(sel)}; var boxes = $$('.page'); var links = $$('.nav'); var flextransitionto = function flextransitionto(el) { if(!el.classlist.contains('selected')) { $('.selected').classlist.remove('selected'); el.classlist.add('selected'); } }; for(var = 0; < boxes.length; i++) { var el; boxes[i].addeventlistener('click', function(event) { el = event.target; flextransitionto(el); }); } for(var = 0; < links.length; i++) { var el; var pageel; links[i].addeventlistener('click', function(event) { el = event.target; pageel = $(el.dataset.page); //should page want flextransitionto(pageel); }); }
i can tell why, can't give fix (my javascript-fu weak). problem when click on h2 element (or other descendant of page element), intercepting click event , it has selected class applied it. because selected class removed page elements, none of them set selected.
Comments
Post a Comment