Jump to content
Katarys

How to draw an invert bar...

Recommended Posts

Hi all,
I'm new in web languages and I need to know how to draw a bar which grow up to the left, now, my bar is growing up to the right and is no problem, but, now I need to invert the bar, and I don't know how...any ideas? I paste my code here:

 

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script>
var valor = 0;
$(document).ready(function()
{
$("#btn1").click(function()
{
valor = parseFloat(document.getElementById("ejehorizontal").value) * 45.3;
if (valor <= 453) {
$("#box").animate({ width: valor + "px" });
}
else {
valor = 0;
$("#box").animate({ width: valor + "px" });
}
});
$("#btn2").click(function()
{
$("#box").animate({ width: "0px" });
});
});
</script>
<style type="text/css">
body {
}
#fondo {
background-image: url(FondoRiesgoLineal.jpg);
height: 185px; width: 500px; margin: auto;
}
#box {
height: 80px;
position:absolute;
margin-top: 47px;
margin-left: 22px;
width: 0px;
background-color:orange;
}
</style>
</head>
<body style="">
<button id="btn1">Animate height</button>
<button id="btn2">Reset height</button>
<input id="ejehorizontal" type="text" value="" />
<div id="fondo">
<div id="box"></div>
</div>
</body>
</html>
thanks all :)

Share this post


Link to post
Share on other sites

I solved it with this...playing with the margin...

 

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script>
var valor = 0;
var defaultmargin = 231;
var newmargin = 0;
$(document).ready(function()
{
$("#btn1").click(function()
{
$("#box").css("display", "inline");
valor = parseFloat(document.getElementById("ejehorizontal").value) * 21.45;
if (valor <= 214.5) {
newmargin = defaultmargin - valor;
$("#box").animate({ width: valor + "px", marginLeft: newmargin + "px" });
}
else {
valor = 0;
$("#box").animate({ width: valor + "px" });
}
});
$("#btn2").click(function()
{
$("#box").animate({ width: "0px" });
});
});
function inicializa() {
$("#box").animate({ width: "1px", marginLeft: defaultmargin + "px" });
}
</script>
<style type="text/css">
body {
}
#fondo {
background-image: url(FondoFactorVictima.jpg);
height: 172px; width: 255px; margin:auto;
}
/*#box {
height: 50px;
position:absolute;
margin-top: 55px;
margin-left: 18.5px;
width: 0px;
background-color:orange;
}*/
#box {
height: 50px;
position:relative;
top: 55px;
left: 0px;
width: 0px;
background-color:orange;
display: none;
}
</style>
</head>
<body onload="inicializa();">
<button id="btn1">Animate height</button>
<button id="btn2">Reset height</button>
<input id="ejehorizontal" type="text" value="" />
<div id="fondo">
<div id="box" ></div>
</div>
</body>
</html>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...