PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

position field

  1. Richard Vav
    Administrator

    On Step 2 of my multipage form http://www.eandhbaxendale.com/online-enquiries/trussed-rafter-enquiry/roof-shape-enquiry/ I have a couple of fields that ask for building dimensions, they are positioned over the image of the building. Two of the building shapes (L-shape or T-shape) that the user chooses between on step 1 require identical dimensions so I am hoping to have just one Dimension C and one Dimension D text box rather than the current two of each.

    The 'top' position of the field is always the same, only the 'left' position is different. Would it be possible for example to set the left position of #field_8_9 (located on step 2) to say 200px if #choice_5_2 (located on step 1) is selected or 300px if #choice_5_1 (located on step 2) is selected

    Posted 8 years ago on Thursday August 4, 2011 | Permalink
  2. Yeah, that's going to be hard to pull off. If the fields were children or siblings of the actual checkbox input, then you could use the "checked" pseudo-selector in CSS to maybe get it done.

    I'll take a few minutes and see if I can offer any way to do with just CSS, but you're probably going to have to write some jQuery to change the class name on each element based on the selection to make it work the way you describe.

    Posted 8 years ago on Thursday August 4, 2011 | Permalink
  3. Richard Vav
    Administrator

    Kevin, thanks for taking a look, I have found a way of adjusting the left position of the field using the code below, the only problem is it only works if both elements are on the same page of the multipage form, which they aren't so I guess I still have a bit more work to do to get it to function as I want.

    $('#choice_5_2').click(function() { $('#field_8_9').css('left', '200px');});
    Posted 8 years ago on Friday August 5, 2011 | Permalink
  4. Yeah, you may need to use the "gform_page_loaded" hook to get the jQuery to 're-fire' when you page through a multi-page form.

    http://www.gravityhelp.com/documentation/page/Gform_page_loaded

    Posted 8 years ago on Friday August 5, 2011 | Permalink
  5. Richard Vav
    Administrator

    Hi Kevin, would this be the code

    jQuery(document).bind('gform_page_loaded', function(  , 'gform_8', 'gform_page_8_1'){
        $('#choice_5_2').click(function() { $('#field_8_9').css('left', '200px');});
    });
    Posted 8 years ago on Friday August 5, 2011 | Permalink
  6. Hi Richard,

    Took a look at your site and looks like you've got this working? Do you need any other assistance with this?

    Posted 8 years ago on Friday August 5, 2011 | Permalink
  7. Richard Vav
    Administrator

    Hi David, I still haven't been able to get it to work, I did however put the second field back in and set its position in the css as a temporary workaround until I get this new method working.

    Posted 8 years ago on Friday August 5, 2011 | Permalink
  8. Hi Richard,

    I think they're might be an easier way to do this. Try pasting this in your theme's functions.php file. What it'll do is set whatever the selected choice is for the Building Shape field as a class on the form itself (ie "Rectangle", "L-shape", or "T-shape"). Now you can just add some additional styles where ever you have your existing styles and using CSS specificity to change the positioning based on the form class.

    Example:
    .Rectangle #field_8_9 { left: 300px; }
    .L-shape #field_8_9 { left: 200px; }

    Posted 8 years ago on Friday August 5, 2011 | Permalink
  9. Richard Vav
    Administrator

    David, thanks for taking another look, did you forget to paste the code, what am I putting in the functions file?

    Posted 8 years ago on Friday August 5, 2011 | Permalink
  10. I sure did. :)

    http://pastie.org/2326846

    Posted 8 years ago on Friday August 5, 2011 | Permalink
  11. Richard Vav
    Administrator

    Cheers David, that's working great, definitely easier than what I was trying to do. My next idea was to try and test for the visibility of the html blocks containing the t-shape & l-shape images and then try and set the css position.

    Thanks again for help, Gravity Forms is turning out to be the best plugin by far that I have used and the help you guys offer through the forums just makes it even better.

    Posted 8 years ago on Friday August 5, 2011 | Permalink

This topic has been resolved and has been closed to new replies.