CSS height animating width error - javascript

The problem I have is that on the animation of the cookies warning div i'm trying to just animate the height to do something like this:
Cookies warning on bottom
If you open my website, you can see the animation goes from height 0 to height 75px BUT it also animates from left to right also (width), why is it doing that?
I'm just animating the height not the left to right, or width property.
This is the CSS:
#cookiesWarning {
background: #fff;
-webkit-box-shadow: 0 0 35px #888;
box-shadow: 0 0 35px #888;
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
transition: all 1.5s ease;
height: 0px;
position: fixed!important;
z-index: 99999998!important;
left: 0!important;
width: 100%!important;
bottom: 0;
}
#cookiesWarning.active {
height: 75px;
}
And the script:
$('#cookiesWarning').addClass('active');

http://jsfiddle.net/bZcvM/
transition: height 1s;
will animate just the height.
You may use just pure CSS with a close button (always in pure CSS)
http://jsfiddle.net/bZcvM/2/

An easy solution would to set the height: 75px when then div is hidden and give it top: 100% instead of bottom: 0;
#cookiesWarning {
background: #fff;
-webkit-box-shadow: 0 0 35px #888;
box-shadow: 0 0 35px #888;
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
transition: all 1.5s ease;
height: 0px;
position: fixed!important;
z-index: 99999998!important;
left: 0!important;
width: 100%!important;
top: 100%;
}
#cookiesWarning.active {
top: auto;
bottom: 0
}
that way it will be hidden because it's outside the div

Related

CSS link in overlay taking over a div

