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
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
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?
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
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
This example make use of jquery.hammer.js for implementing delegated events for inner elements. Just like what we did in the TouchSwipe Example.
Continue reading jquery.hammer.js – Implement delegated swipe event for inner elements
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
Here is an example for a simple swiping implementation using TouchSwipe.
<!doctype html>
<html>
<head>
<title>Eureka! - TouchSwipe Example</title>
<style type="text/css">
#box {
background-color: green;
width: 400px;
height: 225px;
line-height: 225px;
text-align: center;
}
</style>
</head>
<body>
<div id="box">Swipe here!</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
<script type="text/javascript">
$("#box").swipe({
swipe: function(event, direction, distance, duration, fingerCount) {
$(this).text("You swiped " + direction );
}
});
</script>
</body>
</html>
Done =)
Reference: TouchSwipe: a jQuery plugin for touch and gesture-based interaction
Recently doing some proof of concept on using jQuery SnapScroll. The demo worked without any problem but when i implemented it, i couldn’t make my div taking 100% height of the view port. Finally i figured out that the failure was caused by the HTML5 Doctype declaration on the index.html.
<!DOCTYPE html> <html> ... </html>
Continue reading 100% height does not work for HTML5 Doctype
Here is an simple project which demonstrate how to read a JSON file in jQuery and Javascript.
Project structure
- (webroot folder)
- data
- file-1.json
- file-2.json
- js
- script.js
- index.html
Continue reading jQuery & Javascript – Read JSON files on server
