Scrolling to see more of fixed div if overflows? - javascript

I have a popup modal window that is positioned fixed and with a set width and height. It is also centered on the window:
It all works fine, except if the window height is reduced far enough, part of the div is cut off, with the user unable to see all of its content:
Is there a way to add scrolling to the parent container (which is also fixed) to see the rest of the modal/div?
Here is the JSFiddle
*{ margin:0; }
#popup-background
{
position:fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
#popup-modal
{
padding: 20px;
width:500px;
height: 350px;
background: #EFEFEF;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div id="popup-background">
<div id="popup-modal">Lorem ipsum dolor sit amet, cu audiam prodesset sed, vitae recusabo expetenda mei ei. Mei an soluta sententiae, no vim deserunt signiferumque. Sint ocurreret no vim, alia inani dissentias eam cu. Velit oratio quo et. In omnis utinam lobortis qui, usu id deleniti reprehendunt comprehensam.
Mutat vituperatoribus quo et. Facer quodsi temporibus eu qui. Nam choro dicam partiendo te, ex volumus facilisi insolens mel, at sit iriure nostrum tractatos. Cu invidunt invenire pri, per ullum consequuntur ut. Per munere consul cu. Nam quod solum ea, vis nulla elaboraret quaerendum ut, ea qui malis senserit.
Homero ornatus molestiae at vix, usu ut vide conceptam accommodare. Quaestio iracundia in eam. Mel dictas scripta constituto no, no mea idque errem molestie. Per an case fabulas abhorreant, diam fabellas reprimique sea et. Ad constituam vituperatoribus vix, ut habeo legendos temporibus ius.
Iudico eripuit nec no, pri nonumy legendos reformidans id, ei facete sapientem has. Nam no omnes feugiat verterem, ad eos graeco denique. Ad mea errem intellegat. No tale dicta vivendo mei. Ea quo dictas discere, ut saperet epicurei ocurreret mea. Primis intellegat eu est, at vix quem quis iudico, vix ad detraxit delicata qualisque.
</div>
</div>

Update the css like this
*{ margin:0; }
#popup-background
{
position:fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
#popup-modal
{
padding: 20px;
width:500px;
max-height: 350px;
height :80%;
background: #EFEFEF;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
overflow-y: auto
}
http://jsfiddle.net/chauhangs/af142jg9/

After reading #mokiSRB comment, I changed my modal from being fixed to relative. Then I found How do I vertically center align a position:relative element, which suggested wrapping the relative div twice with:
.wrappert {
height: 100%;
width: 100%;
display: table;
}
.wrapper {
height: 100%;
vertical-align: middle;
display: table-cell;
text-align: center;
}
After some more minor tweaks I ended up with: http://jsfiddle.net/senju/ynjn2u7L/
*{ margin:0; }
#popup-background
{
position:fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
overflow-y:auto;
}
#popup-modal
{
padding: 20px;
width:500px;
height: 350px;
background: #EFEFEF;
position: relative;
margin-left: auto;
margin-right: auto;
}
.wrappert {
height: 100%;
width: 100%;
display: table;
}
.wrapper {
height: 100%;
vertical-align: middle;
display: table-cell;
}
<div id="popup-background">
<div class="wrappert">
<div class="wrapper">
<div id="popup-modal">Lorem ipsum dolor sit amet, cu audiam prodesset sed, vitae recusabo expetenda mei ei. Mei an soluta sententiae, no vim deserunt signiferumque. Sint ocurreret no vim, alia inani dissentias eam cu. Velit oratio quo et. In omnis utinam lobortis qui, usu id deleniti reprehendunt comprehensam.
Mutat vituperatoribus quo et. Facer quodsi temporibus eu qui. Nam choro dicam partiendo te, ex volumus facilisi insolens mel, at sit iriure nostrum tractatos. Cu invidunt invenire pri, per ullum consequuntur ut. Per munere consul cu. Nam quod solum ea, vis nulla elaboraret quaerendum ut, ea qui malis senserit.
Homero ornatus molestiae at vix, usu ut vide conceptam accommodare. Quaestio iracundia in eam. Mel dictas scripta constituto no, no mea idque errem molestie. Per an case fabulas abhorreant, diam fabellas reprimique sea et. Ad constituam vituperatoribus vix, ut habeo legendos temporibus ius.
Iudico eripuit nec no, pri nonumy legendos reformidans id, ei facete sapientem has. Nam no omnes feugiat verterem, ad eos graeco denique. Ad mea errem intellegat. No tale dicta vivendo mei. Ea quo dictas discere, ut saperet epicurei ocurreret mea. Primis intellegat eu est, at vix quem quis iudico, vix ad detraxit delicata qualisque.
</div>
</div>
</div>
</div>

If you dont want the modal be scrollable, but the whole page instead do this:
CSS:
.background{
position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
top: 0px;
left: 0px;
}
.modal_container{
position: fixed;
width: 100%;
height: 100%;
overflow: auto;
}
.modal_wrapper{
text-align: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.modal_content{
background: white;
position: relative;
display: inline-block;
padding: 20px;
margin-top: 10px;
vertical-align: middle;
z-index: 999;
max-width: 350px;
}
HTML:
<div class="background"></div>
<div class="modal_container">
<div class="modal_wrapper">
<div class="modal_content">
MY CONTENT
</div>
</div>
</div>
But be careful, when opening the modal you should set overflow:hidden to the html tag, because if you dont you can get 2 scrollbars which looks ugly.

Related

CSS letter-spacing together with line-through

Is there any css/js solution how to center line through the text while using letter-spacing? While single line text it is possible to accomplish centered line-through thanks to pseudo element ::before or ::after, but that's not possible on block elements like <p> or <div>.
h2, p {
letter-spacing: 1em;
text-decoration: line-through;
text-align: center;
}
p {
letter-spacing: .5em;
}
<h2>Random text</h2>
<p>Lorem ipsum dolor sit amet, at nemore aperiri cum. Regione honestatis ei quo, ne eos aliquid mediocrem, ne viris quodsi epicuri vel. Ex dolorem atomorum dissentiunt nam, iudico minimum cotidieque eum et, has novum mnesarchum id. Libris blandit liberavisse mei in. Ius viris posidonium ei, ut quas viris albucius eum, mei eu indoctum reformidans. Et usu sumo invidunt, cu vix veri dolore propriae.</p>
Here is an idea where you can rely on background and box-decoration-break to create the line-through and you can easily adjust its size and position. You will basically remove one letter spacing from the total width.
It's important to note that the background need to be applied to an inline element:
p {
letter-spacing: .5em;
text-align:center;
}
p span {
background:
linear-gradient(#000,#000) /* Coloration */
0 calc(50% + 0.2ex) /* position */
/
calc(100% - .5em) 1px /* width height */
no-repeat;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
<p><span>Lorem ipsum dolor sit amet, at nemore aperiri cum. Regione honestatis ei quo, ne eos aliquid mediocrem, ne viris quodsi epicuri vel. Ex dolorem atomorum dissentiunt nam, iudico minimum cotidieque eum et, has novum mnesarchum id. Libris blandit liberavisse mei in. Ius viris posidonium ei, ut quas viris albucius eum, mei eu indoctum reformidans. Et usu sumo invidunt, cu vix veri dolore propriae.</span></p>

How to always show scrollbar of inner div when outer div has a smaller width

I have ended up in a scenario where the outer div has a definite height and width whereas the inner div has a definite height but an indefinite width. Like so:
html:
<div id="parent">
<div id="child">
</div>
</div
and css:
#parent{
width: 200px;
height: 200px;
overflow-x:scroll;
overflow-y:hidden
}
#child{
width: 400px;
height: 200px;
overflow-x:hidden;
overflow-y:scroll;
}
But as expected, I can see the scrollbar of inner div only when it has been scrolled to the extreme right.
I want to always show both scrollbars.
Please help me find a CSS solution or a plain js (non-jquery) solution.
https://jsfiddle.net/n2tfe2wr/
Try with this:
document.getElementById('child-size').style.width = document.getElementById('child-wrapper').scrollWidth+ 'px';
document.getElementById('parent').addEventListener('scroll', function () {
document.getElementById('child-wrapper').style.marginLeft = document.getElementById('parent').scrollLeft + 'px';
document.getElementById('child-wrapper').scrollLeft = document.getElementById('parent').scrollLeft;
})
#parent {
width: 200px;
height: 400px;
overflow-x: scroll;
overflow-y: hidden;
position: relative;
}
#child-wrapper {
width: 200px;
height: 200px;
overflow-x: hidden;
overflow-y: scroll;
background-color: blue;
}
#child {
width: 400px;
color: white;
}
#child-size {
height: 1px;
opacity: 0;
}
<div id="parent">
<div id="child-size"></div>
<div id="child-wrapper">
<div id="child">
Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an.
<br><br><br>
Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu,
legimus senserit definiebas an eos.
<br><br><br>
Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu,
eirmod consectetuer signiferumque eu per.
<br><br><br>
In usu latvine equidem dolores.
<br><br><br>
Quo no falli viris intellegam, ut fugit veritus placerat per.
</div>
</div>
<br><br>
Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an.
<br><br><br>
Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu,
legimus senserit definiebas an eos.
<br><br><br>
Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu,
eirmod consectetuer signiferumque eu per.
<br><br><br>
In usu latvine equidem dolores.
<br><br><br>
Quo no falli viris intellegam, ut fugit veritus placerat per.
</div>

