Grow your CSS skills. Land your dream job.

Help with Sliding Form Jquery Technique

  • # September 16, 2009 at 11:14 pm

    Javascript newbie here,
    I’m creating a form based on chris’s advanced form. The effect i want to capture is the slide up and slide down of an area of a form. But i’m not using the jquery transform plugin.

    Code:
    $(document).ready(function(){

    $(“#reservations-form”).validate();

    $(“.yay, .oops”).hide();
    $(“.yay, .oops”).fadeIn(2000);

    $(“#departureArea”).hide();

    $(‘.jqTransformCheckbox’).click(function(){
    if ($(‘#departure:checked’).val() == ‘on’) {
    $(“#departureArea”).slideDown();
    } else {
    $(“#departureArea”).slideUp();
    }
    });

    $(“#arrivalArea”).hide();

    $(‘.jqTransformCheckbox’).click(function(){
    if ($(‘#arrival:checked’).val() == ‘on’) {
    $(“#arrivalArea”).slideDown();
    } else {
    $(“#arrivalArea”).slideUp();
    }
    });
    });

    The #arrivalArea and #departureArea hide as expected. But they do not slide down on click. I figure it must be do to the fact that its targeting .jqTransformCheckbox. But again i’m not using the transfrom plugin. So i guess my question is what do i need to rename the ‘.jqTransformCheckbox’ so that it targets the desired checkboxes? ….. i’ve tried using the input name, id, and class…. Any help would be mucho appreciated…. Thanks!

    # September 17, 2009 at 1:13 pm

    what is with this line

    if ($(‘#departure:checked’).val() == ‘on’)

    I understand what you are trying to do, what I don’t get is the value ‘on’. Usually something like this is either a ‘1’ for on or ‘true’ Is on defined in your script? or is this a function I have never seen before?

    # September 17, 2009 at 4:09 pm

    I’m not sure… like i said i’m a newbie with js. This is based on chris’s advanced website change form…. except without the jqtrasform. Chris’s form uses ‘on’, but i’m not sure if its targeting something in jqtransform that i’m not using. The html that i’m trying to target looks like this

    Code:






The #departureArea hides. But I want it to slide down when #departure checkbox is checked.

# September 17, 2009 at 9:39 pm

Ok… so i tried using ‘1’ and ‘true’ instead of ‘on’, but to no avail. I have a feeling that its the ‘.jqTransform’ that i have to change, but i tried to replace it with the checkbox input class, name, and div, but none of them worked. Again, I’m new to js and jquery so im pretty much trial and error at this point. I just need to know how i would target a html form checkbox input in this situation with js.

Please let me know if i need to clarify anything. U peeps are my last hope.

# September 19, 2009 at 3:04 am

I’m a newbie with js. But i think that these few tips given bellow will help you

1- Add javascript inclusion in the header section of your web page

//required
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jqtransform.min.js"></script>

2- Write your form

<form class="jqtransform">
<div class="rowElem">
<label for="name">Name: </label>
<input type="text" name="name" />
</div>
<div class="rowElem"><input type="submit" value="send" /><div>
</form>

3- Finally use the plugin

After it, select the forms and call the jqTransform plugin. See some examples:

<script type="text/javascript">
$(function() {
//find all form with class jqtransform and apply the plugin
$("form.jqtransform").jqTransform();
});
</script>

# September 19, 2009 at 11:09 pm

Thanks for the help… but I’m afraid thats not really what i was getting at.

I am not using the jqtransform and i dont want to use it… but i want the same slideUp slideDown effect that chris uses in his form.

Like his form, i want a certain section of the form to slide down when a certain checkbox is checked. So in my js file I hide the the div that i want to slide up and down so that initially, the div does not show. This much is working.

Code:
$(“#departureArea”).hide();

Now the next thing is getting it so that when this checkbox in my html code is checked…

Code:

… then this div in my html will slide down from its hidden state…

Code:

I think i’ve narrowed the proble to this js

Code:
$(‘ ‘).click(function(){
if ($(‘#departure:checked’).val() == ‘on’) {
$(“#departureArea”).slideDown();
} else {
$(“#departureArea”).slideUp();

}
});

I just need to know what to target on the checkbox… do i target the name, class, or id,…… or do i need to create an actual style in my css for it target it…..

I hope i dont sound stupid but i’m just trying to be as clear as possible… and i’ve double checked that im all linked up to my js files and the jquery file and all that other little stuff…

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".