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
Related
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.
I've created a "loading page" which should be the first page that users see when they connect. It's a simple page with a central bouton that people have to click. Once they do, they access to the rest of the website. All the pages including the loading page are in the same folder. Each page of the site has its own : "XXXXX.html".
So I've created a loader.html page, and implemented a javascript function, that is here :
let introBox = document.getElementById('intro');
introBox.addEventListener('click', function(){
document.location.href = "main.html";
});
#keyframes sectionAnimation{
0%{
transform:scale(1);
}
50%{
transform:scale(1.5);
}
100%{
transform: scale(1);
}
}
html {
border: 0;
margin: 0;
padding: 0;
width: 100%;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*,*:before,*:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
body {
background-color: #fff;
padding: 0;
margin: 0;
height: auto;
width: 100%;
background-repeat: no-repeat;
& img{
width: 50%;
}
}
.loaderbody{
background-image: url('../../Assets/R.png');
}
b {
position: relative;
display: block;
font-family: helvetica neue, helvetica, sans-serif;
line-height: 1.15em;
margin-top: -1.15em;
top: 2.3em;
font-size: 0.67em;
font-weight: 400;
letter-spacing: 0.025em;
opacity: 0.75;
text-align: center;
}
b span {
font-size: 0.785em;
font-weight: 400;
opacity: 0.4;
}
#intro {
width: 200px;
margin:auto;
margin-top:25%;
animation: sectionAnimation 1.5s both infinite;
transform:scale(1);
}
.button {
display: inline-block;
text-decoration: none;
position: relative;
margin-top: 40px;
}
.button .bottom {
position: absolute;
left: 7px;
top: 7px;
width: 100%;
height: 100%;
background-color: #2acdc1;
display: block;
-webkit-transition: all .15s ease-out;
-moz-transition: all .15s ease-out;
-o-transition: all .15s ease-out;
transition: all .15s ease-out;
}
.button .top {
position: relative;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 24px 34px 22px 34px;
border: 2px solid #04049d;
}
.button-dark .top {
border: 2px solid #fff;
}
.button .top .label {
font-family: sans-serif;
font-weight: 600;
color: #04049d;
font-size: 12px;
line-height: 110%;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
-webkit-transition: all .15s ease-out;
-moz-transition: all .15s ease-out;
-o-transition: all .15s ease-out;
transition: all .15s ease-out;
}
.button-dark .top .label {
color: #fff;
}
.button:hover .bottom {
left: 0;
top: 0;
background-color: #f3f3f3;
}
.button:hover .top .label {
color: #2acdc1;
}
.button-border {
position: absolute;
background-color: #2acdc1;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.button:hover .top .button-border-left,.button:hover .top .button-border-right {
height: calc(100% + 2px);
}
.button:hover .top .button-border-top,.button:hover .top .button-border-bottom {
width: calc(100% + 2px);
}
.button-border-left {
left: -2px;
bottom: -2px;
width: 2px;
height: 0;
}
.button-border-top {
left: -2px;
top: -2px;
width: 0;
height: 2px;
}
.button-border-right {
right: -2px;
top: -2px;
width: 2px;
height: 0;
}
.button-border-bottom {
right: -2px;
bottom: -2px;
width: 0;
height: 2px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../Css/main copie.css">
<title>TP</title>
</head>
<body class="loaderbody">
<script type="text/javascript" src="../Js/loader.js"></script>
<section id="intro">
<div id="intro-content" class="center-content">
<div class="center-content-inner">
<div class="content-section content-section-margin">
<div class="content-section-grid clearfix">
<a href="#" class="button nav-link">
<div class="bottom"></div>
<div class="top">
<div class="label">Let's go !</div>
<div class="button-border button-border-left"></div>
<div class="button-border button-border-top"></div>
<div class="button-border button-border-right"></div>
<div class="button-border button-border-bottom"></div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
The element "intro" is my bouton on my loading page. However, when I click on it, I stay on the same URL. I've noticed that when I click on the box it automatically add a "#" at the end of my URL. So I assume the function is kinda working, and my click is detected.
It seems the problem is about the .location.href but I can't get it.
Thank you so much.
There is a missing slash /, your code should look like this:
introBox.addEventListener('click', function(){
document.location.href = "/main.html";
});
If you want to redirect outside your website, you have to add double slash //.
document.location.href = "//google.com";
EDIT: The actual error is on the tag with href="#", change it to "/main.html".
You can remove the listener if you will, it's no longer needed.
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'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.
http://i.imgur.com/SXgTt.png
You see removing these two will make the image work, but it don't stick to the footer when viewed in browser
here's how its look like
http://i.imgur.com/gdBMr.png
and here's the css with html
<style>
body {
text-align: center;
background-color: #080707;
font-family: "Open Sans", sans-serif;
}
.enter {
display: block;
width: 165px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 30px;
border: 2px solid #c52f30;
color: #cf2f32;
margin: 30px auto 0;
text-decoration: none;
position:fixed;
bottom:23px;
}
.enter:hover {
background: #cf2f32;
color: white;
-webkit-transition: background 0.4s ease, color 0.4s ease;
-moz-transition: background 0.4s ease, color 0.4s ease;
-o-transition: background 0.4s ease, color 0.4s ease;
-ms-transition: background 0.4s ease, color 0.4s ease;
transition: background 0.4s ease, color 0.4s ease; }
</style>
<body>
<p><img src="images/fullbg.png" style='width:100%; max-width: 800px;' border="0" alt="Null"></p>
Enter
</body>
I don't think you can use the auto margins trick if the element is set to position fixed. But you can have it this way:
.enter {
display: block;
width: 165px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 30px;
border: 2px solid #c52f30;
color: #cf2f32;
margin: 30px 0 0 -82px;
text-decoration: none;
position:fixed;
left: 50%;
bottom:23px;
}
Just set the left margin to be half of the element's width.
I cant see images, buy you can try;
.enter {
display: block;
width: 165px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 30px;
border: 2px solid #c52f30;
color: #cf2f32;
margin: 0 0 0 -83px;;
text-decoration: none;
position:fixed;
bottom:23px;
left:50%;
}