Geeks With Blogs

News Please visit me at my new blog!!

profile for Aligned at Stack Overflow, Q&A for professional and enthusiast programmers
"free in Christ Jesus from the law of sin and death." Romans 8:2 (ESV) Check out the Falling Plates video on YouTube.
more about the Gospel
And then listen to Francis Chan speaking at LifeLight in SD.



Programming and Learning from SD

I'm creating a responsive website from a mock we received. I'm using Bootstrap 3.0 RC and I really like the grid system and the ability to hide and show using their CSS classes (.hidden-xs, visible-sm, etc).

One problem to solve when using the responsive design approach is sending the correct image (smaller to save bandwidth and screen space). If you set the <img src, the browser will immediately download that image. However, if you set the src with JavaScript, you can detect the screen size, then get the correct sized image for that screen size. There are many approaches (using MobifyJs looks interesting, but too heavy/too much to learn for this project) to this, but I've used KnockoutJs and data-binding to set the image sizes and adapt on window resize.

Knckout ViewModel

function responsiveViewModel(){
    var  imageUrl = '/Content/images/',
        // this should match the media query size in Site.less
        smallWindow = 768,
        windowWidth = 0,
        resizeTimeoutId,
        resizeChangeTrigger = ko.observable(false),
        $window = $(window),
        getImageFolder = function () {
            // bind to the image for this size device window
            return $window.width() < smallWindow ? 'small/' : 'large/';
        },
        // example Image source binding
        exampleImageSrc = ko.computed(function () {
           resizeChangeTrigger();
            return imageUrl + getImageFolder() + getImagePreFix(user().hasTvOptions()) +  'Tv.png';
        }),
         // call after load
        init = function()
        {
            windowWidth = $window.width();
             // change image sizes when the window size changes
            $window.resize(function () {
                if (resizeTimeoutId) {
                    window.clearTimeout(resizeTimeoutId);
                }
                var newWidth = $window.width();
                if (windowWidth != newWidth) {
                    // trigger the images to change
                    resizeTimeoutId = window.setTimeout(function() {
                        resizeChangeTrigger(!resizeChangeTrigger());
                        windowWidth = newWidth;
                        setupTextForSize();
                    }, 200);
                }
            });

            setupTextForSize();
        },
         // set all elements that have the data-textSmall and data-textLarge attributes
        setupTextForSize = function () {
            // change the text based on the window size
            // assumes they will also have the data-textSmall
            var textElementsWithAttribute = $('[data-textLarge]');
            var $element;
            for (var i = 0; i < textElementsWithAttribute.length; i++) {
                $element = $(textElementsWithAttribute[i]);
                var text = $element.data('textlarge');
                if (windowWidth < smallWindow) {
                    text = $element.data('textsmall');
                }
                $element.html(text);
            }
        };

    return {
        exampleImageSrc: exampleImageSrc,
        init: init    
    };
};
 
Html example with the Knockout viewmodel bindings applied. 
<div class="content-section-body">
  <div id="content-section-services-header" class="row">
    <div class="col-xs-4">
      <img data-bind="attr: { src: myTvImageSrc }" alt="my tv or video" />  
     <a href="http://www.somewhere.go" runat="server" data-textsmall="less text" data-textlarge="more text, the screen is wider and there is more room">Default text (probably the same as textlarge</a>
    </div>
  </div>
</div>
 
Posted on Monday, August 26, 2013 1:07 PM | Back to top


Comments on this post: Using Knockout to Assist in Responsive Design

No comments posted yet.
Your comment:
 (will show your gravatar)


Copyright © Aligned | Powered by: GeeksWithBlogs.net