Jump to content

Can I Make Collapsible Sections Drop More Slowly?


Recommended Posts

I’ve got collapsible sections in a submission form.

Essentially this shows on the screen as buttons arranged in a column.  As I depress each button I expand menus associated with that button.  If I again press the same button the menus contract.  It all works but is very ‘jumpy’ on the eye.

 

Is there a way of slowing things down so that menus drop more slowly when expanding, and lift more slowly when contracting?

Link to comment
Share on other sites

I think you want the CSS "easing" rule on the element.

 

caspio footer (source mode)

<style>

your_menu_object {

-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease; }

</syle>

Link to comment
Share on other sites

Thanks, that looks great!    But being a beginner I can't seem to get this to work.

I tried putting your code in the footer with various DataPage elements in place of 'your_menu_object' but there was no impact on the expanding/collapsing sections (note that all my listboxes are virtual fields).  I also substituted 'HTML Block (x)' which carries the code for each button, but that didn't work either.

 

Already In the footer I've got Caspio's <script> code for collapsing the sections (as given in their online tutorials), so I'm wondering if that might be impacting on your code?

 

I'm no doubt missing the obvious!

 

Thanks for any help

Link to comment
Share on other sites

Hi,

 

As far as I understand, you use solution from the article

 

Paste the following code in the footer, instead of the code for the footer, provided in the the article:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js "></script>

<script>
function Displayer(n)
{
$('#Section'+n).toggle('slow');
}
</script>
On my form it works perfectly, sections collapsing slowly.
 
Hope that helps.
 
Matilda
Link to comment
Share on other sites

Wow, thanks Matilda.  That's a clever bit of code.  I also discovered that you can use a number in place of 'slow' to denote milliseconds to get exactly the speed of the listbox coming into view.  Great improvement on the standard solution in the article.

 

Is there a way of building on this so that instead of the whole section expanding suddenly on toggle (and contracting suddenly), it slowly drops (and lifts) along with the listbox vertically expanding /contracting too?

Link to comment
Share on other sites

Hi,

 

Yes, you can set timer in milliseconds.

I'm glad that my solution was helpful :)

 

Regarding your question, as far as I understand, you'd like to collapse/expand only listbox field instead of whole section.

You may put only listbox field in the section. Do not use label for this field, use html block to add a label.

 

So, when you click on the button you will be able to see only expanded listbox. 

Link to comment
Share on other sites

HI Matilda

 

Not quite, I probably didn't make myself clear enough.  What happens right now (certainly on my screen) is that, on click, the section suddenly expands, and then the whole listbox slowly appears into view.  While this is a great improvement, the perfect solution would be for the section (and listbox inside) to gradually fall open.  From what I can research this means using  '.slideToggle('slow')' , instead of '.toggle('slow')'.   See http://www.w3schools.com/jquery/eff_slidetoggle.asp

 

The problem is that '.slideToggle' doesn't seem to do anything.   I've since read that this is because "the table is not a block element".    I also saw it could be made to work by "sliding a div rather than the table".    Unfortunately I don't know enough on how to change the code to make use of these recommendations

 

Thanks

Link to comment
Share on other sites

  • 5 months later...

If anyone can help me on this: 
I am using the code below and it is display "none" and it is hover-able, but nothing happens and the section does NOT open and if I change to display "inline" to section elements show but they don't close on command. 

Any help is appreciated: 

script:

 

HTML block one: (disabled)
<input type="button" onClick="Displayer(1)" value="Personal information"><br>
<table id="Section1" style="display:none;"><td><h2>Personal information</h2>

input fields (4 of them, Y/N fields, and text fields)

after
HTML block two: (disabled)
</td></table>


Footer script (disabled)
<script>
function Displayer(n)
{
var check = document.getElementByld('Section'+n);
if(check.style.display == 'none')
{
check.style.display='inline';
}
else
{
check.style.display='none';
}
}
</script>

Link to comment
Share on other sites

Mmm - can't see anything obviously wrong with the code.  I know it's a basic question, but did you disable the HTML editor in the HTML block?

When you say it's "hover-able" I assume you just mean that the cursor changes shape when hovered over the button, and not that you expect the menu to open without clicking?.  

Have you checked to see whether this works on your webpage... sometimes preview doesn't show what it should.

I'll leave any other comments to the real Caspio experts!

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...