0 Comments

We have several IP camera’s in the building for security purposes. They all have internal IP addresses and can be viewed separately with their own web interface which is Chinese by default Laughing out loud and does not remember the language setting.

wanscam webinterface

It has 3 options: download an active X component and only work in internet explorer. Or use server push or a version build with JavaScript.

It refreshes the url by adding a new random number to the image source:

new Date().getTime() + Math.random();

This inspired me to make an overview webpage of all the webcams in our LAN.

Since it might be accessed through a mobile device, I have used the responsive version of the twitter bootstrap. For the small source and the caching of browsers, I have used the jQuery library and the twitter one from CDN’s.

I have used jQuery 1.9.1 and bootstrap 2.3.1 and that is all there is. Please let me know if you have any suggestions to make it even better. For demo purposes I have not changed the logins of the Wanscams and used the factory settings.


You can fork this code on GitHub. or view the code of the single HTML page on this url: https://github.com/jphellemons/WebcamMonitor/blob/master/index.html

kick it on DotNetKicks.com Shout it
Pin on pinterest Plus on Googleplus Post on LinkedIn
0 Comments

You know Pinterest? And would like a layout like Pinterest? Well I did and came across this jQuery Masonry plugin.

But I wanted to do some sorting and filtering with the elements. The Masonry which is released with an MIT license does not have this functionality. Isotope does, but has a $ 25,- license for commercial use and is free for personal use.

This quote from StackOverflow explains the difference between masonry and isotope:

To some people Isotope would look very similar to the work you had previously done with Masonry; can you explain the main differences between the two?

Isotope has several features that Masonry lacks. Masonry essentially does one thing, placing item elements in a cascading arrangement. Isotope has Masonry’s layout logic built in, but in addition, it also has several other layout modes that can be used to dynamically position elements. You can even develop your own custom layout mode.

As I’ve mentioned, it has filtering and sorting functionality built in. Filtering items is as easy as passing in a jQuery selector:

$('#container').isotope({ filter: '.my-selector' });

Isotope takes advantage of the best browser features out there. Instead of using typical left/top styles positioning, Isotope takes a progressive enhancement approach and uses CSS transforms if supported by the browser. This provides for top-notch performance for top-notch browsers. With hardware acceleration kicking in, animations look silky smooth on WebKit browsers, and even less-powerful devices using iOS. CSS transforms perform better with CSS transitions, which I’ll discuss later.

 

You can use isotope to make something look like a masonry layout.

$('#container').isotope({
  masonry: {
    columnWidth: 110,
    gutterWidth: 10
  }
});

But Somehow the gutters don’t show up. So you need a custom layoutmode for Isotope. I have found it in the sourcecode of the example: http://isotope.metafizzy.co/custom-layout-modes/masonry-gutters.html

Here is the javascript code:

// modified Isotope methods for gutters in masonry
$.Isotope.prototype._getMasonryGutterColumns = function () {
    var gutter = this.options.masonry && this.options.masonry.gutterWidth || 0;
    containerWidth = this.element.width();

    this.masonry.columnWidth = this.options.masonry && this.options.masonry.columnWidth ||
        // or use the size of the first item
        this.$filteredAtoms.outerWidth(true) || 
        // if there's no items, use size of container
        containerWidth;

    this.masonry.columnWidth += gutter;

    this.masonry.cols = Math.floor((containerWidth + gutter) / this.masonry.columnWidth);
    this.masonry.cols = Math.max(this.masonry.cols, 1);
};

$.Isotope.prototype._masonryReset = function () {
    // layout-specific props
    this.masonry = {};
    // FIXME shouldn't have to call this again
    this._getMasonryGutterColumns();
    var i = this.masonry.cols;
    this.masonry.colYs = [];
    while (i--) {
        this.masonry.colYs.push(0);
    }
};

$.Isotope.prototype._masonryResizeChanged = function () {
    var prevSegments = this.masonry.cols;
    // update cols/rows
    this._getMasonryGutterColumns();
    // return if updated cols/rows is not equal to previous
    return (this.masonry.cols !== prevSegments);
};

$(window).load(function(){
    $('#container').isotope({
        masonry : {
            columnWidth: 110,
            gutterWidth: 10
        },
        itemSelector: '.item',
        animationEngine: 'best-available',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });
});