jQuery Combining toggle(), show() and hide() [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I have this working exactly like I want (see the Fiddle below) except I discovered that toggle() was deprecated. I'm wondering if I could use toggleClass() or hide() and show() to toggle the visibility of the dropdownpanel.
$("#dropdown").click(function() {
$("#dropdownpanel").toggle();
});
$("#latinlink").click(function() {
$("#sometext").hide();
$("#latin").show();
});
$("#back").click(function() {
$("#latin").hide();
$("#sometext").show();
});
#dropdownpanel {
width: 236px;
height: 100vh;
background: rgba(00, 00, 00, 0.55);
color: #ffffff;
position: fixed;
top: 38px;
left: 0px;
display: none;
padding: 5px;
}
#latin {
width: 236px;
height: 100vh;
background: rgba(00, 00, 00, 0.55);
color: #ffffff;
position: fixed;
top: 38px;
left: 0px;
display: none;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="dropdown">
Dropdown
</button>
<div id="dropdownpanel">
<p id="sometext">Click
here to read some latin...
</p>
</div>
<div id="latin">
<button id="back">
Back
</button>
<br /> Lorem ipsum dolor sit amet, epicuri argumentum constituam eum ea. Munere aliquip te nec, at nec dicat fuisset offendit, quo an sonet honestatis. Tempor facete sadipscing te his. Nam vivendo postulant reprehendunt te, offendit principes pri ex, at causae
oblique torquatos pro.
<br />
<br /> Libris philosophia has eu, nam iriure alienum intellegam at. Nec appareat electram ne, amet nonumes per te. Usu eu nisl verterem, labore regione legimus in nam, vel saperet laboramus voluptatibus ut. Ad eam altera nemore. No nobis corpora pro, qui
ex tale suas dissentias, et iisque omittam inciderint sit. Usu ut case menandri vituperata.
</div>
JSFiddle
The current behaviour is because when you click the #latinlink element it hides the #dropdownpanel, so then when you click the #dropdown button again it toggles #dropdownpanel from hidden to visible again, which is the same as what the #back button does.
The easiest way to fix that without changing the HTML at all is probably to update the #dropdown click handler to test whether #latin is currently visible:
$("#dropdown").click(function() {
if ($("#latin").is(":visible"))
$("#dropdownpanel").hide();
else
$("#dropdownpanel").toggle();
$("#latin").hide();
});
$("#latinlink").click(function() {
$("#dropdownpanel").hide();
$("#latin").show();
});
$("#back").click(function() {
$("#latin").hide();
$("#dropdownpanel").show();
});
#dropdownpanel, #latin {
width: 236px;
height: 100vh;
background: rgba(00, 00, 00, 0.55);
color: #ffffff;
position: fixed;
top: 38px;
left: 0px;
display: none;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="dropdown">
Dropdown
</button>
<div id="dropdownpanel">
<p>Click
here to read some latin...
</p>
</div>
<div id="latin">
<button id="back">
Back
</button>
<br /> Lorem ipsum dolor sit amet, epicuri argumentum constituam eum ea. Munere aliquip te nec, at nec dicat fuisset offendit, quo an sonet honestatis. Tempor facete sadipscing te his. Nam vivendo postulant reprehendunt te, offendit principes pri ex, at causae
oblique torquatos pro.
<br />
<br /> Libris philosophia has eu, nam iriure alienum intellegam at. Nec appareat electram ne, amet nonumes per te. Usu eu nisl verterem, labore regione legimus in nam, vel saperet laboramus voluptatibus ut. Ad eam altera nemore. No nobis corpora pro, qui
ex tale suas dissentias, et iisque omittam inciderint sit. Usu ut case menandri vituperata.
</div>
Alternatively you might change the HTML structure to put the #latin div inside the #dropdownpanel.
i added wrapper for #dropdownpanel and #latin. Reference here jsfiddle and moved styles from #dropdownpanel to #dropdowncontent
The issue was that the button was toggling an element that was not visible.
$("#dropdown").click(function() {
if ($('#dropdownpanel').is(':visible')) {
$("#dropdownpanel").hide();
} else if ($('#latin').is(':visible')) {
$("#latin").hide();
} else {
$("#dropdownpanel").show();
}
});
$("#latinlink").click(function() {
$("#dropdownpanel").hide();
$("#latin").show();
});
$("#back").click(function() {
$("#latin").hide();
$("#dropdownpanel").show();
});
#dropdownpanel {
width: 236px;
height: 100vh;
background: rgba(00, 00, 00, 0.55);
color: #ffffff;
position: fixed;
top: 38px;
left: 0px;
display: none;
padding: 5px;
}
#latin {
width: 236px;
height: 100vh;
background: rgba(00, 00, 00, 0.55);
color: #ffffff;
position: fixed;
top: 38px;
left: 0px;
display: none;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="dropdown">Dropdown</button>
<div id="dropdownpanel">
<p>Click <button id="latinlink">here</button> to read some latin...</p>
</div>
<div id="latin">
<button id="back">Back</button><br> Lorem ipsum dolor sit amet, modo vitae latine id sea, ea illud facilis definitiones cum. Ei mea ignota iuvaret, debet verear adipiscing no mel, mel gubergren torquatos temporibus ex. Mei nemore mandamus et. Omnes
legimus principes pri et.<br>
<br> Nam eu odio facer cotidieque, cum in reque elitr fastidii. An duo hinc iisque principes, nostro mollis laoreet cu ius. No mel habeo soluta repudiare, ex qui tritani apeirian delicatissimi. Eos ei dolore option definitiones, ad sit liber scaevola
dissentiet.
</div>

