Whenever i toggle the class "dark_mode" the border color of the "width_animation" has a transition. Any ideas how could i remove the border transition without affecting the width transition? If i remove the transition of the class "width_animation" the width will go back to initial width after no hover and i don't want that, i want to be smooth.
function darkMode() {
var element = document.body;
element.classList.toggle("dark_mode");
}
.dark_mode {
background-color: #333;
}
.dark_mode .width_animation {
border-color: red;
}
.product_container {
width: 300px;
height: 400px;
background-color: grey;
position: relative;
}
.width_animation {
width: 100px;
height: auto;
color: white;
background-color: black;
border: 5px solid white;
font-size: 30px;
padding-left: 10px;
position: absolute;
right: 0px;
top: 150px;
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
.width_animation:hover {
width: 200px;
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button onclick="darkMode()">DARK MODE</button>
<div class="product_container">
<div class="width_animation">
hover
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Add width to the transition. This will apply transition to the width only. Make sure to add it to both sections. See below.
.width_animation {
width: 100px;
height: auto;
color: white;
background-color: black;
border: 5px solid white;
font-size: 30px;
padding-left: 10px;
position: absolute;
right: 0px;
top: 150px;
-webkit-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
.width_animation:hover {
width: 200px;
-webkit-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
cursor: pointer;
}
I might be reading the question wrong, but as I understand it you only want the border of the "hover" square to be red when Dark Mode is enabled, right? Further, you only want the width transition to occur on-hover, and the two should be mutually exclusive. Is that right?
.width_animation {
width: 100px;
height: auto;
color: white;
background-color: black;
border: 5px solid white;
font-size: 30px;
padding-left: 10px;
position: absolute;
right: 0px;
top: 150px;
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
.dark_mode {
background-color: #333;
}
/* The width_animation color transition will only apply when
the parent object has dark_mode enabled */
.dark_mode > .product_container > .width_animation {
border-color: red;
}
.product_container {
width: 300px;
height: 400px;
background-color: grey;
position: relative;
}
.width_animation:hover {
width: 200px;
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
cursor: pointer;
}
If you wanted to make it so that the "hover" square doesn't shrink after someone exits the hover animation (based on this part of your question "the width will go back to initial width after no hover and i don't want that"), you'll need to make .width_animation:hover a static style like below, and then use some javascript to add/remove the class on hover as desired.
.width_animation {
width: 100px;
height: auto;
color: white;
background-color: black;
border: 5px solid white;
font-size: 30px;
padding-left: 10px;
position: absolute;
right: 0px;
top: 150px;
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
.dark_mode {
background-color: #333;
}
/* The width_animation color transition will only apply when
the parent object has dark_mode enabled */
.dark_mode > .product_container > .width_animation {
border-color: red;
}
.product_container {
width: 300px;
height: 400px;
background-color: grey;
position: relative;
}
.width_animation_hover {
width: 200px;
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
cursor: pointer;
}
function darkMode() {
var element = document.body;
element.classList.toggle("dark_mode");
}
var hover = document.getElementsByClassName("width_animation")[0];
hover.addEventListener("mouseenter", function( event ) {
if ( hover.classList.contains("width_animation_hover") ) {
event.target.classList.remove("width_animation_hover");
} else {
event.target.classList.add("width_animation_hover");
}
})
.width_animation {
-webkit-transition: width 1s ease-in-out, border 0.1s linear;
transition: width 1s ease-in-out, border 0.1s linear;
}
And You have not to write transition into scope of :hover{}. Because your going forward and backward transitions are the same.
Related
Currently I can hover over h1 and it will be underlined, but I want to know if I hover over the parent div can I activate the pseudo after elements of h1?
I am trying to preserve the line width to h1 only. Other methods I've tried will take the full width of the div.
So when hovering over h2 or h3, the underline becomes active on h1.
Is this do-able in CSS only or do I need to use Javascript?
.nav-underline {
position: relative;
display: inline-block;
cursor: pointer;
}
.nav-underline:before, .nav-underline:after {
content: '';
position: absolute;
width: 0%;
height: 3px;
top: 45%;
margin-top: -0.5px;
background: #000;
}
.nav-underline:hover {
letter-spacing: 4px;
transition: .35s;
}
.nav-underline:before {
left: -2.5px;
}
.nav-underline:after {
right: 2.5px;
background: #000;
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav-underline:hover:before {
background: #000;
width: 100%;
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav-underline:hover:after {
background: transparent;
width: 100%;
transition: 0s;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" rel="stylesheet"/>
<a class="imagereveal" href="#" rel="image goes here">
<div class="nav-underline"><h1>Test</h1></div>
<h2>Description</h2>
<h3>Detail</h3>
</a>
https://jsfiddle.net/jvo8wo65/
Since you want the hover state on the parent a.imagereveal to trigger the effect instead of depending on the hover state on .nav-underline itself, you can simply replace all instances of this selector:
.nav-underline:hover
...with this:
.imagereveal:hover .nav-underline
On a side note, you should be using double colons for pseudo-elements, i.e. ::after instead of :after... unless you really need backwards compatibility with IE8 and below.
See proof-of-concept below, or fixed JSfiddle:
.nav-underline {
position: relative;
display: inline-block;
cursor: pointer;
}
.nav-underline::before, .nav-underline::after {
content: '';
position: absolute;
width: 0%;
height: 3px;
top: 45%;
margin-top: -0.5px;
background: #000;
}
.imagereveal:hover .nav-underline {
letter-spacing: 4px;
transition: .35s;
}
.nav-underline::before {
left: -2.5px;
}
.nav-underline::after {
right: 2.5px;
background: #000;
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.imagereveal:hover .nav-underline::before {
background: #000;
width: 100%;
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.imagereveal:hover .nav-underline::after {
background: transparent;
width: 100%;
transition: 0s;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" rel="stylesheet"/>
<a class="imagereveal" href="#" rel="image goes here">
<div class="nav-underline"><h1>Test</h1></div>
<h2>Description</h2>
<h3>Detail</h3>
</a>
yes, you just have to move the hover to the parent element
.imagereveal:hover .nav-underline::before{
background: #000;
width: 100%;
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.imagereveal:hover .nav-underline::after{
right: 2.5px;
background: #000;
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
so far i have a container div that holds a button and when the button is click it creates a div with a set id="newcard" which is resizable (this part works 'correctly'). However, when i incorporate dragging the div element simply does not drag. Any help?
$(function(){
$(".createcard").click(function() {
var domElement = $('<div id="newcard" ></div>');
$('.notecard-container').append(domElement);
});
$('#newcard').draggable();
});
body, html {
margin: 0;
padding: 0;
}
.container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgb(255, 255, 255);
}
.createcard {
bottom: 5%;
left: 5%;
width: 125px;
height: 45px;
background: rgba(255, 255, 255, .0);
position: absolute;
display: block;
border: 1px solid transparent;
outline: none;
font-family: 'Nunito', sans-serif;
font-size: 20px;
font-weight: bold;
-webkit-transition: .4s ease;
-moz-transition: .4s ease;
-o-transition: .4s ease;
-ms-transition: .4s ease;
transition: .4s ease;
transition: .4.0s
}
.createcard:hover {
background: rgba(255, 255, 255, .9);
border-radius: 5px;
border: 1px solid #c0c0c0;
-webkit-transition: .4s ease;
-moz-transition: .4s ease;
-o-transition: .4s ease;
-ms-transition: .4s ease;
transition: .4s ease;
transition: .4.0s
}
#newcard{
position: absolute;
width: 150px;
height: 150px;
min-width:150px;
min-height:150px;
max-width:300px;
max-height:300px;
top:10%;
left:10%;
background: white;
resize: both;
overflow: auto;
}
.notecard-container {
position: absolute;
top: 7%;
left: 2%;
right: 2%;
bottom: 2%;
background: rgb(255, 228, 181);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Nunito"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" href="aos.css">
<meta charset="ISO-8859-1">
<title>Post-it note</title>
</head>
<body>
<div class="container">
<div class="notecard-container">
<button class="createcard" id="createcard">New Card</button>
</div>
</div>
<!-- Input JavaScript and jQuery -->
</body>
</html>
Move the draggable() call into the click handler:
$(function(){
$(".createcard").click(function() {
var domElement = $('<div id="newcard" ></div>');
$('.notecard-container').append(domElement);
$('#newcard').draggable();
});
});
You need to add the draggable() after creating the element.
Here is a jsfiddle example: https://jsfiddle.net/dk341jjv/1/
I am tryig to make nice text field, and I want when user click on it to change background color. But I want to background color slide from left to the right slowly.
It is contact form for wordpress, but I think it does not matter.
So i what I have in my CSS:
.brtel {
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
width: 50px;
}
.brtel:focus {
border-radius: 0px;
border:none;
background:#797d7e;
color: #fff;
width: 200px;
}
Can I fix it in CSS or should I use JS?
You can do it in pure css but you need an image with the color you want as a background.
.brtel {
-webkit-transition: background-size 4s ease-in;
transition: background-size 4s ease-in;
width: 200px;
background-image: url('http://i.imgur.com/9HMnxKs.png');
background-repeat: repeat-y;
background-size: 0% 0%;
}
.brtel:focus {
border-radius: 0px;
border:none;
color: #fff;
background-size: 100% 100%;
}
see this fiddle: https://jsfiddle.net/ym7joe4L/
Edit: spelling
You can use a short code of jquery, like this
$('.animate').mouseenter(function() {
$(this).addClass('filled');
}).mouseout(function() {
$(this).removeClass('filled')
})
And manipulate the filled class by css
.animate{
display: inline-block;
height: auto!important;
width: 200px;
background: #bbb;
position: relative;
}
.animate:before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
background: red;
width: 0;
transition: all .5s ease;
}
.animate.filled:before{
width: 100%;
}
input {
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
width: 100%;
-webkit-appearance: none;
appearance: none;
background: none;
border: none;
}
HTML:
<form>
<div class="animate"><input value="Send" type="submit" class="brtel"></div>
</form>
Check this pen: http://codepen.io/todorutandrei/pen/MeKQze
I've added a transition element to your class, you can see it here https://jsfiddle.net/giuseppe_straziota/dngb5bz2/
transition: width 0.4s ease-in-out, background-color 1.5s ease;
background-color: white;
It make a background transition from white to grey, I hope it was what you desired.
You can achieve this with css only.
<form>
<button type="submit" class="brtel">Send</button>
</form>
.brtel {
position: relative;
}
.brtel:before {
position:absolute;
width: 0;
height: 50px; /* height if input field */
background-color: #666;
display: block;
transition: width .5s ease;
}
.brtel:hover:after {
width: 100%;
}
You can achieve it by CSS only.
Please check the below code.
.brtel {
width: 150px;
}
.brtel:focus {
border-radius: 0px;
border:none;
background:#797d7e;
color: #fff;
animation: equalize .4s 0s 1;
}
#keyframes equalize {
0% {
width: 10px;
}
10% {
width: 20px;
}
20% {
width: 30px;
}
30% {
width: 40px;
}
40% {
width: 50px;
}
50% {
width: 60px;
}
60% {
width: 70px;
}
70% {
width: 80px;
}
80% {
width: 90px;
}
90% {
width: 100px;;
}
100% {
width: 100px;
}
}
<form id="formoid" action="/" title="" method="post">
<div>
<label class="title">First Name</label>
<input type="text" id="name" name="name" class="brtel">
</div>
</form>
I'm trying to create a nav bar which consists of the regular navigation elements and an indication bar which is located below the current page. My goal is to make this bar move under whichever element the user hovers on and automatically resize itself according to a pre-defined size (according to the word length maybe?). I built the nav bar itself, but I'm kind of clueless how to achieve this effect. Should I always calculate the current position of the mouse and add the difference between the current location and the hover location? Regarding to the resizability, this is a secondary goal, less significant.
This is what I've done so far:
Html:
<header class="header">
<div class="logo">
<nav id="nav_bar">
<ul id="nav_ul">
<li>apples</li>
<li>bananas</li>
<li>tomatos</li>
<li>onions</li>
</ul>
<div id="container">
<div id="bar"></div>
</div>
</nav>
</div>
</header>
CSS:
#nav_ul a{
color: #685e6d;
text-decoration: none;
display: inline-block;
-webkit-transition: color 0.4s ease-in-out;
-moz-transition: color 0.4s ease-in-out;
-ms-transition: color 0.4s ease-in-out;
-o-transition: color 0.4s ease-in-out;
transition: color 0.4s ease-in-out;
}
#nav_ul{
display: inline-block;
list-style-type: none;
}
#nav_ul li{
display: inline-block;
position: relative;
left: 90px;
bottom: 30px;
font-size: 19px;
margin-left: 40px;
font-weight: 100;
font-size: 16px;
}
#nav_ul a:hover{
color: #4ad1fd;
}
#container{
position: relative;
left: 167px;
height: auto;
width: 530px;
top: 5px;
}
#bar{
position: absolute;
left: 0;
bottom: 0;
height: 7px;
width: 107px;
background-color: #ffcc00;
border-radius: 3px;
}
JSfiddle
Something like in this image:
You're trying to create a lavalamp menu, checkout the example below...
/* ---- reset ------*/
html, body, div, a {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline; }
html {
line-height: 1; }
/* --- basic styles ----*/
body {
font-family: "Unica One";
font-size: 1.5em;
background: #f2f2f2;
text-shadow: 0 1px 0 white; }
/* --- for this example ----*/
.nav {
text-align: center;
overflow: hidden;
margin: 2em auto;
width: 480px;
position: relative; }
.nav a {
display: block;
position: relative;
float: left;
padding: 1em 0 2em;
width: 25%;
text-decoration: none;
color: #393939;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .7s; }
.nav a:hover {
color: #c6342e; }
.effect {
position: absolute;
left: -12.5%;
-webkit-transition: 0.7s ease-in-out;
-moz-transition: 0.7s ease-in-out;
-o-transition: 0.7s ease-in-out;
-ms-transition: 0.7s ease-in-out;
transition: 0.7s ease-in-out; }
.nav a:nth-child(1):hover ~ .effect {
left: 12.5%; }
.nav a:nth-child(2):hover ~ .effect {
left: 37.5%; }
.nav a:nth-child(3):hover ~ .effect {
left: 62.5%; }
.nav a:nth-child(4):hover ~ .effect {
left: 87.5%; }
/* ----- line example -----*/
.ph-line-nav .effect {
width: 90px;
height: 2px;
bottom: 36px;
background: #c6342e;
box-shadow: 0 1px 0 white;
margin-left:-45px;
}
<div class="ph-line-nav nav">
Home
About
Gallery
Contact
<div class="effect"></div>
</div>
Find more here http://pepsized.com/css-only-lavalamp-like-fancy-menu-effect/
Here's a jQuery solution: (JSFiddle for if the code snippet doesn't work)
function BarMove(el) {
var bar = $('#bar');
var width = el.outerWidth();
var left = el.offset().left;
bar.animate({
width: width,
left: left
});
}
var Current = $('#nav_ul li a.current'); // Set the current page
BarMove(Current);
$('#nav_ul li a').hover(function () {
BarMove($(this));
}, function () {
BarMove(Current);
});
#nav_ul a {
color: #685e6d;
text-decoration: none;
display: inline-block;
-webkit-transition: color 0.4s ease-in-out;
-moz-transition: color 0.4s ease-in-out;
-ms-transition: color 0.4s ease-in-out;
-o-transition: color 0.4s ease-in-out;
transition: color 0.4s ease-in-out;
}
#nav_ul {
display: inline-block;
list-style-type: none;
}
#nav_ul li {
display: inline-block;
position: relative;
left: 90px;
bottom: 30px;
font-size: 19px;
margin-left: 40px;
font-weight: 100;
font-size: 16px;
}
#nav_ul a:hover {
color: #4ad1fd;
}
#container {
position: relative;
left: 0;
height: auto;
width: 530px;
top: 5px;
}
#bar {
position: absolute;
left: 0;
bottom: 0;
height: 7px;
width: 107px;
background-color: #ffcc00;
border-radius: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">
<div class="logo">
<nav id="nav_bar">
<ul id="nav_ul">
<li>apples
</li>
<li>bananas
</li>
<li>tomatos
</li>
<li>onions
</li>
</ul>
<div id="container">
<div id="bar"></div>
</div>
</nav>
</div>
</header>
It's not exact, so you'll need to tweak the numbers but functionality is what you're after as far as I'm aware.
In your CSS, you have #nav_ul a:hover so you could add border-bottom-style: solid; border-color:<color> and you would have a bar appear under your items. It wouldn't slide, or be animated. It will, however, put a colored bar under what ever they are hovering over.
I have this box:
<div class="message_box_red" id="commentForm_error_name" style="width: 409px; height: 0px; border: 0; margin: 0; padding: 0;"></div>
And I would like to make it animate into this style: "border: 2px solid; margin: 1px; padding: 7px; width: 409px;"
And then as well insert some text into it, like this is a test message or something.
try this demo
jQuery :
$(".message_box_red").animate({
"border":"2px solid",
"margin":"1px",
"padding":"7px",
"width":" 409px",
"height":"40px"
},2000,function(){$(this).text("this is a test message")});
Updated Demo
Try this, it uses CSS3 transitions triggered by changing of CSS class via java sscript:
<html>
<head>
<style>
.message_box_red {
width: 409px;
height: 50px;
border: 0;
margin: 0;
padding: 0;
cursor: pointer;
background: red;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
.message_box_red.animate {
border: 2px solid;
margin: 1px;
padding: 7px;
width: 409px;
height: 100px;
background: blue;
color: #fff;
}
</style>
<script>
function change_class(did, content) {
var div_change = document.getElementById(did);
div_change.setAttribute("class", "message_box_red animate");
div_change.innerHTML = content;
}
</script>
</head>
<body>
Click on DIV!
<div class="message_box_red" id="commentForm_error_name" onclick="change_class('commentForm_error_name','this is the future content of DIV...');">
</div>
</body>
</html>
Live example:
http://simplestudio.rs/yard/div_animate/chng_color.html