Tag Archives: Javascript

NodeJS

Gulp – Rewrite source files instead of creating new files

1 Comment

I would like to minified the .js files of the bower packages in my project. Usually, gulp will read the source files and the pipe them into new files but this time i would like to overwrite the original file without creating a .min.js file.

Example:

gulp.task('jsmin', function() {
  return gulp.src('bower_components/**/*.js', {base: './'})
    .pipe(sourcemaps.init())
      .pipe(uglify())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./'));
});

 

The above task will read those .js files inside the bower_components folder, uglify the source file and create the corresponding .map file for each .js file in the same folder.

Done =)

Reference: StackOverflow – Can Gulp overwrite all src files?

jQuery

jQuery – Oppress $(window).resize() in when scroll in mobile

2 Comments

I found that the $(window).resize() will be triggered when you scroll up/down the website on a mobile device. To prevent this happens, we could add a checking on the screen width.

var width = $(window).width();
$(window).resize(function(){
  if ($(window).width() != width) {
    // Only action on screen width change
    width = $(window).width();
  }
});

 

Done =)

Reference: StackOverflow – javascript resize event on scroll – mobile

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 →

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:

jQuery

jQuery – Determine which radio box is checked

Leave a comment

Assume you have the following HTML form:

<form id="weather-form">
  <input name="weather" type="radio" value="sunny">Sunny
  <input name="weather" type="radio" value="cloudy">Cloudy
  <input name="weather" type="radio" value="rainy">Rainy
</form>

 

To get the checked value using jQuery:

var result = $("#weather-form input[name=weather]:checked").val();
// OR
var result = $("input[name=weather]:checked", "#weather-form").val();

Continue reading jQuery – Determine which radio box is checked →

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 →