Easy way to switch between content with jquery

I just made a script that shows/hides content with Jquery when you click on tabs above the content (it also changes the color of the tab that was clicked). Everything works fine (Result: https://jsfiddle.net/e572s3oq/embedded/result/) but i think there is an other way to switch between the content that makes it easier to add more tabs. I would be really glad if someone could help me. And i hope you understand my intention. (Please excuse my english and ask me if you have any remaining questions)
Here is my Code (I think only the jQuery code is relevant):
$(document).ready(function() {
$(".tab:first-child").click(function() {
$(".content p:nth-child(2)").css('display', 'none');
$(".tab:nth-child(2)").css('background-color', '#F5F7F7');
$(".tab:first-child").css('background-color', 'white');
$(".content p:first-child").css('display', 'block');
});
$(".tab:nth-child(2)").click(function() {
$(".content p:first-child").css('display', 'none');
$(".tab:first-child").css('background-color', '#F5F7F7');
$(".tab:nth-child(2)").css('background-color', 'white');
$(".content p:nth-child(2)").css('display', 'block');
});
});
body,
html {
padding: 0;
margin: 0;
background-color: #ecf0f1;
}
#wrapper {
width: 260px;
margin: auto;
margin-top: 100px;
}
.tab {
width: 130px;
height: 30px;
font-family: 'Lato', sans-serif;
font-size: 14px;
line-height: 30px;
text-align: center;
color: #7f8c8d;
display: block;
float: left;
}
.tab:hover {
cursor: pointer;
}
.tab:first-child {
background-color: white;
}
.tab:nth-child(2) {
background-color: #F5F7F7;
}
.content {
width: 260px;
height: 300px;
background-color: white;
overflow: scroll;
}
.content p {
color: #7f8c8d;
font-size: 12px;
font-family: 'Lato', sans-serif;
margin-top: 8px;
margin-left: 8px;
margin-right: 8px;
margin-bottom: 5px;
}
.content p:first-child {
display: block;
}
.content p:nth-child(2) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=wrapper>
<div class="tab">
PAGE 1
</div>
<div class="tab">
PAGE 2
</div>
<div class="content">
<p>Content1</p>
<p>Content2</p>
</div>
</div>
This should do:
$('.tab').click(function() {
$('.content p').hide();
$('.tab').css('background-color', '#F5F7F7');
$(this).css('background-color', 'white');
$('.content p').eq($(this).index()).css('display', 'block');
});
What basically is happening is:
We first, by default, hide all the p elements within the .content div.
We also set background-color to #F5F7F7 for all the .tab elements.
Then, you can target the current .tab element by the use of $(this) and set its background-color to white.
Finally, we can target a particular p element within .content div by using the current .index() of the current .tab element and then we feed this .index() to another method of jQuery called .eq() which then gets us the desired p element.
Snippet:
$('.tab').click(function() {
$('.content p').hide();
$('.tab').css('background-color', '#F5F7F7');
$(this).css('background-color', 'white');
$('.content p').eq($(this).index()).css('display', 'block');
});
body, html {
padding:0;
margin:0;
background-color:#ecf0f1;
}
#wrapper {
width:260px;
margin: auto;
margin-top:100px;
}
.tab {
width:84px;
height:30px;
font-family:'Lato', sans-serif;
font-size:14px;
line-height: 30px;
text-align: center;
color:#7f8c8d;
display: block;
float: left;
background-color: #F5F7F7;
}
.tab:hover { cursor:pointer; }
.tab:first-child { background-color: white; }
.content {
width:260px;
height:300px;
background-color:white;
overflow: scroll;
}
.content p {
color:#7f8c8d;
font-size: 12px;
font-family:'Lato', sans-serif;
margin-top:8px;
margin-left:8px;
margin-right:8px;
margin-bottom:5px;
}
.content p:first-child {
display:block;
}
.content p:nth-child(2) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id=wrapper>
<div class="tab">PAGE 1</div>
<div class="tab">PAGE 2</div>
<div class="tab">PAGE 3</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, ne lorem dolorem eos. His ex verear tincidunt, ea causae nominavi voluptua ius. Sit ne nibh qqqqqqdeserunt petentium, nam nisl volumus tincidunt ne. Ut vel dictas posidonium sadipscing, nominavi comprehensam duo no. Et quis prima exerci pro, idque ignota fastidii vel cu, id eum solet mollis definitionem. Habeo dolore postulant te pri, duo ut electram incorrupte, ea melius omittantur vel. Alii graeco bonorum pri et. Aliquip similique cum at. Ad per perfecto expetendis mediocritatem, pro percipitur ullamcorper complectitur ex. His falli aeque fierent cu, reque philosophia mel ex. Ad eum dicat platonem voluptatibus, eu vim alia adhuc justo, minimum consequuntur usu ex. Eos dolorem maiorum scaevola no, aliquid verterem ut per. Mea et feugiat vivendum, id graece iriure mel. Nihil debitis necessitatibus et nec. Ut has mazim option mandamus. Veri adipisci eloquentiam eos ea, soleat dissentiunt te mel, vel at debitis recteque petentium.</p>
<p>Id graece similique sea, ex duo dico dicam indoctum, nam animal tritani adversarium in. Eu mea veniam nonumes sententiae, ius iudico moderatius cu. Vidisse pericula suavitate vim ne, dicam neglegentur ei ius, ne illud viderer feugait his. Sit modus adolescens in, duo te amet suavitate tincidunt. Soleat signiferumque te per, no eos debet singulis neglegentur, cu vis natum falli expetendis. Vix tollit dicunt mediocrem eu, mei et equidem civibus. Eum dicat efficiantur definitionem ne. Ei mei wisi vidisse appetere. An sit nominavi lobortis, liber legimus epicuri sea an. Ne habeo ludus expetendis sit, ne posse tantas voluptaria nec, id elit volumus quaestio pro. Interpretaris conclusionemque ea eum, tollit insolens no mel Id graece similique sea, ex duo dico dicam indoctum, nam animal tritani adversarium in. Eu mea veniam nonumes sententiae, ius iudico moderatius cu. Vidisse pericula suavitate vim ne, dicam neglegentur ei ius, ne illud viderer feugait his. Sit modus adolescens in, duo te amet suavitate tincidunt. Soleat signiferumque te per, no eos debet singulis neglegentur, cu vis natum falli expetendis. Vix tollit dicunt mediocrem eu, mei et equidem civibus. Eum dicat efficiantur definitionem ne. Ei mei wisi vidisse appetere. An sit nominavi lobortis, liber legimus epicuri sea an. Ne habeo ludus expetendis sit, ne posse tantas voluptaria nec, id elit volumus quaestio pro. Interpretaris conclusionemque ea eum, tollit insolens no mel.</p>
<p>Lorem ipsum dolor sit amet, ne lorem dolorem eos. His ex verear tincidunt, ea causae nominavi voluptua ius. Sit ne nibh qqqqqqdeserunt petentium, nam nisl volumus tincidunt ne. Ut vel dictas posidonium sadipscing, nominavi comprehensam duo no. Et quis prima exerci pro, idque ignota fastidii vel cu, id eum solet mollis definitionem. Habeo dolore postulant te pri, duo ut electram incorrupte, ea melius omittantur vel. Alii graeco bonorum pri et. Aliquip similique cum at. Ad per perfecto expetendis mediocritatem, pro percipitur ullamcorper complectitur ex. His falli aeque fierent cu, reque philosophia mel ex. Ad eum dicat platonem voluptatibus, eu vim alia adhuc justo, minimum consequuntur usu ex. Eos dolorem maiorum scaevola no, aliquid verterem ut per. Mea et feugiat vivendum, id graece iriure mel. Nihil debitis necessitatibus et nec. Ut has mazim option mandamus. Veri adipisci eloquentiam eos ea, soleat dissentiunt te mel, vel at debitis recteque petentium.</p>
</div>
</div>
Modified a few styles in CSS and added more content in HTML for the above snippet. Hope this helps.

