Blog

Categorised by 'Client-side'.

  • I’m using a jQuery plugin called “Isotope” to nicely output a mixture of news articles and advertising banners to a page.

    I came across a small issue when using advertising banner’s in Flash format. For some reason, Flash content displayed randomly and mouse-clicks were not registered. This issue only seemed to only occur in Firefox. I couldn’t replicate this issue on other browsers.

    Thankfully, only one additional line of code  needed to be added when when initially setting the Isotope plugin options:

    $('#wall').isotope({
        itemSelector: '.box',
        animationEngine: 'css,
        layoutMode: 'masonry',
        transformsEnabled: false //Disable transformations
    });
    

    The following example helped me further in resolving my issue: http://isotope.metafizzy.co/tests/flash.html

  • To be able to retrieve values from a ASP.NET CheckBoxList control or a group of HTML checkboxes, use the following jQuery:

    $(document).ready(function () {
        var checkboxValues = [];
    
        $('#<%=MyCheckBoxList.ClientID %> input[type=checkbox]').click(function () {
            $('input[type=checkbox]:checked').each(function () {
                checkboxValues.push(this.value);
            });        
        });
        
        var values = checkboxValues.toString(); //Output Format: 1,2,3
    });
    

    If you do use this code snippet on a CheckBoxList, take a look that this article on how to create a custom CheckBoxList control with a value attribute.

  • Published on
    -
    1 min read

    String.Format In JavaScript

    Whenever I work with strings whilst programming in .NET, somewhere along the lines I always find myself using the awesome “string.format”. I think all of you will admit its the most useful and easiest way to build up your strings.

    The only downside to using the “string.format” method is that it lures you into a false sense of security and you find yourself lost without it when it comes to working with strings in other languages. This happened to me when I had to build up a long string in JavaScript. It was long and tedious…or maybe I am just lazy.

    Luckily, there have been a few developers who extended the string object in JavaScript to include “string.format”. Amazing! Its goes along the lines of adding this to your own JavaScript code:

    String.format = String.prototype.format = function() {
        var i=0;
        var string = (typeof(this) == “function” && !(i++)) ? arguments[0] : this;
    
        for (; i < arguments.length; i++)
            string = string.replace(/\{\d+?\}/, arguments[i]);
    
        return string;
    }
    

    Here are some other useful links I have found on how to implement “string.format” into your JavaScript code:

  • Over the last few months I have had the ability to mess around with a bit of jQuery. Even though I don’t have the complete understanding on how it works, I can see the benefits of writing my code in jQuery compared to bashing out lots of lines of JavaScript to do the same thing.

    One the cool features I have used is calling one of my .NET methods using the “$.ajax” jQuery command. In my example (below), I have created two aspx pages. The code-behind of my first page  (jQueryMethodTest.aspx) will only contain a public static method called “WhatIsYourName”, which returns a string value.

    [WebMethod]
    public static string WhatIsYourName(string name)
    {
        if (!String.IsNullOrEmpty(name))
        {
            return String.Concat("Hello ", name, "!");
        }
        else
        {
            return String.Empty;
        }
    }
    

    Remember, the jQueryMethodTest.aspx page only needs to contain our method nothing else! Additional methods can be added. Just don’t add any web controls.

    The second page (jQueryAjax.aspx), will contain our jQuery code and some HTML to output our result from calling the “WhatIsYourName” method.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" language="javascript" src="javascript/jquery.js"></script>
    </head>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#btnSubmitName").click(function(event) {
                $.ajax({
                    type: "POST",
                    url: "jQueryMethodTest.aspx/WhatIsYourName",
                    data: "{'name': '" + $('#name').val() + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(message) {
                        ShowPopup(message);
                    },
                    error: NameFailed
                });
            });
        });
    
        function ShowPopup(result) {
            if (result.d != "") {
                $("#Message").html(result.d);
            }
            else {
                $("#Message").html("I didn't get your name.");
            }
        }
    
        function NameFailed(result) {
            $("#Message").html(result.status + ' ' + result.statusText);
        }  
      </script>  
    
    <body>
        <form id="form1" runat="server">
        <div>
            <input id="name" name="name" type="text" />
            <br />
            <input id="btnSubmitName" name="btnSubmitName" type="button" value="Submit" />
            <br /><br />
            <span id="Message" style="color:Red;"></span>
        </div>
        </form>
    </body>
    </html>
    

    If all goes well, you should get the following result:

    Calling ASP Method Using jQuery

    The “$.ajax” jQuery command requires the following parameters in order to work:

    • url – links to where our .NET method is placed.
    • data – retrieves the value from some control in our page to pass to our method. Remember, the name of the parameter must be named the same as the parameter from our .NET method.
    • dataType – the response type.
    • contentType – the request content type.
    • success – the JavaScript function that gets fired on postback.
    • error – the Javascript function that gets fired if there is a failure. This is an optional parameter.

    I guess jQuery’s motto really is true: “write less, do more”.

  • I needed a flash movie to displayed at 100% in my web page. I thought this will be a simple job. Just set the height and width attributes within my object tag to “100%”. This method worked fine for Internet Explorer but failed in Firefox. Firefox seemed to ignore my size settings that contained a percentage. After a lot of time wasting, I confirmed that Firefox does not like its height and width attributes measured in percentages and only likes measurements in pixels.

    In order to fix this problem I needed to do the following:

    1. Write some JavaScript just for Firefox so that it will get the users screen resolution in pixels and add this into my object tag that contained my Flash movie.
    <script type="text/javascript" language="javascript">
            if (window.innerWidth)
            {
                // Get screen width and height minus scroll bars
                var width = window.innerWidth - 24;
                var height = window.innerHeight - 24;           
                    
                //Find Flash movie
                var FlashMovie = document.getElementById('FlashMovie');           
    
                //Only assign width and height if browswer is not Internet Explorer
                if (navigator.appName.indexOf('Internet Explorer') == -1)
                {
                    FlashMovie.height = height;
                    FlashMovie.width = width;        
                }
            }       
    </script>
    
    1. Keep the height=”100%” width=”100%” object attributes. This will be needed for Internet Explorer.
    <object id="FlashMovie" type="application/x-shockwave-flash" height="100%" width="100%" data="myflash.swf">
        <param name="movie" value="myflash.swf" />
        <param name="wmode" value="transparent" />
        <p>
            No flash message
        </p>
    </object>
    

    If anyone has any better idea on how to solve this problem. Please comment. Thanks!