SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    When icon clicked, one field form slides out

    Hey folks!
    Basically, i need help with one tiny thing.I have a menu with 4 links in it and a small email icon next to it.Here is the code
    <ul id="navigation">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Us</a> </li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact</a></li>
    </ul>
    <img src="images/subscribe.png" width="22" height="22">

    Now, when user clicks on this icon, i would need to make one filed form (for email) to slide out (left from icon) and allow user to enter his email and click send.Also, that form should be able to close when clicked again on the icon.
    I know this is a lot of stuff, but is there somebody that could help? :\

    I think this is just a few lines of JS/jQuery, but i dont know it , and i really really need help...

  2. #2
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    10
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <ul id="navigation" style="display:none;"> // hide this from begin
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Us</a> </li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact</a></li>
    </ul>
    <img id="icon" src="images/subscribe.png" width="22" height="22">
    I use jquery.
    Code:
    <script>
    $('#icon').click(function() {
      $('#navigation').toggle('fast', function() {
        // Animation complete.
      });
    });
    </script>

  3. #3
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your time and help
    Since i dont know any jquery, this doesnt help much xD Is there any chance that you could help me again?

    This is the form i want to be slided out to the left:
    <form>
    <input name="email" type="email" placeholder="Enter your e-mail...">
    <input name="submit" type="button" value="Send">
    </form>

  4. #4
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    10
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Add this line before </head>
    Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    Add code where you want to show image and form subcribe.
    Code:
    <img id="image-subscribe" src="images/subscribe.png" width="22" height="22">
    <form id="subscribe" style="display:none;">
    <input name="email" type="email" placeholder="Enter your e-mail...">
    <input name="submit" type="button" value="Send">
    </form>
    <script>
    $('#image-subscribe').click(function() {
      $('#subscribe').toggle('fast', function() {
        // Animation complete.
      });
    });
    </script>

  5. #5
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If there was option on this forum "buy a beer to a member" you would deffinetely got it
    Thanks a lot!!!
    If i can only bore you with one other thing...This works great, but it slides down.How it can be changed to slide to the left of the icon?

  6. #6
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    10
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Try this. Hope it work.
    Code:
    <form>
    <input id="subscribe-email" name="email" type="email" placeholder="Enter your e-mail..." style="display:none;">
    <input id="subscribe-send" name="submit" type="button" value="Send" style="display:none;">
    <img id="image-subscribe" src="images/subscribe.png" width="22" height="22">
    </form>
    <script>
    $('#image-subscribe').click(function() {
      $('#subscribe-email').toggle('fast', function() {
      $('#subscribe-send').toggle('fast', function() {
      });
      });
    });
    </script>

  7. #7
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works perfectly, but when i click on the image, form window that slides out moves to image to the right side...Any option to "lock" the image at place, so that only the form slides out?

  8. #8
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    10
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I will try but I must know where you place the code. Please send to me your website.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •