I am busy changing the world

Ok, jQuery included, Owl Carousel included, checked checked checked, still doesn't work. The error kept showing up: Uncaught TypeError: $(…).owlCarousel is not a function What the hell is going on? Then I realized that the jQuery library was included twice by some of the plugins. So I'm using this following technique to get rid of the error: (function($) { $(document).ready(function(){ $("#owl-demo").owlCarousel({ ...  }); }); }) (jQuery);

Let's say you have a list of HTML elements (div) and you want to implement the search and filter functionality. Here is dead simple example: Assuming your HTML block looks like the following: <div> <input type="text" id="search" placeholder="Type to search"> <button id="search-btn">Search</button> </div> <div class="list-partner"> <div class="partner-item">...</div>         <div class="partner-item">...</div>         <div class="partner-item">...</div> </div> And this javascript snippet will add the magic: <script> var rows = jQuery('.list-partner .partner-item'); jQuery('#search-btn').click(function() { var val = jQuery.trim(jQuery('#search').val()).replace(/ +/g, ' ').toLowerCase(); rows.each(function(){ var itemtxt = jQuery(this).text().replace(/\s+/...

This is pretty neat javascript snippet to get the URL's parameters: var getUrlParameter = function getUrlParameter(sParam) {     var sPageURL = decodeURIComponent(window.location.search.substring(1)),         sURLVariables = sPageURL.split('&'),         sParameterName,         i;     for (i = 0; i < sURLVariables.length; i++) {         sParameterName = sURLVariables[i].split('=');         if (sParameterName[0] === sParam) {             return sParameterName[1] === undefined ? true : sParameterName[1];         }     } };

So you want to make a webpage that when you click a button, a youtube video frame will overlay the current windows instead of opening in a new screen. Lightbox effect is what you want to achieve. But it sounds like something fancy and would take a lot of javascript-fu to implement it. Fortunately, we have Lity . Official website:  http://sorgalla.com/lity/ Here is how to use it: 1. Download the distribute package of litty from github . You only need 2 files: lity.js and lity.css from  the dist directory. 2. Include the library in your web page (and jQuery): <link href="lity.css" rel="stylesheet"> <script src="jquery.js"></script> <script src="lity.js"></script> 3. Add data-lity to your link tag: <a href="https://www.youtube.com/watch?v=XSGBVzeBUbk" data-lity>Youtube</a> 4. Bind the click event: $(document).on('click', '[data-my-lightbox]', lity); Awesome!!!

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

To make an image showing alternate source when the main one is not found, you simply bind the onerror event on the image like the following: <img src="imagenotfound.gif" alt="Image not found" onerror="this.onerror=null;this.src='imagefound.gif';" /> Reference:   http://stackoverflow.com/questions/3984287/how-to-show-alternate-image-if-source-image-is-not-found-onerror-working-in-ie

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) ...

In many cases, the web engine that generates data tables (html) is close-sourced and you cannot sort those tables. It is not because the engine does not have a mechanism to sort data. It's just that its behaviors does not satisfy your need. For example, the PowerSchool customization engine. In PowerSchool, I can output a table of lunch balance information of a student using this template syntax: ~[tlist;gldetail;studentid=~(curstudid);alternatecolor;sortcmd;date, > ,time, > ;]   <td>~(date)</td>   <td>~(time)</td>   <td>~(neteffect)</td>   <td>~(runninglunchtotalbalance.students)</td>   <td colspan="3">~(transdescription)</td> Did you see the >  (greater than) sign? It says that the table will sort by the date and time columns in ascending order. What I want is to make it sort date and time in descending order. So I tried to replace the > with the < (less than) ho...

This was another Google Form challenge I got this week. The school want to add the department code into the user's response right after she/he submits her/his course selection from the Google Form. For example, if the user select course ABC and submit the form, the responses spreadsheet will have a new line with the department code filled in automatically: timestamp,course,dept ..,ABC,departmentcode01 What I had done to get it done are: 1. Like the previous Google Form challenge , I had to prepare a google spreadsheet contains all the courses and their department codes: course,dept ABC,departmentcode01 Physics,departmentcode02 ... 2. In the form's editor mode, select Tools >> Script editor, and write a script containing four functions: A function to read the data spreadsheet (course/departmentcode):   sheet_to_list ( spreadsheetid , sheetname )  A function to search through the response spreadsheet and get the selected course: get_feedback_course...

