Toggling sections on/off moves them down the page

  • baileynp
  • Topic Author
  • Offline
  • Senior Boarder
  • Senior Boarder
  • Posts: 76
  • Thank you received: 1

baileynp created the topic: Toggling sections on/off moves them down the page

I have a form with five radiogroups. The last four are initially hidden until the user chooses an option from the first radio group. This then triggers an action script (shamelessly copied from here :whistle: ) and the first radio group is then hidden and the second displayed.
function ff_optListening_action(element, action)
// toggle the Reading and Listening sections upon optListening change
{
     switch (action)
     {
          case 'change':
          opts = JQuery("[name=\"ff_nm_optListening[]\"]");
          for (o = 0; o < opts.length; o++)
          if (opts[o].checked)
          {
               bfToggleFields('off','section','Listening',bfDeactivateField);
               bfToggleFields('on','section','Reading',bfDeactivateField);
          }
          break;
          default:;
     } // switch
} // ff_optListening_action

My problem is that when the second, third, fourth and fifth sections are displayed, they all move down the page as though there's an invisible carriage return/line feed at play.

#235778
Attachments:
  • Posts: 2561
  • Karma: 87
  • Thank you received: 344

mihaela replied the topic: Toggling sections on/off moves them down the page

Hello,

Can you please send me a link to your form so that I can get a better insight on what the problem is?

From the code that you've sent me, I assume that you are trying to turn off section which was just answered and turn on the next section. Is that right?

Regards,

Mihaela
#235785
  • baileynp
  • Topic Author
  • Offline
  • Senior Boarder
  • Senior Boarder
  • Posts: 76
  • Thank you received: 1

baileynp replied the topic: Toggling sections on/off moves them down the page

Hi Michaela

Yes, you are perfectly correct: once a section has been 'answered', it is hidden and the next section displayed.

If you go to my site here and choose 'Placement Test' from the main menu, you'll see the problem in action.

If you need login access, please let me know and I'll send it via email.

Regards

Nigel Bailey

Edit: you'll now see a registration form first - feel free to enter an value you want :)
#235793
  • Posts: 2561
  • Karma: 87
  • Thank you received: 344

mihaela replied the topic: Toggling sections on/off moves them down the page

Hello,

I've just tested the form, but I don't see what is not working properly.

When I select an option from the radio group, the next radio group is shown in the same place. You wrote "they all move down the page as though there's an invisible carriage return/line feed at play." I don't see this kind of behavior.

Did you change something in the meantime or I didn't understand the issue correctly?

Regards,

Mihaela
#235856
  • baileynp
  • Topic Author
  • Offline
  • Senior Boarder
  • Senior Boarder
  • Posts: 76
  • Thank you received: 1

baileynp replied the topic: Toggling sections on/off moves them down the page

Hi Mihaela

That's strange - I haven't changed anything with the behaviour of the radio groups (promise :)).

I've tested this using Chrome, Safari & FF, and they all behave in the same way.

If you compare the two screenshots side by side (first and last) , you can see there is a marked difference in the gap between the page's text and the section's title - the gap is growing.

Let me know if you need any more information.

Regards

Nigel
#235861
Attachments:
  • Posts: 2561
  • Karma: 87
  • Thank you received: 344

mihaela replied the topic: Toggling sections on/off moves them down the page

Hello,

Now I see what you are talking about, but since this is such a little change from question to question I haven't noticed it previously.

That is the way it works. For each hidden section, a little place will be left.
Either way, there is a way to avoid this kind of behavior.

Please try to use this code instead of the one that you are using:
function ff_optListening_action(element, action)
// toggle the Reading and Listening sections upon optListening change
{
     switch (action)
     {
          case 'change':
          opts = JQuery("[name=\"ff_nm_optListening[]\"]");
          for (o = 0; o < opts.length; o++)
          if (opts[o].checked)
          {
               bfToggleFields('off','section','Listening',bfDeactivateField);
               jQuery("[name=\"ff_nm_optListening[]\"]").parent().parent().parent().parent().parent().parent().parent().parent().css('display','none');
               bfToggleFields('on','section','Reading',bfDeactivateField);
          }
          break;
          default:;
     } // switch
} // ff_optListening_action
Adding this line of code should stop the addition of empty line:
JQuery("[name=\"ff_nm_optListening[]\"]").parent().parent().parent().parent().parent().parent().parent().parent().css('display','none');

Let me know whether it worked as you wanted.

Regards,

Mihaela
#235880
Moderators: ForumSupporttomeperica
Time to create page: 0.449 seconds

New Icon Packs Category!

Crosstec is now offering icon packs.

If you are a paying subscriber, icon packs are automatically added to your account.

Check out our icon packs page!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Summer Sale!

50% discount on all of our extension subscription plans, templates and icon packs!

Get Your Subscription Here

News and Updates

Get informed about new downloads, updates and more in our News and Updates newsletter.

All Extensions Subscription

Get 1 year access to all of our current and future products and 1 year of professional support -- 99 for just 49! (Summer Sale)

No support per domain or website installation limits! Includes all of our current and future Joomla!® extensions, Joomla!® templates for the duration of your membership. This means, by purchasing an All Extensions Subscription you'll have it all covered!

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Community Reward

Help us to create new extensions and plugins! With only $5 you help us a lot and get unlimited download access to all of our products, professional support and even more. Get your reward now!

Read More Here