JQUERY



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://lh3.googleusercontent.com/-TC8oieiJ5t4/UamHBBKVnuI/AAAAAAAAAWg/xNX2Z1z3PZI/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&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;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='http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png'/></a></div>
     Click "Save" and you are done, check your blog to see the awesome sliding widget.

    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>

No comments:

Post a Comment