I have a <div> that contains a link.
At the bottom right corner of this <div>, I have an overlay element which takes over the whole <div> when hovered.
This overlay element also contains a link.
My problem is that the link in the overlying element is not clickable.
The problem is because I use pointer-events: none; on class .overlay-content, but if I don't use it, both links become dead.
Please see code here:
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 400px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
background-color: #e8c63d;
position: absolute;
transform: rotate(45deg);
right: -320px;
bottom: -320px;
width: 400px;
height: 400px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.amg-corner-button_wrap:hover {
transform: rotate(45deg) scale(4);
}
.overlay-content {
pointer-events: none;
bottom: 0;
color: #333;
left: 0;
opacity: 0;
padding: 30px;
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 8px;
right: 0;
top: 0;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.amg-corner-button_wrap:hover~.overlay-content {
opacity: 1;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<div class="panel panel-default1">
<div class="panel-body">
Link
<div class='amg-corner-button_wrap'></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
Link
</div>
</div>
<!-- panel body -->
</div>
<!-- panel default -->
Also, here is fiddle.
Is there any way that I can achieve this?
can't believe I actually found a pure CSS solution without any drawbacks.
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 400px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
background-color: #e8c63d;
position: absolute;
transform: rotate(45deg);
right: -320px;
bottom: -320px;
width: 400px;
height: 400px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.wrap:hover .amg-corner-button_wrap {
transform: rotate(45deg) scale(4);
}
.overlay-content {
pointer-events: none;
bottom: 0;
color: #333;
left: 0;
opacity: 0;
padding: 30px;
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 8px;
right: 0;
top: 0;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.wrap:hover .amg-corner-button_wrap ~ .overlay-content {
pointer-events: auto;
opacity: 1;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<div class="panel panel-default1">
<div class="panel-body">
Link
<div class="wrap">
<div class='amg-corner-button_wrap'></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
Link
</div>
</div>
</div> <!-- panel body -->
</div> <!-- panel default -->
JSFiddle
Instead of listening to the :hover event on the corner-button, listen to it on a parent element. Since the :hover will be dispatched regardless of the mouse interaction of the elements' children, it is possible to set pointer-events: auto to the children containing links (overlay-content), once the corner-button has been hovered. Now, that the overlay-content is hoverable and since it's a child of the wrapping div, it will cause the :hover to stay active over the whole wrapping div.
I would recommend using JS style swapping instead of CSS pointer events for this problem. You need to trigger one change to your css when you mouse over the bottom corner, and a separate event when you mouse out of the container. I do not believe CSS gives you that kind of conditional control.
Here is half a solution using animations instead of transitions. This works for when you hover on to the amg-corner-button_wrap but not when you move off it. I'm a bit new to animations so hopefully someone here who knows more maybe able to help you with the second half.
There is also a weird visual in here if you hover on the amg-corner-button_wrap and hover off mid transition. The reason for this is that I added a background color to overlay-content so when it's fading in and you mouse off amg-corner-button_wrap the swipe starts to reverse before the fade is complete.
Anyway, hope this 50% solution helps you or others drive this to 100%! Have to run to a meeting, good luck :-)
#keyframes example {
0% {
visibility: hidden;
opacity: 0;
}
1% {
visibility: visible;
opacity: 0;
}
100% {
visibility: visible;
opacity: 1;
}
}
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 200px;
width: 200px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
background-color: #e8c63d;
position: absolute;
transform: rotate(45deg);
right: -120px;
bottom: -120px;
width: 200px;
height: 200px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.overlay-content {
visibility: hidden;
opacity: 0;
background-color: #e8c63d;
bottom: 0;
color: #333;
left: 0;
padding: 30px;
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 8px;
right: 0;
top: 0;
}
.overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.overlay-content~.amg-corner-button_wrap,
.amg-corner-button_wrap:hover {
transform: rotate(45deg) scale(4);
}
.amg-corner-button_wrap:hover~.overlay-content,
.overlay-content:hover {
animation-name: example;
animation-duration: 0.3s;
animation-timing-function: linear;
animation-delay: 0.3s;
animation-fill-mode: both;
}
<div class="panel panel-default1">
<div class="panel-body">
Link
<div class='amg-corner-button_wrap'></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
Link
</div>
</div>
<!-- panel body -->
</div>
<!-- panel default -->
Here's a working fiddle for a css and html only change: https://jsfiddle.net/y2auh7gn/4/.
It separates the link from overlay-content and places it where it's supposed to be with position: absolute. We need to move the link out of overlay-content so that when we hover over it the overlay doesn't disappear.
There's a side-effect where the link pops out with the corner piece.

How: Add text in back-to-top button

thanks for visiting.
I need to know how can I add in my back-to-top button a "text" saying:
"Back to top" or similar.
jQuery(document).ready(function($){
// browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
offset_opacity = 1200,
//duration of the top scrolling animation (in ms)
scroll_top_duration = 700,
//grab the "back to top" link
$back_to_top = $('.cd-top');
//hide or show the "back to top" link
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
if( $(this).scrollTop() > offset_opacity ) {
$back_to_top.addClass('cd-fade-out');
}
});
//smooth scroll to top
$back_to_top.on('click', function(event){
event.preventDefault();
$('body,html').animate({
scrollTop: 0 ,
}, scroll_top_duration
);
});
});
body {
width:100%;
height:1200px;
background-color:#242424;
margin:0;
padding:0;
}
body > div {
width:100%;
height:75px;
background-color:#393939;
text-align:center;
position:fixed;
}
.text {
font-size:40px;
color:white;
line-height:75px;
}
.cd-container {
width: 90%;
max-width: 768px;
margin: 2em auto;
}
.cd-container::after {
content: '';
display: table;
clear: both;
}
.cd-top {
display: inline-block;
height: 40px;
width: 80px;
position: fixed;
bottom: 40px;
right: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: rgba(231, 142, 46, 0.8) url(https://codyhouse.co/demo/back-to-top/img/cd-top-arrow.svg) no-repeat center 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
visibility: visible;
opacity: 1;
}
.cd-top.cd-fade-out {
opacity: .5;
}
.no-touch .cd-top:hover {
color:#1769ff;
opacity: 1;
}
#media only screen and (min-width: 768px) {
.cd-top {
right: 20px;
bottom: 20px;
}
}
}
#media only screen and (min-width: 1024px) {
.cd-top {
height: 60px;
width: 60px;
right: 30px;
bottom: 30px;
}
}
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div>
<span class="text"> Scrolldown.</span>
</div>
BackToToP
<!-- Im using Back to Top from here:
https://codyhouse.co/demo/back-to-top/index.html
-->
</body>
</html>
If you see, I add "BackToTop" text but nothing happend.
I tried using different ways but I dont know how.
Thanks.
You must remove text-indent: 100%.
That will push the text back to it's original position.
EDIT:
If you then want the text to be next to the arrow you can do something like this:
.cd-top {
text-indent: 0;
width: auto;
line-height: 40px;
text-decoration: none;
font-family: Arial;
color: #FFF;
padding: 0 50px 0 20px;
background-position: right 20px center;
}
Combined with your code:
.cd-top {
display: inline-block;
height: 40px;
line-height: 40px;
width: auto;
position: fixed;
bottom: 40px;
right: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
overflow: hidden;
font-family: Arial;
text-indent: 0;
text-decoration: none;
color: #FFF;
white-space: nowrap;
background: rgba(231, 142, 46, 0.8) url(https://codyhouse.co/demo/back-to-top/img/cd-top-arrow.svg) no-repeat right 20px center;
padding: 0 50px 0 20px;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
The css property 'text-indent' is the one giving you the issue. Remove it and you will see the text. A good way to debug this kind of stuff is using developer tools and then inspecting the element.

Unnatural move for navigation menu

I have a problem with my navigation bar because I am using a script to fix its position on top of the site. But base position for navigation bar isn't on top, so I configured it to jump to the top if the user scrolls the website down. This jump to top is really unnatural and I need to make it better than that. I want to make it behave more natural.
My actually scripts:
CSS:
#menu {
text-align: center;
height: 65px;
width: 100%;
z-index: 9999;
position: fixed; // Here i tried replace it for "relative" but after this change script dont work.
background-color: #0F1113;
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: #63842d;
}
.f-nav { // If i change upper css for position relative so i tried used here position: fixed or relative but its still dont work.
top:0;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
}
Javascript:
$("document").ready(function($){
var nav = $('#menu');
$(window).scroll(function () {
if ($(this).scrollTop() > 125) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});
});
This result work but with unnatural move for first scroll than navigation menu jump to top.
I find and tried down script but it destroy my header because i dont know how to configurate for my website and it show my navigation bar only when i scroll up but if i scroll down my website so this navigation bar was hide with down script.
CSS:
body {
margin: 0;
padding: 0;
}
.fxdHdr {
-webkit-transform: translateY(-60px);
-moz-transform: translateY(-60px);
-ms-transform: translateY(-60px);
-o-transform: translateY(-60px);
transform: translateY(-60px);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.28);
}
header {
height: 60px;
background: #d3145a;
position: fixed;
left: 0;
right: 0;
top: 0;
-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 500ms ease;
-ms-transition: -ms-transform 500ms ease;
-o-transition: -o-transformtransform 500ms ease;
transition: transform 500ms ease;
text-align:center;
line-height:60px;
}
Javascript:
var lastScroll = 0;
var scrollToStick = $("header").height();
$(window).on('scroll', function (evt) {
var newScroll = $(window).scrollTop();
$('header').toggleClass('fxdHdr', newScroll > lastScroll && newScroll > scrollToStick);
lastScroll = newScroll;
});
So can you help me make a more natural movement for my navigation bar because jump from base position to top from first scroll is really horrible.
My website:
here
Few changes to be made
Note:
Header height comes to be 160px and you are adding f-nav class after 125px that may create glitch. This will give you smooth transistion.
if ($(this).scrollTop() > 160) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
CSS CHANGES
#menu {
text-align: center;
height: 65px;
width: 100%;
z-index: 9999;
position: relative;
background-color: #0F1113;
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: #63842d;
}
make position relative and add position in f-nav class
.f-nav{
position: fixed !important;
}
If you can or want to use jQuery-UI, one possibilty would be the .switchClass()-function:
JQuery
if ($(this).scrollTop() > 50) {
nav.switchClass( "", "f-nav", 300);
} else {
nav.switchClass( "f-nav", "", 200);
}
CSS
.f-nav {
top:0;
}
Demo

