We Keep Coding

Prevent position:relative from influencing the width of a child

I have made a Fiddle that should explain the problem quite well (I hope):
JSFiddle
In short: I have a JS tooltip that is not supposed to take its parents width but rather just use auto width (until it reaches max-width and then wrap text). This works fine, unless the parent element has position:relative set, and then the tooltipchild inherits the width. I don't know how to prevent this from happening.
A solution that would work is to set a min-width but that is
not elegant
still doesn't explain why this acts the way it does
looks stupid when the tooltip is 1 or 2 words only
I have to include code for the fiddle link but it's a very extensive fiddle and since I can't pinpoint the issue, I'll just have to put something here (sorry!) - so this snippet will be of little use I'm afraid
<button id="tooltip">Click me</button>
button {
margin-left: 40%;
width: 50px;
position: relative; /* THE OFFENDING PROBLEM*/
}
var tooltip = document.getElementById("tooltip");
tooltip.addEventListener('mouseover', function() {
tlite.show(tooltip, {
text: template,
orientation: "bottom"
})
})

Maybe I found I trick that it works for you. My solution is to create a tooltip with an internal span in it. Now, we can format our new span putting parent span (our old .tlite span) to width:400px that it works like a max-width!
Ok, maybe the description is intricated, but with code become very simple. Follow me! ;)
Let's create our tooltip template with an internal span:
var template = document.createElement('span');
template.innerHTML = "<span class='internal'>ncididunt This tooltip is the.</span>";
Now we can put almost all our tooltip CSS in this new span:
.tlite {
/* here you can leave all the CSS concerning the animations and the positioning */
position: absolute;
z-index: 1000;
display: block;
visibility: hidden;
-webkit-transition: transition .25s ease-out;
transition: opacity .25s ease-out;
opacity: 0;
width: 400px; /* It's a width but it works like a max-width for internal span */
}
.tlite .internal{
display: inline-block; /* This does the trick! Super important! */
padding: .4rem .6rem;
text-align: left;
white-space: normal;
text-decoration: none;
pointer-events: none;
color: white;
border-radius: 5px;
background: green;
}
.tlite .internal::before {
position: absolute;
display: block;
width: 10px;
height: 10px;
content: ' ';
transform: rotate(45deg);
background: inherit;
}
.tlite-n .internal::before {
top: -3px;
left: 50%;
margin-left: -5px;
}
.tlite-nw .internal::before {
top: -3px;
left: 10px;
}
.tlite-ne .internal::before {
top: -3px;
right: 10px;
}
.tlite-s .internal::before {
bottom: -3px;
left: 50%;
margin-left: -5px;
}
.tlite-se .internal::before {
right: 10px;
bottom: -3px;
}
.tlite-sw .internal::before {
bottom: -3px;
left: 10px;
}
.tlite-w .internal::before {
top: 50%;
left: -3px;
margin-top: -5px;
}
.tlite-e .internal::before {
top: 50%;
right: -3px;
margin-top: -5px;
}
Now we can write how much we want and our new <span class="internal"> can grow up to 400px!
Try it:
/* he making of a tooltip is now very convulted because I had to alter a bit to fit the Fiddle; just ignore that*/
var template = document.createElement('span');
template.innerHTML = "<span class='internal'>Only few words.</span>";
var template2 = document.createElement('span');
template2.innerHTML = "<span class='internal'>This tooltip is positioned correctly and now it can grow up to 400px.</span>";
var template3 = document.createElement('span');
template3.innerHTML = "<span class='internal'>This tooltip has the width it should have but is placed wrong.</span>";
var tooltip = document.getElementById("tooltip");
tooltip.addEventListener('mouseover', function() {
tlite.show(tooltip, {
text: template,
orientation: "bottom"
})
})
tooltip.addEventListener('mouseleave', function() {
tlite.hide(tooltip);
})
var tabletooltip = document.getElementById("tabletooltip");
tabletooltip.addEventListener('mouseover', function() {
tlite.show(tabletooltip, {
text: template2,
orientation: "bottom"
})
})
tabletooltip.addEventListener('mouseleave', function() {
tlite.hide(tabletooltip);
})
var tabletooltip2 = document.getElementById("tabletooltip2");
tabletooltip2.addEventListener('mouseover', function() {
tlite.show(tabletooltip2, {
text: template3,
orientation: "bottom"
})
})
tabletooltip2.addEventListener('mouseleave', function() {
tlite.hide(tabletooltip2);
})
/*LIBRARY */
function tlite(getTooltipOpts) {
document.addEventListener('mouseover', function(e) {
var el = e.target;
var opts = getTooltipOpts(el);
if (!opts) {
el = el.parentElement;
opts = el && getTooltipOpts(el);
}
opts && tlite.show(el, opts, true);
});
}
tlite.show = function(el, opts, isAuto) {
opts = opts || {};
(el.tooltip || Tooltip(el, opts)).show();
function Tooltip(el, opts) {
var tooltipEl;
var showTimer;
var text;
el.addEventListener('mousedown', autoHide);
el.addEventListener('mouseleave', autoHide);
function show() {
if (opts['text']) {
text = opts['text'].innerHTML
} else {
text = ' ';
}
text && !showTimer && (showTimer = setTimeout(fadeIn, isAuto ? 150 : 1))
}
function autoHide() {
tlite.hide(el, true);
}
function hide(isAutoHiding) {
if (isAuto === isAutoHiding) {
showTimer = clearTimeout(showTimer);
tooltipEl && el.removeChild(tooltipEl);
tooltipEl = undefined;
delete el.tooltip; //experimental addition for the angular library version of the tooltip
}
}
function fadeIn() {
if (!tooltipEl) {
tooltipEl = createTooltip(el, text, opts);
}
}
return el.tooltip = {
show: show,
hide: hide
};
}
function createTooltip(el, text, opts) {
/*console.log('create')*/
var tooltipEl = document.createElement('span');
var grav = opts.grav || 'n';
tooltipEl.className = 'tlite ' + (grav ? 'tlite-' + grav : '');
tooltipEl.innerHTML = text;
el.appendChild(tooltipEl);
var arrowSize = 10;
var top = el.offsetTop;
var left = el.offsetLeft;
if (tooltipEl.offsetParent === el) {
top = left = 0;
}
var width = el.offsetWidth;
var height = el.offsetHeight;
var tooltipHeight = tooltipEl.offsetHeight;
var tooltipWidth = tooltipEl.offsetWidth;
var centerEl = left + (width / 2);
var vertGrav = grav[0];
var horzGrav = grav[1];
tooltipEl.style.top = (
vertGrav === 's' ? (top - tooltipHeight - arrowSize) :
vertGrav === 'n' ? (top + height + arrowSize) :
(top + (height / 2) - (tooltipHeight / 2))
) + 'px';
tooltipEl.style.left = (
horzGrav === 'w' ? left :
horzGrav === 'e' ? left + width - tooltipWidth :
vertGrav === 'w' ? (left + width + arrowSize) :
vertGrav === 'e' ? (left - tooltipWidth - arrowSize) :
(centerEl - tooltipWidth / 2)
) + 'px';
tooltipEl.className += ' tlite-visible';
return tooltipEl;
}
};
tlite.hide = function(el, isAuto) {
el.tooltip && el.tooltip.hide(isAuto);
};
if (typeof module !== 'undefined' && module.exports) {
module.exports = tlite;
}
button {
margin-left: 40%;
width: 50px;
position: relative; /* NOW, NO PROBLEM! ;) */
}
table {
margin-left: 30%;
}
#tabletooltip {
position: relative;
}
/* library css */
.tlite {
position: absolute;
z-index: 1000;
display: block;
visibility: hidden;
-webkit-transition: transition .25s ease-out;
transition: opacity .25s ease-out;
opacity: 0;
width: 400px;
}
.tlite .internal{
display: inline-block;
padding: .4rem .6rem;
text-align: left;
white-space: normal;
text-decoration: none;
pointer-events: none;
color: white;
border-radius: 5px;
background: green;
}
/*
tables need an extra class for the positioning of the tooltip
*/
.tlite-table tr td,
.tlite-table tr th {
position: relative;
}
.tlite-visible {
visibility: visible;
opacity: 1;
}
.tlite .internal::before {
position: absolute;
display: block;
width: 10px;
height: 10px;
content: ' ';
transform: rotate(45deg);
background: inherit;
}
.tlite-n .internal::before {
top: -3px;
left: 50%;
margin-left: -5px;
}
.tlite-nw .internal::before {
top: -3px;
left: 10px;
}
.tlite-ne .internal::before {
top: -3px;
right: 10px;
}
.tlite-s .internal::before {
bottom: -3px;
left: 50%;
margin-left: -5px;
}
.tlite-se .internal::before {
right: 10px;
bottom: -3px;
}
.tlite-sw .internal::before {
bottom: -3px;
left: 10px;
}
.tlite-w .internal::before {
top: 50%;
left: -3px;
margin-top: -5px;
}
.tlite-e .internal::before {
top: 50%;
right: -3px;
margin-top: -5px;
}
<h3>
Any object that has position:relative has troubles with the width of the tooltip. EX:
</h3>
<button id="tooltip">Click me</button>
<p>
Remove the position and it works as intended.
</p>
<h3>
BUT for some situations, I need position:relative, otherwise the tooltip is displayed at the wrong place. EX:
</h3>
<table style="width:25%">
<tr>
<th>titel1</th>
<th>title2</th>
</tr>
<tr>
<td id="tabletooltip">tooltip with position:relative</td>
<td id="tabletooltip2">tooltip without position:relative</td>
</tr>
</table>

