Facebook Slide Out Like Box Widget For Blog Or Website
Stylish facebook like box widget is design and it will slide out smooth when you place your cursor on the widget banner due to the jQuery effect.
For you to add this great widget to your blog, simply follow the few steps below.
1) Go to your blogger dashboard
Click on "Design" >"Template" > "Edit HTML"
Use ctrl+f to find and paste the following code inside/after tag
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">Click "SAVE TEMPLATE"
2) Go to "Design" > "Layout" > "Add a Gadget" Choose "HTML/JavaScript" from the list of the gadgets and paste the code below in the content box leaving the title blank.
<script type="text/javascript">/*<![CDATA[*/jQuery(document).ready(function() {jQuery(".rblikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});/*]]>*/</script><style type="text/css">.rblikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCzt5mcv70E_j5VQn2Xb54yJjR8eY9tTkH7Sr4o-de8vQO4k39oYr5MThZYwwek6__pZucD-adgpV0VZlGMgKwZAyv9EI4mG-R9-943rMmtlMlGxStmTJaiUqyqeNahhNX2V_HQInH4rw/h120/rb+facebook+slide+out+widget+2.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 42px;width: 245px;z-index: 9999999;position:fixed;right:-250px;top:20%;}.rblikebox div{border:none;position:relative;display:block;}.rblikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 999;}.rblikebox span a{color: gray;text-decoration:none;}.rblikebox span a:hover{text-decoration:underline;}</style><div class="rblikebox"><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/knowledge1corner&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div><a href='http://realcombiz.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsN7wh8-MoxXXiar0N5m_jYyMf8Z9NPO9zOgQNNeK6PbJwwHYm705MMgyIvqRNLNp7v-m7l2YMxOsB43ZJjYUHsoC_q2fmHIGDJ-23SFg66LLENUotVm5oS3VZiQyPVOLJD9T8-kK-VqM/s1600/1x1juice.png'/></a></div>
Replace your facebook fan page username
Hope You understand & enjoy this post
Play Notification Sound using Jquery.
How to play a notification sound on website chat?. We implemented this in a simple chat box application using Jquery and HTML5 audio tag.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>knowledgecorner Javascript Notification Sound</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#chatData").focus();
$('<audio id="chatAudio"><source src="notify.ogg" type="audio/ogg"><source src="notify.mp3" type="audio/mpeg"><source src="notify.wav" type="audio/wav"></audio>').appendTo('body');
$("#trig").on("click",function(){
var a = $("#chatData").val().trim();
if(a.length > 0){
$("#chatData").val('');
$("#chatData").focus();
$("<li></li>").html('<img src="srinu.jpg"/><span>'+a+'</span>').appendTo("#chatMessages");
$("#chat").animate({"scrollTop": $('#chat')[0].scrollHeight}, "slow");
$('#chatAudio')[0].play();
}
});
});
</script>
<style type="text/css">
* { padding:0px; margin:0px; }
body{font-family:arial;font-size:13px}
#chatBox {width:400px; border:1px solid #000;margin:5px;}
#chatBox > h3 { background-color:#38761D; padding:3px; color:#fff; }
#chat { max-height:220px; overflow-y:auto; max-width:400px; }
#chat > ul > li { padding:3px;clear:both;padding:4px;margin:10px 0px 5px 0px;overflow:auto }
#chatMessages{list-style:none}
#chatMessages > li > img { width:35px;float:left }
#chatMessages > li > span { width:300px;float:left;margin-left:5px}
#chatData { padding:5px; margin:5px; border-radius:5px; border:1px solid #999;width:300px }
#trig { padding: 4px;border: solid 1px #333;background-color: #133783;color:#fff;font-weight:bold;cursor:pointer; }
</style>
</head>
<body>
<div style='margin:0 auto;width:800px;'>
<div style='margin:20px'>
<h1>Javascript Notification Sound</h1>
<h3>Turn the volume up and try this demo <a href='http://knowledgecornor.blogspot.in/'>knowledgecorner</a></h3>
</div>
<div id='chatBox' style='margin-top:20px'>
<h3>knowledgecorner Demo Chat</h3>
<div id='chat'>
<ul id='chatMessages'>
<li>
<img src="srinu.jpg"/>
<span>Hello Friends</span>
</li>
<li>
<img src="srinu.jpg"/>
<span>This is srinu</span>
</li>
</ul>
</div>
<input type="text" id="chatData" placeholder="Message" />
<input type="button" value=" Send " id="trig" />
</div>
</div>
</body>
</html>
Zooming Images using jQuery
Image zoom-in is very useful feature in an eCommerce website to show your product images to viewers in zoom with there ease. So in this tutorial i am going to show you how to make a very simple zoom in image program in which I have used a jQuery plugin
In demo i have shown 4 different demo examples like.
Standard Zoom
Reverse Zoom
Drag Zoom
Inner Zoom
Import jQuery and jQZoom libraries and css in your HTML File.
<script type="text/javascript" src="jquery-1.8.0.min.js"></script> <link rel="stylesheet" type="text/css" href="jquery.jqzoom.css"> <script type="text/javascript" src="jquery.jqzoom-core-pack.js"></script>jQuery to initialize your page images settings.
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(\'a#demo1\').jqzoom();
jQuery(\'a#demo2\').jqzoom({
zoomType: \'reverse\'
});
jQuery(\'a#demo3\').jqzoom({
zoomType: \'drag\'
});
jQuery(\'a#demo4\').jqzoom({
zoomType: \'innerzoom\'
});
});
</script>
Images block where you have to put a small image(Thumbnail) and a large image (Original) like this.<div class="clearfix demo">
<div class="clearfix" style="position:relative;">
<a href="images/1_big.png" rel="gal1" id="demo1" title="kc ZoomIn" >
<img src="images/1_small.png" title="PHPGang.com ZoomIn" style="border: 1px solid #666;">
</a>
</div>
</div>
Download Script and use it and comment your reviews.
Simple Drop Down Menu with Jquery and CSS
This post is very basic level Jquery and CSS implementation. I want to explain how to design simple drop down menu with CSS, HTML and Jquery.
This system helps you to minimise the menus list.
<html>
<head>
<title>Kc-Submenu Demo</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function()
{
$(".account").click(function()
{
var X=$(this).attr('id');
if(X==1)
{
$(".submenu").hide();
$(this).attr('id', '0');
}
else
{
$(".submenu").show();
$(this).attr('id', '1');
}
});
//Mouseup textarea false
$(".submenu").mouseup(function()
{
return false
});
$(".account").mouseup(function()
{
return false
});
//Textarea without editing.
$(document).mouseup(function()
{
$(".submenu").hide();
$(".account").attr('id', '');
});
});
</script>
<!-- css -->
<style>
body
{
background-color:#e4e8ec;
font-family:arial;
}
div.dropdown {
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align:left;
}
div.submenu
{
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.dropdown li a {
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}
.dropdown li a:hover{
background:#38761d;
color: #FFFFFF;
text-decoration: none;
}
a.account {
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px 17px no-repeat;
cursor:pointer;
}
.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}
</style>
</head>
<body>
<div align="center"style='margin:50px'>
<div class="dropdown">
<a class="account" >
<span>My Account</span>
</a>
<div class="submenu" style="display: none; ">
<ul class="root">
<li >
<a href="#Dashboard" >Dashboard</a>
</li>
<li >
<a href="#Profile" >Profile</a>
</li>
<li >
<a href="#settings">Settings</a>
</li>
<li>
<a href="#feedback">Send Feedback</a>
</li>
<li>
<a href="#signout">Sign Out</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Demo
Kc-Submenu Demo
You might have seen many websites which checks username availability in real time during registration process.For example Gmail or twitter sign up processes, their registration process is user oriented , it tells user availability on run time.
This Article is to create a similar script which will tell username availability at run time.
In this article we are checking the username entered by the user during filling the form with the usernames already stored in the database using Ajax and Jquery on run time.
I have created a sample table called ‘registered_users’.
Username Availability Checker With jQuery and Ajax
You might have seen many websites which checks username availability in real time during registration process.For example Gmail or twitter sign up processes, their registration process is user oriented , it tells user availability on run time.
This Article is to create a similar script which will tell username availability at run time.
In this article we are checking the username entered by the user during filling the form with the usernames already stored in the database using Ajax and Jquery on run time.
I have created a sample table called ‘registered_users’.
CREATE TABLE IF NOT EXISTS `registered_users` ( `id` int(10) NOT NULL AUTO_INCREMENT, `name` varchar(20) NOT NULL, `password` varchar(20) NOT NULL, PRIMARY KEY (`id`) );Now below is the code for the registration page through which users will enter their names.
<div id="form">
<label>Choose Your Username</label>
<input type="text" autocomplete="off" name="user_name" id="user_id" class="user_name" >
<span class="check" ></span>
</div>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function()
{
$('.user_name').keyup(function()
{
var checkname=$(this).val();
var availname=remove_whitespaces(checkname);
if(availname!=''){
$('.check').show();
$('.check').fadeIn(400).html('<img src="image/ajax-loading.gif" /> ');
var String = 'username='+ availname;
$.ajax({
type: "POST",
url: "available.php",
data: String,
cache: false,
success: function(result){
var result=remove_whitespaces(result);
if(result==''){
$('.check').html('<img src="image/accept.png" /> This Username Is Avaliable');
$(".check").removeClass("red");
$('.check').addClass("green");
$(".user_name").removeClass("yellow");
$(".user_name").addClass("white");
}else{
$('.check').html('<img src="image/error.png" /> This Username Is Already Taken');
$(".check").removeClass("green");
$('.check').addClass("red")
$(".user_name").removeClass("white");
$(".user_name").addClass("yellow");
}
}
});
}else{
$('.check').html('');
}
});
});
function remove_whitespaces(str){
var str=str.replace(/^\s+|\s+$/,'');
return str;
}
</script>
Using this form we will check if the user name entered is already present in the database or not.Depending on the availability proper message will be displayed on the screen.<?php
$mysql_db_hostname = "localhost";
$mysql_db_user = "root";
$mysql_db_password = "password";
$mysql_db_database = "database";
$con = mysql_connect($mysql_db_hostname, $mysql_db_user, $mysql_db_password) or die("Could not connect database");
mysql_select_db($mysql_db_database, $con) or die("Could not select database");
if(isset($_POST['username']) && !empty($_POST['username'])){
$username=strtolower(mysql_real_escape_string($_POST['username']));
$query="select * from registered_users where LOWER(name)='$username'";
$res=mysql_query($query);
$count=mysql_num_rows($res);
$HTML='';
if($count > 0){
$HTML='user exists';
}else{
$HTML='';
}
echo $HTML;
}
?>
This post is so helpfull and informative.Keep updating more information...
ReplyDeleteGraphic Designing in Mumbai
Graphic Design courses in Ahmedabad
Graphic Designers in Kochi
Graphic Design institute in Trivandrum
Graphic Designing in Kolkata