Top 10 Collection of jQuery Tutorials Inspired from Facebook


Top 10 Collection of jQuery Tutorials Inspired from Facebook at itswadesh.wordpress.com

  1. Facebook type vertical navigation menu created with jquery
  2. How to create a facebook style activity notification plugin using jQuery and PHP – facebook beeper
  3. Free gmail, facebook type chat application using CSS, jQuery and PHP
  4. Facebook Style CSS JQuery drop down menus
  5. Create A Vertical Scrolling News Ticker With jQuery and jCarousel Lite
  6. Facebook Style Alert Confirm Box with jQuery and CSS
  7. How to track online status of a user in my website like facebook
  8. Creating a Simple Photo Album with jQuery Similar to Facebook
  9. Facebook like red notification simple css technique
  10. Facebook Style Footer Admin Panel

How to Add Syntax Highlighter to Blogger or Blogspot Blog


I run a web programming blog with tutorials. Where programming code has got the most importance. Hence i needed my code in any tutorial to be highlighted with colors. I searched throughout. I landed into the SyntaxHighlighter plugin for WordPress. Which easily integrates into WordPress.

But my requirement was to embed SyntaxHighlighter into Bloggeras i run my blog on Blogger.com. The following steps may help.

Step 1: Backup your blogger template

 

In your left side navigation menu click on Template. Then at the very top-right corner you can find a button to “Backup/Restore” your blogger template design.

 

Step 2:  Edit Blogger Template in New Blogger Interface

 

 

Navigate to Blogger dashboard > Layout > Edit HTML  and Expand Widget Templates. Search for <head> and replace it with the below code

<head>

<link href='https://sites.google.com/site/itswadesh/codehighlighter/shCore.css' rel='stylesheet' type='text/css'/>

<link href='http://sites.google.com/site/itswadesh/codehighlighter/shThemeDefault.css' rel='stylesheet' type='text/css'/>

<script src='http://sites.google.com/site/itswadesh/codehighlighter/shCore.js' type='text/javascript'/>

<script src='http://sites.google.com/site/itswadesh/codehighlighter/shBrushCss.js' type='text/javascript'/>

<script src='http://sites.google.com/site/itswadesh/codehighlighter/shBrushJScript.js' type='text/javascript'/>

<script src='http://sites.google.com/site/itswadesh/codehighlighter/shBrushXml.js' type='text/javascript'/>

<script type='text/javascript'>

SyntaxHighlighter.all()

</script>

Step 3: Write Your Programming Code inside <pre> Tag

 

Whenever you publish a post with Programming Code, include the code within the <pre> section

<pre class=”brush: js”>
Your script here
</pre>

Example:

<pre class="brush: js">
$(document).bind('click', function(e) {

            var $clicked = $(e.target);
            if (! $clicked.parents().hasClass("staticMenu")){
                $(".staticMenu dd ul").hide();
                $(".staticMenu dt a").removeClass("selected");
            }        });

</pre>

Facebook type vertical navigation menu created with jquery


The above picture shows a facebook page which gets loaded asynchronously with history support. This amazing technology of facebook is now been adopted by other websites also.

The whole thing contains only 2 pages conceptually.

1. The menu

2. The content space

Features

  • This plugin is cache enabled. It helps the page loading faster with the use of cacheing technology which restricts the number of unnecessary database server requests
  • Contents loads using AJAX but still back button is enabled. Hence visible to search engines (SEO optimized).
  • Contents loads much faster as only the content is loaded instead of each page separately.
  • Further, it has a built in browser history support (Back button enabled).
  • Requested pages loads sequencially (e.g first content then advertisements).
  • An AJAX loading gif is shown while loading the page.
  • Individual pages to fill in the content space.
  • Nicely positioned css layout like facebook vertical menu.
  • Also includes images to make the menu user friendly.
  • Clean and simple code design to make your embeding task easy.
  • Allows users to perform multiple tasks (requests) at a time.
  • This plugin is developed using Benalman’s jQuery BBQ plugin.

Add the following scripts to your page template

<script type="text/javascript" src="js/jquery-1.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/facebook_vertical_menu.js"></script>

Add the following CSS to your page template

<link href="css/fb_menu.css" rel="stylesheet" type="text/css"/>

