Forum Moderators: open
Set myself up a ickle site with using the below javascript hides/shows a selected div. Originally this code toggled the div vertically, I managed to get it to work horizontally. However, currently the script opens the div left-to-right, and I need it to open right-to-left.
Javascript:
var Hide = "";
var varHt = 0;
var Ht = "";
var x = 0;
var y = 10;
var z = 4;
var foo = new Array();
var Speed = "";
function setup() {
foo = document.getElementsByTagName("div");
for (i=0;i<foo.length;i++) {
if (foo[i].className == "hidden") {
Hide = foo[i].id;
}
}
Ht = document.getElementById(Hide).offsetWidth;
Speed = Hide.substring(Hide.lastIndexOf('-')+1);
document.getElementById(Hide).style.width = '0px';
document.getElementById('toggle').style.display = 'run-in';if (Speed == 1) { y = 100; z = 1; }
if (Speed == 2) { y = 70; z = 1; }
if (Speed == 3) { y = 40; z = 1; }
if (Speed == 4) { y = 20; z = 1; }
if (Speed == 5) { y = 10; z = 1; }
if (Speed == 6) { y = 10; z = 2; }
if (Speed == 7) { y = 10; z = 4; }
if (Speed == 8) { y = 10; z = 7; }
if (Speed == 9) { y = 10; z = 10; }
}
function toggle() {
if (x === 0) {
document.getElementById(Hide).style.width = varHt+'px';
if (((Ht-varHt) < z) && (varHt !== Ht)) {
varHt = Ht;
} else {
varHt = varHt+z;
}
if (varHt <= Ht) {
setTimeout('toggle()',y);
}
if (varHt > Ht) {
varHt = Ht;
x = 1;
}
} else {
document.getElementById(Hide).style.width = varHt+'px';
varHt = varHt-z;
if ((Ht-varHt) <= Ht) {
setTimeout('toggle()',y);
}
if ((Ht-varHt) > Ht) {
varHt = 0;
document.getElementById(Hide).style.width = varHt+'px';
x = 0;
}
}
}
I've been playing around with this script for about a week now to get it working, but I just cant! Had a good look online and all the scripts do only vertical sliding, not horizontal and definatly not in the way I need it to work!
To make it work horizontally I just find & replaced every mention of the word 'height' to 'width'.
Any help will be greatly appreciated,
MM
In order to simulate a right-to-left sweep, you'll use the same style changes as a right to left. You just add either a margin-left or padding-left to push the div to the right which is slowly reduced until it's back to zero.
So, assuming the <div> is 100px wide and you animate over ten frames, your style settings would change like so:
frame 1: width: 0; margin-left: 100px;
frame 2: width: 10; margin-left: 90px;
frame 3: width: 20; margin-left: 80px;
...
frame 10: width: 100; margin-left: 0px;
It won't be quite "right" though, because the content isn't revealed in a right to left fashion... If you need that, then it'll make more sense to absolutely position a white <div> on top of the actual <div> and animate that shrinking, revealing the content beneath.
var x = 0;
var y = 10;
This starts tight to the left and 10 px from the top (right?) There's no predefined method of getting the calculation of the right edge. You will have to first get the width of the viewport - the methods of which vary from browser to browser - to set the initial X and Y. Or, if it's not from the extreme right, pick an X coordinate at least the final width of the expanding div.
Then as said, you should be able to reverse your methods and directions, but will have to calculate from the top right edge, not top left. A bit more difficult than working with the natural coordinates which start from top left.
Related comparison: Flash AS3 has this one under control as you can just change the point of origin on the stage, making a right-to-left orientation very easy. Does anyone know of a similar methods in JS that might help?
