I made a simple slide up from the bottom notification bar for my page. Everything works perfect as intended, but when I try to make that bar slide down from the top of the page, the behaviour of the text is different. If I make it slide up from the bottom, the text moves along with the div, when sliding down from above, the text appears to stay in place as the div rolls over the text. How can I prevent this from happening?
below is my code to make it pop up from the bottom (the text moves along inside the div), when I make the change to "top: 0" instead of "bottom: 0". The text appears to be in a fixed position from the start.
$("p").click(function() {
$('#message-box').slideToggle('slow').delay(1500).slideToggle('slow');
});
#message-box {
display: none;
width: 100%;
background-color: #FFA339;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 30px;
color: #35220C;
position: absolute;
bottom: 0;
z-index:50;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<div id='message-box'>notification</div>
<p>click here</p>
So - the bar is 50px high, and the text is centered in those 50px thanks to its line-height. That calculation is based off the text's space from the top of the container.
When sliding from the bottom of the screen, the height of the bar is growing from bottom to top. Because the text's position is based off the top of the container, this creates the visual effect of the text sliding "with" the box as the top of the container shifts up, making it look like they're animating together.
When sliding from the top of the screen, the height of the bar is growing from top to bottom. The text doesn't shift because it's always spaced from the top of that container, occupying the same 50px from the top of the screen, so you just see it "reveal".
So, as a fix, I've removed the jQuery animation altogether and showed you how to accomplish this animation using a much smoother CSS transition. Now, by toggling a class with jQuery, the entire bar shifts from off-screen to on-screen, rather than its height changing.
$("p").click(function() {
$('#message-box').addClass('show').delay(1500).queue(function() {
$(this).removeClass('show').dequeue();
});
});
#message-box {
width: 100%;
background-color: #FFA339;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 30px;
color: #35220C;
position: absolute;
top: 0;
z-index: 50;
font-weight: bold;
transform: translateY(-100%);
transition: transform .6s;
}
#message-box.show {
transform: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<div id='message-box'>notification</div>
<p>click here</p>
Related
I want to create a div that has three nested divs touching each other in a row. I want the div at the center of this container to have a constant width. While I want the left div's width to expand to the left(i.e. not pushing the other two divs in the container to the right) on hover and stay expanded on click. I want the same thing to happen to right div's width except it expands to the right. All the nested divs would have content in them some of the content not completely visible until the div expands.
This would be the general idea:
When Neither is Hovered -->
enter image description here
When One Is Hovered -->
enter image description here
When They Are Both Clicked -->
enter image description here
The problem is I haven't been able to figure out a way to do this or find out if there is a tutorial or something that would be helpful in accomplishing this. I have tried googling how to create this, and in all honesty was not to sure exactly what to search up but nothing has really helped me get both divs expanding the way I want. I would appreciate any help in finding a tutorial or any implementation that might work.
So far I have been able to get this far in terms of coding it in HTML and CSS, but have been stuck for a while with no attempt being closer than this. I would need this to be on top of other elements on a page in my webpage hence the z-index, and positioning is so that I could move it to my desired place on the webpage. I am able to get the right div to expand how I want easily as that is the default behavior but when I try to get the left div and right div to both expand I have been stuck. I have gotten the left div to expand at one point but that led to the right div not working. So right now this is the closest I have gotten both expand properly but the left div is under the center div instead of beside it.
I added a bit of a yellow background in the images to give an idea of positioning
Result on Webpage No Hover -->
enter image description here
Result on Webpage On Hover Of Left Div-->
enter image description here
Result on Webpage On Hover Of Right Div-->
enter image description here
HTML-->
<div class="sliding-window">
<div class="left-wing">
</div>
<div class="middle-box">
<h3>Content</h3>
</div>
<div class="right-wing">
</div>
</div>
CSS-->
.sliding-window{
display: flex;
flex-direction: row;
/* justify-content: center; */
z-index: 25;
position: absolute;
top: 30%;
left: 35%;
width: 850px;
}
.middle-box{
left: 250px;
border: 1px red solid;
text-align: center;
height: 300px;
width: 250px;
border-radius: 10%;
background-color: grey;
}
.left-wing{
border: 1px violet solid;
height: 250px;
/* float: left; */
position: relative;
float: left;
left:200px;
margin-top: 25px;
margin-bottom: 25px;
width: 50px;
background-color: grey;
}
.right-wing{
left:450px;
border: 1px green solid;
height: 250px;
margin-top: 25px;
margin-bottom: 25px;
width: 50px;
background-color: grey;
}
.right-wing:hover{
width: 200px;
}
.left-wing:hover{
width: 200px;
/* margin-left: -200px; */
}
I have a div which contains three more divs. The first one is a toolbar that can be collapsed (red in the example). It has a fixed height. The second one (black) has to fill all the remaining space, and must expand if the red one is collapsed. The third one (green) is in fact a button attached to the bottom of the red div. When the user clicks on it, it collapses or expands the red div.
<div id="container">
<div id="tools">
</div>
<div id="hider">
</div>
<div id="work-area">
</div>
</div>
I made an example on jsfiddle : https://jsfiddle.net/gpoa8s92/3/
I don't see how to make the black div take all the remaining space. I tried using a flexbox, and it works, but the green div isn't attached to the bottom of the red div anymore.
Is there a solution using ass less javascript as possible ?
Thank you !
I think your solution can be achieved with flexbox, just put tools and work area as siblings and for first set static height, flex-grow: 0 and flex shrink: 0, and for work area set height: 100%, flex-grow: 1 and flex shrink: 1.
This will make tools to occupy 100px and work area remaining place.
Since the toggle button is part of tools you can put it inside it, and move it outside using position: absolute and top: 100%, and give tools position: relative to stick toggle button to its bottom.
Now you can create a class for tools that set its height: 0 and animate it with CSS transitions.
Then on toggle button click, you can toggle a class on tools and it should be as you wanted.
Toggling tools height could be done without javascript- it would be a bit confusing but more accessible, here's an example of that: https://codepen.io/morganfeeney/pen/KiBty
Prepared an example for you - I've used BEM methodology for naming elements and cached used elements as variables.
const $toggleButton = $('.js-tools-toggle');
const $toggleContent = $('.js-tools-root');
const collapsedClass = 'tools--collapsed';
$toggleButton.on('click', function() {
$toggleContent.toggleClass(collapsedClass);
})
.container {
display: flex;
flex-direction: column;
height: 400px;
background-color: blue;
}
.tools {
transition: height 250ms ease-in-out;
position: relative;
display: flex;
flex-direction: column;
height: 100px;
}
.tools--collapsed {
height: 0px;
}
.tools__content {
height: 100%;
background-color: green;
overflow: hidden;
}
.tools__action {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
height: 20px;
background-color: red;
}
.work-area {
background-color: black;
flex: 1 1 auto;
height: 100%;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="tools js-tools-root">
<div class="tools__content"> Content of tools</div>
<div class="tools__action js-tools-toggle">
toggle
</div>
</div>
<div class="work-area">
content of work area
</div>
</div>
I created a pop up window and the background color of it that darken the page is not displaying over the entire page. It only displays in the first 100% of the page. If you scroll down, the page turns back to the normal div background-color.
I created a fiddle to help illustrate what I mean. Scroll down and click the blue text. That will make the popup window appear. Then if you scroll up you will see that the gray background-color is only displaying in the first 100% viewport, but then going back to white when you scroll down. I want the entire page to turn that gray color when clicked on.
My Fiddle
https://jsfiddle.net/3x42sdd8/1/
I have set the height to 100%, so I'm not sure why that isn't taking any effect on the entire page.
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #FFFFFF;
z-index:1001;
-moz-opacity: 0.3;
opacity:.30;
filter: alpha(opacity=30);
}
Change the position to fixed for your overlay, as the absolute will position it at 0, 0 of your document while the height: 100% gives it 100% of the height of your viewport. Position fixed fixes it to position 0,0 of your viewport.
Here is an example that shows you the difference between position absolute (red) and position fixed (blue):
#push {
height: 5000px;
}
#absolute, #fixed {
background: rgba(255,0,0,.5);
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#fixed {
position: fixed;
background: rgba(0,0,255,.5);
}
<div id="push"></div>
<div id="absolute"></div>
<div id="fixed"></div>
Check this out - https://jsfiddle.net/3x42sdd8/2/
Just updated position
.black_overlay{position:fixed;}
I have a div (which is a basically a button) that shows another div (which is basically a container for some items).
Check real world example:
And a working example in Plunkr.
As you can see, the container layer is placed below the button with
position: absolute;
which works fine if the button is somewhere in the upper left corner of the page, but not that fine if the button is somewhere on the bottom or somewhere on the right side of the page, as it's always shown below the button and expanded to the right. That causes the layer to be rendered outside of the webpage visible area and creates scrolls.
Is there any way I could do the following only with CSS:
if there is no enough space o the right, render the layer by placing the upper right corner of the layer to the lower right corner of the button.
if there is no enough space on the bottom, render the layer by placing it on top of the button.
Note that I don't know previously neither the width or the height of the layer.
This can be a HTML5/CSS3 solution, I don't need to support old browsers.
AFAIK is not possible. The possible way is detect it with javascript or if you only want to use CSS you must define the position classes. Example:
HTML
<div class="dropdown btm-right">
<span class="button">Button</span>
<div class="items">
<span class="item">Item</span>
</div>
</div>
CSS
.dropdown {
display: inline-block;
position: fixed;
}
.dropdown:hover .items {
display: inline-block;
}
.dropdown.btm-right {
bottom: 10px;
right: 10px;
}
.dropdown.top-right {
top: 10px;
right: 10px;
}
.dropdown .button {
position: relative;
z-index: 1;
}
.dropdown .items {
position: absolute;
display: none;
}
.dropdown.btm-right .items {
right: 0;
bottom: 100%;
}
.dropdown.top-right .items {
top: 100%;
right: 0;
}
Then we can use the btm-right or top-right class to position the dropdown. Thanks!
I try to create a plugin for personal use, that will place clouds in my web page randomly.
Lets see now what is my idea:
I have create an image with all my clouds.
In my CSS I have create a general class called .cloud that is applyed to all cloud elements and four classes .cloud_1 .cloud_2 .cloud_3 .cloud_4 for each cloud element I like to place in my document.
Here are the css classes I use:
.cloud
{
display: block;
position: absolute;
background: transparent url(../img/clouds.png) no-repeat 0px 0px;
}
.cloud_1
{
width: 800px;
height: 350px;
background-position: 0px 0px;
z-index: 1;
}
.cloud_2
{
width: 800px;
height: 469px;
background-position: 0px -350px;
z-index: 2;
}
.cloud_3
{
width: 800px;
height: 405px;
background-position: 0px -819px;
z-index: 3;
}
.cloud_4
{
width: 630px;
height: 314px;
background-position: 0px -1225px;
z-index: 4;
}
From the other hand I use jQuery to place generate and place my clouds randomly into my document with random top and left.
The problem I have is that, if I set the position to absolute for .cloud selector the clouds that go out of the document width they activating the horizontal scroll bar. If I set it to fixed, the clouds are attached to the same position while I scroll down and so on.
What is the best solution in order to place my clouds with no horizontal scroll bar and not stay fixed in the same position ?
Extra info
I forgot to tell you that the clouds will animated to the right !
Produced code example
<div class="cloud cloud_3"></div>
and jQuery will adding style attributes like that:
<div class="cloud cloud_3" style="top: 280px; left: 120px;"></div>
Also jQuery will change the left css position in order to animated
Place all the clouds in a <div> with overflow: hidden, and make it the full size of your document. Set that div to z-index: -1 so that it is behind the rest of your content.
Put the clouds into a containing div withoverflow: hidden set on it. Then when the left position of the cloud is greater than the width of the containing div, move it back to the left so it will scroll accross to the right again.