snippetbymatt

Let's say you have this following set-up: var jsonObj = {         "type": "FeatureCollection",         "features": [             {                 "geometry": {                     "type": "Point",                     "coordinates": [124.112122, 8.112132]                 },                 "type": "Feature",                 "properties": {        ...

I had mentioned that I was digging ReactJS in my last post, so I applied what I have learned about it to revamp our rainfall monitoring system. It's funny how we code last day, month or year is very much different compared today. It's not bad though, that means we're (I'm) improving or there's a progress. The system before uses JavaScript, JQuery, Openlayers and  a JavaScript library for date formatting. Here's how it works: Request data from a different (an external) domain(server) Get the latest value and append it to the pre-defined GeoJSON object Evaluate the value to determine its rainfall intensity  Finally, plot it on the map Downside, upon clicking each points, the system needs to request again the data to display it in graph. Now, like I said, there's a progress. Aside from using ReactJS, I also changed how it works. Request data from a different (an external) domain(server). Get all the data (not just the last value) from all ava...

I am digging ReactJS these past days. I am trying to figure out how it works this is because of my curiosity looking at the source code of a certain website with clean html structure--like having just a head, body and a division within it only . I was wondering how the HTML elements have been rendered on that page, and there I found out that it is possible by using ReactJS (I don't know if there are other library that can do it). Just an introduction what is this ReactJS --it is developed by Facebook (made it more appealing to me). If they are using it, therefore, it must be really efficient and fast. As the description on the website states, it is "A JavaScript library for building user interfaces". Based on my understanding, it utilizes the Virtual DOM, meaning instead of directly changing or re-rendering the DOM when updates is needed,  ReactJS will determine and calculate if there are changes in the UI in Virtual DOM and if there is, it will re-render the entire ...

OVERVIEW  The application needs inputs from the user such as his/her location (this is optional), estimated amount of rainfall (rainfall intensity) and lastly the estimated time the rain has started.  The estimated time the rain has started is an important input from the user as it is the basis in computing when the flood water will arrive on the area. After providing the data, depending on the selected rainfall amount, the application will check if this data is present on the phone memory, otherwise, it will be downloaded. After a successful download, the user can now draw on the map. It can either be points, polygon or multipolygon. The drawn layer will be assessed by the application, if it is affected, it will provide the above information with rainfall amount and its location and it will be saved onto the phone memory for future reference, if not, throws a prompt that the area is not flooded.     Software/program used: mbutil TileMill Cygwin Term...

Let's say you have that kind of chart/graph above, and then you want to set its min and max range...Nah, here's the code: chart: { renderTo: 'container', type: 'line', //width: 800, height: 450, alignTicks: false }, ... yAxis: [{ //primary y axis min: 0, max: 100, tickInterval: 20 }, { min: 0, max: 150, tickInterval: 30, opposite: !0 }] ... You just need to add alignTicks: false in your chart option then set the y-axis' tickInterval . It is much better to divide each max range with the same value.

Demo The code below highlight the words in the paragraph if it matches on the inputted keywords or text from the user. Gets the value from the text box Split if the words are separated by space Store the values in an array Pass those values in the function and use  RegExp  to evaluate If found, replaces the text with added span tag for the highlight. $.fn.wrapInTag = function (opts) { var words = opts.words || [], regex = RegExp(words.join('|'), 'gi'), replacement = '<span class="highlight">$&</span>'; return this.html(function () { return $(this).text().replace(regex, replacement); }); }; $('#terms').keyup(function () { var keywords = []; keywords = $(this).val().split(" "); $('p#text-body').wrapInTag({ words: keywords }); }); Demo

/*START OF STYLING THE VECTOR LAYER*/ var o = { getColour: function (e) { var t = e.attributes.hazard; return "Low" == t ? "#FFFF00" : "Medium" == t ? "#FFA500" : "#ff0000" } }; var c = { fillOpacity: .3, strokeColor: "${getColour}", strokeWidth: 0, strokeOpacity: 0, fillColor: "${getColour}" }; var b = new OpenLayers.Style(c, { context: o }); var v = new OpenLayers.StyleMap({ "default": b }); /*END OF STYLING THE VECTOR LAYER*/ var GeoJSONLayer = new OpenLayers.Layer.Vector("GeoJSON", { styleMap: v, strategies: [new OpenLayers.Strategy.Fixed(), filterStrategy], renderers: ['Canvas', 'SVG', 'VML'], protocol: new OpenLayers.Protocol.HTTP({ url: "{% static "js/floodmap.txt" %}", format: new OpenLayers.Format.GeoJSON() }) }); Change the attribute name based on your ...

So to do that, you need a text file full of quotes. HAHAHA Separated by new line. DEMO $('#btn_modal').click(function () { var num = 0; $.ajax({ url: "https://dl.dropboxusercontent.com/u/75734877/taglines.txt", type: "GET", dataType: "text", beforeSend: function () { $('#kowts').show().html('<img src="http://www.feelol.com/Content/images/Loading.gif" />'); }, success: function (t) { var lines = t; var lineArr = lines.split('\n'); num = Math.floor(Math.random() * lineArr.length); $('#kowts').show().text(lineArr[num]); }, error: function(){ alert('Error') } }); }); Split the quotes from text file by "\n" (new line), then get its length and generate a random number between 0 to maximum length. Then use the generated number a...

The body background changes at  12:01 am-6:00am (sunrise.jpg) , 6:01am to 12:00nn (day.jpg), 12:01pm - 6:00pm (sunset.jpg)  and 6:01pm to 12:00mn (night.jpg). Here's the code:

This will populate you textarea based on the selected item on child window. I hope the image above can be the explanation. :P Anyway here's the code:

Before anything else, the interface is based on Facebook but it's on green. :D Anyway, I'm too lazy to post the codes here so I decided to just upload all the files and you can download it if you like.

Before anything else, here's the demo. Demo This is inspired by this theme  You will have an option to change your background image in every post and having it in full width depending on the screen size. This "trick" will override your body background but it's not harmful, I promise! :D So, let's start doing it. From Dashboard > Template > Edit HTML First,  find    ]]></b:skin> Then paste this code above it, .bg{position:fixed;z-index:-2} .bg img{position:fixed;top:0;left:0;min-width:100%;min-height:100%} .bg .fade{display:none;border:none;margin:0;padding:0} again, find </head> then paste the code below, just above it then Save it! When posting, upload the image you want as a background. and get the image link, like this <div class="separator" style="clear: both; text-align: center;"> <a href=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgklLZ5e0R_sq1khMay728J0y...