noreply@blogger.com (none Xfile)Fri, 15 Aug 2025 18:08:08 -0700Blogger http://www.blogger.com1125https://codejson.blogspot.com/en-usnonoreply@blogger.comhttps://codejson.blogspot.com/2018/10/web-tools-in-one-place.htmlBase64Color HTMLEmail ExtractorKeyword PlannerMeta TagMinify HTMLParseSWF to HTMLWeb Toolsnoreply@blogger.com (none Xfile)Sat, 13 Oct 2018 09:18:00 -0700tag:blogger.com,1999:blog-696278354413137715.post-327238371425865895<div class="post-body entry-content" id="post-body-entry-content" itemprop="description articleBody" style="display: none;"> Keyword Tool Is The Best Alternative To Google Keyword Planner And Other Keyword Research Tools <div style="clear: both;"></div> </div> <style> /*-------------------------- * Menu Tabular solo Con CSS *---------------------------*/ html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { margin: 0; padding: 0; -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } body { font-size: 62.5%; font-family: 'Open Sans', Arial, Helvetica, Sans-serif; } a { color: #31a687; font-weight: 500; text-decoration: none; } h1 { color: #3e9e80; font: normal normal 42px Allerta Stencil; font-size: 3.2em; font-weight: 400; margin-bottom: 10px; text-shadow: 0 1px 2px rgba(0,0,0,0.3); } /*-------------------------- * MENU TABS ---------------------------*/ .menu__tabs { list-style: none; overflow: hidden; } .menu__tabs li { float: left; margin-right: 2px; font-size: 1.3em; } .menu__tabs a { padding: 8px; background: #333b48de; display: inline-block; color: #FFF; text-decoration: none; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,0.2); -moz-box-shadow: inset 0 -2px 5px rgba(0,0,0,0.2); box-shadow: inset 0 -2px 5px rgba(0,0,0,0.2); } .menu__tabs a:hover { background: #515a68; } .menu__tabs a.active { color: #333b48; background: #1b5643d9; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .menu__tabs a.active i {color: #80cbb7;} .menu__tabs a i { margin-right: 3px; color: #aaaaaa; } /*-------------------------- * MENU WRAPPER ---------------------------*/ .menu { margin: 15px auto; width: 100%; max-width: 100%; position: relative; } .menu__wrapper { padding: 2em; position: relative; z-index: 400; background: #2e3f56ad; min-height: auto; -webkit-border-radius: 0 4px 4px 4px; -moz-border-radius: 0 4px 4px 4px; border-radius: 0 4px 4px 4px; } .menu--shadow { position: absolute; z-index: 300; bottom: -5px; height: 25px; width: 100%; } .menu--shadow:after, .menu--shadow:before { content: ''; display: block; width: 35%; height: 25px; position: absolute; left: 0; background: rgba(0,0,0,0.2); -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; -webkit-box-shadow: 0 0 15px 5px rgba(0,0,0,0.25); -moz-box-shadow: 0 0 15px 5px rgba(0,0,0,0.25); box-shadow: 0 0 15px 5px rgba(0,0,0,0.25); -webkit-transform: scale(0.8) rotate(-4deg); -ms-transform: scale(0.8) rotate(-4deg); -o-transform: scale(0.8) rotate(-4deg); transform: scale(0.8) rotate(-4deg); } .menu--shadow:after { right: 0; left: auto; -webkit-transform: scale(0.8) rotate(4deg); -ms-transform: scale(0.8) rotate(4deg); -o-transform: scale(0.8) rotate(4deg); transform: scale(0.8) rotate(4deg); } .menu__wrapper .menu__item { line-height: 1.3; color: #95c1db; display: none; } .menu__wrapper .menu__item.item-active { display: block; } .menu__wrapper .menu__item h3 { font-size: 1.8em; color: #36d7b7; border-bottom: 1px solid #d9d9d9; padding-bottom: 5px; margin-bottom: 12px; } .menu__wrapper .menu__item p { /* width: 450px; */ /* margin-left: -57px; */ /* text-align: center; */ /* font-size: 1.2em; */ /* line-height: 1.2em; */ color: #a9a9a9; } </style> <!-- Contenedor principal --> <div class="menu"> <section class="menu__wrapper"> <article id="item-1" class="menu__item item-active"> <h3>Parse</h3> <p><textarea id="codes" placeholder="Write / paste the code here then click 'Conversion'" spellcheck="false"></textarea> <span class="Apple-style-span" style="font-family: &quot;trebuchet ms&quot;;font-size: x-small;line-height: 20px;margin-left: 78px;">Copy right 2018 HTML Parser Tool |&nbsp;Webmaster |&nbsp;<a href="http://codejson.blogspot.com/" style="/* color: #181818; */text-decoration: none;">Blogger</a></span> <div class="button-group"> <button id="convert" onclick="cdConvert();this.disabled = true;">Parse HTML</button><button onclick="cdClear();">Clear</button></div> <br /> <ul id="wrapin"> <li><input checked="true" id="opt1" type="checkbox" />Conversion <code>&amp;</code> to <code>&amp;amp;</code></li> <li><input checked="true" id="opt2" type="checkbox" />Conversion <code>&lt;</code> to <code>&amp;lt;</code></li> <li><input checked="true" id="opt3" type="checkbox" />Conversion <code>&gt;</code> to <code>&amp;gt;</code></li> <li><input id="opt4" type="checkbox" />Conversion <code>"</code> to <code>&amp;quot;</code></li> <li><input id="opt5" type="checkbox" />Conversion <code>'</code> to <code>&amp;#039;</code></li> </ul> <style type="text/css"> code{font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;color:#2a5ead;font-size:13px;padding:2px 4px;color:#d14;} #codes{font: 13px 'Courier New',Monospace; border: 1px solid #e9e9e9; width: 550px; height: 250px; margin: 0 auto; display: block; background-color: #2d3348; color: #fdfdfd; padding: 15px;} .btn { font-size: 14px; } .button-group{margin:12px auto 0;text-align:center} button,button[disabled]:active{border: none;padding: 3px 4px;color: #2f2d2d;background-color: #95c1db;cursor: pointer;font-size: 13px;margin: 2px 2px;line-height: 23px;border-radius: 3px; transition: all 0.3s ease-in-out;} button:active{background:#3f92e1;} button[disabled],button[disabled]:active{background:#3f92e1;} #opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;margin-right:10px;} </style> <script type="text/javascript"> function cdClear() { var wtarea = document.getElementById('codes'); wtarea.value = ''; wtarea.focus(); document.getElementById('convert').disabled = false; } function cdConvert() { var ctarea = document.getElementById('codes'), cv = ctarea.value, opt1 = document.getElementById('opt1'), opt2 = document.getElementById('opt2'), opt3 = document.getElementById('opt3'), opt4 = document.getElementById('opt4'), opt5 = document.getElementById('opt5'); cv = cv.replace(/\t/g, " "); if (opt1.checked) cv = cv.replace(/&/g, "&amp;"); if (opt2.checked) cv = cv.replace(/</g, "&lt;"); if (opt3.checked) cv = cv.replace(/>/g, "&gt;"); if (opt4.checked) cv = cv.replace(/"/g, "&quot;"); if (opt5.checked) cv = cv.replace(/'/g, "&#039;"); ctarea.value = cv; ctarea.focus(); ctarea.select(); }; </script><br /> <!-- END --></p> </article> <article id="item-2" class="menu__item"> <h3>Based64</h3> <p> <style> body { margin: 0px; padding: 0 20px 0 20px; min-width: 400px; } body, textarea { font-family: 'Work Sans', sans-serif; } #user_input, #result { color: #f7f7f7; width: 100%; /* margin: 0px 0px 10px -10px; */ border: 1px solid rgb(200, 200, 200); padding: 6px 10px; background: #2d3348; font-size: 1.1em; } #process { margin-bottom: 20px; height: 28px; } #user_input { height: 210px; } #result { height: 230px; overflow-x: visible; } </style> <br> <textarea id="user_input" name="user_input"></textarea> <select id="process" name="process"> <option value="url_encode">URL Encode</option> <option value="url_decode">URL Decode</option> <option value="base64_encode">Base64 Encode</option> <option value="base64_decode">Base64 Decode</option> </select> <button id="copy_text">Copy Result</button> <textarea readonly id="result" placeholder="Result shows up here"></textarea> <p><b style="font-size: 1.3em">What this does</b></p> <p>This services is designed to be a two-way conversion to encode and decode: <ul> <li>URL Encoded Strings</li> <li>Base64 Encoded Strings</li> </ul> Simply select the type of conversion you want to perform and enter your input. The Copy Result button will automatically copy the result to your clipboard, if your browser supports it, otherwise it will give you an easy way to copy the result from a popup. </p> <p> You can also drag a file into the input field to convert a file to a Base64 string. All of these conversions happen on your machine, without ever uploading anything to this server! </p> <script type="text/javascript" > var textPlaceholder = 'Type input here, or drag file here for base64 file conversion'; var filePlaceholder = 'Drop file here to convert to Base64 string'; $('#user_input').attr('placeholder', textPlaceholder); $('#user_input').keyup(function() { processChange(); }); $('#process').change(function() { processChange(); }); $('#user_input').on('dragover', function(e) { currentText = $('#user_input').text(); $('#user_input').css('background', '#eee'); $('#user_input').attr('placeholder', filePlaceholder); }); $('#user_input').on('dragleave', function(e) { $('#user_input').text(currentText); $('#user_input').css('background', '#fff'); $('#user_input').attr('placeholder', textPlaceholder); }); $('#user_input').on('drop', function(e) { e.preventDefault(); e.stopPropagation(); var file = e.originalEvent.dataTransfer.files[0]; var r = new FileReader(); r.onload = function (f) { var contents = f.target.result; $('#user_input').css('background', '#fff'); $('#user_input').attr('placeholder', textPlaceholder); console.log('done'); $('#result').text(contents); } r.readAsDataURL(file); }); $('#copy_text').click(function() { $('#result').select(); try { var success = document.execCommand('copy'); if (!success) throw 'shucks'; } catch (e) { window.prompt('Your browser doesn\'t support auto-copying, please copy the preselected text below:', $('#result').text()); } }); function processChange() { var newVal = ''; var inputVal = $('#user_input').val(); switch($('#process').val()) { case 'url_encode': newVal = encodeURIComponent(inputVal); break; case 'url_decode': newVal = decodeURIComponent(inputVal); break; case 'base64_encode': newVal = window.btoa(inputVal); break; case 'base64_decode': newVal = window.atob(inputVal); break; } $('#result').text(newVal); }</script></p> </article> <article id="item-3" class="menu__item"> <h3>Minify HTML</h3> <p><iframe allowfullscreen="allowfullscreen" frameborder="0" height="505" marginheight="0" marginwidth="0" scrolling="no" src="//take-apk.blogspot.com/p/minify-html.html?embed=true" width="100%"></iframe></p> </article> <article id="item-4" class="menu__item"> <h3>Keyword Planner</h3> <p><iframe allowfullscreen="allowfullscreen" frameborder="0" height="600" marginheight="0" marginwidth="0" scrolling="no" src="//take-apk.blogspot.com/p/keyword-planner.html?embed=true" width="100%"></iframe></p> </article> <article id="item-5" class="menu__item"> <h3> Color HTML</h3> <p>Code JSon · Page Color HTML Posting as Bio ku <style> /* Bootstrap + AngularJS */ .form-control { color: white; background-color: #2e3f56; width: 85%; height: 25px; } .materialpicker-colors { -webkit-user-select: none; user-select: none; position: relative; border: 1px solid #FFF; border-radius: 2px; display: inline-block; box-shadow: 0 1px 5px rgba(0,0,0,0.5); cursor: default; } .materialpicker-colors div.selected { position: relative; z-index: 2; box-shadow: 0 0 4px #000; border: 2px solid #FFF; } div.materialpicker-white.selected { border-color: #78909C; } .colorpicker-preview { margin: 3px; width: 40px; height: 35px; border-radius: 2px; display: inline-block; vertical-align: middle; } .materialpicker.ng-invalid .materialpicker-colors { border-color: #a94442; box-shadow: 0 1px 5px #a94442; } </style> <div> GitHub: <a href="https://github.com/Fixlez/Tips-Tricks"> Templarian - ui.bootstrap.materialPicker </a> </div> <div class="row" ng-app="app"> <div class="col-md-6"> <h2>Format Hex</h2> <p>Click or drag your cursor around to quickly select colors.</p> <div ng-controller="Demo1Controller"> <material-picker ng-model="color" format="'hex'" hover-model="hoverColor" size="size"></material-picker> <input ng-model="color" class="form-control" /> <div class="colorpicker-preview" ng-style="{background: color}"></div> <button class="btn btn-info" ng-click="color='#FFFFFF'">Set to White</button> <button class="btn btn-info" ng-click="color='#000000'">Set to Black</button> <button class="btn btn-info" ng-click="color='#FF6F00'">Set to Orange</button> <button class="btn btn-default" ng-click="size=15">Size: 15</button> <button class="btn btn-default" ng-click="size=10">Size: 10</button> <div ng-show="hoverColor !== null"> Hex: {{hoverColor.hex}} Name: {{hoverColor.name}} R: {{hoverColor.r}} G: {{hoverColor.g}} B: {{hoverColor.b}} </div> </div> </div> <div class="col-md-6"> <h2>Format Object (default)</h2> <p>Click or drag your cursor around to quickly select colors.</p> <div ng-controller="Demo2Controller"> <material-picker ng-model="color" hover-model="hoverColor" size="size"></material-picker> <input ng-model="color.hex" class="form-control" maxlength="7" ng-blur="correct()" /> R: <input ng-model="color.r" class="form-control" maxlength="3" ng-blur="correct()" /> G: <input ng-model="color.g" class="form-control" maxlength="3" ng-blur="correct()" /> B: <input ng-model="color.b" class="form-control" maxlength="3" ng-blur="correct()" /> <div ng-bind="color.name"></div> <div class="colorpicker-preview" ng-style="{background: color.hex}"></div> <button class="btn btn-info" ng-click="color.hex='#FFFFFF'">Set to White</button> <button class="btn btn-info" ng-click="color.hex='#000000'">Set to Black</button> <button class="btn btn-info" ng-click="color.hex='#FF6F00'">Set to Orange</button> <button class="btn btn-default" ng-click="size=15">Size: 15</button> <button class="btn btn-default" ng-click="size=10">Size: 10</button> <div ng-show="hoverColor !== null"> Hex: {{hoverColor.hex}} Name: {{hoverColor.name}} R: {{hoverColor.r}} G: {{hoverColor.g}} B: {{hoverColor.b}} </div> </div> </div> </div> <script> angular.module('ui.bootstrap.materialPicker', []) .directive('materialPicker', [ '$parse', function ($parse) { var swatches = [{ name: 'Red', camel: 'red', colors: [ { name: '50', hex: 'FFEBEE' }, { name: '100', hex: 'FFCDD2' }, { name: '200', hex: 'EF9A9A' }, { name: '300', hex: 'E57373' }, { name: '400', hex: 'EF5350' }, { name: '500', hex: 'F44336' }, { name: '600', hex: 'E53935' }, { name: '700', hex: 'D32F2F' }, { name: '800', hex: 'C62828' }, { name: '900', hex: 'B71C1C' }, { name: 'A100', hex: 'FF8A80' }, { name: 'A200', hex: 'FF5252' }, { name: 'A400', hex: 'FF1744' }, { name: 'A700', hex: 'D50000' } ] }, { name: 'Pink', camel: 'pink', colors: [ { name: '50', hex: 'FCE4EC' }, { name: '100', hex: 'F8BBD0' }, { name: '200', hex: 'F48FB1' }, { name: '300', hex: 'F06292' }, { name: '400', hex: 'EC407A' }, { name: '500', hex: 'E91E63' }, { name: '600', hex: 'D81B60' }, { name: '700', hex: 'C2185B' }, { name: '800', hex: 'AD1457' }, { name: '900', hex: '880E4F' }, { name: 'A100', hex: 'FF80AB' }, { name: 'A200', hex: 'FF4081' }, { name: 'A400', hex: 'F50057' }, { name: 'A700', hex: 'C51162' } ] }, { name: 'Purple', camel: 'purple', colors: [ { name: '50', hex: 'F3E5F5' }, { name: '100', hex: 'E1BEE7' }, { name: '200', hex: 'CE93D8' }, { name: '300', hex: 'BA68C8' }, { name: '400', hex: 'AB47BC' }, { name: '500', hex: '9C27B0' }, { name: '600', hex: '8E24AA' }, { name: '700', hex: '7B1FA2' }, { name: '800', hex: '6A1B9A' }, { name: '900', hex: '4A148C' }, { name: 'A100', hex: 'EA80FC' }, { name: 'A200', hex: 'E040FB' }, { name: 'A400', hex: 'D500F9' }, { name: 'A700', hex: 'AA00FF' } ] }, { name: 'Deep Purple', camel: 'deepPurple', colors: [ { name: '50', hex: 'EDE7F6' }, { name: '100', hex: 'D1C4E9' }, { name: '200', hex: 'B39DDB' }, { name: '300', hex: '9575CD' }, { name: '400', hex: '7E57C2' }, { name: '500', hex: '673AB7' }, { name: '600', hex: '5E35B1' }, { name: '700', hex: '512DA8' }, { name: '800', hex: '4527A0' }, { name: '900', hex: '311B92' }, { name: 'A100', hex: 'B388FF' }, { name: 'A200', hex: '7C4DFF' }, { name: 'A400', hex: '651FFF' }, { name: 'A700', hex: '6200EA' } ] }, { name: 'Indigo', camel: 'indigo', colors: [ { name: '50', hex: 'E8EAF6' }, { name: '100', hex: 'C5CAE9' }, { name: '200', hex: '9FA8DA' }, { name: '300', hex: '7986CB' }, { name: '400', hex: '5C6BC0' }, { name: '500', hex: '3F51B5' }, { name: '600', hex: '3949AB' }, { name: '700', hex: '303F9F' }, { name: '800', hex: '283593' }, { name: '900', hex: '1A237E' }, { name: 'A100', hex: '8C9EFF' }, { name: 'A200', hex: '536DFE' }, { name: 'A400', hex: '3D5AFE' }, { name: 'A700', hex: '304FFE' } ] }, { name: 'Blue', camel: 'blue', colors: [ { name: '50', hex: 'E3F2FD' }, { name: '100', hex: 'BBDEFB' }, { name: '200', hex: '90CAF9' }, { name: '300', hex: '64B5F6' }, { name: '400', hex: '42A5F5' }, { name: '500', hex: '2196F3' }, { name: '600', hex: '1E88E5' }, { name: '700', hex: '1976D2' }, { name: '800', hex: '1565C0' }, { name: '900', hex: '0D47A1' }, { name: 'A100', hex: '82B1FF' }, { name: 'A200', hex: '448AFF' }, { name: 'A400', hex: '2979FF' }, { name: 'A700', hex: '2962FF' } ] }, { name: 'Light Blue', camel: 'lightBlue', colors: [ { name: '50', hex: 'E1F5FE' }, { name: '100', hex: 'B3E5FC' }, { name: '200', hex: '81D4FA' }, { name: '300', hex: '4FC3F7' }, { name: '400', hex: '29B6F6' }, { name: '500', hex: '03A9F4' }, { name: '600', hex: '039BE5' }, { name: '700', hex: '0288D1' }, { name: '800', hex: '0277BD' }, { name: '900', hex: '01579B' }, { name: 'A100', hex: '80D8FF' }, { name: 'A200', hex: '40C4FF' }, { name: 'A400', hex: '00B0FF' }, { name: 'A700', hex: '0091EA' } ] }, { name: 'Cyan', camel: 'cyan', colors: [ { name: '50', hex: 'E0F7FA' }, { name: '100', hex: 'B2EBF2' }, { name: '200', hex: '80DEEA' }, { name: '300', hex: '4DD0E1' }, { name: '400', hex: '26C6DA' }, { name: '500', hex: '00BCD4' }, { name: '600', hex: '00ACC1' }, { name: '700', hex: '0097A7' }, { name: '800', hex: '00838F' }, { name: '900', hex: '006064' }, { name: 'A100', hex: '84FFFF' }, { name: 'A200', hex: '18FFFF' }, { name: 'A400', hex: '00E5FF' }, { name: 'A700', hex: '00B8D4' } ] }, { name: 'Teal', camel: 'teal', colors: [ { name: '50', hex: 'E0F2F1' }, { name: '100', hex: 'B2DFDB' }, { name: '200', hex: '80CBC4' }, { name: '300', hex: '4DB6AC' }, { name: '400', hex: '26A69A' }, { name: '500', hex: '009688' }, { name: '600', hex: '00897B' }, { name: '700', hex: '00796B' }, { name: '800', hex: '00695C' }, { name: '900', hex: '004D40' }, { name: 'A100', hex: 'A7FFEB' }, { name: 'A200', hex: '64FFDA' }, { name: 'A400', hex: '1DE9B6' }, { name: 'A700', hex: '00BFA5' } ] }, { name: 'Green', camel: 'green', colors: [ { name: '50', hex: 'E8F5E9' }, { name: '100', hex: 'C8E6C9' }, { name: '200', hex: 'A5D6A7' }, { name: '300', hex: '81C784' }, { name: '400', hex: '66BB6A' }, { name: '500', hex: '4CAF50' }, { name: '600', hex: '43A047' }, { name: '700', hex: '388E3C' }, { name: '800', hex: '2E7D32' }, { name: '900', hex: '1B5E20' }, { name: 'A100', hex: 'B9F6CA' }, { name: 'A200', hex: '69F0AE' }, { name: 'A400', hex: '00E676' }, { name: 'A700', hex: '00C853' } ] }, { name: 'Light Green', camel: 'lightGreen', colors: [ { name: '50', hex: 'F1F8E9' }, { name: '100', hex: 'DCEDC8' }, { name: '200', hex: 'C5E1A5' }, { name: '300', hex: 'AED581' }, { name: '400', hex: '9CCC65' }, { name: '500', hex: '8BC34A' }, { name: '600', hex: '7CB342' }, { name: '700', hex: '689F38' }, { name: '800', hex: '558B2F' }, { name: '900', hex: '33691E' }, { name: 'A100', hex: 'CCFF90' }, { name: 'A200', hex: 'B2FF59' }, { name: 'A400', hex: '76FF03' }, { name: 'A700', hex: '64DD17' } ] }, { name: 'Lime', camel: 'lime', colors: [ { name: '50', hex: 'F9FBE7' }, { name: '100', hex: 'F0F4C3' }, { name: '200', hex: 'E6EE9C' }, { name: '300', hex: 'DCE775' }, { name: '400', hex: 'D4E157' }, { name: '500', hex: 'CDDC39' }, { name: '600', hex: 'C0CA33' }, { name: '700', hex: 'AFB42B' }, { name: '800', hex: '9E9D24' }, { name: '900', hex: '827717' }, { name: 'A100', hex: 'F4FF81' }, { name: 'A200', hex: 'EEFF41' }, { name: 'A400', hex: 'C6FF00' }, { name: 'A700', hex: 'AEEA00' } ] }, { name: 'Yellow', camel: 'yellow', colors: [ { name: '50', hex: 'FFFDE7' }, { name: '100', hex: 'FFF9C4' }, { name: '200', hex: 'FFF59D' }, { name: '300', hex: 'FFF176' }, { name: '400', hex: 'FFEE58' }, { name: '500', hex: 'FFEB3B' }, { name: '600', hex: 'FDD835' }, { name: '700', hex: 'FBC02D' }, { name: '800', hex: 'F9A825' }, { name: '900', hex: 'F57F17' }, { name: 'A100', hex: 'FFFF8D' }, { name: 'A200', hex: 'FFFF00' }, { name: 'A400', hex: 'FFEA00' }, { name: 'A700', hex: 'FFD600' } ] }, { name: 'Amber', camel: 'amber', colors: [ { name: '50', hex: 'FFF8E1' }, { name: '100', hex: 'FFECB3' }, { name: '200', hex: 'FFE082' }, { name: '300', hex: 'FFD54F' }, { name: '400', hex: 'FFCA28' }, { name: '500', hex: 'FFC107' }, { name: '600', hex: 'FFB300' }, { name: '700', hex: 'FFA000' }, { name: '800', hex: 'FF8F00' }, { name: '900', hex: 'FF6F00' }, { name: 'A100', hex: 'FFE57F' }, { name: 'A200', hex: 'FFD740' }, { name: 'A400', hex: 'FFC400' }, { name: 'A700', hex: 'FFAB00' } ] }, { name: 'Orange', camel: 'orange', colors: [ { name: '50', hex: 'FFF3E0' }, { name: '100', hex: 'FFE0B2' }, { name: '200', hex: 'FFCC80' }, { name: '300', hex: 'FFB74D' }, { name: '400', hex: 'FFA726' }, { name: '500', hex: 'FF9800' }, { name: '600', hex: 'FB8C00' }, { name: '700', hex: 'F57C00' }, { name: '800', hex: 'EF6C00' }, { name: '900', hex: 'E65100' }, { name: 'A100', hex: 'FFD180' }, { name: 'A200', hex: 'FFAB40' }, { name: 'A400', hex: 'FF9100' }, { name: 'A700', hex: 'FF6D00' } ] }, { name: 'Deep Orange', camel: 'deepOrange', colors: [ { name: '50', hex: 'FBE9E7' }, { name: '100', hex: 'FFCCBC' }, { name: '200', hex: 'FFAB91' }, { name: '300', hex: 'FF8A65' }, { name: '400', hex: 'FF7043' }, { name: '500', hex: 'FF5722' }, { name: '600', hex: 'F4511E' }, { name: '700', hex: 'E64A19' }, { name: '800', hex: 'D84315' }, { name: '900', hex: 'BF360C' }, { name: 'A100', hex: 'FF9E80' }, { name: 'A200', hex: 'FF6E40' }, { name: 'A400', hex: 'FF3D00' }, { name: 'A700', hex: 'DD2C00' } ] }, { name: 'Brown', camel: 'brown', colors: [ { name: '50', hex: 'EFEBE9' }, { name: '100', hex: 'D7CCC8' }, { name: '200', hex: 'BCAAA4' }, { name: '300', hex: 'A1887F' }, { name: '400', hex: '8D6E63' }, { name: '500', hex: '795548' }, { name: '600', hex: '6D4C41' }, { name: '700', hex: '5D4037' }, { name: '800', hex: '4E342E' }, { name: '900', hex: '3E2723' } ] }, { name: 'Grey', camel: 'grey', colors: [ { name: '50', hex: 'FAFAFA' }, { name: '100', hex: 'F5F5F5' }, { name: '200', hex: 'EEEEEE' }, { name: '300', hex: 'E0E0E0' }, { name: '400', hex: 'BDBDBD' }, { name: '500', hex: '9E9E9E' }, { name: '600', hex: '757575' }, { name: '700', hex: '616161' }, { name: '800', hex: '424242' }, { name: '900', hex: '212121' } ] }, { name: 'Blue Grey', camel: 'blueGrey', colors: [ { name: '50', hex: 'ECEFF1' }, { name: '100', hex: 'CFD8DC' }, { name: '200', hex: 'B0BEC5' }, { name: '300', hex: '90A4AE' }, { name: '400', hex: '78909C' }, { name: '500', hex: '607D8B' }, { name: '600', hex: '546E7A' }, { name: '700', hex: '455A64' }, { name: '800', hex: '37474F' }, { name: '900', hex: '263238' } ] }, { name: 'Misc', camel: '', colors: [ { name: 'white', hex: 'FFFFFF', x: 19, y: 0 }, { name: 'black', hex: '000000', x: 19, y: 1 } ] }]; var hexToRgb = function (hex) { var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null; }; var cToHex = function (c) { var hex = c.toString(16); return hex.length == 1 ? "0" + hex : hex; }; var rgbToHex = function (r, g, b) { return "#" + cToHex(r) + cToHex(g) + cToHex(b); }; var h = function (c) { if (c == '') { return 0; } var t = parseInt(c); return t >= 0 && t <= 255 ? t : 0; }; var getName = function (hex) { if(!(hex)) { return ''; } for (var i = 0; i < 19; i++) { for (var j = 0; j < swatches[i].colors.length; j++) { if (swatches[i].colors[j].hex == hex.replace('#', '')) { return swatches[i].camel + swatches[i].colors[j].name; } } } return ''; }; return { restrict: "E", require: 'ngModel', link: function ($scope, element, attrs, ngModel) { angular.element(element).addClass('materialpicker'); var selection = []; for (var x = 0; x <= 20; x++) { selection.push([]); } var size = 15; var state = { mousedown: false, ignore: false, selected: { color: null, x: 0, y: 0 } }; var container = angular.element('<div>'); container.addClass('materialpicker-colors'); container.on('mouseout', function () { if (attrs.hoverModel) { var model = $parse(attrs.hoverModel); model.assign($scope, null); $scope.$apply(); } }); container.on('mousedown', function () { state.mousedown = true; }); container.on('mouseup', function () { state.mousedown = false; }); function mouseup () { state.mousedown = false; angular.element(window.document).off('mouseup', mouseup); } container.on('mouseleave', function () { angular.element(window.document).on('mouseup', mouseup); }); container.on('mouseenter', function () { angular.element(window.document).off('mouseup', mouseup); }); var action = function (color, apply) { selection[state.selected.x][state.selected.y].ele.removeClass('selected'); state.selected.color = color.hex; state.selected.x = color.x; state.selected.y = color.y; var camel = swatches[color.x].camel; var format = $parse(attrs.format); if (format() === 'hex') { ngModel.$setViewValue('#' + color.hex); } else { var rgb = hexToRgb(color.hex); ngModel.$setViewValue({ hex: '#' + color.hex, name: camel + color.name, r: rgb.r, g: rgb.g, b: rgb.b }); } state.ignore = true; selection[color.x][color.y].ele.addClass('selected'); }; var isHex = function (hex) { if (typeof hex == 'undefined') { return null; } return hex.match(/^#([0-9A-F]{6})$/i); } var selectColor = function (hex) { var m = null; if (m = isHex(hex)) { selection[state.selected.x][state.selected.y].ele.removeClass('selected'); outer: for (var i = 0; i < swatches.length; i++) { inner: for (var j = 0; j < swatches[i].colors.length; j++) { if (swatches[i].colors[j].hex == m[1]) { selection[i][j].ele.addClass('selected'); state.selected.x = i; state.selected.y = j; break outer; } } } } }; for (var i = 0; i < 19; i++) { var column = angular.element('<div>'); column.css({ display: 'inline-block', verticalAlign: 'top' }); for (var j = 0; j < swatches[i].colors.length; j++) { var row = angular.element('<div>'); selection[i][j] = { ele: row }; swatches[i].colors[j].x = i; swatches[i].colors[j].y = j; row.css({ background: '#' + swatches[i].colors[j].hex, height: size + 'px' }); row.on('mouseover', (function (swatch, color) { return function () { if (attrs.hoverModel) { var model = $parse(attrs.hoverModel); var rgb = hexToRgb(color.hex); model.assign($scope, { hex: '#' + color.hex, name: swatch.camel + color.name, r: rgb.r, g: rgb.g, b: rgb.b }); $scope.$apply(); } }; })(swatches[i], swatches[i].colors[j])); row.on('click', (function (color) { return function () { action(color); }; })(swatches[i].colors[j])); row.on('mouseover', (function (color) { return function () { if (!state.mousedown || (color.x === state.selected.x && color.y === state.selected.y)) { return; } action(color); }; })(swatches[i].colors[j])); column.append(row); } container.append(column); } var white = angular.element('<div>'); white.css({ background: '#FFF', display: 'inline-block', width: (size * 3) + 'px', height: (size * 2) + 'px', position: 'absolute', left: (size * 16) + 'px', top: (size * 10) + 'px' }); selection[19][0] = { ele: white }; white.on('click', (function (color) { return function () { action(color); }; })(swatches[19].colors[0])); white.on('mouseover', (function (swatch, color) { return function () { if (attrs.hoverModel) { var model = $parse(attrs.hoverModel) model.assign($scope, { hex: '#' + color.hex, name: swatch.camel + color.name, r: 255, g: 255, b: 255 }); $scope.$apply(); } if (!state.mousedown || (color.x === state.selected.x && color.y === state.selected.y)) { return; } action(color); }; })(swatches[19], swatches[19].colors[0])); white.addClass('materialpicker-white'); container.append(white); var black = angular.element('<div>'); black.css({ background: '#000', display: 'inline-block', width: (size * 3) + 'px', height: (size * 2) + 'px', position: 'absolute', left: (size * 16) + 'px', top: (size * 12) + 'px' }); selection[19][1] = { ele: black }; black.on('click', (function (color) { return function () { action(color); }; })(swatches[19].colors[1])); black.on('mouseover', (function (swatch, color) { return function () { if (attrs.hoverModel) { var model = $parse(attrs.hoverModel) model.assign($scope, { hex: '#' + color.hex, name: swatch.camel + color.name, r: 0, g: 0, b: 0 }); $scope.$apply(); } if (!state.mousedown || (color.x === state.selected.x && color.y === state.selected.y)) { return; } action(color); }; })(swatches[19], swatches[19].colors[1])); container.append(black); element.append(container); var format = $parse(attrs.format); var watch = format() === 'hex' ? '$watch' : '$watchCollection'; $scope[watch](attrs.ngModel, function (value, oldValue) { if (typeof value == 'undefined') { return; } if (format() !== 'hex') { if (value.hex.match(/^[^#]/)) { value.hex = '#' + value.hex; } var color = hexToRgb(value.hex); if (color) { if ((value.r == color.r || typeof value.r == 'undefined') && (value.g == color.g || typeof value.g == 'undefined') && (value.b == color.b || typeof value.b == 'undefined')) { if (value.r != '') { value.r = color.r; } if (value.g != '') { value.g = color.g; } if (value.b != '') { value.b = color.b; } } else { if (value.hex != oldValue.hex) { value.r = color.r; value.g = color.g; value.b = color.b; } else { value.hex = rgbToHex( h(value.r) || 0, h(value.g) || 0, h(value.b) || 0 ); } } } else { var revertColor = hexToRgb(oldValue.hex); if (revertColor) { value.r = h(revertColor.r) || 0; value.g = h(revertColor.g) || 0; value.b = h(revertColor.b) || 0; } } } value.name = getName(value.hex || oldValue.hex); if (isHex(value.hex || value)) { ngModel.$setValidity('required', true); } else { ngModel.$setValidity('required', false); } var v = format() === 'hex' ? value : value.hex; selectColor(v); }); if (attrs.size) { $scope.$watch(attrs.size, function (nSize) { for (var i = 0; i < selection.length; i++) { for (var j = 0; j < selection[i].length; j++) { selection[i][j].ele.css({ width: nSize + 'px', height: nSize + 'px' }); } } white.css({ width: (nSize * 3) + 'px', height: (nSize * 2) + 'px', left: (nSize * 16) + 'px', top: (nSize * 10) + 'px' }); black.css({ width: (nSize * 3) + 'px', height: (nSize * 2) + 'px', left: (nSize * 16) + 'px', top: (nSize * 12) + 'px' }); }); } } }; } ]); // Demo App angular.module('app', ['ui.bootstrap.materialPicker']) .controller('Demo1Controller', [ '$scope', function ($scope) { $scope.color = '#263238'; $scope.hoverColor = null; $scope.size = 15; } ]).controller('Demo2Controller', [ '$scope', function ($scope) { $scope.color = { hex: '#263238' }; $scope.hoverColor = null; $scope.size = 15; // Correct input errors $scope.correct = function () { var m = null; if (m = $scope.color.hex.match(/^#([0-9A-F])([0-9A-F])([0-9A-F])$/i)) { $scope.color.hex = m[1] + m[1] + m[2] + m[2] + m[3] + m[3]; } else { var c = ['r', 'g', 'b']; for (var i = 0; i < 3; i++) { var part = +$scope.color[c[i]]; if (part > 255) { $scope.color[c[i]] = 255; } else if (part <= 0) { $scope.color[c[i]] = 0; } } } }; } ]); </script> Page settings Options</p> </article> <article id="item-6" class="menu__item"> <h3>Meta Tag Generator</h3> <p><iframe allowfullscreen="allowfullscreen" frameborder="0" height="870" marginheight="0" marginwidth="0" scrolling="no" src="//take-apk.blogspot.com/p/meta-tag-generate.html?embed=true" width="710"></iframe></p> </article> <article id="item-7" class="menu__item"> <h3>YouTube iframe embed</h3> <p><style> main { margin-left: 1em; margin-right: 1em; } main > section { margin-bottom: 1em; } main > section div.framed > div { border: 1px solid black; margin-bottom: 1ex; padding: 1ex; } main > section button { padding: 0.5ex 1em; } main > section input[type="range"] { width: 400px; margin: 10px;} main > section label[for^="YouTube-player-"] { position: absolute; padding: 12px; } main > section textarea { height: 9ex; margin: 0; padding: 10px 0 0 20px; vertical-align: top; width: 99%; color: white; background: #2e3f56; display: block; } .center { text-align: center; } .margin-left-m { margin-left: 1em; } .margin-right-m { margin-right: 1em; } .nowrap { white-space: nowrap; } #indicator-display { background-color: #f0f0f0; border-radius: 3ex; display: inline-block; float: right; font-family: monospace; height: 2ex; line-height: 2ex; margin: 1ex 1ex 0 0; padding: 1ex; text-align: center; vertical-align: middle; width: 2ex; } #YouTube-video-id { width: 178px; padding: 5px 0px 5px 8px; font-family: Allerta Stencil; } @media (max-width: 600px) { main > section iframe { height: 240px; width: 320px; } main > section input[type="range"] { width: 320px; } } @media (max-width: 400px) { main > section iframe { height: 200px; width: 200px; } main > section input[type="range"] { width: 200px; } } </style> <main> <section> <div class="center"> <h2>YouTube <code>iframe</code> embed</h2> <div id="YouTube-player"></div> <div> <span class="nowrap"> <button onclick="document.getElementById('YouTube-video-id').value='r_hgUWVi7Kg'; youTubePlayerChangeVideoId();" title="Champion Are Made - Them Song Avalanche X-Suit | PUBG Mobile">1</button> <button onclick="document.getElementById('YouTube-video-id').value='GtgoQk2TUiM'; youTubePlayerChangeVideoId();" title="Tidal Wave Poseidon X Suit theme song pubg">2</button> <button onclick="document.getElementById('YouTube-video-id').value='HZ_KxkPcKzI'; youTubePlayerChangeVideoId();" title="Murottal Qur'an Merdu | Surat Al Baqarah Full 1-286 Ayat">3</button> <button onclick="document.getElementById('YouTube-video-id').value='cHuv66ScuNE'; youTubePlayerChangeVideoId();" title="EDLEY BAJIDOR SUNDA || TALAK TILU - BOHONG AH - TUMILA DI ADU BOKSEN - SIUH">4</button> </span> <span class="nowrap margin-left-m margin-right-m"> <label for="YouTube-video-id"></label> <input id="YouTube-video-id" type="text" value="input VideoID youtube here..." size="12" pattern="[_\-0-9A-Za-z]{11}" onchange="youTubePlayerChangeVideoId();"> </span> <span class="nowrap"> <button onclick="youTubePlayerPlay();">Play</button> <button onclick="youTubePlayerPause();">Pause</button> <button onclick="youTubePlayerStop();">Stop</button> </span> </div> <div> <input id="YouTube-player-progress" type="range" value="0" min="0" max="100" onchange="youTubePlayerCurrentTimeChange(this.value);" oninput="youTubePlayerCurrentTimeSlide();"> <label for="YouTube-player-progress">duration</label> </div> <div> <input id="YouTube-player-volume" type="range" value="50" min="0" max="100" onchange="youTubePlayerVolumeChange(this.value);"> <label for="YouTube-player-volume">volume</label> </div> </div> <div class="framed"> <div id="YouTube-player-infos"></div> <div id="YouTube-player-errors"></div> <div id="YouTube-player-fixed-infos"></div> </div> </section> <section> <h2>References</h2> <ul> <li> This example on my website: <strong><a href="https://codejson.blogspot.com/p/youtube-iframe-embed.html">YouTube <abbr>API</abbr> example</a></strong> </li> <li> YouTube: <ul> <li><a href="https://developers.google.com/youtube/iframe_api_reference"><em>YouTube Player <abbr>API</abbr> Reference for <code>iframe</code> Embeds</em></a></li> <li><a href="https://developers.google.com/youtube/player_parameters"><em>YouTube Embedded Players and Player Parameters</em></a></li> </ul> </li> </ul> </section> </main> <script> /** * JavaScript code for the "YouTube API example" * http://www.opimedia.be/DS/webdev/YouTube/ * * (c) Olivier Pirson --- 2016 January, 26 */ /** * YT.Player initialized by onYouTubeIframeAPIReady(). */ var youTubePlayer; /** * Function called by https://www.youtube.com/iframe_api * when it is loaded. * * Initialized YouTube iframe with the value of #YouTube-video-id as videoId * and the value of #YouTube-player-volume as volume. * * Adapted from: * https://developers.google.com/youtube/iframe_api_reference * https://developers.google.com/youtube/player_parameters?playerVersion=HTML5 */ function onYouTubeIframeAPIReady() { 'use strict'; var inputVideoId = document.getElementById('YouTube-video-id'); var videoId = inputVideoId.value; var suggestedQuality = 'tiny'; var height = 300; var width = 400; var youTubePlayerVolumeItemId = 'YouTube-player-volume'; function onError(event) { youTubePlayer.personalPlayer.errors.push(event.data); } function onReady(event) { var player = event.target; player.loadVideoById({suggestedQuality: suggestedQuality, videoId: videoId }); player.pauseVideo(); youTubePlayerDisplayFixedInfos(); } function onStateChange(event) { var volume = Math.round(event.target.getVolume()); var volumeItem = document.getElementById(youTubePlayerVolumeItemId); if (volumeItem && (Math.round(volumeItem.value) != volume)) { volumeItem.value = volume; } } youTubePlayer = new YT.Player('YouTube-player', {videoId: videoId, height: height, width: width, playerVars: {'autohide': 0, 'cc_load_policy': 0, 'controls': 2, 'disablekb': 1, 'iv_load_policy': 3, 'modestbranding': 1, 'rel': 0, 'showinfo': 0, 'start': 3 }, events: {'onError': onError, 'onReady': onReady, 'onStateChange': onStateChange } }); // Add private data to the YouTube object youTubePlayer.personalPlayer = {'currentTimeSliding': false, 'errors': []}; } /** * :return: true if the player is active, else false */ function youTubePlayerActive() { 'use strict'; return youTubePlayer && youTubePlayer.hasOwnProperty('getPlayerState'); } /** * Get videoId from the #YouTube-video-id HTML item value, * load this video, pause it * and show new infos. */ function youTubePlayerChangeVideoId() { 'use strict'; var inputVideoId = document.getElementById('YouTube-video-id'); var videoId = inputVideoId.value; youTubePlayer.cueVideoById({suggestedQuality: 'tiny', videoId: videoId }); youTubePlayer.pauseVideo(); youTubePlayerDisplayFixedInfos(); } /** * Seek the video to the currentTime. * (And mark that the HTML slider *don't* move.) * * :param currentTime: 0 <= number <= 100 */ function youTubePlayerCurrentTimeChange(currentTime) { 'use strict'; youTubePlayer.personalPlayer.currentTimeSliding = false; if (youTubePlayerActive()) { youTubePlayer.seekTo(currentTime*youTubePlayer.getDuration()/100, true); } } /** * Mark that the HTML slider move. */ function youTubePlayerCurrentTimeSlide() { 'use strict'; youTubePlayer.personalPlayer.currentTimeSliding = true; } /** * Display embed code to #YouTube-player-fixed-infos. */ function youTubePlayerDisplayFixedInfos() { 'use strict'; if (youTubePlayerActive()) { document.getElementById('YouTube-player-fixed-infos').innerHTML = ( 'Embed code: <textarea readonly>' + youTubePlayer.getVideoEmbedCode() + '</textarea>' ); } } /** * Display * some video informations to #YouTube-player-infos, * errors to #YouTube-player-errors * and set progress bar #YouTube-player-progress. */ function youTubePlayerDisplayInfos() { 'use strict'; if ((this.nbCalls === undefined) || (this.nbCalls >= 3)) { this.nbCalls = 0; } else { ++this.nbCalls; } var indicatorDisplay = '<span id="indicator-display" title="timing of informations refreshing">' + ['|', '/', String.fromCharCode(8212), '\\'][this.nbCalls] + '</span>'; if (youTubePlayerActive()) { var state = youTubePlayer.getPlayerState(); var current = youTubePlayer.getCurrentTime(); var duration = youTubePlayer.getDuration(); var currentPercent = (current && duration ? current*100/duration : 0); var fraction = (youTubePlayer.hasOwnProperty('getVideoLoadedFraction') ? youTubePlayer.getVideoLoadedFraction() : 0); var url = youTubePlayer.getVideoUrl(); if (!current) { current = 0; } if (!duration) { duration = 0; } var volume = youTubePlayer.getVolume(); if (!youTubePlayer.personalPlayer.currentTimeSliding) { document.getElementById('YouTube-player-progress').value = currentPercent; } document.getElementById('YouTube-player-infos').innerHTML = ( indicatorDisplay + 'URL: <a class="url" href="' + url + '">' + url + '</a><br>' + 'Quality: <strong>' + youTubePlayer.getPlaybackQuality() + '</strong>' + ' &mdash; Available quality: <strong>' + youTubePlayer.getAvailableQualityLevels() + '</strong><br>' + 'State <strong>' + state + '</strong>: <strong>' + youTubePlayerStateValueToDescription(state) + '</strong><br>' + 'Loaded: <strong>' + (fraction*100).toFixed(1) + '</strong>%<br>' + 'Duration: <strong>' + current.toFixed(2) + '</strong>/<strong>' + duration.toFixed(2) + '</strong>s = <strong>' + currentPercent.toFixed(2) + '</strong>%<br>' + 'Volume: <strong>' + volume + '</strong>%' ); document.getElementById('YouTube-player-errors').innerHTML = '<div>Errors: <strong>' + youTubePlayer.personalPlayer.errors + '</strong></div>'; } else { document.getElementById('YouTube-player-infos').innerHTML = indicatorDisplay; } } /** * Pause. */ function youTubePlayerPause() { 'use strict'; if (youTubePlayerActive()) { youTubePlayer.pauseVideo(); } } /** * Play. */ function youTubePlayerPlay() { 'use strict'; if (youTubePlayerActive()) { youTubePlayer.playVideo(); } } /** * Return the state decription corresponding of the state value. * If this value is incorrect, then return unknow. * * See values: * https://developers.google.com/youtube/iframe_api_reference#Playback_status * * :param number: any * :param unknow: any * * :return: 'unstarted', 'ended', 'playing', 'paused', 'buffering', 'video cued' or unknow */ function youTubePlayerStateValueToDescription(state, unknow) { 'use strict'; var STATES = {'-1': 'unstarted', // YT.PlayerState. '0': 'ended', // YT.PlayerState.ENDED '1': 'playing', // YT.PlayerState.PLAYING '2': 'paused', // YT.PlayerState.PAUSED '3': 'buffering', // YT.PlayerState.BUFFERING '5': 'video cued'}; // YT.PlayerState.CUED return (state in STATES ? STATES[state] : unknow); } /** * Stop. */ function youTubePlayerStop() { 'use strict'; if (youTubePlayerActive()) { youTubePlayer.stopVideo(); youTubePlayer.clearVideo(); } } /** * Change the volume. * * :param volume: 0 <= number <= 100 */ function youTubePlayerVolumeChange(volume) { 'use strict'; if (youTubePlayerActive()) { youTubePlayer.setVolume(volume); } } /** * Main */ (function () { 'use strict'; function init() { // Load YouTube library var tag = document.createElement('script'); tag.src = 'https://www.youtube.com/iframe_api'; var first_script_tag = document.getElementsByTagName('script')[0]; first_script_tag.parentNode.insertBefore(tag, first_script_tag); // Set timer to display infos setInterval(youTubePlayerDisplayInfos, 1000); } if (window.addEventListener) { window.addEventListener('load', init); } else if (window.attachEvent) { window.attachEvent('onload', init); } }()); </script></p> </article> <article id="item-8" class="menu__item"> <h3>Mail-eXtractor</h3> <p> <iframe allowfullscreen="allowfullscreen" frameborder="0" height="1020" marginheight="0" marginwidth="0" scrolling="no" src="//take-apk.blogspot.com/p/email-extractor-lite-extract-email.html?embed=true" width="100%"></iframe> </p> </article> <article id="item-9" class="menu__item"> <h3>SWF to HTML</h3> <p> <iframe allowfullscreen="allowfullscreen" frameborder="0" height="1280" marginheight="0" marginwidth="0" scrolling="no" src="//take-apk.blogspot.com/p/swfobject.html?embed=true" width="100%"></iframe> </p> </article> </section> <div class="menu--shadow"></div> </div> <script> $(function() { // Menu Tabular var $menu_tabs = $('.menu__tabs li a'); $menu_tabs.on('click', function(e) { e.preventDefault(); $menu_tabs.removeClass('active'); $(this).addClass('active'); $('.menu__item').fadeOut(300); $(this.hash).delay(300).fadeIn(); }); }); </script><div class="blogger-post-footer">http://feeds.feedburner.com/codejson</div>