Resize div according to viewport (JQuery or JS solution only)

I want to resize a scrollable-div according to the viewport, so that it maintains 100% height and 100% width inside its parent container when resized. This includes maintaining a scrollbar inside the div at all time. So...
Is it possible to resize a div to 100% height & width of the parent container depending on the size of the viewport?
My main problem so far has to do with a toggle content button that adds a
space on top of the scrollable-div, but instead of the div adjusting it gets
pushed down until the bottom scroll-button gets cut off. Is there
a way to resize it dynamically with the scrollbar?
UPDATE: This is the code I'm focusing on the center section. The #content and #contentsection are the scrollable div and the content, and their parent containers are #networkfeed, #feed-content, and .center
<!--Center-->
<div class="center">
<!--Feed Content-->
<div id="feed-content">
<div id="networkfeed" class="feedpagetab activefeed">
<input onclick="toggleContent()" type="checkbox" id="filterbutton" role="button">
<label for="filterbutton" onclick=""><span class="filterswitch">Show Me</span><span class="filterswitch">Hide Me</span>
</label>
<div class="borderline"></div>
<div id="content"></div><!--Filtercontent ends here-->
<div id="contentSection">
<div id="content2">Lorem ipsum dolor sit amet, ius an dolorum lucilius sensibus, et sint graeco nec. Iudico atomorum eam eu. Nec equidem conceptam id. Cum velit viris voluptua an. Sea eu harum eirmod eloquentiam, quaestio complectitur voluptatibus in nam, an dicam platonem adolescens has. Te usu esse idque, no modo tractatos sed. Vero audire sapientem an sit, homero recteque pri in, vis at vidit admodum. Ex quo doctus eleifend contentiones, vis odio mucius tritani ut. Id cetero nostrud dissentiunt mel. Docendi scaevola vis ei. Vel et ponderum electram expetendis, cum cu quaestio definitionem, etiam ponderum vix ei. Ut his feugait assentior philosophia, atqui definitionem at mei. Liber sonet dictas ea has, nec odio fabellas ei. Vel oratio quodsi in, duo minim admodum ea. Pri id dolorum indoctum, vim at alia tritani. No pro esse error solet, vix quis prodesset ei. Tollit accommodare vis at, sed in tamquam prompta dolorem. Nam solum definitionem an, dicta nostrum adversarium ne nec. Eu docendi nominavi similique pri. Qui an natum tamquam, dictas invenire mei id. Cu omittam insolens rationibus ius, dicunt inciderint cum ea. Est vero dolorem et, assum antiopam mea ne. Te vel choro audiam, eum equidem nostrum ex. Ea nam offendit definitiones. In etiam debitis similique cum. Ius regione incorrupte te, utinam ceteros an has, omnium concludaturque cum eu. Eu sumo adhuc ius. Quo choro quodsi latine an. Nonumy deleniti duo ex, fastidii menandri accusata ut mea, ad minimum omnesque quo. Cum in molestiae mediocritatem. Partiendo voluptaria cum te. Illud reque convenire duo et, audiam denique consectetuer mei te. Bonorum fabellas interpretaris mel ad. Eu sanctus nominavi ius, oratio vocibus indoctum ea eos. Et nisl doming vituperatoribus vis. Ullum percipit inciderint ei duo, ex usu stet essent. Quis errem legere ex quo, usu ludus decore ut, vix cetero convenire honestatis et. Mucius nusquam platonem per et, cu mei nibh erant inermis. Ne quo erant commodo sadipscing. Mei delenit tibique aliquando no, vim ex omnis vocibus scriptorem. Reque aperiam hendrerit et per, sit suas vivendo corrumpit in. Ius ei falli doming periculis. Nam quis iuvaret at. Impedit minimum similique ei pri, graeco interpretaris eu ius, dolor probatus scribentur in qui. Duo aliquam omittam voluptaria no. Vel enim hendrerit persecuti ne. Sed no idque fastidii neglegentur. Everti accusamus deterruisset eos ut, an sea feugiat alienum rationibus. Duo ex graece gloriatur, lorem appetere inimicus sed eu, autem sanctus in ius. No lorem altera qualisque eum, id eum labore necessitatibus, sit no diceret pertinax partiendo. At pri hinc solet voluptatum, ut debitis intellegam vix. Decore ridens comprehensam sea id, ius aperiam delicatissimi no. Quas molestie ei his, in has augue equidem adipisci.
</div><!--End Content-->
</div><!--End Content Section-->
</div> <!--End Network feed-->
</div><!--End Feed Content-->
</div><!--End Center-->
The css:
.center {
overflow:hidden;
min-height:100%;
float:none;
background-color:#FFF;
color:#999;
position:relative;
}
#contentSection {
overflow-y:scroll;
display:block;
background-color:green;
}
/*----- Show me Button-----*/
#filterbutton[type=checkbox] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
[for="filterbutton"] {
position: absolute;
top:4px;
padding: 0;
left: 5%;
width: 80px;
text-align: center;
padding: 4px;
font-weight:bold;
color: #555;
text-shadow: 1px 1px 1px #DDD;
font-family: Helvetica, Arial, "Sans Serif";
font-size: 13px;
border: 1px solid #CCC;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 0px 1px 0px #FFF;
-moz-box-shadow: inset 0px 0px 1px 0px #FFF;
box-shadow: inset 0px 0px 1px 0px #FFF;
background: #EEE;
background: -moz-linear-gradient(top, #F9F9F9 0%, #DDD 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F9F9F9), color-stop(100%, #DDD));
background: -webkit-linear-gradient(top, #F9F9F9 0%, #DDD 100%);
background: -o-linear-gradient(top, #F9F9F9 0%, #DDD 100%);
background: -ms-linear-gradient(top, #F9F9F9 0%, #DDD 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F9F9F9', endColorstr='#DDD', GradientType=0);
background: linear-gradient(top, #F9F9F9 0%, #DDD 100%);
}
[for="filterbutton"]:hover {
color: #444444;
font-weight:bold;
border-color: #BBB;
background: #CCC;
background: -moz-linear-gradient(top, #F9F9F9 0%, #CCC 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F9F9F9), color-stop(100%, #CCC));
background: -webkit-linear-gradient(top, #F9F9F9 0%, #CCC 100%);
background: -o-linear-gradient(top, #F9F9F9 0%, #CCC 100%);
background: -ms-linear-gradient(top, #F9F9F9 0%, #CCC 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F9F9F9', endColorstr='#CCC', GradientType=0);
}
[for="filterbutton"] span.filterswitch:last-of-type {
display: none;
visibility: hidden;
}
#filterbutton[type=checkbox]:checked {
color:#FFA317;
}
#filterbutton[type=checkbox]:checked ~[for="filterbutton"] span.filterswitch:first-of-type {
display: none;
visibility: hidden;
}
#filterbutton[type=checkbox]:checked ~[for="filterbutton"] span.filterswitch:last-of-type {
color:#3CC;
display: block;
visibility: visible;
}
#content {
margin: 0; display:inline-block;
position:relative; bottom:0;
padding: 0;
padding-bottom:170px;
margin-top:5px;
}
.borderline {
width:100%; display:block;
border-bottom:#000 solid 1px;
padding-top:37px; top:0;
}
And the js:
var height = 0;
var minHeight = 200;
$("#content2").parent().siblings().each(function () {
height = height + $(this).height();
});
// for when the document is loaded
$(document).ready(function () {
var windowheight = $(window).height() - 100;
$(".center").height();
$(".center").css("min-height", minHeight + height + "px");
var newHeight = $(".center").height() - height;
$("#contentSection").css("height", newHeight - 0 + "px");
});
// for the window resize
$(window).resize(function () {
var windowheight = $(window).height() - 100;
$(".center").height(windowheight);
$("#content2").height($("#content2").parent().height());
var newHeight = $(".center").height() - height;
$("#contentSection").css("height", newHeight - 0 + "px");
});
function toggleContent() {
// Get the DOM reference
var e = document.getElementById("content");
// Toggle
e.style.display =="block" ? e.style.display="none" :
e.style.display ="block";
}
So far I can resize the scrollable-div, but I can't figure out how to also resize the scrollbar without getting it cut-off at the bottom: http://jsfiddle.net/a5pcctrz/1/
Any pointers in the right direction would be much appreciated.
Thanks!

Categories

Resources