CSS - Auto-height div - javascript

I have some expanding content in my #main (or) #panel (got this from a template) div, but when you expand it, it pops to the unknown, under the page...
How could I make my main div expand with my content.
CSS
#main
{
position: relative;
overflow: hidden;
}
I also have some JS/Ajax scripts that expand the page to the right size when you switch page, could they affect...?
See live demo here! (The (i) button)
The divs expand when you click on them.
A few times it worked on another computer, but very randomly..
Tell me if you need the scripts or more code.
Basically, everything's wrapped in .main -> .panel
Simple: When the div is expanded, expand the main div's height to fit it.
.panel
{
position: relative;
display: table-cell;
width:100px;
vertical-align:middle;
}

The problem is not with the main div, but the class panel.
.panel {
padding: 3.5em 2.5em 3.5em 2.5em;
position: absolute; // I'm the problem
top: 0;
left: 0;
width: 45em;
}
This is also a problem.
#me .pic img {
position: relative; // I'm evil
display: block;
height: 100%;
}
My debugging may have been awry though, since it doesn't want to play nice and stick with what I want it to do sometimes.
Let me know if this helps in some way, and if you need help debugging anything from there.
EDIT
Your problem may just be a matter of recalling the Script that you use to re-size the main div when the script that displays the hidden divs content goes off. That should re-size the page to fit the new content.
I can't locate where this script goes off, so if you can provide it, I could figure it out.

If your question is actually "how do I make my main div's height change dependent on it's contents" then all you need to do is remove overflow: hidden; from the css class.

Related

CSS overflow: auto by 'touching' bottom div

I want to make a div scrollable when its touching the bottom div.
I tried this:
margin-bottom:30px;
position: relative;
overflow: auto;
but it didn't work.
I created a fiddle tho show you my problem:
https://jsfiddle.net/wp3wvuj2/1/
For explanation: When you type in in a input field a new field is added to the div (This function is simplified). I want that before the input fields touch the element below (the START-div) it gets scrollable (overflow: auto).
Somebody have an idea?
Edit:
I noticed that nobody understands my problem.
I'll try to explain it better:
I have list where players add their names. The list has minimum 4 players maximum ∞.
The start buttonis placed at the bottom. The problem is in a iphone 5 it looks like this:
And now if i would add another player input field it would Overlap with the START-Button. Thats the reason why I want it scrollable now. I already get that work with a fixed height, but i want it responsive!
Because on a iPad for example it looks like this:
And I want prevent an overlap with the start button like this:
So it should get scrollable before it overlaps (dependent on the display size).
Updated JS fiddle, try this, i have updated CSS part in your code
https://jsfiddle.net/wp3wvuj2/2/
.main_input {
width: 209px;
top: 70px;
margin: auto;
margin-bottom:30px;
/* position: relative */
overflow: auto;
height:216px; //Give some height always to apply overflow auto
}
.main_start {
width: 100%;
margin: auto;
/* position: absolute */ //Not required
bottom: 20px;
font-family: Pamela;
font-size: 36px;
text-align: center;
}
I've only changed the styles on class main-input
.main_input {
width: 226px;
height: 234px;
top: 70px;
margin: auto;
margin-bottom:30px;
position: relative;
overflow-y: auto;
}
EDIT:
Please note for this solution to be able to work, I needed to remove the Top and Bottom positions of some elements as they were breaking the layout. Please use Margins or Paddings to get that styling you desire.
This now works to scroll once the space runs out on the page.
https://jsfiddle.net/wp3wvuj2/5/

How to not allow the 'bounce' effect on the end of scrolling on a website?