Showing content by sliding left and up

I created a small box while slides to the left and then to the bottom to present the content after hovering the box: http://jsfiddle.net/7n9jxo9c/3/
Now I need to change it in a way, that the box slides to the left and the opens to the top. So the content should be placed above the X.
HTML:
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="item_add">
<header>X</header>
<div class="body">
Content
</div>
</div>
JS:
$(document).on('mouseenter', '.item', function( event ) {
var menue = $('#item_add');
var item = $(this);
menue.css({ "top": item.offset().top + 35 }).show();
});
CSS:
.item {
border: 1px solid #e2e2e2;
margin: 6px;
padding: 0px 10px 0px 10px;
position: relative;
height: 40px;
}
.wrap {
margin-left: 8em;
}
#item_new {
border: 1px dashed #C0C0C0 !important;
background: none repeat scroll 0% 0% #F7F7F7;
display: block;
height: 2.2em;
margin: 6px;
padding: 0px 10px;
position: relative;
}
#item_add {
display: none;
position: absolute;
left: 5.5em;
width: 2em;
border: 1px solid #ddd;
background-color: #f7f7f7;
color: #aaa;
padding: 0px 6px;
-webkit-transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
-moz-transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
-ms-transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
-o-transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
}
#item_add:hover {
width: 7em;
left: .5em;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
#item_add:hover .body {
max-height: 100px;
visibility: visible;
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-ms-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
}
#item_add .body {
max-height: 0;
overflow: hidden;
visibility: hidden;
-webkit-transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
-moz-transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
-ms-transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
-o-transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
}
#item_add:after {
content: '';
width: 0px;
height: 0px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #f7f7f7;
top: 5px;
right: -7px;
position: absolute;
}
#item_add button {
background: none repeat scroll 0px center #fff;
padding: 0.2em 2em;
margin: 3px .2em;
}
use Bottom on #item_add:after instead of Top : http://jsfiddle.net/7n9jxo9c/9/
#item_add:after {
content: '';
width: 0px;
height: 0px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #f7f7f7;
bottom: 5px;
right: -7px;
position: absolute;}
I am not sure if I fully understand your question, but I think you can use bottom attribute instead of top.
I mean something like this:
http://jsfiddle.net/7n9jxo9c/8/

