Use Fixie.js for Dummies Content, so Good - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Use Fixie.js for Dummies Content, so Good, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Blogger, Article Coded, Article Javascript, Article Snippet, Article Web, we write this you can understand. Well, happy reading.

Title : Use Fixie.js for Dummies Content, so Good
link : Use Fixie.js for Dummies Content, so Good

Use Fixie.js for Dummies Content, so Good

Sobat pernah mencoba layanan jasa penyedia dummies content? Seperti berikut contoh yang gue maksudkan random image by PlaceHold.It & placeholder image by Lorempixum. Para developer biasa menggunakannya untuk mengisi demo-demo (dummies content). Misalkan isi paragrap selalu terisi dengan text bergaya lorem ipsum. Pokoknya isi dari sebuah demo diisi dengan konten yang dianggap nyeleneh gitoh :d
Singkatan² dan istilah² tidak jarang kita selalu menemuinya juga, ex WTF, blah-bleh-bloh, etc.
Ada berapa macam coba variabel standar HTML? Banyak pasti, namun ada beberapa yg pokok. Contoh: <p></p>, <ul></ul>, <h1></h1> - <h6></h6>, <img></img> dll.
Pertanyaannya begini sekarang...
Bagaimana penulisan syntax standard HTML dapat berubah menjadi isi untuk dummies konten (baca dan pelajari) :) Misalkan kita mengetikan syntax h1 begini<h1 class="WTF"></h1>tanpa isi apapun disana, nanti akan muncul dengan sendirinya isi title disana. Istimewanya lagi, itu akan secara random bergantian seiring kita melakukan refresh b-) Buka halaman demo biar jelas, dan lakukan pencet tombol keyboard (F5), perhatikan isi konten!

http://ryhan.me/fixie/sample.html

Kenapa bisa begitu! Itu bukan sihir, melainkan kreasi JavaScript Fixie.js kreasi master Ryhan Hassan @ryhanhassan
Download dan keterangan bisa sobat baca fixie.js on GitHub. Karena unik dan full stylish, kalian bisa lihat demonya pada blog keren aku Demo Fixie.js Di Blogger. Coba di Ctrl + U, apakah saya mengetikan kata-kata, membuat image dengan manual! Hohohoho...tentu capek :p

Koben sudah melakukan perubahan sedikit pada script fixie.js. Pemanggilan syntax <img/> gue pilih dari web http://lorempixum.com/

Fixie.js