make circle elements rotate in perspective

Fiddle link
I am trying to make this circle in perspective(check fiddle link). I tried the css property but it shows unusual behaviour.
/*
using:
circular positioning code:
http://stackoverflow.com/a/10152437/1644202
point at:
http://pointat.idenations.com/api
depends on:
jquery
https://github.com/thomas-dotworx/jqrotate (pointat)
*/
function createFields() {
$('.field').remove();
var container = $('#container');
for(var i = 0; i < +$('input:text').val(); i++) {
$('<div/>', {
'class': 'field',
'text': i + 1,
}).appendTo(container);
}
}
function distributeFields(deg) {
deg = deg || 0;
var radius = 200;
var fields = $('.field:not([deleting])'), container = $('#container'),
width = container.width(), height = container.height(),
angle = deg || Math.PI*3.5, step = (2*Math.PI) / fields.length;
fields.each(function() {
var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).width()/2);
var y = Math.round(height/2 + radius * Math.sin(angle) - $(this).height()/2);
if(window.console) {
console.log($(this).text(), x, y);
}
$(this).css({
left: x + 'px',
top: y + 'px'
});
angle += step;
});
}
$('input').change(function() {
createFields();
distributeFields();
initPointAt();
});
var timer = null,
timer2 = null;
$('#addone').click(function() {
// do not append to current, otherwise you see it moving through the container
$('.field').addClass('moveAni');
$('<div/>', {
'class': 'field',
'text': $('.field').length +1
})
.css({
left: $('#container').width()/2-25 + 'px',
top: $('#container').height()/2-25 + 'px'})
.addClass('moveAni')
.appendTo('#container')
.pointat({
target: "#center",
defaultDirection: "down"
});
distributeFields();
// without css:
//$('.field').pointat("updateRotation");
// with css: for css move animation
clearInterval(timer); clearTimeout(timer2);
timer = setInterval(function() {
$('.field').pointat({
target: "#center",
defaultDirection: "down"
}); // does not seem to update correctly: .pointat("updateRotation")
}, 20);
timer2 = setTimeout(function() {
clearInterval(timer);
}, 420); // css animation timeout, interval +1 extra to update after the ani
// update input field
$('input:text').val($('.field').length);
});
$('#delone').click(function() {
$('#container .field:not([deleting]):last')
.attr('deleting', 'true')
.css({
left: $('#container').width()/2-25 + 'px',
top: $('#container').height()/2-25 + 'px'
})
.fadeOut(400, function() {
$(this).remove();
});
// do distribiution as if the currently out-animating fields are gone allready
distributeFields();
clearInterval(timer); clearTimeout(timer2);
timer = setInterval(function() {
$('.field').pointat({
target: "#center",
defaultDirection: "down"
}); // does not seem to update correctly: .pointat("updateRotation")
}, 20);
timer2 = setTimeout(function() {
clearInterval(timer);
}, 420); // css animation timeout, interval +1 extra to update after the ani
// update input field
$('input:text').val($('.field:not([deleting])').length); // update yet
});
createFields();
distributeFields();
initPointAt();
function initPointAt() {
$('.field').pointat({
target: "#center",
defaultDirection: "down",
xCorrection: -20,
yCorrection: -20
});
}
body { padding: 2em; }
#container { width: 600px; height: 600px; border: 1px solid #000; position: relative; border-radius: 50%;}
#center { width: 10px; height: 10px; position: absolute; left: 295px; top: 295px; background: #000; border-radius: 50%; }
.field { position: absolute; background: #f00; }
#crosshair-x { width: 600px; height: 1px; background: #000; position: absolute; left: 0; top: 300px; }
#crosshair-y { width: 1px; height: 600px; background: #000; position: absolute; left: 300px; top: 0; }
.field {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
}
.moveAni {
transition: left 400ms ease-out, top 400ms ease-out;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//pointat.idenations.com/jquery.pointat.min.js"></script>
<script src="//pointat.idenations.com/jquery.rotate-1.0.1.min.js"></script>
Number of fields: <input type="text" value="4" />
<button id="addone">++</button>
<button id="delone">--</button>
<div id="container">
<div id="center"></div>
<div id="crosshair-x"></div>
<div id="crosshair-y"></div>
</div>
Then i inserted an image tad inside container and tried to add field inside image tag.
I achieved this using three.js but don't want to do this in it because it takes too much time to load.

Wrap your container in another div you apply perspective to. The perspective must be applied to the parent, not to the element itself.
Updated Fiddle link : http://jsfiddle.net/w840vkbL/1/
#perspective {
perspective: 500px;
width: 150px;
}
#container {
transform: rotateY(40deg);
background: lightblue;
height: 150px;
}
<div id="perspective">
<div id="container">
<h3>SOME PERSPECTIVE CONTENT</h3>
</div>
</div>

