Tag Archives: jQuery

HTML

HTML – Hide the broken icon when the is not yet loaded

2 Comments

Updated @ 2015-10-12: The following snippet could get rid of the broken icon without using CSS and JS.

<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice">
  <image width="1920" height="500" xlink:href="" ng-href="{{ image.href }}"></image>
</svg>

 

Thanks Wouter De Loose.

–

 

i have the following <svg> in an AngularJS template and the image source would be assigned by the controller which loaded the image info from a .json file.

<svg class="card__image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 500" preserveAspectRatio="xMidYMid slice">
  <image width="1920" height="500" xlink:href="{{ image.href }}"></image>
</svg>

 

It works fine on my local machine but when i put it on a webserver. There would be a flash of the broken image before the image is loaded. Continue reading HTML – Hide the broken icon when the is not yet loaded →

Advertisement
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 →

jQuery

jQuery – Get the actual image width and height from img tag

Leave a comment

The <img> allows us to show an image in different size on the browser by setting its width and height. We could get the displayed image width and height in jQuery as follow.

$("#img-tag-id").css("width");
$("#img-tag-id").css("height");

 

However, sometimes we would like to get the actual image width and height of the source image. The following solution is what i found in StackOverflow.

$("<img>") // Create a new <img>
  .attr("src", $("#img-tag-id").attr("src")) // Copy the src attr from the target <img>
    .load(function() {
      // Print to console
      console.log("Width:  " + this.width);
      console.log("Height: " + this.height);
  });

 

Done =)

Reference: StackOverflow – Get real image width and height with JavaScript in Safari/Chrome?

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

jQuery

jQuery – Select elements with or without specific child

Leave a comment

In jQuery, the has() method allow us to reduce the set of matched elements which only contains the specified child. For example:

<ul>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

 

// Set background color to red to the li which contains ul
$("li").has("ul").css("background-color", "red");

Continue reading jQuery – Select elements with or without specific child →

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 →

jQuery

TouchSwipe – Implement delegated swipe event for inner elements

4 Comments

In the previous post, we attach the swipe event listener directly on the #box element.

 

How about if your target elements is dynamically added to the DOM? In that case, the event listener would not work for the newly inserted inner elements. A work around is attached the event listener to the parent element instead. Here is another example for the delegated event implementation of TouchSwipe.
Continue reading TouchSwipe – Implement delegated swipe event for inner elements →