Add the following customized jQuery code just above the head section

 
 <script type="text/javascript">
/* //If used along with other jquery framework other than v1.4.1
//Uncomment this piece of code
setInterval("update2()", 1000); // Update every 10 seconds 

function update2()
{$(function()
{
});
}
*/
</script>

Put all your menu items inside a UL tag like bellow

<ul>
        <li><a href="#wall.htm"><img src="images/blogs.png" height="14"/>Wall</a></li>        
        <li><a href="#Information.htm" href="#"><img src="images/info.png" height="14"/>Info</a></li>        
        <li><a href="#Friends.htm"><img src="images/friends.png" height="14"/>Friends</a></li>      
        <li><a href="#Groups.htm"><img height="14" src="images/groups.png"/>Groups</a></li>
        <li><a href="#Photos.htm"><img src="images/photos.png" height="14"/>Photos</a></li>
        <li><a href="#Messages.htm"><img src="images/messages2.png" height="14"/>Messages</a></li>

</ul>

Here is the content area where the result will be displayed

<div id="centercolumn">
              <!-- single pane -->
<div>

  <div style="display: none;">

</div></div></div>

jquery visitors flip counter like digital clock


I was visiting a website called stepout.com. I came across this members counter which seem to be pretty cool. So here i explain it for you, how it is done.

Step-1 : We start by adding some jquery plugins and css to our page

 <!-- jQuery from Google CDN, REQUIRED -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <!-- My flip counter script, REQUIRED -->
    <script type="text/javascript" src="js/flipcounter.min.js"></script>
    <!-- Style sheet for the counter, REQUIRED -->
    <link rel="stylesheet" type="text/css" href="css/counter.css" />

    <!-- jQueryUI from Google CDN, used only for the fancy demo controls, NOT REQUIRED for the counter itself -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
    <!-- Style sheet for the jQueryUI controls, NOT REQUIRED for the counter itself -->
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/vader/jquery-ui.css" />
    <!-- Style sheet for the demo page, NOT REQUIRED for the counter itself -->
    <link rel="stylesheet" type="text/css" href="css/demo.css" />

Step-2 : Next job is to put some div tags where it will be displayed

<li>Increment:
            <span id="inc_value">123</span> <a href="#">[?]</a><div id="inc_slider"></div>
            <div>
                <p>This slider controls the counter increment by using the <b>setIncrement</b> method:</p>
                <code>myCounter.setIncrement(value);</code>
            </div>
        </li>

Step-3 : Our next job is to have some javascript customization

<script type="text/javascript">
    //<![CDATA[

    // Initialize a new counter
    var myCounter = new flipCounter('counter', {value:10000, inc:123, pace:800, auto:true});

    $(function(){

        /**
         * Demo controls
         */

        var smartInc = 0;

        // Increment
        $("#inc_slider").slider({
            range: "max",
            value: 123,
            min: 1,
            max: 1000,
            slide: function( event, ui ) {
                myCounter.setIncrement(ui.value);
                $("#inc_value").text(ui.value);
            }
        });

        // Pace
        $("#pace_slider").slider({
            range: "max",
            value: 800,
            min: 100,
            max: 1000,
            step: 100,
            slide: function( event, ui ) {
                myCounter.setPace(ui.value);
                $("#pace_value").text(ui.value);
            }
        });

        // Auto-increment
        $("#auto_toggle").buttonset();
        $("input[name=auto]").change(function(){
            if ($("#auto1:checked").length == 1){
                $("#counter_step").button({disabled: true});
                $(".auto_off_controls").hide();
                $(".auto_on_controls").show();

                myCounter.setPace($("#pace_slider").slider("value"));
                myCounter.setIncrement($("#inc_slider").slider("value"));
                myCounter.setAuto(true);
            }
            else{
                $("#counter_step").button({disabled: false});
                $(".auto_off_controls").show();
                $(".auto_on_controls").hide();
                $("#add_sub").buttonset();
                $("#set_val, #inc_to, #smart").button();
                myCounter.setAuto(false).stop();
            }
        });
        $("#counter_step").button({disabled: true});
        $("#counter_step").button().click(function(){
            myCounter.step();
            return false;
        });

        // Addition/Subtraction
        $("#add").click(function(){
            myCounter.add(567);
            return false;
        });
        $("#sub").click(function(){
            myCounter.subtract(567);
            return false;
        });

        // Set value
        $("#set_val").click(function(){
            myCounter.setValue(12345);
            return false;
        });

        // Increment to
        $("#inc_to").click(function(){
            myCounter.incrementTo(12345);
            return false;
        });

        // Get value
        $("#smart").click(function(){
            var steps = [12345, 17, 4, 533];

            if (smartInc < 4) runTest();

            function runTest(){
                var newVal = myCounter.getValue() + steps[smartInc];
                myCounter.incrementTo(newVal, 10, 400);
                smartInc++;
                if (smartInc < 4) setTimeout(runTest, 10000);
            }
            $(this).button("disable");
            return false;
        });

        // Expand help
        $("a.expand").click(function(){
            $(this).parent().children(".toggle").slideToggle(200);
            return false;
        });

    });

    //]]>
    </script>