Incremental Shrink on Animated Nav Bar

I have created a fixed, animated nav bar that shrinks on scroll. Currently, it shrinks from 150 to 100 if the ypos > 10.
However, I would like to add a second stage to the shrink. So if ypos > 10 but < 40, it executes state 1 and, if it is greater than 40 it executes state 2 which will be a shrink from 100 to 50.
Problem: I can get the first stage working, but I am not sure how to watch for the second state of the shrink or how to add the second class that changes the first.
function shrink()
{
ypos = window.pageYOffset;
var topBar = document.getElementById("Top-Bar");
if(ypos > 10 && ypos < 39)
{
topBar.classList.add("shrink");
}
else if(ypos > 40)
{
topBar.classList.add("secondShrink");
}
else
{
topBar.classList.remove("shrink");
topBar.classList.add("secondShrink");
}
};
window.addEventListener("scroll", shrink)
#Top-Bar
{
height: 150px;
width: 100%;
background-color: #ccc;
display: flex;
justify-content: center;
align-items: center;
transition: all .2s ease;
position: fixed;
z-index: 2;
}
#Top-Bar.shrink
{
height: 100px;
transition: all .2s ease;
}
#Top-Bar.shrink.secondShrink
{
height: 50px;
}
.content
{
content: "";
height: 1200px;
position: relative;
z-index: 1;
}
<div id="Top-Bar">
<h1>Site Title</h1>
</div>
<div class="content"></div>
I am attempting to recreate the effect from the following page: http://www.newmediacampaigns.com/blog/responsive-site-header

