Fixed divs under the bootstrap fixed nav - javascript

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?

Related

how can I use a code from a snippet which have a "position:fixed" element ? I can't make it stay inside my <div>'s height (parent)

I'm trying to use this snippet (link with original code) : https://codepen.io/starkxx/pen/NdemEv
here is the snippet edited with some content (a container for the POC, removed some code) :
https://codepen.io/Demky/pen/EzNLVB
I don't find a solution to contain the stem-wrapper inside his new parent's height; I think the problem is from this block of code but I can't find the solution
<div class="stem-wrapper">
<div class="stem"></div>
<div class="stem-background"></div>
</div>
the fixed stem-wrapper alway take the full windows height or disapear if I try to give him a position:absolute/relative/...
.stem-wrapper {
position: fixed;
top: 0px;
bottom: 0px;
left: 50%;
}
I'm not allowed to put a static value for 'top' as I don't know how far from the top the snippet will be
what I tried :
I tried to build a parent so I could use position:relative on the parent and add position:absolute on the child as I have seen here :
https://stackoverflow.com/a/20994123/9552861 but I failled to make it works
tried to play with position/container, in vain
I also tried to play with the javascript but I made no progress
Can you people give me tips on how to find the solution ?
Is it sure the problem is from the CSS ?
Should I keep trying to translate this fixed element to a parent(position:relative) / Child(position:absolute) relation; or am I not looking in the right direction ?
Please let me know if I need to add more informations on my question.
I let the css/html code on codepen for better visibility but I can paste it here if it's better for readers.
Screenshot of the problem:
Screenshot of the problem when I export the snippet to another website (the stem- take the whole page)
Edit :
Tried to make the problem easier to understand;
In the modified snippet (this link from top ) :
I added a container (#timelineContainer with background-color:yellow );
I expect the ".steam-wrapper" and his childs (.stem, .stem-background) to not go outside of the yellow area (updated the screenshot with the right color).
The goal is to contain this POC/Snippet to a container so it can works outside of this sandbox without taking the full page's height
If I understand what you want, what you need to do is this:
body {
background: #body-background;
margin: 0px;
padding: 0px;
font-family: sans-serif;
font-size: 15px;
line-height: 26px;
color: #B9CFD0;
font-family: 'Roboto Slab', serif;
/*overflow-x: hidden;
overflow-y: scroll;*/
overflow: hidden;
}
#timelineContainer {
overflow: auto;
height: 60%; /*any height you want the snippet to have*/
}
.container {
height: 40%;
}
Then you have to adjust a bit the stem:
.stem-wrapper {
position: fixed;
top: 40%;
bottom: 0px;
left: calc(50% - 8px);
max-height: 60%;
}
After that you'll have to adjust the JS to fit the new layout. Because the scrolling function was related to the body and now should be related to #timelineContainer

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/

fixed button with animation on middle right side of a page

I want to create a button like the one you see here
This page has a Feedback button on the right hand side which is near to the scrollbar. How can I create a similar button.
There can be a lot of solutions depending on the exact behaviour you want with the feedback button. Those can involve JavaScript to delay the button's appearance, and CSS transforms to rotate the element. The simplest one, I think, would be to create a fixed element and setting it's right to 0.
.feedback {
position: fixed;
right: 0;
bottom: 30%;
height: 80px;
width: 20px;
background-color: #55E;
color: #FFF;
}
.feedback:hover {
width: 30px;
}
<div class="feedback">
</div>

Why does the on mouse in even gets triggered when the mouse is not in the button?

I have a start button in my js game. I just noticed that I can be slightly to the right of it, and the cursor is a pointer. My css:
#start{
position: absolute;
top: 130px;
left: 195px;
height: 80px;
width:320px;
background-color: red;
cursor: pointer;
border: 2px solid yellow;
border-radius: 20px;
}
The button is just a div. After setting the button to a variable named "start", I use the following js to make it change background on hover:
start.onmouseover=function(){
this.style.backgroundColor="#FF4500";
}
start.onmouseout=function(){
this.style.backgroundColor="red";
}
I am able to trigger the hover by being outside of the button. Why is that? Here is the game where the issue occurs. The button is the first thing you see. This occurs with some other buttons as well. I know that I can use css hover, but am curious to find out what's wrong with this.
The reason why it is acting this way can be found in your css for #new:
#new {
font-size: 40px;
font-weight: bold;
color: yellow;
position: relative;
left: 48px;
bottom: 24px;
You should note that this child component is inheriting the width of the parent div which you set to have a width of 320px. You can verify this by inspecting the parent and child and looking at the computed styles:
Parent:
Child:
Then in your css for #new, you MOVED the position of the element to the right by 48px:
left: 48px;
This element still has a width of 320px as shown in chrome developer tools.
I bet that little blue bit that has overflowed is exactly 48px and where you are experiencing that unwanted behavior =) So, I hope you now understand what is going on with your css!
You can even verify this by setting the width of the child to be:
width: calc(100% - 48px);
You should find now that there is no more overflow:
The browser is actually taking the hover-detection from this area here.
http://i.imgur.com/WPYi7gj.png
You can probably see that it uses the text as the start of the hover area, and that there's a lot of padding on the right of the element. You'll want to remove this padding using CSS.

CSS - Auto-height div

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.

Categories