</body>The original tutorial of this post can be found here http://cnanney.com/journal/code/apple-style-counter/ which was written by

facebook like red notification simple css technique


While developing my current web project, i came across a requirement which has to be lashed with a notification similar style as facebook.

After puting some effort i found out the following implementation.

    

Here is a explanation of the above implementation using CSS and simple javascript.

The css

<style>

.noti_Container {
position:relative;
border:1px solid blue; /* This is just to show you where the container ends */
width:16px;
height:16px;
cursor: pointer;
}
.noti_bubble {
position:absolute;
top: -8px;
right:-6px;
padding-right:2px;
background-color:red;
color:white;
font-weight:bold;
font-size:0.80em;

border-radius:2px;
box-shadow:1px 1px 1px gray;
}

</style>

The HTML code

<div onclick="return f1();">
<img src="friends.png" style="border:none;"/>
<div id="n1">2</div>
</div>

The small javascript code to add some more functionality

<script>
function f1()
{
document.getElementById("n1").style.visibility='hidden';
}
</script>

The final implementation can be found here at http://afriend.in

-> Register -> Find the menu at the top

Using attributes


In the previous chapter, we saw how we could find elements in a page from their class or their ID. These two properties are related because of the fact that you can use them to style the elements with CSS, but with jQuery, you can actually find elements based on any kind of attribute. It comes with a bunch of attribute selector types and in this article, we will look into some of them.

Find elements with a specific attribute

The most basic task when selecting elements based on attributes is to find all the elements which has a specific attribute. Be aware that the next example doesn’t require the attribute to have a specific value, in fact, it doesn’t even require it to have a value. The syntax for this selector is a set of square brackets with the name of the desired attribute inside it, for instance [name] or [href]. Here is an example:

<span title="Title 1">Test 1</span><br />
<span>Test 2</span><br />
<span title="Title 3">Test 3</span><br />

<script type="text/javascript">
$(function()
{
        $("[title]").css("text-decoration", "underline");
});
</script>

We use the attribute selector to find all elements on the page which has a title attribute and then underline it. As mentioned, this will match elements with a title element no matter what their value is, but sometimes you will want to find elements with a specific attribute which has a specific value.

Find elements with a specific value for a specific attribute

Here’s an example where we find elements with a specific value:

<a href="http://www.google.com" target="_blank">Link 1</a><br />
<a href="http://www.google.com" target="_self">Link 2</a><br />
<a href="http://www.google.com" target="_blank">Link 3</a><br />

<script type="text/javascript">
$(function()
{
        $("a[target='_blank']").append(" [new window]");
});
</script>

The selector simply tells jQuery to find all links (the a elements) which has a target attribute that equals the string value “_blank” and then append the text “[new window]” to them. But what if you’re looking for all elements which don’t have the value? Inverting the selector is very easy:

$("a[target!='_blank']").append(" [same window]");

The difference is the != instead of =, a common way of negating an operator within many programming languages.

And there’s even more possibilities:

Find elements with a value which starts with a specific string using the ^= operator:

$("input[name^='txt']").css("color", "blue");

Find elements with a value which ends with a specific string using the $= operator:

$("input[name$='letter']").css("color", "red");

Find elements with a value which contains a specific word:

$("input[name*='txt']").css("color", "blue");