As I mentioned in the comments:
On the very first scroll of the page at yPos 0, you add secondShrink to the top bar. At no point do you ever remove it, so from here on out, the top bar will always have .secondShrink. Because of this, normal .shrink will never get hit.
I've modified your code below so that only one shrink at a time is attached to the top bar. Additionally, your if and if else don't account for anything from 1-10, or 39-40. Conveniently enough, one mouse wheel click, or one down-arrow click is exactly 40 pixels.
Check out this cleaned up version:
function shrink()
{
ypos = window.pageYOffset;
var topBar = document.getElementById("Top-Bar");
if(ypos > 0 && ypos <= 40)
{
topBar.classList.remove("secondShrink");
topBar.classList.add("shrink");
}
else if(ypos > 40)
{
topBar.classList.add("secondShrink");
}
else //ypos is 0
{
topBar.classList.remove("shrink");
topBar.classList.remove("secondShrink");
}
};
window.addEventListener("scroll", shrink)
#Top-Bar
{
height: 150px;
width: 100%;
background-color: #ccc;
display: flex;
justify-content: center;
align-items: center;
transition: all .2s ease;
position: fixed;
z-index: 2;
}
#Top-Bar.shrink
{
height: 100px;
transition: all .2s ease;
}
#Top-Bar.secondShrink
{
height: 50px;
}
.content
{
content: "";
height: 1200px;
position: relative;
z-index: 1;
}
<div id="Top-Bar">
<h1>Site Title</h1>
</div>
<div class="content"></div>

