Hide and show DIVs with drag and drop script

[wernerlerner]

Hi,

I just started using the Walter Zorn drag & drop library:

http://www.walterzorn.com/dragdrop/dragdrop_e.htm

And one of the properties included in WZ drag n drop is the ability to hide or show divs and images that have been made draggable, using the the following methods:

if (window.dd && dd.elements)dd.elements.divID.show()

and


if(window.dd && dd.elements) dd.elements.divID.hide()

I'm wondering if I wanted to make a single button that toggled between hiding and showing a DIV....how would I combine the two methods above in a single onclick event?

Thanks,

Clay

 

[BillyRayPreachersSon]

I'd say it depends on three factors:

1) Whether the library already has a toggle() method,

2) How the library hides and shows the DIV elements, and

3) Whether the library provides a method to tell you whether any particular DIV element is hidden or not.

If 1) or 3) is true, then you should be home and dry as it should be very obvious how to code this using either of these.

If 1) and 3) are nor true, then you would need to dig into the show() and hide() methods to see how they work, and then perform your own testing to create a toggle() method.

If, for example, they work by setting the "style.display" property, then you should simply be able to test this property to work out which of the methods to call.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[wernerlerner]

Thank you Dan. I don't believe there is a toggle() method built in. I thought maybe there was a way to just combine the show and hide methods using the else statement (but I do not know the proper syntax for this...I'm admittedly very much a beginner when it comes to javascript).

Thanks again,

Clay

 

[BillyRayPreachersSon]

A quick check of the API (

http://www.walterzorn.com/dragdrop/api_e.htm)

reveals there is indeed a "visible" property which you can test.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[wernerlerner]

Hey Dan,

Maybe I did a poor job of explaining myself initially...I've had no problem using the visibility property to hide or show divs...in the api library it lists the method for showing:

if (window.dd && dd.elements)dd.elements.divID.show()

and hiding:

if(window.dd && dd.elements) dd.elements.divID.hide()

Both of which are working perfectly for me. However in all the examples on the WZ site, these are shown as separate buttons (one button to show a div, one button to hide it again), and I was just wondering how I would go about making a single button that would show a Div on the initial click and hide it on a subsequent click.

Sorry I did a bad job of explaining this the first time around...Thank you for your time.

 

[BillyRayPreachersSon]

Your explanation was fine - I think you have not understood my reply.

I was pointing you to the "visible" property offered by the WZ library. If you read the API, you will see that it says:

visibility: Indicates visibility of item. true if element is visible, false if element has been hidden by use of the .hide() method.

Therefore, simply have a single button which calls a function to test whether the item is visible or not, and call the appropriate method to change this.

I've had no problem using the visibility property to hide or show divs

Really? That's odd, given the "visibility" property is read-only, and furthermore the API states that you should only use the show() and hide() methods to do this:

To toggle the visibility of an item, it's strictly recommended to use its hide() and show() methods only.

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[wernerlerner]

Hi Dan,

"Therefore, simply have a single button which calls a function to test whether the item is visible or not, and call the appropriate method to change this."

I guess what I am asking is what that function would look like, if i know that the hide and show functions are:

if(window.dd && dd.elements) dd.elements.divID.hide()

&

if (window.dd && dd.elements)dd.elements.divID.show()

respectively. Thanks!!

 

[BillyRayPreachersSon]

I guess what I am asking is what that function would look like

You already know how to call a method by putting the method name followed by two brackets, e.g. "obj.show()" or "obj.hide()". Testing the visibility should be much the same, e.g.

if (obj.visibility == true) {
   // Do something here if visible
} else {
   // Do something here if hidden
}

Therefore, you can test the visibility and simply call your existing show or hide methods as appropriate.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/