dinos93
29 Jan 2011, 03:04 PM
Hey Guys,
I'm new here on the forum and I've asked this question in other places but no one can seem to answer it. I found a script that is a slideout menu, which I made to open onClick. I wanted to know how I could change the direction of the box. Kind of like a "drop-up" menu if you will. I do not have much Javascript experience (though I am slowly trying to learn).
(Alternatively, if someone could figure out how this works, or make something like it, it would be unbelievable. (At the bottom of the page there is a menu that slides open when the mouse is hovered over it. I am currently working on a site that this would be perfect for. ) Thank you so much!:)
Here is the script..
var Hide = "";
var varHt = "";
var Ht = "";
var x = 0; // On/Off switch. 0 = off. 1 = on. Keep it at 0.
var y = 10; // Milliseconds. This is explained farther down.
var z = 1; // Pixel increments. This is explained farther down.
var foo = new Array();
var Speed = "";
function setup() {
// These lines allow you to name your <div> whatever you want, extracting your name for use in the rest of the script.
foo = document.getElementsByTagName("div");
Hide = foo[0].id;
// These lines set a couple variables to the height of the hidden object by finding the object's height on-the-fly.
Ht = document.getElementById(Hide).offsetHeight;
varHt = Ht;
Speed = Hide.substring(Hide.lastIndexOf('-')+1); // This line extracts the speed you set in your <div> ID.
// These lines hide the object by giving it a negative margin equal to it's height.
document.getElementById(Hide).style.marginTop = '-'+document.getElementById(Hide).offsetHeight+'px';
document.getElementById(Hide).style.height = document.getElementById(Hide).offsetHeight+'px';
document.getElementById('toggle').style.display = "inline"; // This line makes the toggling mechanism visible. It should be set to display:none within your style sheet by default, so it does not show up on the page when someone is browsing with JavaScript disabled or unavailable.
// This series of statements sets parameters necessary for the toggle() function to determine show/hide speed. y equates to milliseconds and z equates to pixel increments.
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) { // If the script detects the element is hidden...
document.getElementById(Hide).style.marginTop = "+"+varHt+"px"; // Sets the element's negative margin, initially to be equal to its height.
if ((varHt < z) && (varHt !== 0)) { // If the nagetive margin is less than the pixel increment of each jump, and if it is not equal to 0...
varHt = 0; // ...make the negative margin equal to 0. The sliding effect is complete.
} else {
varHt = varHt-z; // Reduces the negative margin by the pixel increment specified by z.
}
if (varHt >= 0) { // If the negative margin is greater than 0 (read: if any of the hidden div is still hidden)...
setTimeout('toggle()',y); // ...do this operation again, waiting y milliseconds before doing so.
}
if (varHt < 0) { // If for some reason the nagative margin pops into the positive realm...
varHt = 0; // ...set it to 0.
x = 1; // Sets a marker that tells the script that the hidden element is now showing.
}
} else { // The script detected x was set to something other than 0, meaning the toggle should be used to hide the object in question, not show it. Therefore...
document.getElementById(Hide).style.marginTop = "-"+varHt+"px"; // Sets the element's negative margin, initially equal to 0, but will increment shortly.
varHt = varHt+z; // Adds negative margin at a rate equal to z.
if (varHt <= Ht) { // As long as the negative margin is less than or equal to the height of the element...
setTimeout('toggle()',y); // ...do this operation again, waiting y milliseconds before doing so.
}
if (varHt > Ht) { // If the negative margin exceeds the height of the object...
varHt = Ht; // ...make the variables equal, to they're ready to toggle again...
document.getElementById(Hide).style.marginTop = "-"+varHt+"px"; // ...and make certain the negative margin and height of the hide/show object are the same.
x = 0; // Sets a marker that tells the script that the hidden element is now hidden.
}
}
}
I'm new here on the forum and I've asked this question in other places but no one can seem to answer it. I found a script that is a slideout menu, which I made to open onClick. I wanted to know how I could change the direction of the box. Kind of like a "drop-up" menu if you will. I do not have much Javascript experience (though I am slowly trying to learn).
(Alternatively, if someone could figure out how this works, or make something like it, it would be unbelievable. (At the bottom of the page there is a menu that slides open when the mouse is hovered over it. I am currently working on a site that this would be perfect for. ) Thank you so much!:)
Here is the script..
var Hide = "";
var varHt = "";
var Ht = "";
var x = 0; // On/Off switch. 0 = off. 1 = on. Keep it at 0.
var y = 10; // Milliseconds. This is explained farther down.
var z = 1; // Pixel increments. This is explained farther down.
var foo = new Array();
var Speed = "";
function setup() {
// These lines allow you to name your <div> whatever you want, extracting your name for use in the rest of the script.
foo = document.getElementsByTagName("div");
Hide = foo[0].id;
// These lines set a couple variables to the height of the hidden object by finding the object's height on-the-fly.
Ht = document.getElementById(Hide).offsetHeight;
varHt = Ht;
Speed = Hide.substring(Hide.lastIndexOf('-')+1); // This line extracts the speed you set in your <div> ID.
// These lines hide the object by giving it a negative margin equal to it's height.
document.getElementById(Hide).style.marginTop = '-'+document.getElementById(Hide).offsetHeight+'px';
document.getElementById(Hide).style.height = document.getElementById(Hide).offsetHeight+'px';
document.getElementById('toggle').style.display = "inline"; // This line makes the toggling mechanism visible. It should be set to display:none within your style sheet by default, so it does not show up on the page when someone is browsing with JavaScript disabled or unavailable.
// This series of statements sets parameters necessary for the toggle() function to determine show/hide speed. y equates to milliseconds and z equates to pixel increments.
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) { // If the script detects the element is hidden...
document.getElementById(Hide).style.marginTop = "+"+varHt+"px"; // Sets the element's negative margin, initially to be equal to its height.
if ((varHt < z) && (varHt !== 0)) { // If the nagetive margin is less than the pixel increment of each jump, and if it is not equal to 0...
varHt = 0; // ...make the negative margin equal to 0. The sliding effect is complete.
} else {
varHt = varHt-z; // Reduces the negative margin by the pixel increment specified by z.
}
if (varHt >= 0) { // If the negative margin is greater than 0 (read: if any of the hidden div is still hidden)...
setTimeout('toggle()',y); // ...do this operation again, waiting y milliseconds before doing so.
}
if (varHt < 0) { // If for some reason the nagative margin pops into the positive realm...
varHt = 0; // ...set it to 0.
x = 1; // Sets a marker that tells the script that the hidden element is now showing.
}
} else { // The script detected x was set to something other than 0, meaning the toggle should be used to hide the object in question, not show it. Therefore...
document.getElementById(Hide).style.marginTop = "-"+varHt+"px"; // Sets the element's negative margin, initially equal to 0, but will increment shortly.
varHt = varHt+z; // Adds negative margin at a rate equal to z.
if (varHt <= Ht) { // As long as the negative margin is less than or equal to the height of the element...
setTimeout('toggle()',y); // ...do this operation again, waiting y milliseconds before doing so.
}
if (varHt > Ht) { // If the negative margin exceeds the height of the object...
varHt = Ht; // ...make the variables equal, to they're ready to toggle again...
document.getElementById(Hide).style.marginTop = "-"+varHt+"px"; // ...and make certain the negative margin and height of the hide/show object are the same.
x = 0; // Sets a marker that tells the script that the hidden element is now hidden.
}
}
}