Category Archives: Javascript

Javascript, jQuery

Foundation 5 – Execute Javascript/jQuery on breakpoint changed

Leave a comment

I am working on a Foundation 5 website and i would like to detect the breakpoint change when the user resize the browser window. Here is a workaround found in the Foundation Forum.

1. Add the following piece of HTML to your website. Since i am working with Drupal 7 with the Foundaiton 5 theme, i just add it to the page.tpl.php in the subtheme.

<!-- For breakpoints checking in js -->
<div id="breakpoints"> 
  <div class="breakpoint-small show-for-small-only" data-size="small"></div>
  <div class="breakpoint-medium show-for-medium-only" data-size="medium"></div>
  <div class="breakpoint-large show-for-large-only" data-size="large"></div>
</div>

Continue reading Foundation 5 – Execute Javascript/jQuery on breakpoint changed →

Advertisement
Javascript

Javascript – Add query parameter to current URL without reload

3 Comments

The following example adds a query parameter to the URL without refreshing the page but only works on modern HTML5 browsers.

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Add query parameter to the url without reload</title>
</head>
<body>
  <button onclick="updateURL();">Update</button>
  <script type="text/javascript">
    function updateURL() {
      if (history.pushState) {
          var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?para=hello';
          window.history.pushState({path:newurl},'',newurl);
      }
    }
  </script>
</body>
</html>

 

Reference: StackOverflow – How do we update URL or query strings using javascript/jQuery without reloading the page?

Javascript

Javascript – Simple Statistic

Leave a comment

Previously i have a post about getting the average value of a numeric array using ?Underscore.

 

If you need more statistical functions other than getting the mean value. You could try Simple Statistics.

Visit the above link and play with it. Here is an example on getting some common statistics value in Javascript.

// numbers from 1 to 100
var myData = [];
for (var i = 0; i < 99; i++) {
  myData[i] = i + 1;
}

ss.mean(myData);
ss.min(myData);
ss.quantile(myData , 0.2);

 

Done =)

Reference:

Javascript

Javascript – Get average value of a numeric array using Underscore

Leave a comment

Underscore provides a lot of useful helper functions in Javascript programming. Here is an example of getting an average value of a numeric array.

<!DOCTYPE html>
<html>
<head>
  <title>Get average value of an array using underscore</title>
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
</head>
<body>
  <div id="average"></div>
  <script type="text/javascript">
    var values = [13, 17, 11, 24, 56, 31, 27, 19];
    document.getElementById("average").innerHTML = arrayAverage(values);

    function arrayAverage(arr) {
      return _.reduce(arr, function(memo, num) {
        return memo + num;
      }, 0) / (arr.length === 0 ? 1 : arr.length);
    }
  </script>
</body>
</html>

 

Done =)

Reference:

Javascript

Javascript – Encode and decode URL like %20

Leave a comment

When you want to create an url which contains special charaters like the whitespace, you need to convert it to %20 ascii value. In Javascript, you could simply make use of the built-in encodeURI() and decodeURI() as follow.

console.log(encodeURI("http://localhost:8000/?greeting=" + "Welcome to Eureka!"));
// Output
http://localhost:8000/?greeting=Welcome%20to%20Eureka!


console.log(decodeURI("http://localhost:8000/?greeting=Welcome%20to%20Eureka!"));
// Output
// http://localhost:8000/?greeting=Welcome to Eureka!

 

You can do it in PHP as well.
PHP – URL Encode and Decode

Done =)

Reference:

Javascript

Javascript – Determine which event is triggered

Leave a comment

Recently i have been working with Dashing which is a great tool to displaying information as a dashboard. I would like to show the dashboard on a big TV. Everything works fine on my Mac but when it is shown on the TV screen, the onclick event is not triggered.

I need to check which event is triggered when i press on the TV screen. The web developer console in Chrome of Firebug in Firefox could help you to determine which event is triggered. For example, the menu bar of Eureka! has the following HTML structure.

<div class="nav-menu">
  <ul>
    <li class="page_item page-item-1630"><a href="https://eureka.ykyuen.info/about-eureka/">About</a></li>
    <li class="page_item page-item-8284"><a href="https://eureka.ykyuen.info/portfolio/">Portfolio</a></li>
    <li class="page_item page-item-731"><a href="https://eureka.ykyuen.info/faz-jewelry/">Faz Jewelry</a></li>
    <li class="page_item page-item-6494"><a href="https://eureka.ykyuen.info/linux-commands/">Linux Commands</a></li>
    <li class="page_item page-item-8388"><a href="https://eureka.ykyuen.info/reads/">Reads</a></li>
    <li class="page_item page-item-7349"><a href="https://eureka.ykyuen.info/syntax-highlight/">Syntax Highlight</a></li>
    <li class="page_item page-item-9773"><a href="https://eureka.ykyuen.info/%e6%97%85%e8%a1%8c%e8%a8%98/">旅行記</a></li>
  </ul>
</div>

 

I would like to monitor all the events which are triggered by the first li.page_item element. This can be done by inputing the following command in the console.
Continue reading Javascript – Determine which event is triggered →

Javascript

Javascript – Check if user is idle

4 Comments

Update @ 2016-05-21: Please consider using the idleCat plugin instead of this brute force checking approach. Thanks for the suggestion from Smuuf. =D

–

 

Nowadays, websites are becoming more advanced with many different features. Sometimes it would be beneficial if we could switch off them on the client browser when the user is idle for a period of time in order to reduce the web server loading.

Here is a Javascript example which would pop up an alert box if the mouse doesn’t move for 3 mins.

$(document).ready(function () {
  // Set timer to check if user is idle
  var idleTimer;
  $(this).mousemove(function(e){
    // clear prior timeout, if any
    window.clearTimeout(idleTimer);

    // create new timeout (3 mins)
    idleTimer = window.setTimeout(isIdle, 180000);
  });

  function isIdle() {
    alert("3 mins have passed without moving the mouse.");
  }
});

 

Done =)

Reference: StackOverflow – Detecting idle time in JavaScript elegantly

Javascript

Javascript – Round a number to certain significant figures

1 Comment

I found an elegant solution written by Ateş Göral about rounding number to a certain significant figures in Javascript.

Magnetiq – Rounding to a Certain Significant Figures in JavaScript

function sigFigs(n, sig) {
  var mult = Math.pow(10, sig - Math.floor(Math.log(n) / Math.LN10) - 1);
  return Math.round(n * mult) / mult;
}

alert(sigFigs(1234567, 3)); // Gives 1230000
alert(sigFigs(0.06805, 3)); // Gives 0.0681
alert(sigFigs(5, 3));       // Gives 5

 

Done =)

Javascript

Javascript – Implement touch and gesture based interaction using hammer.js

1 Comment

We have talked about TouchSwipe in previously.

 

Unlike TouchSwipe which is a jQuery plugin, hammer.js is independent of jQuery. It supports tap, swipe, drag and other mobile touch events. Here is an simple example.
Continue reading Javascript – Implement touch and gesture based interaction using hammer.js →