Creating a map with inclined view without using WebGL? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to create a map viewer, which views a map from some angle. It is obvious how to create it, if angle is 90 degrees (like in google maps). However, I want an angle less than 90 and without using WebGL. Like this:
Maybe there are some solutions, hacks and tricks to do that using CSS or canvas?
Thanks!

Used JavaScript only for navigation by buttons and window edges. Requires some configuration for your screen display: just find commends beginning with Adjust
var mapWidth = -4500 + 900, // #Adjust: the same as #second width
mapHeight = -2234 + 600, // #Adjust: the same as #second height
$map;
function moveScreen(dx, dy) {
var positionX = $map.css("backgroundPositionX"),
positionY = $map.css("backgroundPositionY");
positionX = parseInt(positionX.substring(0, positionX.length - 2)) + dx;
positionY = parseInt(positionY.substring(0, positionY.length - 2)) + dy;
if (positionX < mapWidth) {
positionX = mapWidth;
}
if (positionX > 0) {
positionX = 0;
}
if (positionY < mapHeight) {
positionY = mapHeight;
}
if (positionY > 0) {
positionY = 0;
}
$map.css("backgroundPositionX", positionX + "px");
$map.css("backgroundPositionY", positionY + "px");
}
$(document).ready(function(){
$map = $("#second");
var moverLeft = null, moverUp = null, moverRight = null, moverDown = null;
var clearMover = function(code) {
if (code == 37) {
clearInterval(moverLeft);
moverLeft = null;
}
if (code == 38) {
clearInterval(moverUp);
moverUp = null;
}
if (code == 39) {
clearInterval(moverRight);
moverRight = null;
}
if (code == 40) {
clearInterval(moverDown);
moverDown = null;
}
}
var moveScreenTop = function(){
if (moverUp == null) {
moverUp = setInterval(function(){ moveScreen(0, 10)}, 10);
}
};
var moveScreenBottom = function(){
if (moverDown == null) {
moverDown = setInterval(function(){ moveScreen(0, -10) }, 10);
}
};
var moveScreenLeft = function(){
if (moverLeft == null) {
moverLeft = setInterval(function(){ moveScreen(10, 0) }, 10);
}
};
var moveScreenRight = function(){
if (moverRight == null) {
moverRight = setInterval(function(){ moveScreen(-10, 0) }, 10);
}
};
$("#button_top").hover(moveScreenTop, function(){clearMover(38);});
$("#button_bottom").hover(moveScreenBottom, function(){clearMover(40);});
$("#button_left").hover(moveScreenLeft, function(){clearMover(37);});
$("#button_right").hover(moveScreenRight, function(){clearMover(39);});
$("#button_left_top").hover(function(){moveScreenLeft(); moveScreenTop();}, function(){clearMover(37);clearMover(38)});
$("#button_right_top").hover(function(){moveScreenRight(); moveScreenTop();}, function(){clearMover(39);clearMover(38)});
$("#button_right_bottom").hover(function(){moveScreenRight(); moveScreenBottom();}, function(){clearMover(39);clearMover(40)});
$("#button_left_bottom").hover(function(){moveScreenLeft(); moveScreenBottom();}, function(){clearMover(37);clearMover(40)});
$(document).keyup(function(e){
clearMover(e.which);
});
$(document).keydown(function(e){
if (e.which == 37) {
moveScreenLeft();
}
if (e.which == 38) {
moveScreenTop();
}
if (e.which == 39) {
moveScreenRight();
}
if (e.which == 40) {
moveScreenBottom();
}
});
});
body {
margin: 0;
overflow: hidden;
}
#first {
/* Adjust perspective for your screen */
-moz-perspective: 600px;
-moz-perspective-origin: 50%;
-webkit-perspective: 600px;
-webkit-perspective-origin: 50%;
perspective: 600px;
perspective-origin: 50%;
width: 100%;
height: 100%;
}
#second {
margin: 0 auto;
/* Adjust width and height for your screen */
width: 900px;
height: 600px;
background: url("http://img2.wikia.nocookie.net/__cb20131223222429/althistory/images/archive/b/bb/20140706210315!World_Map_(Ranjit_Singh_Lives).png") 0px 0px;
/* Adjust translateZ for your screen */
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(260px) rotateX( 20deg );
-moz-transform: translateZ(260px) rotateX( 20deg );
transform: translateZ(260px) rotateX( 20deg );
}
.button_edge, .button_corner {
opacity: 0.1;
background-color: #999999;
position: fixed;
}
#button_top {
height: 30px;
left: 30px;
right: 30px;
top: 0px;
}
#button_bottom {
height: 30px;
left: 30px;
right: 30px;
bottom: 0px;
}
#button_left {
width: 30px;
left: 0px;
top: 30px;
bottom: 30px;
}
#button_right {
width: 30px;
right: 0px;
top: 30px;
bottom: 30px;
}
.button_corner {
width: 30px;
height: 30px;
}
#button_left_top {
left: 0px;
top: 0px;
}
#button_right_top {
right: 0px;
top: 0px;
}
#button_right_bottom {
right: 0px;
bottom: 0px;
}
#button_left_bottom {
left: 0px;
bottom: 0px;
}
.tip {
opacity: 0.9;
color: white;
background-color: #666666;
padding: 10px;
font-size: 14px;
width: 200px;
position: fixed;
left: 45%;
bottom: 50px;
}
.tip:hover {opacity: 0.2;}
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<div id="first">
<div id="second"></div>
</div>
<div class="button_edge" id="button_top"></div>
<div class="button_edge" id="button_bottom"></div>
<div class="button_edge" id="button_left"></div>
<div class="button_edge" id="button_right"></div>
<div class="button_corner" id="button_left_top"></div>
<div class="button_corner" id="button_right_top"></div>
<div class="button_corner" id="button_right_bottom"></div>
<div class="button_corner" id="button_left_bottom"></div>
<div class="tip">Use arrow buttons or mouse for navigation</div>
P.S.: Of course it is not a final version: it needs to adjust user's screen automatically, but I like the current version).