Good luck with the jQuery Isotope plugin!

kick it on DotNetKicks.com Shout it

Pin on pinterest Plus on Googleplus Post on LinkedIn
0 Comments

When you have a slider control with jQuery UI

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/smoothness/jquery-ui.css"/>
<script>
    $(function() {
        $( "#slider" ).slider();
    });
</script>

<div id="slider"></div>

All you have to do to add touch support (for tablets such as the iPad) is add this small library from GitHub

https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js source: http://touchpunch.furf.com/

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/smoothness/jquery-ui.css"/>
<script>
    $(function() {
        $( "#slider" ).slider();
    });
</script>

<div id="slider"></div>

And that’s all!

kick it on DotNetKicks.com Shout it

Pin on pinterest Plus on Googleplus Post on LinkedIn
0 Comments

I was looking for a good way to make a cool mouseover zoom effect for images on a website. CloudZoom came up and looked nice, but didn’t suit my needs. I stumbled upon the jqzoom library from http://www.mind-projects.it/projects/jqzoom/ You can donate Marco something and download the jqzoom library. The jQuery plugin is 733 lines of code (including the comments) and worked great.

It was easy to use, here is my HTML and JavaScript:

<script src="js/jquery.jqzoom-core.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#holder li a.jq-zoom').jqzoom({
            zoomType: 'innerzoom',
            lens: false,
            preloadImages: false,
            alwaysOn: false,
            zoomWidth: 150,
            zoomHeight: 150,
            xOffset:0,
            yOffset: 0,
            title: false
        });
    });
</script>
<ul id="holder">
    <li><a class="jq-zoom" href="uri-to-big-img.jpg">
            <img src="uri-to-small-img.jpg"/></a></li>
    <li><a class="jq-zoom" href="uri-to-big-img.jpg">
            <img src="uri-to-small-img.jpg"/></a></li>
    <li><a class="jq-zoom" href="uri-to-big-img.jpg">
            <img src="uri-to-small-img.jpg"/></a></li>
    <li><a class="jq-zoom" href="uri-to-big-img.jpg">
            <img src="uri-to-small-img.jpg"/></a></li>
    <!-- etc. used css for making a grid style -->
</ul>

 

This works, but I used the innerzoom option and had an annoying 1 pixel border around the images when I hovered over them. So it took me some time to figure out that it was a problem in the plugin and not my CSS or the way I used it.

On line 548 I found the innerzoom option and changed the border width to be static 0 pixels (no border):

if (settings.zoomType == 'innerzoom') {
  this.node.css({
      cursor: 'default'
  });
  var thickness = (smallimage.bleft == 0) ? 1 : smallimage.bleft;
  $('.zoomWrapper', this.node).css({
      /*borderWidth: thickness + 'px'*/
      borderWidth: '0px'
  });    
}
            
$('.zoomWrapper', this.node).css({
    width: Math.round(settings.zoomWidth) + 'px' ,
    /*borderWidth: thickness + 'px'*/
    borderWidth: '0px'
});

I found out that my zoomwrapper still got the border by viewing the website with the famous firebug extension for FireFox. But with this small change in the 733 lines of JavaScript you can manually disable the border of the inner zoom option.

Good luck!

Pin on pinterest Plus on Googleplus Post on LinkedIn
3 Comments

image

Years ago, everybody made a column layout with an Html table. If you do not remember why tables are bad, I recommend reading these nine reasons not to use tables. Today we use (external) cascading style sheets to solve it. Most of the time with the famous ‘faux columns’ trick.

<div id="left">
    leftside
</div>
<div id="right">
    <div>block one</div>
    <div>block two</div>
    <div>block three</div>
</div>

 

[more]

The equal height problem is sometimes hard to solve. As you can see here with multiple blocks. The red should be as large as all the yellow blocks together. This is hard to solve with faux columns because the height of the yellow part and therefor the white space between them is hard to determine. It is even more difficult when sometimes the red part is longer then the total yellow part.

The easiest fix for this, is to use a bit of jQuery. I only had to add this single line: 

$('#left').height($('#right').height()-15);

 

Here is the final example: http://jsfiddle.net/jphellemons/VTna6/

Good luck!

kick it on DotNetKicks.com Shout it

Pin on pinterest Plus on Googleplus Post on LinkedIn