Simple get Instagram feed url

1. go to http://instagram.com/developer/ to create access token.

2. set OAuth URI as http://jelled.com/instagram/access-token

3. paste “client id” at http://jelled.com/instagram/access-token to get access token.

4. go to http://jelled.com/instagram/lookup-user-id to user ID.

5. replace the value from 4. & 5. into this link
https://api.instagram.com/v1/users/[USER ID]/media/recent?access_token=[ACCESS TOKEN]

6. you can limit the feed quantity by add &count=10 after feed url above as
https://api.instagram.com/v1/users/[USER ID]/media/recent?access_token=[ACCESS TOKEN]&count=10

7. done.

Remove browser input auto fill color by css

add the following code into your css.

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
} 

Force charset to utf-8

I’ve a problem with some wp plugin that force one of my client site alway run as “ISO-885901″ instead of “utf8″.

I also tried to remove the header and replace to exact command.

<!-- removed -->
<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<!-- added -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

but the result show the same:

2013-03-19_1146

Finally, I fixed this issue by use .htaccess to force the document run as utf8

<!-- add to .htaccess file -->
AddDefaultCharset utf-8
AddCharset utf-8 .css .js

Although, the result of code still show as “ISO-885901″ but it can fix the strange character such as
weird-characters

Jquery Scroll to Top of Page

Simple HTML

<div id="totop">
     <a href="#totop" class="totop">Go to Top</a>
</div>

Add this css

   #totop {position: absolute;top:-98px; right:0;}

   #totop a { display:block; width: 60px; height:32px;overflow: hidden; text-indent: -9999px; background: url(img/totop.jpg) 0 12px  no-repeat;-webkit-transition: .5s all; -moz-transition: .5s all; transition: .5s all; }

   #totop a:hover {background-position: 0 0;}

Jquery code

	$('a.totop').click( function() {
		$("html, body").animate({ scrollTop: '0px' });
	});

how to delay hover effect with css3

div {
    width: 70px;
    -webkit-transition: .5s all;   
    -webkit-transition-delay: 5s; 
    -moz-transition: .5s all;   
    -moz-transition-delay: 5s; 
    -ms-transition: .5s all;   
    -ms-transition-delay: 5s; 
    -o-transition: .5s all;   
    -o-transition-delay: 5s; 
    transition: .5s all;   
    transition-delay: 5s; 
}

div:hover {
    width:130px;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    -transition-delay: 0s;
}

Add button to start/stop YouTube multiple iframe players

<html>
<body>
<script>
$(document).ready(function(){
// YouTube Player API adapter
$.getScript('http://www.youtube.com/player_api');

loadYouTubePlayer = function(playerID) {
  the_player = new YT.Player(playerID, {
    events: { 'onReady': playYouTubeVideo }
  });
};  

unloadYouTubePlayer = function(playerID) {
  // This is the part that's broken
  $(playerID).stopVideo();
}; 

function playYouTubeVideo(event) {
  event.target.playVideo();
}

$('.show_player').click(function() {
    var idType = 'data-video-id';
    var id = $(this).attr(idType);

    $(this).fadeOut('fast', function() {
        $('.hidden_player['+idType+'='+id+']').fadeIn('fast', function() {
            loadYouTubePlayer('the_player'+id);
            $('.stop_player['+idType+'='+id+']').fadeIn('fast');
        });
    });
});

$('.stop_player').click(function() {
    var idType = 'data-video-id';
    var id = $(this).attr(idType);

    $(this).fadeOut('fast', function() {
        $('.hidden_player['+idType+'='+id+']').fadeOut('fast', function() {
            unloadYouTubePlayer('the_player'+id);
            $('.show_player['+idType+'='+id+']').fadeIn('fast');
        });
    });
});

});
</script>

<div class="hidden_player hidden1" data-video-id="0" style="display:none">
    <iframe id="the_player0" width="640" height="360" frameborder="0" src="http://www.youtube.com/embed/2ktsHhz_n2A" type="text/html"></iframe>
</div>
    <p><a href="#" class="show_player" data-video-id="0">Show video 0 and start playing automatically</a></p>
    <p><a href="#" class="stop_player" data-video-id="0" style="display:none">Stop video 0 from playing</a></p>

    <br/><br/>    

<div class="hidden_player hidden2" data-video-id="1" style="display:none">
    <iframe id="the_player1" width="640" height="360" frameborder="0" src="http://www.youtube.com/embed/2ktsHhz_n2A" type="text/html"></iframe>
