003.<head>
004.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
005.<title>Untitled Document</title>
006.</head>
007. <link type="text/css" rel="stylesheet" href="css/style.css">
008. <link type="text/css" rel="stylesheet" href="css/example.css">
010.</head>
011.<body>
012.
013.<?php
014.
015.include('config.php');
016.$id_post = "1";
017.?>
018.<div class="cmt-container" >
019. <?php
020. $sql = mysql_query("SELECT * FROM comments WHERE id_post = '$id_post'") or die(mysql_error());
021. mysql_query("SET character_set_results=utf8");
022. mysql_query("SET character_set_client=utf8");
023. mysql_query("SET character_set_connection=utf8");
024. while($affcom = mysql_fetch_array($sql)){
025. $name = $affcom['name'];
026. $email = $affcom['email'];
027. $comment = $affcom['comment'];
028. $date = $affcom['date'];
029.
030.
031.
032. $default = "mm";
033. $size = 35;
034.
035.
036. ?>
037. <div class="cmt-cnt">
038. <img src="img/profile-img.jpg" />
039. <div class="thecom">
040. <h5><?php echo $name; ?></h5><span data-utime="1371248446" class="com-dt"><?php echo $date; ?></span>
041. <br/>
042. <p>
043. <?php echo $comment; ?>
044. </p>
045. </div>
046. </div><!-- end "cmt-cnt" -->
047. <?php } ?>
048.
049.
050. <div class="new-com-bt">
051. <span>Write a comment ...</span>
052. </div>
053. <div class="new-com-cnt">
054. <input type="text" id="name-com" name="name-com" value="" placeholder="Your name" />
055. <input type="text" id="mail-com" name="mail-com" value="" placeholder="Your e-mail adress" />
056. <textarea class="the-new-com"></textarea>
057. <div class="bt-add-com">Post comment</div>
058. <div class="bt-cancel-com">Cancel</div>
059. </div>
060. <div class="clear"></div>
061.</div><!-- end of comments container "cmt-container" -->
062.
063.
064.<script type="text/javascript">
065. $(function(){
066.
067. $('.new-com-bt').click(function(event){
068. $(this).hide();
069. $('.new-com-cnt').show();
070. $('#name-com').focus();
071. });
072.
073.
074. $('.the-new-com').bind('input propertychange', function() {
075. $(".bt-add-com").css({opacity:0.6});
076. var checklength = $(this).val().length;
077. if(checklength){ $(".bt-add-com").css({opacity:1}); }
078. });
079.
080.
081. $('.bt-cancel-com').click(function(){
082. $('.the-new-com').val('');
083. $('.new-com-cnt').fadeOut('fast', function(){
084. $('.new-com-bt').fadeIn('fast');
085. });
086. });
087.
088.
089. $('.bt-add-com').click(function(){
090. var theCom = $('.the-new-com');
091. var theName = $('#name-com');
092. var theMail = $('#mail-com');
093.
094. if( !theCom.val()){
095. alert('You need to write a comment!');
096. }else{
097. $.ajax({
098. type: "POST",
099. url: "ajax/add-comment.php",
100. data: 'act=add-com&id_post='+<?php echo $id_post; ?>+'&name='+theName.val()+'&email='+theMail.val()+'&comment='+theCom.val(),
101. success: function(html){
102. theCom.val('');
103. theMail.val('');
104. theName.val('');
105. $('.new-com-cnt').hide('fast', function(){
106. $('.new-com-bt').show('fast');
107. $('.new-com-bt').before(html);
108. })
109. }
110. });
111. }
112. });
113.
114. });
115.</script>
116.
117.</body>
118.</html>
