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+/...

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

A couple months ago when I was trying to made a responsive theme for my MindTouch wiki (dekiwiki opensourced version) using BootStrap, I broke the page-restriction functionality for some reasons. In details, It's the " Add to list " button. When I clicked it, the selected user/group did not appear under the " Permission list " list. After looking into the core for a while, I finally made it work again. Simply as following: 1. Open the special_pagerestrictions.php file (at /path/to/your/dekiwiki/deki/plugins/special_page/special_pagerestrictions/ ) using nano or any text editor you like 2. Modify this code block with the red line: var itemSelectHandler = function(sType, aArgs) {         var oAcInstance = aArgs[0];         var oData = aArgs[2];           if ( oData && oData[0] )         {                 oAcInstance._elTextbox.value = Deki.$.h...

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

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

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

Here is how you can get an image randomly from a directory and display it in a webpage using PHP and jQuery: 1. getimage.php: <?php     $files = glob('/path-to-dir/*.*');     $file = array_rand($files);     echo $files[$file]; ?> and call that script with jquery AJAX : 2. index.html: <div id="my-img"> </div> <script> function get_random_image() {    $.ajax({       url: 'getimage.php'        }).done(function( filename ) {            jQuery('#my-img').css('background', 'url('+filename+')');      }); } setInterval(get_random_image, 5000); </script> The background will be replaced by a random image from /path-to-dir/ directory every 5 seconds.

To display student's photo on the PowerSchool Parent's Portal: 1. In PS Administrator, create a custom page under the guardian folder, student_photo.html , with the following content: The   ~[studenttitlephoto] will output the student photo's thumbnail which is too small. For example: https://mypowerschool.com/guardian/stpthumb/5712ph_thumb.jpeg?version=1417586219587 I figured out where the source of the real photo is. All I have to do to get the bigger image source is to remove all the ' thumb ' part in the source link of the image: https://mypowerschool/guardian/stp/5712ph.jpeg?version=1417586219587 var src = photo.attr( ' src ' ); src = src. replace ( ' thumb ' , ' ' ); // replace the src link with the bigger photo's src = src. replace ( ' _thumb ' , ' ' ); // replace the src link with the bigger photo's photo.attr( ' src ' , src); Plus, I also have to re...

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

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/

Normally, if you send an ajax request to a server script stays in a different domain server, you will get this error: XMLHttpRequest cannot load http://my.external.domain/myscript.php . Origin http://my.external.domain is not allowed by Access-Control-Allow-Origin. So, to allow other domains call this cript, just set the 'access-control-allow-origin' header equal '*'. For example: http://my.external.domain/myscript.php <?php  header('content-type: application/json; charset=utf-8'); header('access-control-allow-origin: *'); $date = date('m-d-Y h:i:s a', time()); $json = json_encode($date); echo isset($_GET['callback'])     ? "{$_GET['callback']}($json)"     : $json; ?> And in my current site, send the ajax request to myscript.php: var mydate = ''; jQuery.ajax({ url: ' http://my.external.domain/myscript.php ', crossDomain: true, type: 'GET' }).done(...

I tried to display the data content in a form of popups, and I found the bPopup plugin of jQuery which is very useful and easy to use. So, I just hide the content and then add bPopup display to the click event of a button: mypage.html =========         {% for msg in mail_logs %} ...              <textarea readonly class="msgbody" id="msgbody-{{ msg.logid }}" value="" style="display:none;">{{ msg.body }}</textarea>                 <button class="showmsgbtn small button yellow" id="{{ msg.logid }}">Show Message</button> ...         {% endfor %} ... <script>     jQuery('.showmsgbtn').each(function(){         jQuery(this).click(function(){             btnid = jQuery(this).attr('id');             textareaid = 'msgbody-' + btnid;     ...

This is just an amazing jQuery plugin to manipulate cookies:  https://github.com/carhartl/jquery-cookie#readme The plugin is so awesome because it helped me to get rid of the complicated and repeated line of code I use to return to the template to render state of an element, (e.g the current selected menu item). I was use something stupid like: views.py: ... def my_view(request):       selected_nav = 'First menu' .... my_template.html: I then get the return value and choose which menu is in the selected state: ... <script type="text/javascript"> console.log("{{ selected_nav }}"); jQuery("#nav a").each(function(){ jQuery(this).removeClass("selected"); }); jQuery("#nav a:contains('{{ selected_nav }}')").addClass("selected"); </script> ... I thought about session and cookie, It was really annoying when have to write to the session the value I want whenever I define a vie...

I want to change the rendered form when I select type of the form. So, I use the following solution: - Whenever user click to select a type (radio buttons), use jQuery to make an ajax call to write to the session the current selected type. - In the view code, get the current selected type from the session, create the form of the current selected type, and return to the template. For example, I have 2 type: teacher, and student. Teacher and Student form have different input fields:

Recently I worked on a project which is required me to create an interface for emailing. I decided to use an ajax form, and I found facebox which is initial made by defunkt (founder of github):  https://github.com/defunkt/facebox . I folked and modified facebox to fit my project's needs:  https://github.com/dangtrinh/facebox . All I have to do is apply the power of jwysiwyg library ( https://github.com/jwysiwyg/jwysiwyg ) to apply the rich format text-editor to the textarea: facebox.js: ...

Hello Sunday, Finally, I have time to blog. This is how I made forms of the inline formset can be add dynamically using jQuery. Adding this following javacsript to your template (and of-couse, the jquery lib):