</div>
    <p><a href="#" class="show_player" data-video-id="1">Show video 1 and start playing automatically</a></p>
    <p><a href="#" class="stop_player" data-video-id="1" style="display:none">Stop video 1 from playing</a></p>

</body>
</html>

I’ve just tested this code on my website and found the stop button doesn’t work.
I tried to find and tested many code but don’t found the any work one. Finally I use the copy and remove method to replace this.

$('.stop_player').click(function() {
    var idType = 'data-video-id';
    var id = $(this).attr(idType);

    $(this).fadeOut('fast', function() {
        $('.hidden_player['+idType+'='+id+']').fadeOut('fast', function() {
            // unloadYouTubePlayer('the_player'+id);
		var temp = $('.hidden'+id ).html();
		$('#the_player'+id).remove();
		$('.hidden'+id).html(temp);
            $('.show_player['+idType+'='+id+']').fadeIn('fast');
        });
    });
});

reference:

http://jsfiddle.net/iwasrobbed/9Dj8c/3/

http://stackoverflow.com/questions/7522997/using-jquery-to-play-stop-youtube-multiple-iframe-players

http://stackoverflow.com/questions/6671232/youtube-api-stop-video

Syntax Highlighter Shortcode for WordPress

Configuration Parameters

The shortcodes also accept a variety of configuration parameters that you may use to customize the output. All are completely optional.

  • autolinks (true/false) — Makes all URLs in your posted code clickable. Defaults to true.
  • collapse (true/false) — If true, the code box will be collapsed when the page loads, requiring the visitor to click to expand it. Good for large code posts. Defaults to false.
  • firstline (number) — Use this to change what number the line numbering starts at. It defaults to 1.
  • gutter (true/false) — If false, the line numbering on the left side will be hidden. Defaults to true.
  • highlight (comma-seperated list of numbers) — You can list the line numbers you want to be highlighted. For example “4,7,19″.
  • htmlscript (true/false) — If true, any HTML/XML in your code will be highlighted. This is useful when you are mixing code into HTML, such as PHP inside of HTML. Defaults to false and will only work with certain code languages.
  • light (true/false) — If true, the gutter (line numbering) and toolbar (see below) will be hidden. This is helpful when posting only one or two lines of code. Defaults to false.
  • padlinenumbers (true/false/integer) — Allows you to control the line number padding. true will result in automatic padding, false will result in no padding, and entering a number will force a specific amount of padding.
  • toolbar (true/false) — If false, the toolbar containing the helpful buttons that appears when you hover over the code will not be shown. Defaults to true.
  • wraplines (true/false) — If false, line wrapping will be disabled. This will cause a horizontal scrollbar to appear for long lines of code.

Example

[css toolbar=”true” ruler=”true” title=”true” tab-size=”4″]
/* Mixin */
@base: #663333;
@lighter1: lighten(spin(@base, 5), 10%);
@lighter2: lighten(spin(@base, 10), 20%);
@darker1: darken(spin(@base, -5), 10%);
@darker2: darken(spin(@base, -10), 20%);

/* Implementation */
.one {color: @base;}
.two {color: @lighter1;}
.three {color: @lighter2;}
.four {color: @darker1;}
.five {color: @darker2;}
[/css]

Result

/* Mixin */
@base: #663333;
@lighter1: lighten(spin(@base, 5), 10%);
@lighter2: lighten(spin(@base, 10), 20%);
@darker1: darken(spin(@base, -5), 10%);
@darker2: darken(spin(@base, -10), 20%);

/* Implementation */
.one {color: @base;}
.two {color: @lighter1;}
.three {color: @lighter2;}
.four {color: @darker1;}
.five {color: @darker2;}

Language Support

Brush name Brush aliases
ActionScript3 as3, actionscript3
Bash/shell bash, shell
ColdFusion cf, coldfusion
C# c-sharp, csharp
C++ cpp, c
CSS css
Delphi delphi, pas, pascal
Diff diff, patch
Erlang erl, erlang
Groovy groovy
JavaScript js, jscript, javascript
Java java
JavaFX jfx, javafx
Perl perl, pl
PHP php
Plain Text plain, text
PowerShell ps, powershell
Python py, python
Ruby rails, ror, ruby
Scala scala
SQL sql
Visual Basic vb, vbnet
XML xml, xhtml, xslt, html, xhtml