How to rotate a chart 90 degrees including the text values?

I have the following progress bar, but I'd like it to go vertically instead of horizontally. In other words, I'd like to flip it 90 degrees and have the text flipped by 90 degrees as well
See my code below, as well as my code pen here:
http://codepen.io/chriscruz/pen/jPGMzW
How would I rotate this chart as well as the text value?
HTML
<!-- Change the below data attribute to play -->
<div class="progress-wrap progress" data-progress-percent="50">
<div class="progress-bar-state progress">50</div>
</div>
CSS
.progress {
width: 100%;
height: 50px;
}
.progress-wrap:before {
content: '66';
position: absolute;
left: 5px;
line-height: 50px;
}
.progress-wrap:after {
content: '$250,000';
right: 5px;
position: absolute;
line-height: 50px;
}
.progress-wrap {
background: #f80;
margin: 20px 0;
overflow: hidden;
position: relative;
}
.progress-wrap .progress-bar-state {
background: #ddd;
left: 0;
position: absolute;
top: 0;
line-height: 50px;
}
Javascript
// on page load...
moveProgressBar();
// on browser resize...
$(window).resize(function() {
moveProgressBar();
});
// SIGNATURE PROGRESS
function moveProgressBar() {
console.log("moveProgressBar");
var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
var getProgressWrapWidth = $('.progress-wrap').width();
var progressTotal = getPercent * getProgressWrapWidth;
var animationLength = 2500;
// on page load, animate percentage bar to data percentage length
// .stop() used to prevent animation queueing
$('.progress-bar-state').stop().animate({
left: progressTotal
}, animationLength);
}

CSS
.progress {
height: 500px;
width: 50px;
}
.progress-wrap:before {
content: '66';
position: absolute;
top: 5px;
line-height: 50px;
}
.progress-wrap:after {
content: '$250,000';
bottom: 5px;
position: absolute;
line-height: 50px;
}
.progress-wrap {
background: #f80;
margin: 20px 0;
overflow: hidden;
position: relative;
}
.progress-wrap .progress-bar-state {
background: #ddd;
left: 0;
position: absolute;
top: 0;
line-height: 50px;
}
Javascript
moveProgressBar();
// on browser resize...
$(window).resize(function() {
moveProgressBar();
});
// SIGNATURE PROGRESS
function moveProgressBar() {
console.log("moveProgressBar");
var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
var getProgressWrapWidth = $('.progress-wrap').height();
var progressTotal = getPercent * getProgressWrapWidth;
var animationLength = 2500;
// on page load, animate percentage bar to data percentage length
// .stop() used to prevent animation queueing
$('.progress-bar-state').stop().animate({
top: progressTotal
}, animationLength);
}
Pretty much its just switching the height and widths as well as the lefts with tops and rights with bottoms.

You can rotate text or anything else using this css rule.
transform: rotate(90deg); /* this is the rotation */
Use -90deg to rotate the other way.