Collapsible Widget or equivalent?

[ValiantCuriosity]

Hello helpful people...

Another question for the gurus of LC.

My current iOS app store app was written using HTML5,CSS,Javascript, and Cordova. The app also uses a variety of plugins. There are too many to mention fully. All of this extra stuff is a good part of why I'd like to move to LC (jquery,jquery-mobile, etc).

Anyway, I use collapsible content in the the app. Basically, a collapsible holds textual information that can be collapsed or viewed by a user on clicking it. I'd like to continue to use collapsible content in my re-write via LC. Does LC have any widgets or ways that allow for this? I hope that I am adequately describing what I mean by collapsible. Using them saves a lot of space on the page(card).

TIA
-Rachel

[dunbarx]

Hi.

There are many, many ways to do this sort of thing, and much depends on how much fun you want to have designing and using whatever gadgetry you finally settle on.

Since LC gives complete control over the appearance, size and a thousand other properties, as well as offering dynamic special effects, all natively supported, it almost boils down to you describing exactly what you wish to see, or dream about seeing.

Do that, and we will provide a few live examples. That is why it is called liveCode.

Craig Newman

[dunbarx]

Here is just about as simple a collapsible gadget as you can get, and could have been just as easily made in Hypercard in 1987. I only mention that to show how you might set started with a few tools.

This uses no effects, just raw LiveCode 101. It isn't even pretty, though it can be made so.

Anyway, the point is that you can do anything you want.

Craig

Collapsible.livecode.zip

(1.05 KiB) Downloaded 219 times

[ValiantCuriosity]

This is the best group of guys and gals! Thanks Craig, for your help. I'll take a look at the sample. I am enjoying (well, for a newbie) playing with the graphics. I'm making slow progress. Even have done some coding. Will post a new question about that. You will get tired of me, but I am trying. Tell me if I get too overbearing.

[bogs]

Will post a new question about that. You will get tired of me, but I am trying. Tell me if I get too overbearing.

If this board survived me and my incessant (and frequently inane) questions, I am sure we will find you a refreshing change of pace

[ValiantCuriosity]

Craig,

WOW! The code sample was exactly what I needed to get going. I had a lot of fun with it today. I learned a few things along the way. I"m not there yet, sure had fun tweaking things. Mostly had problems understanding what was happening with the math. Playing with it helped a lot.

Is there a way to speed up the opening of the fld 1? I created a repeat loop like yours only changed it to create more lines. It opens rather slowly.

Code: Select all

repeat with y = 1 to 500 step 3  //length of the open collapsible/fld1
          wait .25 milliseconds                //helps smooth the transition from closed to open
          set the height of fld 1 to y        //move down the page/card
          set the top of fld 1 to the bottom of btn 1 - 1    //make the two objects line up
      end repeat

One other thing that I couldn't solve is the white line that displays horizontally when the collapsible is collapsed. Not sure why this is happening. I have a repeater background using a 16x16px image, but I can't see why that would impact the collapsible and cause the white line. See what I mean below:

aboutTheVideoExercises.png (2.74 KiB) Viewed 4917 times

-Rachel

[bogs]

Hi Rachel,
You might notice the image you tried to attach didn't post. There are a couple of ways to attach images here.

One is to use the [Attachments] button below this text area -

I feel attached...

If your image is too large (there is a size limit), you can post it to any number of free upload sites, and then attach it with a url (make sure if the image is REALLY large you use the thumbnail link provided by the service) -
If it is hosted on your own server (but not your personal computer file system), you can also use the img tags above (the button with the picture icon).

[dunbarx]

Rachel.

I don't see the white line you speak of. Is it that the two controls do not overlie each other? That the borders are separated a bit?

Try changing the value of the "step" in the repeat loop to a larger number. You will have to experiment to find the rate that looks good to you, based on how tall you make the field.

Also, the "wait" command will not allow anything smaller than 1 millisecond. Trying to use a fraction of that, as you did, will revert to "1".

Read up on "visual effect" in the dictionary. I never use them, but these may give you some ideas. The "wipe" options may be of interest to you. These may sidestep, as I mentioned, the "raw" finagling that makes that field "expand" with the code I gave you, and use more native gadgetry.

Craig

[bogs]

Read up on "visual effect" in the dictionary. I never use them, but these may give you some ideas.

Along the lines of that thought, here is a stack that demonstrates some of the effects Craig mentions.

visualEffects.livecode.zip

(1.67 KiB) Downloaded 207 times

[ValiantCuriosity]

Boy, you guys "Rock"! You are going to keep me busy trying things out today. It is a lot of fun to play with the graphics in LC. That is what got me interested so many years ago in coding. I am horrible as a coder, but it is the only way to get the graphics to work. LC does make the UI easier. I also notice there are some HTML5 options in LC. I'm trying to move away from that into one "easy" coding language, but it has worked for me and is more understandable than many other languages. It is just that I have to use so many plugins and work arounds and I'm terrible with javascript too.

I've corrected the problem with displaying the image above. Originally, I used Dropbox. Maybe that doesn't work or I didn't set it up properly. Nice to have the attachment option. So easy. The white line is the "fld 1" collapsible object. When I open the page, I hide the object. I've removed all borders, and everything else that looks like it might display a white line.

When, the user clicks on the plus button and the field drops down using the code that Bogs shared with me. I haven't figured out how to change the svg icon from plus to minus when the user clicks it yet. That is another thing that I'll work on today.

Thanks again for all of your help and support. Fun day ahead.
-Rachel