I am trying to make a bar chart and the bar animates from top to bottom right now, but I want it to animate from bottom to top. How do I get it go from bottom to top?
CSS
.bar {
width:50px;
height:250px;
list-style-type:none;
}
.bar p {
background-color:#63F;
}
.bar span {
padding-left:15px;
left:100%;
}
#content ul {
list-style-type:none;
}
#content ul li {
float:left;
margin:50px;
}
HTML
<div id="content">
<ul>
<li>
<div class="bar">
<p><span>50%</span></p>
</div><br>
Freshmen
</li>
</ul>
</content>
Javascript
<script src="../../jquery-1.6.4.min.js"></script>
$(document).ready(function(){
$(".bar").each(function(){
var length = $(this).find("span").html();
$(this).find("p").delay(500).animate({'height':length},3500,function(){$(this).find("span").fadeIn(1000);
});
});
});
"click here to see it in jsfiddle"
You can define position:absolute to your bar. Write like this:
.bar {
width:50px;
height:250px;
list-style-type:none;
position:relative;
}
.bar p {
background-color:#63F;
position:absolute;
bottom:0;
left:0;
}
Check this http://jsfiddle.net/6zqSS/1/
http://jsfiddle.net/t4THf/5/
CSS
.perfect
{
padding-top:30px;
width:500px;
height:300px;
position:relative;
background-color:#efefef;
}
.perfect .bar
{
float:left;
position:relative;
width:40px;
height:100%;
margin-left:5px;
}
.perfect .bar .slideup
{
position:absolute;
bottom:0px;
width:40px;
background-color:#fff000;
border:1px solid #000;
}
.perfect .bar .slideup span
{
display:block;
position:absolute;
margin:5px;
top:-30px;
}
HTML
<div class="perfect">
<div class="bar">
<div class="slideup">
<span>20%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>30%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>10%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>70%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>100%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>50%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>60%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>55%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>70%</span>
</div>
</div>
<div class="bar">
<div class="slideup">
<span>70%</span>
</div>
</div>
</div>
JS
$(function(){
$(".bar").each(function(){
var length = $(this).find("span").html();
$(this).find(".slideup").delay(500).animate({'height':length},
"slow",function(){$(this).find("span").fadeIn(1000);
});
});
});
Click here for demo
You could also achieve this using css keyframes, for example for webkit http://jsfiddle.net/kudoslabs/YddaY/
css
dl{ position: relative ; height: 200px ; }
dt,dd{ position: absolute ; }
dd{ height: 70% ; width: 30px ; background: grey ; bottom: 20px ; -webkit-animation: animate-bar 1.25s 1 linear; }
dt{ bottom: 0 ; }
#-webkit-keyframes animate-bar{
0% {height: 0% ; }
}
html
<dl>
<dt>Freshman</dt>
<dd>70%</dd>
</dl>
http://jsfiddle.net/chovy/6zqSS/2/
.bar {
position: relative;
}
.bar p {
position: absolute;
bottom: 0;
}
Use keyframes to animate the css property, e.g. width
Once you set the width of your element (e.g. div) the animation will kick in
.animated-bar {
animation: animateBar 0.25s ease-in;
#keyframes animateBar {
0% {
width: 0;
}
}
}
<div class="animated-bar" style="width: 200px"><div>
Related
I have a background image and another image element as needle. So you will see 3 tabs above the snippet page. My goal is to change the position of the needle when you click to the buttons. But there are some problems like if you click 2nd or 3th tab first, the needle moves wrong direction.
And if you move between 3th and 1st tabs the bottom of needle is moving out of the black little circle.
How can I achieve my purpose without any visual errors? Maybe some other way to achieve this?
function asama3() {
document.getElementById("ibre").style.transform = "rotate(-68deg)";
document.getElementById("ibre").style.left = "210px";
document.getElementById("ibre").style.top = "178px";
}
function asama2() {
document.getElementById("ibre").style.transform = "rotate(-107deg)";
document.getElementById("ibre").style.left = "157px";
document.getElementById("ibre").style.top = "180px";
}
function asama1() {
document.getElementById("ibre").style.transform = "rotate(-145deg)";
document.getElementById("ibre").style.left = "113px";
document.getElementById("ibre").style.top = "211px";
}
#ibre {
width:150px;
position: absolute;
left: 100px;
top: 258px;
transition: all 1s;
}
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;"><h1 onclick="asama1()">1. aşama</h1></div>
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;"><h1 onclick="asama2()">2. aşama</h1></div>
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;"><h1 onclick="asama3()">3. aşama</h1></div>
<div style="clear:both;"></div>
<div style=" background-image: url('https://i.hizliresim.com/WNguZF.png'); background-repeat:no-repeat; height:281px; width:500px;">
<div style=""><img id="ibre" style="" src="https://i.hizliresim.com/Hmuavw.png"></div>
</div>
As it rotates at the center, you can create a hidden div and wrap them both in an outer div and makes sure the center lines up with the black dot:
function asama3() {
document.getElementById("outer").style.transform = "rotate(68deg)";
}
function asama2() {
document.getElementById("outer").style.transform = "rotate(107deg)";
}
function asama1() {
document.getElementById("outer").style.transform = "rotate(145deg)";
}
#outer {
display: flex;
width: 300px;
height: 5px;
position: absolute;
left: 108px;
top: 278px;
transition: all 1s;
}
#ibre {
width: 150px;
height: 5px;
border-radius: 5px;
background-color: #070707;
}
#hidden {
width: 150px;
height: 5px;
border-radius: 5px;
background-color: transparent;
}
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;">
<h1 onclick="asama1()">1. aşama</h1>
</div>
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;">
<h1 onclick="asama2()">2. aşama</h1>
</div>
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;">
<h1 onclick="asama3()">3. aşama</h1>
</div>
<div style="clear:both;"></div>
<div style=" background-image: url('https://i.hizliresim.com/WNguZF.png'); background-repeat:no-repeat; height:281px; width:500px;">
<div id="outer">
<div id="ibre"></div>
<div id="hidden"></div>
</div>
</div>
This way it pivots on that dot to wherever you need it pointing.
Something like this, i think
function asama3() {
document.getElementById("ibre").style.transform = "rotate(140deg)";
document.getElementById("ibre").style.left = "250px";
document.getElementById("ibre").style.top = "220px";
}
function asama2() {
document.getElementById("ibre").style.transform = "rotate(80deg)";
document.getElementById("ibre").style.left = "165px";
document.getElementById("ibre").style.top = "190px";
}
function asama1() {
document.getElementById("ibre").style.transform = "rotate(40deg)";
document.getElementById("ibre").style.top = "220px";
document.getElementById("ibre").style.left = "120px";
}
#ibre {
width:150px;
position: absolute;
left: 100px;
top: 270px;
transition: all 1s;
}
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;"><h1 onclick="asama1()">1. aşama</h1></div>
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;"><h1 onclick="asama2()">2. aşama</h1></div>
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;"><h1 onclick="asama3()">3. aşama</h1></div>
<div style="clear:both;"></div>
<div style=" background-image: url('https://i.hizliresim.com/WNguZF.png'); background-repeat:no-repeat; height:281px; width:500px;">
<div style=""><img id="ibre" style="" src="https://i.hizliresim.com/Hmuavw.png"></div>
</div>
I know this is pretty simple but I'm so tired already and I can't seem to find the right keywords to find the solution on a search engine... I'm building a simple front-end only ecommerce website, I've already got the modal up but I need for it to show the right information depending on which product I click... How do I do this?
EDIT: my bad for not putting in the code...
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="modal.css">
<title>Merlin's Potions</title>
</head>
<h3>Potions</h3>
<div class="items">
<div class="item" id="item1">
<img src="../img/aging-potion.png" alt="Potion">
<h6>Aging Potion -</h6> <span>$29.99</span>
</div>
<div class="item" id="item2">
<img src="../img/bulgeye-potion.png" alt="Potion">
<h6>Bulgeye Potion -</h6> <span>$19.99</span>
</div>
<div class="item" id="item3">
<img src="../img/dragon-tonic.png" alt="Potion">
<h6>Dragon Tonic -</h6> <span>$64.99</span>
</div>
<div class="item" id="item4">
<img src="../img/love-potion.png" alt="Potion">
<h6>Love Potion -</h6> <span>$29.99</span>
</div>
<div class="item" id="item5">
<img src="../img/polyjuice-potion.png" alt="Potion">
<h6>Polyjuice Potion -</h6> <span>$99.99</span>
</div>
<div class="item" id="item6">
<img src="../img/sleeping-draught.png" alt="Potion">
<h6>Sleeping Draught -</h6> <span>$14.99</span>
</div>
<div class="bg-modal">
<div class="modal-content">
<div class="close">+</div>
<img src="../img/bulgeye-potion.png" alt="" id="modalImg1">
<div class="modalTxt" id="modalTxt1">
<h4>Aging Potion</h4>
<h5>Use/Effect:</h5>
<p>It affects one's eyes, causing them to swell</p>
<h5>Ingredients:</h5>
<ul>
<li>Beetle eyes</li>
<li>Eel eyes</li>
</ul>
<h5>Price:</h5>
<span class="modalPrice">$29.99</span>
<br>
<span class="buyBtn">ADD TO CART</span>
</div>
</div>
</div>
</html>
<script type="text/javascript">
document.querySelector('.item').addEventListener('click',
function(){
document.querySelector('.bg-modal').style.display = 'flex';
document.querySelector('#modalTxt1').style.display = 'inline-block';
document.querySelector('#modalImg1').style.display = 'inline-block';
});
document.querySelector('.close').addEventListener('click',
function(){
document.querySelector('.bg-modal').style.display = "none";
modaltext.style.display = "none";
});
</script>
.item img{
width:50px;
}
.bg-modal{
display: none;
-ms-align-items: center;
align-items: center;
justify-content: center;
width:100%;
height:100%;
background-color:rgba(0, 0, 0, 0.7);
position: fixed;
top:0;
}
.modal-content {
text-align:left;
position: relative;
border-radius:4px;
width:80%;
height:80%;
background-color:white;
}
.close {
position: absolute;
right:14px;
top:0px;
font-size:42px;
transform:rotate(45deg);
cursor: pointer;
}
.modal-content img {
width:200px;
display:none;
}
.buyBtn {
background-color:red;
padding: 9px 18px;
border-radius:4px;
color:white;
}
.modalPrice{
color:red;
}
.modalTxt{
position: absolute;
}
.modal-content{
width:60%;
}
.modal-content img{
width:56%;
position:absolute;
left:0;
top:0;
bottom:0;
margin:auto;
}
.modalTxt{
right:10%;
top:50px;
}
.modalTxt h4{
font-size:18pt;
}
.modalTxt h5{
font-size:18pt;
margin-top:24px;
}
.modalTxt p {
margin-top:24px;
}
.modalTxt ul {
margin-top:24px;
}
.modalPrice{
font-size:18pt;
line-height:1.5em;
}
.buyBtn{
position: absolute;
bottom:-50px;
}
For example this is your product
<div onCLick="showModal(this)">
<h3>Product Name</h3>
<p>product description</p>
</div>
Now you need the javascript function
function showModal(product) {
// get the product information
var productName = $(product).find("h3").text();
var productDescription = $(product).find("p").text();
var modal = $("#myModal");
// fill the modal with the information
$(modal).find(".modal-title").text(productName);
$(modal).find(".modal-body").text(productDescription);
// show the modal
$("#myModal").modal("show");
}
I need to build a menu inside an element which can have different width and different positions of the page.
I would like to create an edit menu which appears when hover on element,but I need the menu is as wide as the entire page
I need to use position:absolute as not to "disturb" the page layout
this is my fiddle
http://jsfiddle.net/bkoqv52e/
HTML
<div class="container row">
<div class="col-md-6 left">
<nav>nav</nav>
<div class="content">content left</div>
</div>
<div class="col-md-6 right">
<nav>nav</nav>
<div class="content">content-right</div>
</div>
</div>
CSS
.container {
width:100%;
background:#eee;
padding:30px;
}
nav {
height:30px;
background:#999;
display:none;
width:100%;
position:absolute;
top:-30px;
left:0;
}
.left {
background:#ddd;
height:300px;
}
.right {
background:#ccc;
height:200px;
margin-top:100px;
}
.col-md-6:hover > nav {
display:block;
}
Any suggestion is appreciated! thanks
Without js, you can define .left and .right to position static in order to refer nav to container on position relative like:
.container {
width:100%;
background:#eee;
padding:30px;
position: relative;
}
nav {
height:30px;
background:#999;
display:none;
width:100%;
position:absolute;
left:0;
}
.left {
background:#ddd;
height:300px;
position: static;
}
.right {
background:#ccc;
height:200px;
margin-top:100px;
position: static;
}
.col-md-6:hover > nav {
display:block;
}
<div class="container row">
<div class="col-md-6 left">
<nav>nav</nav>
<div class="content">content left</div>
</div>
<div class="col-md-6 right">
<nav>nav</nav>
<div class="content">content-right</div>
</div>
</div>
I have everything working in html and jquery but what I need to do is assign and append a number to make the unique id work with the Repeater field. Here is what I have when it comes the HTML CSS and jquery. Is there a way to append a unique number (such as 1 or 2...) to the end of the #expand id in the html, with jQuery?
Here is the code I have with the help from you guys here:
#expand-1 .bio-pic2, #expand-2 .bio-pic2 {
position:absolute;
top:0;
left:0;
}
#expand-1, #expand-2 {
position:absolute;
width:1000px;
border: 1px solid black;
display: none;
background-color:#ffffff;
z-index:9999;
height:323px;
}
.bio-pic2 img {
position:absolute;
top:0;
left:0;
width:323px;
}
.testimonial {
position:absolute;
top:333px;
left:0;
font-size:15px;
}
.desc {
position:absolute;
top:10px;
left:333px;
}
.bio-pic {
float:left;
cursor: pointer;
z-index:9998;
margin:0 5px 0 0;
}
<div id="expand-1">
<div class="test">
<div class="bio-pic2">
<img src="http://www.brent-ransom.com/photo-img.jpg" />
<div class="bio-nt">
<h2>Name</h2>
<h3>Position</h3>
</div>
</div>
<div class="testimonial">A testimonial!</div>
</div>
<div class="desc">This is a paragraph of text.</div>
</div>
<div id="img-1" class="bio-pic">
<img src="http://www.brent-ransom.com/photo-img.jpg" />
</div>
<div id="expand-2">
<div class="test">
<div class="bio-pic2">
<img src="http://brent-ransom.com/photo2-img.jpg" />
<div class="bio-nt">
<h2>Name</h2>
<h3>Position</h3>
</div>
</div>
<div class="testimonial">A testimonial!</div>
</div>
<div class="desc">This is a paragraph of text.</div>
</div>
<div id="img-2" class="bio-pic">
<img src="http://brent-ransom.com/photo2-img.jpg" />
</div>
$(".bio-pic").click(function (e) {
e.stopPropagation();
//$('.bio-pic2').toggle("slow");
var menu = $("#expand-"+$(this).attr("id").split("-")[1]);
$(menu).show().animate({
width: 500
}, 1000);
});
$("#expand-1, #expand-2").click(function () {
$(this).animate({
width: 0
}, 1000, function () {
$(this).hide();
});
})
Here is a link to jsfiddle http://jsfiddle.net/BrentRansom/h64CZ/4/
to change an id...
var myNum = 3;
$('#expand').attr('id', 'expand' + myNum);
I have an absolute div nested inside a relative div. I want the absolute div's left value to be relative to the grandparent's position, but still allow it's height to be relative to it's parent element. Here is where the page is: http://pixeloft.com/clients/supportcenter/facilitators/
I want the left value of the bio element to always have the left value of the first "Frank Abdale" on click.
Is this possible by setting the div's left value through js?
Here is my code: http://jsfiddle.net/6RQ3u/
HTML:
<div class="person">
<div class="person-info"> <a class="showBio" target="1">
<h4>Name 1</h4></a>
<div class="arrow" id="arrow-1">^</div>
</div>
<div class="bio-wrapper">
<div class="bio" id="bio-box-1"><a class="hideBio" target="1">X</a>Bio</div>
</div>
</div>
<div class="person">
<div class="person-info"> <a class="showBio" target="2">
<h4>Name 2</h4></a>
<div class="arrow" id="arrow-2">^</div>
</div>
<div class="bio-wrapper">
<div class="bio" id="bio-box-2"><a class="hideBio" target="2">X</a>Bio</div>
</div>
</div>
<div class="person">
<div class="person-info"> <a class="showBio" target="3">
<h4>Name 3</h4></a>
<div class="arrow" id="arrow-3">^</div>
</div>
<div class="bio-wrapper">
<div class="bio" id="bio-box-3"><a class="hideBio" target="3">X</a>Bio</div>
</div>
</div>
CSS:
.person a h4 {
color: #000;
font-weight: normal;
font-size: 18px;
line-height: 21px;
width: 100px;
}
.bio {
border-top: 18px solid #387496;
position:absolute;
width:618px!important;
float:left;
background-color:#d8edf4;
padding:15px 170px;
top:284px;
left:-19px;
display:none;
z-index:200;
clear: both;
}
.person {
width:164px;
margin-right:20px;
float:left;
display:inline;
margin-bottom:30px;
position: relative;
}
.person-info {
float:left;
}
.showBio {
float:left;
}
.hideBio {
float:right;
color:#fff!important;
font-size:11px;
position: absolute;
right: 10px;
top: -14px;
}
.arrow {
display:none;
background: url('images/bio-arrow.jpg') no-repeat -2px -6px #fff;
float: left;
display: block;
clear: both;
width: 30px;
height: 15px;
text-indent: -3000px;
}
a{cursor:pointer;}
JQuery:
jQuery(function () {
jQuery('.bio').hide();
jQuery('.arrow').hide();
jQuery('.showBio').click(function () {
jQuery('.bio').hide();
jQuery('.arrow').hide();
jQuery('#bio-box-' + $(this).attr('target')).slideToggle('fast');
jQuery('#arrow-' + $(this).attr('target')).slideToggle('fast');
});
jQuery('.hideBio').click(function () {
jQuery('#bio-box-' + $(this).attr('target')).slideToggle('slow');
jQuery('#arrow-' + $(this).attr('target')).slideUp();
});
});
Thanks for all your help!