jCouch Others Way to Fullscreen Page

Berbicara mengenai plugin jQuery tidak akan ada habisnya. Setiap dapat web/blog dan tema disana ada yang bercerita tentang CSS, HTML & jQuery Koben masih bisa ikutin. Lain cerita jika sudah menyentuh PHP, WP, or Magento. Kagak tauk bray :)) Master Arvind Bhardwaj (@web_speaks) owner dari blog Web Speaks, pasti orang cilacap :d
Sobat babat deh kategori jQuery yg ada disana. Dijamin tidak rugi, full stylish gito loh. Kesempatan sekarang, Koben akan comot satu postingan dari Web Speaks yakni trick snippet jCouch Plugin. Sebelum masuk ke inti tutorial, sobat pernah membaca tentang Using the Fullscreen API in web browsers. Menggunakan API dalam penerapan fullscreen, namun master Arvind Bhardwaj membuat trik serupa (fungsi sama) tetapi memakai jQuery script :-"
Pasti sobat-sabit penasarana bagaimana hasil akhir trik full stylish jCouch jQuery Plugin for Distraction free view of web pages :p

Keuntungan teknik menampilkan fullscreen sebuah target memakai jQuery terletak pada customize. Terserah kita mau menampilkan apa nantinya. Warna juga bisa kita rubah, background dll. CSS apapun bisa masuk, tinggal kreasi kita saja ;)

http://demos.webspeaks.in/jCouch/

Download terlebih dahulu jCouch script and jCouch CSS file dari halaman demo diatas (Keterangan jg ada disana)!

1. jCouch JS file
Click to expand jCouch JS file

/*!
* jquery.jCouch. The jQuery Couch plugin
*
* Copyright (c) 2012 Arvind Bhardwaj
* http://webspeaks.in
*
* Licensed under MIT
* http://www.opensource.org/licenses/mit-license.php
*
* Version : 0.1
*
* all CSS sizing (width,height) is done in pixels (px)
*/
(function(a){var b="";a.fn.jCouch=function(c){function f(){b.each(function(){a(this).show()});a("#couchBg").hide()}function g(b){if(typeof b!="undefined"&&a.trim(b)!=""){return true}return false}function h(a){return!isNaN(parseFloat(a))&&isFinite(a)}var d={target:"",amplify:0};var e=a.extend(d,c);a(this).click(function(){b=a(this);b.each(function(){a(this).hide()});if(a.trim(e.target)==""){return false}targets=e.target.split(",");var c='<div id="couchBg">';c+='<div id="couchToolbar"><a href="#" id="couchToolbar_Close" title="Switch to the original layout">[esc]</a></div>';c+='<div id="couchData"></div>';c+="</div>";a("body").append(c);a("#couchBg").show();if(g(e.bgColor)){a("#couchBg").css("background-color",e.bgColor)}if(g(e.width)){a("#couchData").css("width",e.width)}var d="";for(x in targets){var f=a(a(targets[x])).clone().wrap("<p>").parent().html();d+=f}a("#couchData").html(d);if(h(e.amplify)&&e.amplify>0){for(x in targets){var i=a("#couchData > "+targets[x]);var j=parseFloat(i.css("font-size"));var k=parseFloat(j)+parseFloat(j*e.amplify);i.css({"font-size":k+"px"})}}var l=parseFloat(a("body").height())+100;a("#couchBg").css("height",l+"px");a("html, body").animate({scrollTop:0},"slow")});a("#couchToolbar_Close").live("click",f);a(document).keyup(function(a){if(a.keyCode==27){f()}})}})(jQuery)
2. jCouch CSS file
Click to expand jCouch CSS file

#couchBg{
display:none;
position:absolute;
_position:absolute;
height:100%;
width:100%;
top:0;
left:0;
background:#fff;
z-index:1;
}
#couchData{
margin: auto;
margin-top:25px;
}
#couchToolbar{
background: #000;
font-size: .9em;
font-style: italic;
display: block;
position: fixed;
top: 0;
right: 0;
margin: 0 20px 0 0;
padding: 5px;
color: #FFF;
}
#couchToolbar a{
color: #FFF;
}

Struktur penulisan

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script src="jCouch.min.js" type="text/javascript"></script>

<b:skin><![CDATA[

------------------ jCouch CSS file ------------------

]]></b:skin>

+ Script warna merah.
Jangan dipasang kalo sudah ada.
+ Script warna biru.
Letakkan dibawah script warna merah, atau bisa jg dicoba diatas tagging </body>
+ Script warna hijau.
Kode CSS.

Pemanggilan/Pemakaian

Script pemanggil<script type="text/javascript">
//<![CDATA[
$(function(){
$('.couchBtn').jCouch({
target:'h1,#post',
bgColor: '#FFF',
width: '500px',
amplify: 0.2
});
});
//]]>
</script>Isikan target:___ = konten yg akan ditampilkan dalam mode full-screen.

Syntax HTML

Link yg berfungsi sebagai switch on.<a class='couchBtn' href='javascript:;'><b>Couch Mode</b></a>Letakin link tsb dimana kalian suka :)
Lihat hasil kerja. DONE!Happy jCouch \m/