Google Form is such a great tool for us to create surveys with a great web interface. But, the thing is even with the cool drag-and-drop features, It's still a pain in the ass to generate forms from a mass amount of data (questions and choices). That's where Google Apps Scripts comes into its usefulness. Here is a case study from my real life experience: Earlier this week I had a chance to tinkering around the apps scripts to help my school create a survey with a set of data stored inside an excel file. The final goal is to create a form in which students give feedback to each of their teachers on each courses. So the excel data looks like this: Teachers sheet: this sheet contains 3 columns, each column is a list of all the teachers of each schools (elementary, middleschool and highschool) es,ms,hs teacher1,teacher2,teacher3 teacher6,teacher7,teacher8 ... Courses sheet: the courses sheets is storing name of the courses each teacher is teaching teacher1,teacher2,t...

Here is the snippet I just wrote, pretty convenient:

To get all the keys of a dictionary in Google Apps Script or Javascript, do as following: var mydata = {'key1': value1, 'key2': value2}; var keys = Object.keys(mydata);

In Google Apps Script, you can do the foreach loop as the following example:  var headers = ["super", "genius", "awesome"];  for each (var header in headers) {        Logger.log(header);  }

If you wanna use foreach to loop through an array (list) in javascript, do as the following example: var myarray = ["genius", "super", "god"]; myarray. forEach (function(value, index){     console.log(index + ": " + value); }); the result will be: 0: genius 1: super 2: god Tested in Chrome 45.

Pretty handyyyy: Reference: http://stackoverflow.com/questions/12073270/sorting-options-elements-alphabetically-using-jquery

Sometimes, you just want to fetch the rss feeds from an external site without touching any server code. jQuery and Google Feed API will save your day. rss_parser.js: Then, in your html page or post, use this: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script> <script src="/path/to/parser.js"></script> <div id="myrss" class="box"></div> <script type="text/javascript">       $(function(){             parseRSS('http://mywebsite.com/feed/', '#myrss');       }); </script> The feeds will be inserted into myrss div. Reference:   https://developers.google.com/feed/v1/reference

I was trying to display some custom field data (I will take ssis_student_nickname as an example in this article) in the classattendance.html page in PowerSchool Teachers. But, to be honest, I'm not sure about the customization syntax of PowerSchool. I couldn't make it work with this following syntax: ~([01]ssis_student_nickname) or ~([Students.U_STUDENTSUSERFIELDS]ssis_student_nickname) As fas as I acknowledged, the classattendance page accessing the attendance database using some javascript. So, in the end, I have to do some hack to display the custom field in that page. Here is the details: 1. Add an additional column in the page, and name it: ...              <th align="left" class="cvDemarcation">~[text]psx.html.teachers.classattendance.students[/text]</th>             <th class="cvDemarcation">Student Nick Name</th> ...             <tr class="s...

Assuming you have a table of links (link a portal) in your website like the following: <table class="tablesorter" id="tbl1"> <thead> <tr> <th> Faculty </th> </tr> </thead> <tbody> <tr> <td><a href="#link1">A link</a></td> </tr> <tr> <td><a href="#link2">G Link</a></td> </tr> <tr> <td><a href="#link3">H Link</a></td> </tr> <tr> <td><a href="#link4">B Link</a></td> </tr> <tr> <td><a href="#link5">K Link</a></td> </tr> <tr> <td><a href="#link6">U Link</a></td> </tr> <tr> <td><a href="#link7">C Link</a></td> </tr...

I added a fixed top navigation bar to the theme of my MindTouch Core instance and it overlays the toolbar of the ckeditor when I scroll (because both of them are supposed to be at the top when scrolling). I have to fixed that by hacking into the core javascript of MindTouch for ckeditor: 1. First, we need to beautify the following file (because it was minified): Copy content of mindtouch.js   /path/to/dekiwiki/deki/plugins/page_editor_ckeditor/ckeditor/mindtouch.js Go to  http://jsbeautifier.org/  and beautify the javascript, copy it. Replace the minified content with the beautify one into mindtouch.js 2. Next, go to line 737 and change as following:                 if (g < l) {                         // this will                          j = g - i + 55;         ...

Quite easy: jQuery('#some-element-id').is(':visible'); Cool!