Budz
New Member
- Mar 7, 2014
- 9
- 0
Hello Devbest, Budz here with a JQuery tutorial. This tutorial is basically based upon a Feedback System bar usually located on the side of your screens. Making it with easing animation effects. Use it and make some thing better your web project feedback box.
--------------------
JavaScript Code
Contains five animation move functions. Four click actions take a look at click(function()
--------------------
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var feed_width = $('#feedback').width();
var scr_w = screen.width; // Screen Width
// 26 is width of the veritcal feedback button
var btn_width = 26;
var move_right = scr_w - btn_width;
var move_left = -(feed_width - btn_width);
var slide_from_left = 0;
var slide_from_right = scr_w - (feed_width - btn_width);
var center = ( scr_w / 2 ) - ( feed_width / 2 );
functionpositioningForm()
{
$('.left_btn').hide();
$('#feedback').css({"left": move_right+"px"}).show();
}
functionslideFromRight()
{
$('#feedback').animate(
{left: slide_from_right+"px"},
{duration: 'slow',easing: 'easeOutElastic'});
$('.left_btn').hide();
}
functionslideFromleft()
{
$('#feedback').animate(
{left: slide_from_left+"px"},
{duration: 'slow',easing: 'easeOutElastic'});
$('.right_btn').hide();
}
functionmoveLeft()
{
$('#feedback').animate(
{left: move_left+"px"},
{duration: 'slow',easing: 'easeOutElastic'});
$('.left_btn').show();
}
functionmoveRight()
{
$('#feedback').animate(
{left: move_right+"px"},
{duration: 'slow',easing: 'easeOutElastic'});
$('.right_btn').show();
}
// Positioning the feedback form at the time of page loading
positioningForm();
// Handling the right_btn and lift_btn event animations
$('.right_btn').click(function()
{
slideFromRight();
});
$('.left_btn').click(function()
{
slideFromleft();
});
// Moving left or right by clicking close button
$('.feed_close').click(function()
{
var pos = $('#feedback').position();
var ls = pos.left;
if(ls == slide_from_left)
{
// feedback form is at LEFT
moveRight();
}
else if(ls == center)
{
// feedback form is at RIGHT
moveRight();
}
else
{
// feedback form is at CENTER
moveLeft();
}
});
// Submit Form values
$('#submit_btn').click(function()
{
var name=$('#name').val();
var email=$('#email').val();
var msg=$('#msg').val();
if(name.length>0 && email.length>0 && msg.length>0)
{
$('.left_btn').hide();
$('.right_btn').hide();
$('.box').hide();
$('#feedback').animate(
{left: center+"px"},
{duration: 'slow',easing: 'easeOutElastic'});
$('.thankyou').show();
}
else
{
$('#error').html('Enter some thing');
}
return false();
});
});
</script>--------------------
HTML Code
Contains simple HTML code.
--------------------
Code:
<div id="feedback">
<div class="right_btn"><img src="images/feed_right_btn.png" width="26px" height="99px"/></div>
<div class="formdiv">
<div class='thankyou'>
<h3>Thank you !</h3>
<div class="feed_close"><img src="images/feed_close_btn.png" width="16px" height="15px"/></div>
</div>
<div class="box">
<table border="0"> <tr>
<td><label>Name:</label><br/><input type="text" name="name" id="name"/> </td>
<td valign="middle" align="right"><div class="feed_close"><img src="images/feed_close_btn.png" width="16px" height="15px"/></div></td>
</tr> <tr>
<td colspan="2"><label>Email:</label><br/><input type="text" name="email" id="email"/></td>
</tr> <tr>
<td colspan="2"><label>Message: </label><br/><textarea rows="5" cols="16" name="msg" id="msg"></textarea></td>
</tr> <tr>
<td colspan="2"><input id="submit_btn" type="submit" value="Submit"/><span id="error"></span></td>
</tr> </table>
</div>
</div>
<div class="form_submit"></div>
<div class="left_btn"><img src="images/feed_left_btn.png" width="26px" height="99px"/></div>
</div>---------------
CSS Code
Basic CSS script.
---------------
Code:
body{
width: 100%;
overflow: hidden; /* This is IMP */
padding: 0;
margin: 0 auto;
}
#feedback{
width: 362px;
padding: 10px;
position: absolute;
top: 100px;
display: none;
}
#feedback.formdiv{
width: 300px;
float: left;
background-color: #6f115c;
padding: 0px 5px 5px 5px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-right-radius:6px;
border-bottom-left-radius:6px;
min-height:100px;
}
#feedbacklabel{
font:bold 11px arial;
color: #febaf9;
}
#feedbacktextarea{
width: 290px;
height: 100px;
color: #fcd1f2;
font: normal 11px verdana;
border: none;
padding: 5px;
background-color: #943080;
-moz-box-shadow: inset 1px 1px 1px #4c0b3f;
-webkit-box-shadow: inset 1px 1px 1px #4c0b3f;
resize: none; /* disable extending textarea in chrome */
}
#feedbackinput[type="text"]{
color: #606060;
font: normal 11px verdana;
padding: 3px;
width: 200px;
height: 25px;
border: none;
color: #fcd1f2;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: #943080;
-moz-box-shadow: inset 1px 1px 1px #4c0b3f;
-webkit-box-shadow: inset 1px 1px 1px #4c0b3f;
}
#feedbackinput[type="submit"]{
background-color: #ffaffa;
border: none;
color: #6f115c;
font:bold 11px arial;
padding: 2px 6px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
cursor: pointer;
}
#feedback.left_btn,
#feedback.right_btn{
width: 26px;
height: 100px;
float: left;
cursor: pointer;
}
#feedback.feed_close{
cursor: pointer;
margin:-15px -5px 0px 0px;
}
#error
{
color:#fff;
padding:4px;
font-size:11px;
}
.thankyou
{
text-align:center;
display:none;
}I am only showing you the coding(s), because it's a simple project... How hard can it be? After all, this is called Coders Paradise for a reason. It's pretty straight forward knowing that it includes a MySQL database to do it and for it to be tested.
If not, I have supported files along with this. In this file has it all ready for you, if you don't feel like doing it yourself with the basic codes above:
You must be registered for see links
<---- Click me