Im trying to get this scrolling effect i have seen on the website http://www.unheap.com , if you scroll to the bottom or to the right you'll notice that you can't scroll past whatsoever. Most website including this one allow you to scroll past slightly with a lot of resistance but I'm trying to replicate the example above where you can't scroll past at all. Anyone know of any plugins or methods on how to go about creating this effect?
The actual website itself is 100% the width and height of the page and any scrolling that occurs is accomplished via an absolutely positioned container with overflow: scroll.
EDIT
The actual overflow is set on the .grid element, which is inside the absolutely positioned .container element.
EDIT #2
The author is also using jScrollPane, but you can prevent the bouncing effect simply by making your body 100% width and height and absolutely positioning a container that has overflow set to scroll.
EDIT #3
See the attached code snippet - (you may have to copy and paste it into it's own HTML file because of the way SO displays snippets). There is no bouncing.
* { margin:0; padding:0; }
html,
body { width: 100%; height: 100%; overflow:hidden;}
body>div { height: 50vh; overflow: auto; padding: 10px; background: #000; position: absolute; width: 100px; top: 100px; left: 100px;}
body>div>div { height: 1000px; background: #0f0;}
<div>
<div>scrollable content</div>
</div>

Fixed divs under the bootstrap fixed nav

I'd like to attach some fixed alerts underneath the navbar-fixed navigation bar in bootstrap. My best attempt to this point is to make a div positioned at 50px with position: fixed; and width: 100%, and to insert the alerts in this div. The problem is that this cuts off the top of my other content the same way that navbar-fixed cuts off content when one fails apply padding to the body element.
#Alerts
{
position: fixed;
width: 100%;
top: 50px;
}
.alert
{
top: 0px;
//position: fixed;
padding-left: 15px;
padding-right: 15px;
padding-top: 4px;
padding-bottom: 4px;
margin-bottom: 0px;
border-radius: 0px;
}
body {
padding-top: 50px; // to avoid 'underlapping' the navbar
}
Here's a link to a not-working example: http://www.bootply.com/pnEHtLhUBi
My best idea at the moment is to use JS to adjust the padding-top value on body as alerts are created/destroyed, but this is likely bad for maintenance/readability and I'd prefer to do something more declarative with css.
Any suggestions?
Looks like there won't be a way to do this without js.
Since if the alert is dynamic, meaning it only appears when its triggers via the alert method
$('#alert-danger').show('slow', function(){
$('body').addClass('moreMargin')
});
you can also remove the moreMargin class from the body when you hide the alert
What about putting it inside the same div as the nav. When they popup they will push down the other content?
Also, since these are alerts, won't the user already have seen the content that is being covered? If they want to see it again they can just close the alerts. Maybe I just misunderstood what you are going for?

CSS, link inactive

I was trying to make a slider, all good, i finished it, but i saw that the links aren't active, when i hover on them, the cursor is not pointer, if i click on them nothing happens,except the last one.
I remove the css and i saw that the links is ok. So i've tried to find the problem in css.
first:
.caption-wrapper{
position: absolute;
text-align: center;
width: 100%;
}
if i remove position: absolute the links are active, but the jquery movment animating doesn't work anymore.
second:
ul.slides li{
position: relative;
width: 100%;
float: left;
margin-right: -100%;
height: 500px;
}
This time, if i remove float:left the links are active again, but the rest is going crazy.
Here http://screencast.com/t/KLpp6DysMZ8l is a part of the html code. there are 5 li's , and only the last li links works. I have no idea why.
I don't know what to do. I worked a lot at this slider. Anybody has this problem? Thank you!
I suspect they're layering on top of each other because of they're positioned absolute, try using z-index to order them. Use a higher z-index on the active link.

How to reveal element by scrolling?

I'm trying to make an effect similar as used on http://www.t-mobile.com/ , when the user scrolls down to the bottom of the page they reveal the "footer" more and more as the user keeps on scrolling.
I've tried to search both here and on google but haven't been able to find anything that's really useful. Most examples only shows/hide the footer once the user scrolls to the bottom.
So my question is, what's the effect called to reveal an element by scrolling? Are there any good tutorials / blog posts about this? All help I can get is much appreciated!
As I commented, you need to make your element fixed, so as explanation goes, I have two elements here, one is a normal position: relative; element, so nothing fancy about that, I assigned relative so that I can make the z-index work
Second element is positioned fixed and also, make sure you use margin-bottom which should be equal to the height of your footer, no need to assign any negative z-index whatsoever to this element.
Demo
Not much HTML ...
<div></div>
<div>Reveal Me</div>
CSS
/* These are for your main site wrapper */
div:first-child {
height: 800px; /* Even auto is fine, I
used fixed height because I don't have any content here */
background: #eee;
margin-bottom: 200px; /* Equals footer wrappers height */
z-index: 1;
position: relative;
}
/* These are for footer wrapper */
div:last-child {
background: #aaa;
height: 200px;
position: fixed;
bottom: 0;
width: 100%;
}
For Dynamic Sizes
Note that am using a fixed height for the fixed positioned element, if you have variable height in footer element, than you need to use JS or jQuery to calculate the height using
$('#wrapperElement').css('margin-bottom', $('#footer').height());
Here, the selectors of #wrapperElement and #footer are my assumed ones, you can replace those with the your own selectors.
Something about fixed element - Horizontal Centering (I think it will be helpful to some users)
When you will make your element fixed, it will get out of the document flow, so if you are assigning fixed to the wrapper of footer element and want to center some content in there, than nest another element inside that wrapper and use width and margin: auto; for that...
Demo 2
HTML
<div></div>
<div>
<div>Reveal Me</div>
</div>
CSS
body > div:first-child {
height: 800px;
background: #eee;
margin-bottom: 200px;
z-index: 1;
position: relative;
}
body > div:last-child {
background: #aaa;
height: 200px;
position: fixed;
bottom: 0;
width: 100%;
}
body > div:last-child div {
width: 80%;
margin: auto;
outline: 1px solid red; /* To show that element is horizontally centered */
}
Note: Selectors used in this answer are too general and are good for
quick demonstration purposes, in real projects, make sure you use
specific selectors

Categories