I've been trying to come up with a solution to this design issue, which seems simple but it's perplexing me.
I have content fixed to the bottom of the screen - some of it is always present, some is hidden from time to time.
The crux is that I want the content above to drop down. I have had some success with javascript but its not perfect. The nearest I've got so far is using max-height.
https://jsfiddle.net/6jax19gf/29/
The fiddle is a working representation of what I'm trying to achieve using max-height. However, max height isn't ideal because much of the content is dynamic.
I'd like to come up with a better solution that isn't hard-coded using max-height.
#fixed-footer {
position:fixed;
left:0;
bottom:0;
width:100%;
}
#fixed-footer-floating {
padding:0 16px;
margin-bottom:16px;
box-sizing:border-box;
}
.fab-button {
background-color:lime;
display:inline-block;
height:40px;
width:40px;
border-radius:50%;
}
#fixed-footer-auto {
background-color:red;
color:white;
text-align:center;
transform: translateY(0);
transition: max-height 0.2s ease-out;
max-height: 76px;
}
.some-content {
padding:14px 16px;
box-sizing:border-box;
}
#fixed-footer:hover #fixed-footer-auto {
transform: translateY(100%);
transition: transform 0.2s ease-in, max-height 0.4s 0.2s ease-out;
max-height: 0;
}
<div id="fixed-footer">
<div id="fixed-footer-floating">
<a class="fab-button"></a> This content always floats above the red box!
</div>
<div id="fixed-footer-auto">
<div class="some-content">This area is responsive so may expand or contract vertically depending on the screen size and page state. It's content can be made to made disappear completely on certain events.</div>
</div>
</div>
Hover over the bottom red area to make the content disappear. This would usually be triggered using javascript.
Related
The current GMail Login Page has an "Email or phone" placeholder text that reduces in size and moves towards the top-left corner of the field on focus. How to achieve something similar using CSS and/or JS?
first of all, welcome to StackOverflow!
It's called "floating labels", and it can be achieved by using CSS alone (which can turn out to be a little hard if you are not really familiar with pseudo-selectors like :focus and :empty) or by using a little of JS, which may be a little easier.
You can take a look at some examples here: https://css-tricks.com/float-labels-css/
An easy and simple example for you:
label {
margin:20px 0;
position:relative;
display:inline-block;
}
span {
padding:10px;
pointer-events: none;
position:absolute;
left:0;
top:0;
transition: 0.2s;
transition-timing-function: ease;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
opacity:0.5;
}
input {
padding:10px;
}
input:focus + span, input:not(:placeholder-shown) + span {
opacity:1;
transform: scale(0.75) translateY(-100%) translateX(-30px);
}
/* For IE Browsers*/
input:focus + span, input:not(:-ms-input-placeholder) + span {
opacity:1;
transform: scale(0.75) translateY(-100%) translateX(-30px);
}
<label>
<input placeholder=" ">
<span>Placeholder Text</span>
</label>
I have a blocks overview, and when you click on one block it expands.
When clicking outside the expanded block, or on the "x", it resizes back to the default size.
But there are two issues I don't know how to solve.
When you click on a block with Chrome/Safari, the z-index updates a millisecond too late and it doesn't look smooth. (Firefox on MAC is okay when expanding.)
When it's expanded and goes back, the z-index needs to be higher than the other blocks. So, when it goes to normal the site looks a lot better.
So, when clicking, it should add z-index:2; and when it's resizing back to default size the z-index needs to be 1 so its higher than the others ( which are 0) but, when another is expanding, that needs to be the highest.
Can anyone help me with this? I'd rather use some JS magic for this, maybe inline style?
I also made a jsfiddle to show what I mean.
https://jsfiddle.net/fourroses666/sp7vbtok/2/
HTML:
<div class="grid">
<div class="grid-item">
<div class="g-inner" style="background-image:url(https://placekitten.com/350/350);">
<div class="g-item"><img src="/some-png-img.png" height="175" width="175" /></div>
<div class="g-more">Bla bla bla.</div>
<div class="g-close">x</div>
</div>
</div>
</div>
JS
$(".grid-item").on("click", function(){
$(".grid-item").removeClass("active");
$(this).addClass("active");
});
$(".g-close").on("click", function(e){
e.stopPropagation();
$(this).closest(".grid-item").removeClass("active");
});
CSS
.grid{width:875px; margin:20px auto;}
.grid:after {content:''; display:block; clear:both;}
.grid-item{width:175px; height:175px;}
.g-more{display:none; position:absolute; top:175px; height:175px; width:175px; transition:all 1s ease-in-out; opacity:0; padding:20px;}
.active .g-more{opacity:1; display:block;}
.grid-item{float:left; width:175px; height:175px; background:#ddd; color:#fff;}
.grid-item:before{display:block; padding:0;}
.grid-item-wide, .grid-item-wide .g-inner, .grid-item-wide .g-item{width:350px; height:175px;}
.g-inner{cursor:pointer; overflow:hidden; z-index:1; width:175px; height:175px; transition:all 1s ease-in-out; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-repeat:no-repeat; background-position:left 50%;}
.active .g-inner{width:350px; height:350px; position:relative; z-index:2; cursor:default;}
.open-left.active .g-inner{margin-left:-175px;}
.open-top.active .g-inner{margin-top:-175px;}
.g-item{width:175px; height:175px; position:relative;}
.g-close{cursor:pointer; position:absolute; right:-50px; bottom:-50px; width:50px; height:50px; line-height:50px; font-size:35px; display:none; opacity:0; text-align:center; transition:all 1s ease-in-out;}
.active .g-close{opacity:1; right:0; top:auto; bottom:0; z-index:5; display:block;}
try to use insted
.active .g-inner {
width:350px;
height:350px;
}
with transform:scale and transform-origin (-if you want set pivot x and y as top-left) like this:
.active .g-inner {
transform: scale(2);
transform-origin: left top;
}
its work fine for me
i have this following jsfiddle link
where am trying to squeeze the webpage to show an AD towards right
http://jsfiddle.net/5o6ghf9d/1/
Works fine on dekstop browsers
But its not getting squeezed on ipad safari/chrome browsers
Below are functions used to squeeze/unsqueeze the web page
function squeeze_page(){
d.body.style.paddingRight='160px';
d.body.style.paddingLeft='160px';
d.body.style.marginLeft='-160px';
d.body.style.overflowX='hidden !important';
is_page_squeezed=true;
}
function unsqueeze_page(){
d.body.style.paddingRight='';
d.body.style.paddingLeft='';
d.body.style.marginLeft='';
is_page_squeezed=false;
}
Let me know if any other way is there where i can squeeze the webpage
Perhaps this is what you're looking for: JSFIDDLE
If you want to have the AD slide from right when showing, it's better to use the CSS transition like in my example.
First, you need to have a container for the content, which in my example, I add
<div id="container">
...
<!-- Your Content Here -->
...
</div>
to contain all your <p> content, then using the CSS, I set this
#test {
position:fixed;
width:160px;
background:blue;
right:-160px;
top:0px;
bottom:0px;
-webkit-transition: all ease-in-out 1s;
-moz-transition: all ease-in-out 1s;
transition: all ease-in-out 1s;
}
#test.show {
right:0;
}
position:fixed; to make it's position fixed to the viewport whenever you're scrolling it, top and bottom set to 0 to make it's height full, and the transition is to make it looks like slide from right to left when it shows
The same with the div container that's using this style
#container {
margin-right:0;
-webkit-transition: all ease-in-out 1s;
-moz-transition: all ease-in-out 1s;
transition: all ease-in-out 1s;
}
#container.squeezed {
margin-right:160px;
}
so that it looks like it's being squeezed by the AD
then use this script to add or remove the class from #container and #test
window.onscroll = function () {
if (pageYOffset > 100) {
$("#test").addClass("show");
$("#container").addClass("squeezed");
} else if (pageYOffset < 100) {
$("#test").removeClass("show");
$("#container").removeClass("squeezed");
}
}
I'm just trying to simply using toggleClass to trigger a class of .open on a closed menu. Here's an image of what it should look like before and after:
So I know this is pretty simple as I've made it work before, but I can't figure out why it won't work now.
My HTML is like this:
<div id="nav">
<h1>SAKURA GARAGE</h1>
<a href="javascript:void(0)" id="button" class="menu_toggle_container">
<span class="menu_toggle"></span>
</a>
<ul class="menu">
<li>Products</li>
<li>Services</li>
<li>Gallery</li>
<li>About</li>
</ul>
</div>
My css is:
#nav{
background-color:black;
position:absolute;
z-index:115;
top:0;
padding:18px 0 18px 25px;
#include span-columns(12);
-webkit-transition: height 0.5s ease-in-out;
-moz-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
h1{
#include span-columns(5);
letter-spacing: .1em;
}
.menu{
height:0em;
max-height:0%;
overflow:hidden;
}
.open{
height:10em;
max-height:100%;
overflow:hidden;
}
}
Jquery:
$("#button").click(function(){
$(".menu").toggleClass(".open");
});
And here's a live version:Live Example
I have a hamburger icon that when clicked, animates to change to an x. I found the code online and it works fine, but I'm not sure if that's what's messing with the toggle class. When I inspect element, I can see the class of .open being added and removed, but nothing changes.
Hopefully this isn't toooo simple of a solution...Thanks for reading though!
Try without the . in the toggleClass method:
$(".menu").toggleClass("open");
Also, your CSS is a little off. You have an extra closing } after the .open class. Is this a typo on Stack Overflow? The closing } should be after the #nav properties have been declared.
Something like this:
#nav{
background-color:black;
position:absolute;
z-index:115;
top:0;
padding:18px 0 18px 25px;
#include span-columns(12); /* not sure what this does? */
-webkit-transition: height 0.5s ease-in-out;
-moz-transition: height 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
}
h1{
#include span-columns(5); /* not sure what this does? */
letter-spacing: .1em;
}
.menu{
height:0em;
max-height:0%;
overflow:hidden;
}
.open{
height:10em;
max-height:100%;
overflow:hidden;
}
Use this:
$(".menu").toggleClass("open");
Instead of this
$(".menu").toggleClass(".open");
You do not need a dot as a prefix as the method already assumes its argument to be a class.
I was wondering if anyone in SO would be kind enough to assist me. Using only CSS (most-likely CSS3), is there a way to change the inner HTML of a table cell while hovering over the element? I have a numerical table with 49 cells (7 rows by 7 columns), and I would like the number in the first cell of the first row to change from number 1 to number 50, but only when hovering over the number 1 (i.e. - changing back to number 1 when not hovering).
I can do this with a "change innerHTML" function in JavaScript, but only when using a portion of the script inline with my HTML within the body of the document. For various reasons, I cannot use any script or CSS inline, so this method of achieving my goal is not what I want to use (this goes beyond semantic reasons). I would really rather avoid using any script at all for this effect because I think CSS3 handles effects more elegantly and selectively than JavaScript (i.e. - CSS3 Tooltips are much nicer than any script-based Tooltip).
I was just wondering if someone knew how to do this using CSS3 (maybe with the z-index, display: none; or positioning techniques somehow?}. I've played around with it, but I can't seem to figure it out. I would use JavaScript if I didn't have to mix the script in with my Markup, but there doesn't appear to be a way to do that.
Anyone have ideas on how to go about this? Thank you for your time.
Update
#ramsesoriginal
#hiphip
Thanks again. I answered "Yes" to the "Did this answer help you." I believe that is what you meant by "as accepted" ramsesoriginal; right? Thanks hiphip for your answer as well. I was playing around with styles like the code below, but it wasn't quite working out in the table cell the way I had hoped (works nice with isolated images by the way). I think I'll keep working on it though; the more options, the better.
div.up {
margin: 10px 0;
position: relative;
width: 40px;
height: 40px;
border: 1px solid rgb(170, 169, 169);
overflow: hidden;
}
div.up div {
width: 40px;
height: 40px;
font-size: 13px;
padding: 10px;
position: absolute;
top: 0;
left: 0;
text-align: center;
background: rgba(255, 255, 255, 1.000);
-moz-transition: left 1s linear;
-webkit-transition: left 1s linear;
-o-transition: left 1s linear;
transition: left 1s linear;
}
div.up div.one {
z-index: 999;
}
div.up:hover div.one {
-webkit-transition: left 1s linear;
-moz-transition: left 1s linear;
-o-transition: left 1s linear;
transition: left 1s linear;
left: -99px;
}
There are two ways, but both require some additional markup:
<td id="example1" class="hoverer"><span class="nohower">1</span><span class="hover">50</span></td>
with the styling
#example1 .hover{
display:none;
}
#example1 .nohower{
display:block;
}
#example1:hover .hover{
display:block;
}
#example1:hover .nohower{
display:none;
}
or
<td id="example2" class="hoverer"><span data-hover="50">1</span></td>
with the styling
#example2:hover span:after{
content:attr(data-hover);
}
#example2:hover span{
width:1px;
margin-left: -0.5em;/* adjust accoridng to font*/
}
You can view a working demo here: http://jsfiddle.net/ramsesoriginal/W8LQq/
This is not possible.
CSS is only used for styling HTML. It has no access to the attributes of the HTML itself.
No way to do this with only CSS
With positioning:
<style>
#outterdiv {
position: relative;
width:20px;
height:20px;
overflow:hidden;
border: 1px blue solid;
}
#innerdiv:hover {
width:20px;
height:20px;
position: absolute;
top: -20px;
}
</style>
<div id="outterdiv">
<div id="innerdiv">
<div>1</div>
<div>50</div>
</div>
</div>