RSS / Atom Feed List with javascript 2

I'm a regular visitor for some interesting blogs and sites to get new posts. I just want those blog or site latest post links in my website. By that I can easily go to read those posts. So, I developed one plain javascript plug-in to do that.

Here is the GitHub Link to My Repository. You can simply download the source code. Very easy to use.

Syntax

loadFeed(url,element,num=null,enableContent=false);

Features

• By using third parameter of our function, we can control how many entries should be visible for each feed.
• We can optionally enable or disable content snippet for each feed.
• Easy to use.
• Used only plain javascript.
• Easy to apply css style.
• You can apply for your blogger pages too.

Parameters definition :

• url - enter the feed url
• element - id of the element
• num - this is optional. By default, the Feed class loads four entries. If you want more, you can manually set number of entries for each feed. Else use null as a third parameter.
• enableContent - We can manually enable or disable content snippet for each feed using this parameter. If you want show content, simply add true as a fourth parameter. Else use false as a fourth parameter.

Code Usage

HTML
JS

loadFeed('http://cj-ramki.blogspot.in/feeds/posts/default?alt=rss','feed1',10,false);
loadFeed('http://chillydraji.wordpress.com/feed/','feed2',null,true);

Styling Guide
In this plugin, We are separated each feed into three sections. 1. Feed Title. 2. Post Title 3. Post Content snippet

So, We are using, three class for those three sections.

• .feed_title - for title of the Feed.
• .post_title - for Post title.
• .post_content - for Post content snippet.

Example:

    .feed_title{
          color:green;
    }
    .post_title{
        color:red;
    }
    .post_content{
        color:blue;
    }

You can see more detailed documentation in README of that plug-in. 

In blogger, we have "FEED" widget like the same. But, you can't use that widget within blogger page. So, I implemented in this blog. You can Find that in Interested Blogs page. I used my code to build that feed page.

Read More

Sound Booster for Android 100% full volume 0

Are you a sound lover...? Do you want more sound in your phone...? Are you using Android in your phone...?

You may love this App... :D

SOUND BOOSTER

This app will let you to increase the volume in both Loud speaker and earpiece. You can route the audio to Earpiece as well!

Features:

1. Hide LED when Device turned on.

2. Do not boost volume more than 70%. To increase more go to settings then increase from "Maximum boost level".

4. On some devices you can quiet camera as well.

5. You can set maximum boost in the higher priority but not advisable.

6. Enjoy! It's ad free.

7. Support for devices which don't have menu key, they can use the settings button.

8. You can control the notification from settings.

 

Warning:

Use at your own risk!

Continues use of this app may result in damage your device speakers. If you find any squeaky, please reduce the volume through the app.

 

Here you can DOWNLOAD it.

Read More

Reverse DOM element 1

We can Reverse DOM elements. All we need is to use .reverse() the DOM elements.

Here I used Parent Child structure in HTML. You can use ul li to create parent - child structure.

See In the above code, the div contain .parent class is the parent div. Those divs contain .child class are child divs.

We used .reverse() to reverse the child div order and append it to parent div.
Here is the working DEMO

Read More

Grouping PHP array 0

When we have a same ids for multiple array values, we can group those array values for easy handling.

Consider if we have a array like this,

Array
(
    [0] => Array
        (
            [id] => 96
            [shipping_no] => 212755-1
            [part_no] => reterty
            [description] => tyrfyt
            [packaging_type] => PC
        )

    [1] => Array
        (
            [id] => 96
            [shipping_no] => 212755-1
            [part_no] => dftgtryh
            [description] => dfhgfyh
            [packaging_type] => PC
        )

    [2] => Array
        (
            [id] => 97
            [shipping_no] => 212755-2
            [part_no] => ZeoDark
            [description] => s%c%s%c%s
            [packaging_type] => PC
        )

)

If we want to group the above array by `id`, we can use this following piece of code,

$result = array();
foreach ($arr as $data) {
  $id = $data['id'];
  if (isset($result[$id])) {
     $result[$id][] = $data;
  } else {
     $result[$id] = array($data);
  }
}

So, the  print_r($result) result will be,

Array
(
    [96] => Array
        (
            [0] => Array
                (
                    [id] => 96
                    [shipping_no] => 212755-1
                    [part_no] => reterty
                    [description] => tyrfyt
                    [packaging_type] => PC
                )

            [1] => Array
                (
                    [id] => 96
                    [shipping_no] => 212755-1
                    [part_no] => dftgtryh
                    [description] => dfhgfyh
                    [packaging_type] => PC
                )
        )
    [97] => Array
        (
            [0] => Array
                (
                    [id] => 97
                    [shipping_no] => 212755-2
                    [part_no] => ZeoDark
                    [description] => s%c%s%c%s
                    [packaging_type] => PC
                )

        )

Read More

Shuffle DOM element using jquery 0

Source from James Padolsey.  In this post, I just Created a Demo using his code.

$.fn.shuffle = function () {

        var allElems = this.get(),
            getRandom = function (max) {
                return Math.floor(Math.random() * max);
            },
            shuffled = $.map(allElems, function () {
                var random = getRandom(allElems.length),
                    randEl = $(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
            });

        this.each(function (i) {
            $(this).replaceWith($(shuffled[i]));
        });

        return $(shuffled);
    };

Usage of Code.

$('selector').shuffle();

Here is the DEMO,
You can find pure javascript way also from his article

Read More

How to stop jquery imageslider on mouse hover 0

Jake Rocheleau designed a very nice jQuery image rotators with description  plug-in.

He missed to instruct how to stop this animation. Here I got the STACKOVERFLOW post. And answered to that question.

Question: How to stop jquery imageslider on mouse hover.

Simply we need to find the correct selector. And .clearInterval() on .mouseover() event listener. Then reset the slide time in setInterval() in .mouseout() event listener.

like this below code,

$('.image_thumb ul li').on("mouseover",function(){
  clearInterval(intervalID);
});

$('.image_thumb ul li').on("mouseout",function(){
  intervalID = setInterval(cycleImage, slidetime);
});

 Here is my STACKOVERFLOW answer post.

Read More

Get Numbers from String in Javascript 0

In this post, We are going to learn how to get only numbers from string using Javascript. To do this we are going to use one of the power full weapon Regular Expression.

In this bellow example we are getting value from text box and get only numbers using javascript's .replace().replace() method.

Here we are going to use non-digit character equivalent ( \D ). Just find the non-digit character and replace with " " empty.

var $ = function (id) {
    return document.getElementById(id);
};
$('btn').addEventListener('click', function () {
    $('num').innerHTML = $('abc').value.replace(/\D/g, '');
});

NOTE : Here I used $ as a shorthand for document.getElementById(). To know more about shorthand, you can refer one of my previous post Shorthand for getElementById in Javascript.

Or you can simply use like this below, 

document.getElementById('btn').addEventListener('click', function() {
    document.getElementById('num').innerHTML = document.getElementById('abc').value.replace(/\D/g, '');
});

after click on the "Click me !!!" button, it will alert the number you used in text box.

Read More

Shorthand for getElementById in Javascript 2

Some times I feel lazy to use document.getElementById('selector_id') when I'm working with plain Javascript.

I can hear You also feel the same. Lets we can create our own shorthand for getElementById().

All we need is to just write a function for that.

var $ = function (id) {
    return document.getElementById(id);
};

Here after We can call our get our element by ID like this,

$('btn')

I think you want to see it in DEMO... You can find it below...

NOTE : Most of the javascript libraries are using dollar sign ($) as short hand. So, you can use any character or word instead of '$' as a shorthand.

Read More