Make Div Slide Up

So what I want to do is put the container with the contact form below behind the clouds. Then I want it to slide above the clouds by either hovering over or clicking it.
Here's an example of what I want: example one example two.
I'm having trouble with id'ing the containers that need to be id'd in either script. i've gotten it to slide up and down, but I can't get the form to follow. Can anyone help?
Html:
<!-- footer -->
<!-- Contact -->
                         <div id="contact_form">
                        <form action="contact.php" method="post" name="contact_form">
                            <form class="form">
                                <p class="name">
                                    <input type="text" name="name" id="name" placeholder="John Doe" />
                                    <label for="web">Name</label>
                                </p>
                                <p class="email">
                                    <input type="text" name="email" id="email" placeholder="[email protected]" />
                                    <label for="email">Email</label>
                                </p>
                                <p class="phone">
                                    <input type="text" name="phone" id="phone" placeholder="555-555-5555" />
                                    <label for="phone">Phone</label>
                                </p>
                                <p class="text">
                                    <textarea name="text" placeholder="Questions or Comments"></textarea>
                                </p>
                                <p class="submit">
                                    <input type="submit" value="send" />
                                </p>
                        </form>
                </div>
<!-- Contact -->
                            <div id="footer">
                                <img src="images/website images/bubble_clouds.png" />
                            </div>
<!-- footer -->
CSS:
#contact_form {
          background-image:url(images/website%20images/contact_form.png);
          background-repeat: no-repeat;
    height: 471px;
          width:356px;
          position:fixed;
          bottom: 0;
          right: 130px;
    border-radius: 16px;
          margin: 0;
          padding: 50px;s
          font-size: 20px;
          font-family: Verdana, Tahoma, sans-serif;