Where is the app.css in DurandalJS that enables modals?

I'm trying to get the modal to work in an app using the DurandalJS (SPA) framework and can't get the modal to display correctly. Currently, when the modal opens, it displays without a blockout and fills the browser horizontally.
("Feeds", the "New Feed" button, and the "Logout" link should be blocked out.)
I have read the docs a few times and the only clue I can find is this note below the "The Default Modal Context" section:
Note: The default modal context has some required css for positioning
which can be found in the app.css file. It assumes that the target
browser supports position: fixed. If your target browsers do not
support this, you should replace the default modal context with a
custom implementation.
It mentions an "app.css" file... I can't find it. I have searched DurandalJS's github repo and the only app.css file doesn't have anything that would really affect this modal (for good or bad). Any clues?
The content of durandal.css should get you started.
https://github.com/BlueSpire/Durandal/blob/master/Content/durandal.css
.modalBlockout {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: black;
opacity: 0;
pointer-events: auto;
-webkit-backface-visibility: hidden;
-webkit-transition: opacity 0.1s linear;
-moz-transition: opacity 0.1s linear;
-o-transition: opacity 0.1s linear;
transition: opacity 0.1s linear;
}
.modalHost {
top: 50%;
left: 50%;
position: fixed;
opacity: 0;
-webkit-backface-visibility: hidden;
-webkit-transition: opacity 0.1s linear;
-moz-transition: opacity 0.1s linear;
-o-transition: opacity 0.1s linear;
transition: opacity 0.1s linear;
}
.messageBox {
background-color: white;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
outline: none;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
min-width: 300px;
}

Categories