<script type='text/javascript'>
/* 
* Fixie.js
* by Ryhan Hassan
* ryhanh@me.com
*
* http://ryhan.me/fixie/
*/ 
//<![CDATA[
var fixie = (
function () {

var selector;
var imagePlaceHolder = "http://placehold.it/${w}x${h}";

if (typeof window.getElementsByClassName != 'function') {
document.getElementsByClassName = function (cl) {
var retnode = [];
var myclass = new RegExp('\\b' + cl + '\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};
}

function fixie_handler(element) {
if (!/^\s*$/.test(element.innerHTML)){
var childs = element.children;
if(childs.length){
for(var fixie_i = 0; fixie_i < childs.length; fixie_i++){
fixie_handler(childs[fixie_i]);
}
}
return;
}
switch (element.nodeName.toLowerCase()) {
case 'b':
case 'em':
case 'strong':
case 'button':
case 'th':
case 'td':
case 'title':
case 'tr':
element.innerHTML = fixie_fetchWord();
break;

case 'header':
case 'cite':
case 'caption':
case 'mark':
case 'q':
case 's':
case 'u':
case 'small':
case 'span':
case 'code':
case 'pre':
case 'li':
case 'dt':
case 'h1':
case 'h2':
case 'h3':
case 'h4':
case 'h5':
case 'h6':
element.innerHTML = fixie_fetchPhrase();
break;

case 'footer':
case 'aside':
case 'summary':
case 'blockquote':
case 'p':
element.innerHTML = fixie_fetchParagraph();
break;

case 'article':
case 'section':
element.innerHTML = fixie_fetchParagraphs()
break;

/* Special cases */
case 'a':
element.href = "HTTP://YOUR-LINK-HERE/";
element.innerHTML = "www." + fixie_fetchWord() + fixie_capitalize(fixie_fetchWord()) + ".com";
break;

case 'img':
var src = element.getAttribute('src') || element.src;
var temp = element.getAttribute('fixie-temp-img');
if(src == "" || src == null || temp == true || temp == "true"){
var width = element.getAttribute('width') || element.width || (element.width = 250);
var height = element.getAttribute('height') || element.height || (element.height = 150);
element.src = imagePlaceHolder.replace('${w}', width).replace('${h}', height);
element.setAttribute('fixie-temp-img', true);
}
break;

case 'ol':
case 'ul':
element.innerHTML = fixie_fetchList();
break;

default:
element.innerHTML = fixie_fetchSentence();
}
}

// Handle an array of elements
function fixie_handle_elements(elements){
for (var i = 0; i < elements.length; i++) {
fixie_handler(elements[i]);
}
}


// Begin generator
var fixie_wordlibrary = ["I", "8-bit", "ethical", "reprehenderit", "delectus", "non", "latte", "fixie", "mollit", "authentic", "1982", "moon", "helvetica", "dreamcatcher", "esse", "vinyl", "nulla", "Carles", "bushwick", "bronson", "clothesline", "fin", "frado", "jug", "kale", "organic", "local", "fresh", "tassel", "liberal", "art", "the", "of", "bennie", "chowder", "daisy", "gluten", "hog", "capitalism", "is", "vegan", "ut", "farm-to-table", "etsy", "incididunt", "sunt", "twee", "yr", "before", "gentrify", "whatever", "wes", "Anderson", "chillwave", "dubstep", "sriracha", "voluptate", "pour-over", "esse", "trust-fund", "Pinterest", "Instagram", "DSLR", "vintage", "dumpster", "totally", "selvage", "gluten-free", "brooklyn", "placeat", "delectus", "sint", "magna", "brony", "pony", "party", "beer", "shot", "narwhal", "salvia", "letterpress", "art", "party", "street-art", "seitan", "anime", "wayfarers", "non-ethical", "viral", "iphone", "anim", "polaroid", "gastropub", "city", 'classy', 'original', 'brew']

function fixie_capitalize(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}

function fixie_fetchWord() {
return fixie_wordlibrary[constrain(0, fixie_wordlibrary.length - 1 )];
}

function constrain(min, max){
return Math.round(Math.random() * (max - min) + min)
}

function fixie_fetch(min, max, func){
var fixie_length = constrain(min, max) ;
var result = [];
for (var fixie_i = 0; fixie_i < fixie_length ; fixie_i++) {
result.push(func());
}
return fixie_capitalize(result.join(' '));
}

function fixie_fetchPhrase() {
return fixie_fetch(3, 5, fixie_fetchWord);
}

function fixie_fetchSentence() {
return fixie_fetch(4, 9, fixie_fetchWord) + '.';
}

function fixie_fetchParagraph() {
return fixie_fetch(3, 7, fixie_fetchSentence);
}

function fixie_fetchParagraphs() {
var fixie_length = constrain(3, 7);
var fixie_str = "";
for (var fixie_i = 0; fixie_i < fixie_length - 1; fixie_i++) {
fixie_str += "<p>" + fixie_fetchParagraph() + "</p>";
}
return fixie_str;
}

function fixie_fetchList() {
var i, n = Math.random() * 4 + 4, list = [];
for(i = 0; i < n; i++) {
list.push(fixie_fetchPhrase());
}
return '<li>' + list.join('</li><li>') + '</li>';
}

// Handle all elements with class 'fixie'
fixie_handle_elements(document.getElementsByClassName('fixie'));

// Handle elements which match give css selectors


function init_str(selector_str) {
if (!document.querySelectorAll) {
return false;
}
try {
fixie_handle_elements(document.querySelectorAll(selector_str));
return true;
} 
catch (err) {
return false;
}
}

return {
/* returns true if successful, false otherwise */
'init': function() {
if (selector) {
init_str(selector);
} else {
fixie_handle_elements(document.getElementsByClassName('fixie'));
}
},
'setImagePlaceholder': function(pl) {
imagePlaceHolder = pl;
return this;
},
'setSelector': function(sl){
if (typeof sl === "object") {
selector = sl.join(",");
} else if (sl){
selector = sl;
} 
return this;
}
};

})();

// Changes default image source to Flickr
fixie.setImagePlaceholder('http://lorempixum.com/${w}/${h}/').init();
//]]>
</script>

Simpan script tepat diatas tag </body>
Hal yang perlu dilakukan:

• Selalu pakek atribut class="fixie" dalam pemakaian.
• HTTP://YOUR-LINK-HERE/
Gantikan dengan link tujuan. Setiap melakukan penulisan syntax <a class="fixie"></a> akan muncul secara random nama-nama web aneh, tapi tujuan link sama, yaitu ke blog kita ;))

Begitulah sodara-sodara. Good luck :)
http://jsfiddle.net/bgrins/TJL4G/
Happy fixie \m/

Thus articles Use Fixie.js for Dummies Content, so Good

that is all articles Use Fixie.js for Dummies Content, so Good This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Use Fixie.js for Dummies Content, so Good with the link address https://autopostingblogspot.blogspot.com/2012/05/use-fixiejs-for-dummies-content-so-good.html