Showing/Hidding a form onclick?

Michdd · October 23, 2008

How would I use Javascript to show a simple form, for example once they press like "Show Form" It'll show them the form?

RichardRotterdam · October 23, 2008

do you mean something like this?

http://demos.mootools.net/Fx.Slide

Michdd · October 23, 2008

do you mean something like this?

http://demos.mootools.net/Fx.Slide

I'm using that, but do you know what I'd have to change where to make it so the default is closed, not open?

I also have a problem. If I want to use it multiable times on the page, only the first one works. Can I change that?

CroNiX · October 23, 2008

If you initialized the slide with:

var slide = new Fx.Slide('slideID');

you could change it to this:

var slide = new Fx.Slide('slideID').hide();

or

var slide = new Fx.Slide('slideID');
slide.hide();

and it would be hidden on domready (assuming you put this in a domready event).

as far as having multiple slides on a page, its no problem. You just have have to have each section with its own id and initialize each one like you did the first time, but they all have to have their own id.

Michdd · October 24, 2008

If you initialized the slide with:
var slide = new Fx.Slide('slideID');
you could change it to this:
var slide = new Fx.Slide('slideID').hide();
or
var slide = new Fx.Slide('slideID');
slide.hide();
and it would be hidden on domready (assuming you put this in a domready event).

as far as having multiple slides on a page, its no problem. You just have have to have each section with its own id and initialize each one like you did the first time, but they all have to have their own id.

I'm using this for the button:

echo "<input type=\"button\" onclick=\"$('$div').slide('')\" value=\"Sumbit\">";

How would I use that in there?

CroNiX · October 24, 2008

Is this button doing something besides triggering your slide?

Michdd · October 24, 2008

Is this button doing something besides triggering your slide?

Nope. But I need to it show nothing when the page loads, then once you click it shows, at the moment it loads and shows the content, and servers as a toggle, I want the toggle, but I was the start to be not showing anything

R4nk3d · October 24, 2008

i think i remember how to do this using a css div... i hope its not wrong.

<html><head>
<style type="text/css">
#layer {
display: block;
}
</style>
<script type="text/javascript">
function displayDiv(division)
{
var div = document.getElementById(division);
if(div.style.display == "block")
{
div.style.display = "none";
}
else
{
div.style.display = "block";
}
}
</script>
</head>
<body>
<div id="layer">See it now?</div>
<a href="displayDiv('layer');">Hide It</a>
</body>
</html>

yeah! tested it and it works. hope its what ur lookin for

CroNiX · October 24, 2008

echo "<input type=\"button\" onclick=\"$('$div').slide('').close()\" value=\"Sumbit\">";

Michdd · October 24, 2008

echo "<input type=\"button\" onclick=\"$('$div').slide('').close()\" value=\"Sumbit\">";

This isn't loading the page with it closed, it's just the same as before.

CroNiX · October 24, 2008

Yes, you have everything set up wrong and it would have take a long time to explain it. So, I wrote you a little example. All you have to do is set the path to mootools to get it to work for you. If you study it you should be able to figure it out. Notice there is NO inline javascript used, as it is bad practice when using a good framework like mootools. Coding should be kept separate from the HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mootools Slide</title>
<script type="text/javascript" src="your path to mootools"></script>
<style type="text/css">
#myContent {border:1px solid #00F; padding:10px; width:200px;}
</style>
<script type="text/javascript">
window.addEvent('domready', function(){
var slide1 = new Fx.Slide('myContent').hide(); //initialize and set to hidden initially
$('button1').addEvent('click', function(e){  // set the click event of the link to toggle slide1
	e = new Event(e).stop();  //prevent native click event
	slide1.toggle();
});
});
</script>
</head>
<body>
<a href="#" id="button1">My Button</a><br /><br />
<div id="myContent">Here is my content<br /><br /><br /><br />more...</div>
</body>
</html>

Michdd · October 24, 2008

Yes, you have everything set up wrong and it would have take a long time to explain it. So, I wrote you a little example. All you have to do is set the path to mootools to get it to work for you. If you study it you should be able to figure it out. Notice there is NO inline javascript used, as it is bad practice when using a good framework like mootools. Coding should be kept separate from the HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mootools Slide</title>
<script type="text/javascript" src="your path to mootools"></script>
<style type="text/css">
#myContent {border:1px solid #00F; padding:10px; width:200px;}
</style>
<script type="text/javascript">
window.addEvent('domready', function(){
var slide1 = new Fx.Slide('myContent').hide(); //initialize and set to hidden initially
$('button1').addEvent('click', function(e){  // set the click event of the link to toggle slide1
	e = new Event(e).stop();  //prevent native click event
	slide1.toggle();
});
});
</script>
</head>
<body>
<a href="#" id="button1">My Button</a><br /><br />
<div id="myContent">Here is my content<br /><br /><br /><br />more...</div>
</body>
</html>

It's hard to explain, but I kind of need it to be in line. Only because $div is a changing variable for me. And it's generated a lot of times as I grab rows from my database. I'm not so sure your thing works, because it was loading weird, and first showed the content, then I refreshed a couple times, then went back and it loaded with no content showing, but it kept not working unless I was going back.

So is there no way I can get this to work in line?

CroNiX · October 24, 2008

Not if you want it set to hidden initially and want more than 1 on a page.

Michdd · October 24, 2008

I have no problem with more than one on a page now. Just the hidden at first.

CroNiX · October 24, 2008

Then look at my code and see what I did to hide it. Or look at the mootools docs. They are really good....

Michdd · October 24, 2008

Well, is there something wrong with your script? Try it out, it takes a long time to load, and at first it shows the content, then if I hit back then it works.

RichardRotterdam · October 24, 2008

I think hiding the element would be like so

window.addEvent('domready', function(){
   var slide1 = new Fx.Slide('myContent').hide(); //initialize and set to hidden initially
   $('button1').addEvent('click', function(e){  // set the click event of the link to toggle slide1
      e = new Event(e).stop();  //prevent native click event
   
     slide1.hide();//this is where you hide it
   });
});

Sign In

Showing/Hidding a form onclick?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information