Ломаем и защищаем WordPress своими руками. Ломаем и защищаем WordPress своими руками Inurl shoutbox php смелый

Written by Saran on April 23, 2013 , Updated January 30, 2014

Facebook has this nice little chat box that doesn"t take up much space, and people can instantly interact with their friends, it is a cool feature to have in any website. Let"s get inspired and create an similar shoutbox which will look similar to Facebook chat box.

Style Here"s the CSS, I"ve tried to make it look close as possible to Facebook chat box. Should work in Chrome, Firefox and ie8+. Let me know if it requires some tweaking in other browsers.

Shout_box { background:#627BAE; width:260px; overflow:hidden; position:fixed; bottom:0; right:20%; z-index:9; } .shout_box .header .close_btn { background: url(images/close_btn.png) no-repeat 0px 0px; float:right; width:15px; height: 15px; } .shout_box .header .close_btn:hover { background: url(images/close_btn.png) no-repeat 0px -16px; } .shout_box .header .open_btn { background: url(images/close_btn.png) no-repeat 0px -32px; float:right; width:15px; height:15px; } .shout_box .header .open_btn:hover { background: url(images/close_btn.png) no-repeat 0px -48px; } .shout_box .header{ padding: 5px 3px 5px 5px; font: 11px "lucida grande", tahoma, verdana, arial, sans-serif; font-weight: bold; color:#fff; border: 1px solid rgba(0, 39, 121, .76); border-bottom:none; cursor:pointer; } .shout_box .header:hover{ background-color: #627BAE; } .shout_box .message_box { background: #FFFFFF; height: 200px; overflow:auto; border: 1px solid #CCC; } .shout_msg{ margin-bottom: 10px; display: block; border-bottom: 1px solid #F3F3F3; padding: 0px 5px 5px 5px; font: 11px "lucida grande", tahoma, verdana, arial, sans-serif; color:#7C7C7C; } .message_box:last-child { border-bottom:none; } time{ font: 11px "lucida grande", tahoma, verdana, arial, sans-serif; font-weight: normal; float:right; color: #D5D5D5; } .shout_msg .username{ margin-bottom: 10px;margin-top: 10px; } .user_info input { width: 98%; height: 25px; border: 1px solid #CCC; border-top: none; padding: 3px 0px 0px 3px; font: 11px "lucida grande", tahoma, verdana, arial, sans-serif; } .shout_msg .username{ font-weight: bold; display: block; }

Shout Box HTML Have a look at Shout box markup, you can see username and message fields, also the div with "message_box" class attribute, where user messages are loaded from the database.

Saaraan Shout Box

jQuery Using setInterval() , we will refresh chat every 1000 milliseconds, it sends ajax call to shout.php and loads returned data into the element, updating shout-box with any newly added message.

//automatically refresh after every 1000 milliseconds. load_data = {"fetch":1}; window.setInterval(function(){ $.post("shout.php", load_data, function(data) { $(".message_box").html(data); var scrolltoh = $(".message_box").scrollHeight; $(".message_box").scrollTop(scrolltoh); }); }, 1000);

When user writes something and hit enter key, we need to send entered data to shout.php . The keypress() method triggers when a button is pressed down, and (evt.which == 13) condition makes sure key pressed is Enter key, then we can proceed with ajax $.post() method, as shown in example below. You can replace keypress() with .click() method, but you need to add button in your HTML.

//method to trigger when user hits enter key $("#shout_message").keypress(function(evt) { if(evt.which == 13) { var iusername = $("#shout_username").val(); var imessage = $("#shout_message").val(); post_data = {"username":iusername, "message":imessage}; //send data to "shout.php" using jQuery $.post() $.post("shout.php", post_data, function(data) { //append data into messagebox with jQuery fade effect! $(data).hide().appendTo(".message_box").fadeIn(); //keep scrolled to bottom of chat! var scrolltoh = $(".message_box").scrollHeight; $(".message_box").scrollTop(scrolltoh); //reset value of message box $("#shout_message").val(""); }).fail(function(err) { //alert HTTP server error alert(err.statusText); }); } });

Example below slides up or down shout box, when user clicks close or open icon.

//toggle hide/show shout box $(".close_btn").click(function (e) { //get CSS display state of .toggle_chat element var toggleState = $(".toggle_chat").css("display"); //toggle show/hide chat box $(".toggle_chat").slideToggle(); //use toggleState var to change close/open icon image if(toggleState == "block") { $(".header div").attr("class", "open_btn"); }else{ $(".header div").attr("class", "close_btn"); } });

PHP Here"s PHP file shout.php , as you can see I have sanitized post variables using PHP filter_var() , and performed some MySQL query. Since I don"t want to grow this database table large, I am keeping only 10 recent rows in the database, everything else will be deleted. It is up to you to decide how many rows you want to keep.