Wednesday, 5 October 2011

jQuery & CSS: how to create a feedback slider

   


Today we are going to create a simple feedback slider using jQuery and CSS. I suppose you've seen many sliders on recently created web sites. They are used to make short forms or generic information slide over a page when a button is pressed. The slider (or tab if you prefer) can be placed where we need it and it can be styled the way we prefer.

We will create an example just to understand the basics behind it. Something like:

A form will slide down when the "feedback" button is pressed.


The jQuery part
Let's start with the jQuery part. We need to link to the library and add a short snippet used to animate the slider when the button is pressed:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".button-slide").click(function(){
    $(".feedback").slideToggle("slow");
    return false;
  });
});
</script>
Nothing's special here. Remember to add the above in the head of your document.

The CSS
We will give a proper style to every single piece of the slider. We have a container (everything's inside it), the feedback div (where the form is), the button (needed to start the sliding) and the <a> tag (we style it so that all unnecessary decorations will not get in the way). Again, add the following in the head of your document:
<style type="text/css">
.container {
  position: fixed;
  top: 0px;
  right: 0px;
  width: 250px;
  z-index: 1;
  text-align: center;
}
.feedback {
  display: none;
  border: solid 4px #006699;
  background-color: #DEDEDE;
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
  -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
  box-shadow: 0 1px 5px rgba(0,0,0,0.75);
}
a.button-slide {
  display: block;
  width: 120px;
  padding: 2px;
  margin: 0 auto;
  background-color: #006699;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
  -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.75);
  box-shadow: 0 1px 5px rgba(0,0,0,0.75);
}
a {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
a:active {
  text-decoration: none;
}
a:link {
  text-decoration: none;
}
</style>

The HTML
Finally we create the container and all the rest. Put the following code where you prefer (in the body section of your document):
<div class="container">
  <div class="feedback" align="center">
  <form id="form" name="form" method="post" action="">
  <p>
    <label>E-mail:<br />
    <input type="text" name="email" size="25" /></label>
  </p>
  <p>
    <label>Message:<br />
    <textarea name="msg" rows="5" cols="23"></textarea></label>
  </p>
  <p>
    <input type="submit" name="feedbackSubmit" value="Send" />
  </p>
  </form>
  </div>
  <a href="#" class="button-slide">Feedback</a>
</div>
And that's all. If we want to change the position of the slider, we have to change the container style

Load your page and click on the "Feedback" button.

4 comments:

  1. how can i toggle it from right to left ??

    ReplyDelete
    Replies
    1. The following part is what you need to change:
      .container {
      position: fixed;
      top: 0px;
      right: 0px;
      width: 250px;
      z-index: 1;
      text-align: center;
      }
      Try to replace:
      right: 0px;
      with:
      left: 0px;

      Delete
  2. And how can i toggle it left side in "vertical" position? Thanks.

    ReplyDelete
    Replies
    1. Ok, man. I believe you don't have any experience with CSS... I cannot write everything for you :-) but you can play around with the styles and get it to work the way you want. It's not dangerous...
      I'll give some ideas:
      1)change the width from 250px to maybe 50px;
      2)add an height: 250px
      3)go and see this article: http://thewebthought.blogspot.com/2011/09/css-vertical-text.html because you need to make the text vertical
      4) add some space from the top (top: 0px should be something like top:100px)

      and see how it goes... Basically you need to play with the container... Keep in mind that I'm just giving you ideas, I'm not actually doing it ;-)

      Delete

Comments are moderated. I apologize if I don't publish comments immediately.

However, I do answer to all the comments.