Justin Cooney

Web Development Tips and Examples

  • JavaScript Click
    JavaScript Click

    In this article I will review how you code a button click event in JavaScript, and how it differs from a button click event in JQuery. I’ll also show some integration of the client-side JavaScript with server-side code in both identifying an ASP.NET button control in JavaScript, and in making the button click event trigger a post-back to the Web server.

    Structure of the Example

    As you can see in the image above (and the example code below), I’ve coded both a JavaScript and a JQuery button, and have added ASP.NET button controls beside each that will get clicked when the user clicks the JavaScript or JQuery button.

    I have written further useful articles about JQuery and JavaScript that are worth having a look at if you are interested in these languages.  (more…)

  • HTML5
    HTML5

    As 2013 the HTML5 standard is still actively being developed and revised, and it is not fully supported by any Web browser. There are a number of tools freely available to HTML5 developers that help enhance browser support for HTML5 and that add to the speed and ease of developing a site.

    In this article I will review some of the major tools, frameworks, libraries, and online resources that anyone working with HTML5 will find useful. Also make sure to read more about HTML5 in my series of articles.
    (more…)

  • Modal Dialog Markup
    Modal Dialog Markup

    The JQuery modal dialog widget can be a useful tool on most Web pages. If you take a look at its structure in a tool such as FireBug you will see that it consists of a div that grays out the web page’s background, and another div that sits on top and that presents the modal dialog.

    If you are adding absolute positioning and z-index markup to your Web page, then you will want to look a little deeper into the properties of your modal dialog widgets and how they interact with other elements on your Web page.

    When an area of your page has a higher z-index than your modal dialog does, then the dialog will not be modal for that area, and may even be hidden by the area entirely. For example, if you have a text field on your form that is wrapped in an element with a z-index that is higher than that of your modal dialog, then your modal dialog will not gray out the text field. Even worse,  the text field will remain editable which is certainly not desirable behavior.

    If you find this article interesting, then take a look at my collection of articles on JQuery and the JQuery Modal Dialog widget.

    (more…)