I am busy changing the world

In Atom or any text editor that supports regex search, you can use this to search for the inline css styles in a HTML file: style='[^']*' or double quote: style="[^"]*" Awesome!

When browsing the Tikiwiki forum, I noticed the Back-to-Top button which is pretty useful and I want to bring it to my own Tikiwiki. But, the thing is there is no documentation about it so I have to look into the HTML source of the forum. It turned out that It's quite simple: 1. What you need to do first is to create a custom module: http://your-tikiwiki-url/tiki-admin_modules.php In the Custom Modules tab -> Add this to the Data text field: <div class="backtotop"><a href="#top" title="Back To Top">⌅</a></div> -> Click Save 2. Then, assign the custom module to the Bottom section: Go to Assigned Modules -> Bottom tab -> Add module -> Select your Back to Top module Make sure these parameter was set: Position: bottom Parameters: nobox=y -> Click Assign 3. Go to Look & Feel, Customization tab, add this CSS: .backtotop { bottom: 3rem; position: fixed; right: 3rem; } .backtotop a:af...

In order to query the second last child of a HTML element in CSS, you can just simply use this: .my-menu:nth-last-child(2) assuming .my-menu is the class name of the parent node.

Sometime you mess up your stylesheets, your javascripts and you realize that you forgot to commit the changes, so your life screws up. Actually, there is still one place you can look for help. It's your browser's cache (assuming that you're using Chrome). 1. In Chrome, go to chrome://cache , you will see all the links to cached files here. 2. Click on the one that you want, you will see a whole bunch of text and numbers 3. Open Chrome's Developer Tool, paste the following code into the javascript console: 4. Click on  the link " Left-click to download the cached file " appears on top of the page to download the cached file. Reference:  http://www.sensefulsolutions.com/2012/01/viewing-chrome-cache-easy-way.html

I want to create a portfolio page that listing all of my projects with search and filter functionalities. I search through a lot of javascript libraries and isotope is the only one that I can make it to work (I tried Filterizr , it worked, but if the number of items is about 100, everything will be broken): Isotope official page: http://isotope.metafizzy.co/ This is a working example. It's easy, just read through the code and you will understand: Isotope - filtering with search field and button filters show all metal transition alkali and alkaline-earth not transition metal but not transition Mercury Hg 80 200.59 Tellurium Te 52 127.6 Bismuth Bi 83 208.980 Lead Pb 82 207.2 Gold Au 79 196.967 Potassium K 19 39.0983 Sodium Na 11 22.99 Cadmium Cd 48 112.411 Calcium Ca 20 40.078 Rhenium Re 75 186.207 Thallium Tl 81 204.383 Antimony Sb 51 121.76 Cobalt Co 27 58.933 Ytterbium Yb 70 173.054 Argon Ar 18 39.948 Nitrogen N 7 14.007 Uranium U 92 238.029 Plutonium Pu 94 (244) ...

If you noted, the admin menu of WordPress (4.3) is messed in Chrome (v45): According to a StackOverflow post there is a known bug in chrome (more info here ). The source of the problem stems from Slimming Paint which is enabled by default in Chrome 45. Disabling slimming paint fixes the issue. To disable this feature, visit chrome://flags/#disable-slimming-paint in Chrome and Enable the Disable slimming paint option, and make sure the other two Enable options are disabled because they will override the Disable option. Hopefully, it will be fixed in Chrome  version 47 . For now, you can do as following to solve this issue: add this in your template's functions.php (single site) or in mu-plugins/functions.php (multisite): function admin_menu_fix() {     echo '<style>     #adminmenu { transform: translateZ(0); }     </style>'; } add_action('admin_head', 'admin_menu_fix'); References: [0] http://stackoverflow.com/ques...

So, I want to apply the grid style of Bootstrap to the a number of div tag in my php code . Here is one way to achieve that: 1. Using this javascript snippet in the template: $(document).on("ready", function() {   $.each(['xs', 'sm', 'md', 'lg'], function(idx, gridSize) {     $('.col-' + gridSize + '-auto:first').parent().each(function() {       //we count the number of childrens with class col-md-6       var numberOfCols = $(this).children('.col-' + gridSize + '-auto').length;       if (numberOfCols > 0 && numberOfCols < 13) {         minSpan = Math.floor(12 / numberOfCols);         remainder = (12 % numberOfCols);         $(this).children('.col-' + gridSize + '-auto').each(function(idx, col) {           var width = minSpan;           if (remainder > 0) {         ...

Sometimes the tables will break your website because it's too big, even-though you are using bootstrap. Here is the savior: Github repository:   https://github.com/johnpolacek/stacktable.js/ Official website:   http://johnpolacek.github.io/stacktable.js/ Basically, StackTableJS will transform your horizontal tables into vertical tables (the headers). 0. Download the js and css file from the link above (stacktable.css and stacktable.js). 1. Make sure the table is well-formed: <table id="mytable"> <thead> <tr> <th>Title 1</th> <th>Title 2</th> </tr> </thead> <tbody> <tr> <td>...</td> <td>...</td> <tr> ... </tbody> </table> 2. Include the stacktable css, add this inside the head tag: <link href="/js/stacktablejs/stacktable.css" rel="stylesheet" /> 3. Include the stacktable js , add this before the body e...

To disable mouse scroll wheel zoom on embedded Google Maps, you just need to set the css property  pointer-events  of the iframe to none : <style> #mapcontainer iframe {     pointer-events:none; } </style> <div id="mapcontainer"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d49558.05949043515!2d-94.820775!3d39.075070499999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x87c08e065e054485%3A0xf8652fbc74a54de0!2sEdwardsville%2C+KS%2C+USA!5e0!3m2!1sen!2s!4v1415172721068" width="600" height="450" frameborder="0" style="border:0"></iframe> </div> Further more, you can use this jQuery snippet to toggle the pointer on/off: <script>         jQuery('#mapcontainer').toggle(function () {                 jQuery('#mapcontainer iframe').css("pointer-events", "auto");         }, function(){       ...

My Djangp app output data like this in the template: {% for mydata in mydataset %} <table class="mytable">     <tr>           <th style="width=50%;">Column 1</th>           <th style="width=50%;">Column 2</th>     </tr> {% for data in mydata %}     <tr>           <td>{{ data.attr1 }}</td>           <td>{{ data.attr2 }}</td>     </tr>  {% endfor %} </table> {% endfor %} The thing is I want to make all my html tables keep a certain size even when the content inside the cells may vary. Here is the trick I'm using: table.mytable { table - layout : fixed ; }

To create a floating nagivation menu which always stays at the top of the page when you scroll, we can use this script: With the HTML layout as following: <div id="nav"> ... </div> Cool! Reference:  http://www.dwuser.com/education/content/creating-a-floating-navigation-menu/

To apply the Standford theme for your edX production stack: 1. Open/create the file  /edx/var/edx_ansible/server-vars.yml , and add the following lines: edxapp_use_custom_theme: true edxapp_theme_name: 'stanford' edxapp_theme_source_repo: 'git://github.com/Stanford-Online/edx-theme.git' edxapp_theme_version: 'HEAD' 2. Then run the provisioning script: $ sudo /edx/bin/update edx-platform master Notes and troubleshooting: 1. To customize the theme, fork the Standford theme's repository, change the style, images...or whatever you want, then edit the server-vars.yml file again: edxapp_use_custom_theme: true edxapp_theme_name: 'mycustomtheme' edxapp_theme_source_repo: 'git://github.com/myaccount/edx-theme.git' edxapp_theme_version: 'HEAD' Save and exit. Repeat step #2 to apply the new theme to your edx instance. 2. server-vars.yml does not make any changes after running the update bash script Take a look at...

To add background image rotation for your website, use the following jquery and css snippet: CSS: body { transition: background 1s ease-in-out; -webkit-transition: background 1s ease-in-out; -moz-transition: background 1s ease-in-out; -o-transition: background 1s ease-in-out; } .image-0 { background:url('/images/bgmain.png'); } .image-1 { background:url('/images/bgmain1.png'); } .image-2 { background:url('/images/bgmain2.png'); } .image-3 { background:url('/images/bgmain3.png'); } JS:     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>     <script> $(document).ready(function(){ var msecs = 5000; var step = 0; var limit = 2; $("body").addClass("image-"+step); setInterval (function(){ $("body").removeClass("image-"+step); step = (step > limit) ? 0 : step +...

To change source attribute of an img tag, use this CSS: <img id="myimg"> CSS: img#myimg {      content : url ( "/path/to/myimage.jpeg" ); } img#myimg:hover {     content:url("/path/to/otherimage.jpeg"); }

I'm so excited right now to write apps for Firefox OS, the hottest mobile operating system of Mozilla. - Everything is here:  https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS The only phone maker right now which produces phones that runs Firefox OS is Geekphone (a Spain company,  http://www.geeksphone.com/ ), but all of the there Firefox OS powered phones were sold old in just a couple of hours after launch. So, I and so many other fan-boy all over the world cannot have a chance to buy it. So, the only thing I can do right now is write apps and test it on the Simulator. These are screenshots of the Simulator add-on (Firefox browser, of-course):