This is what I have but I still can't get it to work. I'm sure it's something I'm overlooking, but I don't see it.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
    $('form').hide();
    $('button').click(function () {
        $('form').slideDown('slow');
</script>
<style>
form {
    width:40%;
    background: lightblue;
    border-radius:20px;
    border: 2px solid #CCC;
    min-height: 300px;
    padding: 2%;
    position:absolute;
    bottom:0;
    left:0;
</style>
</head>
  <body>
<button>Click here</button>
<form id="contact_form">Your form input fields and submit button go here...</form>
  </body>
</html>

Similar Messages

  • How to make price slider in Edge ?

    I want make slider something like this http://jqueryui.com/slider/
    but i want make this slider with my own graphic style, is it possible ?

    Hello Alefajnie,
    Try to put that in your css file
    ans the div in you html file
    http://css-tricks.com/slider-with-sliding-backgrounds/

  • I am using photos . I add a camera and make my photos slide in.  How do I add a second behavior to the photo to make it slide out.  I want the photo to hold on the screen for a few seconds in between sliding in and sliding out.

    I am using photos in Motion 5.  I add a camera and make my photo slide in.  How do i add a second behavior to the photo to make it slide out?  I want the photo to hold for a few seconds in between sliding in and sliding out.  When I am trying to do this  I am not getting the photo to hold, i am making one continuous motion which I do not want.
    Thanks

    Are you using the "motion path" behavior? If so just duplicate it and drag it down the timeline to where you want it to start. Trim it to end at the end of the project. The gap you leave in the timeline between the two behaviors is your hold time. Not sure why you are using a camera unless you have a behavior on the camera.If you are using keyframes just set two keyframes at the same position values in the inspector for the hold time.

  • Since downloading the 2013 Keynote upgrade, the slide image size on handouts with 3 slides per page option is very small. Is there a way to make the slide size larger while still keeping 3 slides per page   lines?

    With the new Keynote upgrade (version 6.1), the slide image size on handouts is very small, which makes it difficult to read slide content when compiling lecture notes for students. Is there a way to make the slide size larger while still keeping to a format of 3 slides per page with lines?

    A number of posts have reported the same issue, two workarounds:
    1
    check the paper handling options or equivalent in your print dialogue box and set to scale to fit
    2 
    in the Keynote option, in the dropdown menu in the Print section, select Individual Slides
    then choose Layout, and set the number of pages, when printed you will have multiple pages on a single sheet.

  • How to make a slide show or edition including mpeg and other formats

    Hi,
    I am i bit puzzled by the use of iphoto/imovie/itunes.
    I have a Sony camera which generates jpg photos and mpg videos; besides, i have 3gp and mp4 videos from cell phones.
    Firstly, i imported all of them to iphoto. I used a automator workflow to help importing from hotsynced Palm centro files, to discover the first problem with the 3gp files: they could not be iported by workflows.
    Still, they could be seen in iphoto, but then i tried to make a slide show. My idea was to put the photos and videos of a certain event to be watched together, or at least to be able to watch the videos in a sequence, without having to click on each one.
    I didnt get it in iphoto, so i switched to imovie. it was even worse, since it cannot import the mpgs and the 3gps (the jpg photos were ok). What could i do about that? is there any converter or other way?
    then i tried the itunes, and it was the opposite: it imported and played in sequence the mpg videos, but not the photos. This is a workaround anyway, since the program expects to play movies, and makes my daughter a "star", but that`s ok, she is one to me.
    i'll be thankful for hints on how to make the imovie compatible with the 3gp and mpgs, or finding some way to do this edition in iphoto or even with itunes.
    regards

    I see, it sounds reasonable , i think i will buy the pro and try.
    QT Pro ($30) and MPEG Streamclip (free) complement each other. In many cases one can do things that the other cannot. For instance, MPEG Stramclip can handle/edit multiplexed formats while QT Pro cannot. QT Pro allows layering of data tracks while Streamclip does not. Streamclip merges file streams more easily than QT Pro but QT Pro allows the "Movie to MPEG-4" export to "passthrough" the video while Streamsclip does not. And so on and so forth...
    I was referring to the mpegs from the Sony camera, of which a have hundreds, shot in the last 3 or 4 years, mainly from my 5-year old daughter. Is the above true to these?
    That still doesn't help. By "sony camera," are you referring to a still digital camera (multiplexed MPEG-1) or a Sony video camcorder taking MPEG-4/AVCHD with AC3 audio in an MPEG wrapper, a Sony DVD/HDD camera storing some kind of MPEG-2/AC3 files. On a Mac, the extension MPG normally refers multiplexed MPEG-1 (or MPEG-1 audio layer) files while MPEG normally refers to multiplexed MPEG-2 video content with MPEG-1, layer 2 audio (MPEG2/MP2) but may also refer to files with MP3 or AC3 files in an MPEG, VOB, or TS wrapper. In addition it may loosely refer to elementary M2V video streams (M2V video file paired with a separate AIFF or AC3 file), a standard MPEG4/AAC file (in an MOV or MP4 wrapper) or a standard H.264/AAC file in MOV, MP4, or M4V wrapper). Since the handling, conversion, editing requirements vary with each type of file, it becomes important to what specific kind of content/file container we are dealing with here.

  • Can I make a button not make a slide continue?

    Hi.
    I looked for this question, but could not find an answer, so I'm hoping I'm re-posting something already answered.  If so, I will accept my verbal chasisement.
    Anyway...
    I am attemping to create a "click and reveal' type interaction in Captivate 4 using buttons and hiding/unhiding objects. Essentially, when the user clicks button A, it will reveal image A and Caption A .  When they click button B, through the magic of multiple actions, image A and Caption A will disappear and image B and Caption B will appear....etc.  These buttons are at about 5 or so seconds into the timeline.
    Around 28 seconds into the slide timeline, I have a "Back" and "Next" button that I use for user navigation instead of using the navigation buttons on the skin.  This will pause the slide until the user clicks one of them to be navigated to the next slide or previous slide.
    The problem I am running into is that if the user "lingers" on the slide and clicks back and forth between buttons A, B, C, etc. to re-look at all the objects, clicking on any of those buttons will continue the slide which is paused by the "Back and Next" buttons at the end of the timeline.  Try as I might, I just can't make the slide pause and wait until the user actually clicks the "Next" or "Back" buttons when I click buttons A, B, and C over and over to re-look at the images and captions. 
    So is there any way to tell a button NOT to continue the slide?  I want my buttons A, B, and C to do the multiple actions i have assigned them (show and hide objects) but do NOT want them to make the slide continue at the pause implemented by my navigation buttons.
    Thoughts?
    Thanks.
    Rob

    Hi there
    Actually I do believe there is a way to make the behavior what you want. But I'll address your issue for making things known to Adobe first. Adobe has something called the "Wish Form/Bug Reporting Form" that they monitor. So you use that. (Link to that is in my sig line)
    As for the button issue, you can accomplish it using Advanced Actions. What you need to do is to manipulate the Playhead to keep it paused. One way is by configuring the variable rdcmndGotoFrame with the value rdinfoCurrentFrame. Sometimes this works to just keep the playhead paused. Other times I've tried to do it with some success by repositioning the playhead farther upstream and allowing it to "float" back to the pause point of the object. And to do this you use the variable rdcmndGotoFrameAndResume and assigning it the frame number earlier in time. Of course, to do this you must first calculate the frame number to position at. I normally did this by inserting a Text Caption configured to present the rdinfoCurrentFrame variable and manipulating the pause points using a Click Box object to arrive at the desired value.
    Cheers... Rick
    Helpful and Handy Links
    Captivate Wish Form/Bug Reporting Form
    Adobe Certified Captivate Training
    SorcerStone Blog
    Captivate eBooks

  • Wanna make a slide show of my photos and burn to dvd

    I just got my mac.  Novice at best.
    However, I am a quick study.
    Tech nerd. 
    I want to make a slide show of photos and burn to a dvd for my "non-tech" parents to play in their dvd player.
    What's the easiest way.

    The easiest way is to use iDVD; however, Apple doesn't bundle that with new Macs and you can't buy it from the App Store. It is apparently still available on iLife disks, but you'd want to check the label.
    iPhoto will create a nice slideshow which can be converted to a movie. Then you will need something like iDVD or Toast to create the DVD.  http://support.apple.com/kb/VI195
    As you say you are new to Macs, I don't imagine you have an old copy of iDVD on another Mac.

  • Slide duration - How to make one slide have a different duration to another slide?

    Slide duration - How to make one slide have a different duration to another slide?
    EG So one slide has 2 seconds, another 4 another 6
    All I can see is how to make all slides have the same duration
    Any help very much appreciated!
    Brian

    Slide durations are not changeable on a slide-by-slide basis.

  • What is the easiest way to make a slide presentation DVD with music that can be played on PC or DVD player using MacBook Pro?

    What is the easiest way to make a slide presentation DVD with music that can be played on a PC or DVD player?  I'm using a MacBook Pro since that's the computer that has all the photos (in an album) and music.  Thanks.

    I would suggest that you post this to the Adobe Encore>Menus & Buttons forum. What you want to do, if I read correctly, is pretty simple. There will probalby be links available to step you though it. I'll look for this there, and start gathering some links.
    Good luck,
    Hunt

  • Using spry to make divs insisible but they still make 'white space'

    Ive used this tutorial to make buttons that make text appear
    and disappear with javascript (I dont want the page to reload);
    http://uk.youtube.com/watch?v=PuOxSeo7qaY
    My problem is that if the 'Div 2' button is pressed and the
    'Div 1' button is not, then Div 1 is not shown but still makes Div
    2 further down the page. How can I make it so when a div is not set
    to appear, it also doesn't create 'white space'?
    Im trying to make something like this page;
    http://www.t-nation.com/free_online_article/sports_body_training_performance/how_to_warm_u p_for_a_onerep_max
    If you click on the different pages in the article, the main
    body of text changes.
    thanks

    You need to toggle the CSS display style between 'block' and
    'none' to make
    that happen.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "jdldn" <[email protected]> wrote in message
    news:gjlokg$jtd$[email protected]..
    > Ive used this tutorial to make buttons that make text
    appear and disappear
    > with
    > javascript (I dont want the page to reload);
    >
    http://uk.youtube.com/watch?v=PuOxSeo7qaY
    >
    > My problem is that if the 'Div 2' button is pressed and
    the 'Div 1' button
    > is
    > not, then Div 1 is not shown but still makes Div 2
    further down the page.
    > How
    > can I make it so when a div is not set to appear, it
    also doesn't create
    > 'white
    > space'?
    >
    > Im trying to make something like this page;
    >
    >
    http://www.t-nation.com/free_online_article/sports_body_training_performance/how
    > _to_warm_up_for_a_onerep_max
    > If you click on the different pages in the article, the
    main body of text
    > changes.
    > thanks
    >

  • Can I make a slide show?

    Can I make a slide show?
    Thanks again!

    Yesm you can select the object containing the photo thumbnails, copy it and paste it into a blank page but don't see why you would need to. You need to use the photo page in order to create the slideshow.
    There are other ways to have a slideshow, most using javascript like these examples;
    Jalbum
    SimpleViewer and Flash Album Exporter
    Flash Album Exporter Postcard and AutoViewer Slideshow Themes.
    They can be inserted into any iweb page except for the photo or album pages.

  • How to make a slide bar that controls opacity

    I'm trying to figure out how to make a slide bar that would control opacity. If I were to take to pictures on top of each other, the slide bar would control the opasity of the top image. Thanks

    can you make a slider that controls anything?  if so, what's the range you can control?
    ie, when the slider is at one extreme it causes some object to have value1 and when it's at the other extreme the object has value2.  what value1, value2 can you handle?

  • How do I make a slide show of images for voiceover in iMovie

    I have images posted in iMovie project, over w/c I want to do a voiceover,but recording stops at end of first image, instead of continuing over all images. Do I have to make a slide show in iPhoto, to allow voiceover to cover all images? How do i select and create segment of images w/ voiceover?
    I want to insert images w/ voiceover into video clip segments to make an iMovie.
    Do I have to create a slide show in iPhoto first to allow this?
    If I have to cerate slide show in iPhoto, it cannot sync w/ earlier version of iPhoto in Desktop computer. I have mavericks OS on my laptop.
    Will this delete ability to work in iPhoto on my desktop/
    Pls. advise process
    Thnx

    iPhoto lets you export as a webpage.  This will create a webpage based slideshow of all the selected photos you can upload to your website.

  • How to make a slide wait until user has answered a question correctly, even after activating a smartshape?

    Background:
    I have created a quiz in which the user must answer each question correctly before proceeding to the next slide. This is what I did:
    Set preferences to Settings > Required > Answer All - The user must answer every question to continue
    Set the number of attempts on the question level to Infinite
    Made the Next button invisible and disabled the playbar
    This way, the user can only proceed to the next question slide with the Submit process – and, since attempts are infinite, that means only after successfully answering the question.
    Current goal: 
    I want the user to be able to click on a prompt for a hint. To set this up, I did the following:
    Created a smartshape labeled “click_for_hint” displaying text that says, “Click here for a hint”
    Created a smartshape labeled “hint” displaying text hint
    Set “click_for_hint” to show “hint” on success
    Now, when the user clicks on the text that says, “Click here for a hint,” the hint pops up. So, that works – awesome! However, once the hint is activated, I would like for the user to be able to continue infinite attempts until successfully answering the question… and only then, after answering correctly, proceed to the next slide.
    The problem:
    If the user has submitted one or more incorrect answers and then activates the hint, the slide no longer waits until the user has answered the question correctly. Instead, it automatically resumes playing, proceeding to the next slide. I tried setting the smartshape “hint” to pause on success, but that did not work.
    Is there a way to make the slide wait until the question is answered correctly before proceeding to the next slide, even after the hint has been activated?

    Are you aware of the fact that your Required setting can cause problems, blocking the user? It is also totally unnecessary, because you have infinite attempts on question level, and did hide the Next button (hope you don't need Review, otherwise I would recommend not to hide that button but to drag it under the Clear button: Question Question Slides in Captivate - Captivate blog)
    The hint problem is linked with the fact that a simple action will release the playhead. I would like to see the timeline of the slide, to compare the pausing points of the shape button and the question slide. And maybe this blog post can also clarify difference between simple/advanced: Why choose Standard over Simple action? - Captivate blog
    As for shape buttons on question slides: Buttons on Question/Score Slides in Captivate 6? - Captivate blog

  • What does error number 9 mean when trying to make a slide show with Vista

    I have scanned most of my pictures into the Photo gallery set up.  I was trying to make a slide show for my family .  My side and than my husbands side.  I had one set of old pictures completed as a slide show.  The second set   is almost complete.  I have lost most of the first slide show pictures.   The second set  I cannot finish adding the remainder of the  pictures .  A box appears and says "error number  9".  I don't know what happened.   What does this mean?  How did the pictures get lost from the slide show?
    Do you know the amount of hours it took to do the scanning?  Vista doesn't make it easy.  One picture at a time.
    HELP!

    I have scanned most of my pictures into the Photo gallery set up.  I was trying to make a slide show for my family .  My side and than my husbands side.  I had one set of old pictures completed as a slide show.  The second set   is almost complete.  I have lost most of the first slide show pictures.   The second set  I cannot finish adding the remainder of the  pictures .  A box appears and says "error number  9".  I don't know what happened.   What does this mean?  How did the pictures get lost from the slide show?
    Do you know the amount of hours it took to do the scanning?  Vista doesn't make it easy.  One picture at a time.
    HELP!

Maybe you are looking for