css - How to centre a div in the remaining space when sliding in a div from the right -
i have page display image (just green div placeholder now). want slide div in right comments box , keep image centred in remaining space. if image large remaining space want allow user scroll on image horizontally.
i have this:
var showingcomments = false; $("#clickme").click(function() { if (showingcomments == false) { showingcomments = true; $(this).parent().animate({ right: '0px' }, { queue: false, duration: 500 }); } else { showingcomments = false; $(this).parent().animate({ right: '-150px' }, { queue: false, duration: 500 }); } });#picture_container { width: auto; background-color: yellow; overflow-x: auto; } #thepicture { height: 300px; width: 400px; /* change when page loads */ background-color: green; left: 0px; right: 0px; margin-left: auto; margin-right: auto; } #commentsbox { background: #00ffff; position: absolute; width: 150px; height: 400px; right: -150px; top: 10px; } #clickme { position: absolute; top: 0; left: 0; height: 20px; width: 400px; background: #5f9ea0; text-align: center; transform: rotate(90deg); transform-origin: left top 0; } #comments { float: left; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='picture_container'> picture container <div id='thepicture'> picture goes here </div> </div> <div id="commentsbox"> <div id="comments"> sticky-out comments box </div> <div id="clickme"> click me! </div> </div>example: https://jsfiddle.net/fwwfe2q6/
as can see comments box pops out overlaps image holder div instead of making move left. can suggest how centre green div (representing image) in both expanded , collapsed state of comments box, , have green div horizontally scrollable when large fit window along expanded comments box?
you may use flex , rethink structure:
body {margin:0;} #picture_container { display: flex; flex-wrap: wrap; height: 100vh; max-width: 700px; transition: 0.5s; margin: auto; background: yellow; text-align: center; } #thepicture { display: flex; flex-wrap: wrap; flex: 1; overflow: auto; } #thepicture img { flex-shrink: 0; margin: auto; max-height: 75vh; } p, [for="mw100"] { width: 100%; } p { background: turquoise; padding: 1em; margin: 0; } #commentsbox { display: flex; background: tomato; overflow: hidden; } #test, #full, #mw100 { position: absolute; right: 100%; } #commentsbox label { display: block; background: tomato; width: 2em; margin: 1em 0 0 0em; white-space: nowrap; transform: rotate(90deg); cursor: pointer; } #commentsbox label:before { content: ''; position: absolute; width: 2em; height: 100vh; display: block; } #clickme { background: purple; width: 200px; margin-right: -200px; transition: 0.1s; } label { font-size: 1.2em; font-weight: bold; color: white; text-shadow: 0 0 2px black; } #test:checked~#clickme { margin-right: 0; } #full:checked~#picture_container { max-width: 100%; } #mw100:checked~img { max-width: 95%; }<input type="checkbox" id="full" /> <div id='picture_container'> <p>picture container <label for="full">toggle me full or 700px width</label></p> <div id='thepicture'> <input id="mw100" type="checkbox" /><label for="mw100">toggle image overflow</label> <img src="http://dummyimage.com/1800x1000/00ff00&text=the picture goes here" /> </div> <div id="commentsbox"> <input type="checkbox" id="test" /> <div id="comments"> <label for="test">to show comments- click me!</label> </div> <div id="clickme"> shown comments here. </div> </div>snippet propose few option depending on expected result.
full width or max-width on container
container holding image overflowing or image max-width
labels , imputs demo, use js slidding box .
a tutorial/reminder flex find usefull : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Comments
Post a Comment