General

  • Use jquery to scroll to a specific section on your page from a link or a button.

    This little feature can be very handy if you want to auto scroll the page to a particular section. I have used this previously on sites where I want the user to be shown error messages that are on top of a large form. So instead of the user clicking submit and nothing happening the user would click submit and if there were any errors the page would scroll to the error messages on the top of the form.

    To achieve this effect create a javascript function like this:
    (Thanks to David King from OneDayLater.com for the Opera fix for the button click event!)

    function goToByScroll(element) {
        var el = $.browser.opera ? $("html") : $("html, body");
        el.animate({ scrollTop: $(element).offset().top }, 'slow');
    }
    

    Now call the above function whenever you want the screen to move to a point. For our example we will scroll on a button click or from a link click using the code below:

    $(document).ready(function () {
            //scroll if link click to section2
            $('#Section1 a').click(function (evt) {
                evt.preventDefault();
                goToByScroll('#Section2');
            });
            
            //scroll if button click to section 1 
            $('#SubmitForm').click(function (evt) {
                evt.preventDefault();
                goToByScroll('#Section1');
            });
    });
    

    You can view a working demo of this in action here. Simply Right Click and View Source to see the code.

  • Comments system is down at the moment

    [Feb 24 Update] Looks like we're back in business. Needed to re-install BlogEngine before I could get it to work and then I had to remove the old theme my site had as it was not compatible, which is a shame. Looks like the theme situation for BlogEngine hasn't improved much since my post 6 months ago on where to get good blog engine themes.

    Just a quick mention to let you know that the comments system is down on my site at the moment. I'm not sure what happened but I think it has something to do with my failed attempt at upgrading to blog engine 1.6 last weekend. I will take a look into upgrading to BlogEngine 1.6 again over the next few days if I have time. I will also upgrade my server to IIS 7 with my provider...which should be fun if any past upgrades are anything to go by :D

    At the moment I am currently very busy finishing up a big new project for Hertz. It should be going live in around 2 weeks. Once it's up I should have more time to blog about all the new jquery techniques I've learned during developement.

  • How to know if a checkbox has been selected when submitting a form using jquery

    If you have a checkbox on your form that has to be selected before you want the user to continue you can use jquery to check if it has been selected by doing something like the following:

    $(document).ready(function () {
            $('#SubmitForm').click(function () {
                if ($('#Terms').attr('checked') == false) {
                    alert('please select the terms and conditions before continuing.')              
                    return false;
                }
            });
        });
    

    Your html form must have a checkbox with an id value of Terms to match the javascript above.

        
        
        
    

    If it is crucial to have a checkbox ticked before continuing in your website or app you should validate on the server side as well but the above script should help to get you started.

    Click here for a simple demo of this in action.

  • RichardReddy.ie goes live showcasing the lastest work by Richard Reddy

    Richard Reddy Cork Web Developer

    <shamelessPlug>I've been meaning to setup my own domain name for a while now. During December last year Blacknight.com were offering .ie domain names for only €2.99 so I couldn't resist and bought richardreddy.ie.

    The site design is using BCProducties' vCard template which was given away for free for January to members of ThemeForest. If you're quick you might still be able to download the file for free here.

    Over the coming days I will update the work section of the site so that it contains details of my latest work. It's nice to finally have something a bit more professional to use rather then reddybrek ;)</shamelessPlug>

  • How to read from and write to the web.config file using C#

    To read from a Web.Config file using C# is very easy to do. Let's say we have an appSettings tag in our Web.Config that holds the website title. Inside in our web.config you would have something like this:

    
       
    
    

    To get .net to read this value all you need to do is add this to your code behind page on your site. Be sure to add the System.Web.Configuration namespace as this is not added by default.

    using System.Web.Configuration;
    
    //read in the SiteName tag from web.config
    string MySiteName = WebConfigurationManager.AppSettings["SiteName"];
    
    If you want more details on how to read from web.config please see my earlier post here

    You might also want to write to your web.config file to allow the end user to update this data. To do this you must ensure that the Network Service user (or the ASP.NET user on WinServer 03 or earlier) has modify permissions on your website root folder.

    Without the correct permission you will get the following error if you try to add the code below:
    An error occurred loading a configuration file: Access to the path 'c:\inetpub\wwwroot\yourwebsitefolder\py39wsfg.tmp' is denied.

    Assuming you have setup the correct permissions this code below will allow your web app to write to the web.config file.

    //update the SiteName tag in web.config with a new value
    Configuration config = WebConfigurationManager.OpenWebConfiguration("~");
    config.AppSettings.Settings["SiteName"].Value = "New Site Name Value";
    config.Save(ConfigurationSaveMode.Modified);
    ConfigurationManager.RefreshSection("appSettings");
    

  • Force domain.com to redirect to www.domain.com using IIS 7

    Yesterday I wrote a post about how to achive a redirect for domain.com to www.domain.com using IIS 6. Today I will show you how easy it is to set this up for IIS 7 on Win Server 2008.

    You should be aware that this install requires a reboot. Only install on your server if you are in a position to restart your server.

    First thing you need to do is download the rewrite module for IIS 7 from Microsoft. The 32bit version is here and the 64bit version here.

    Before you can install this module you need to stop some services running on your server. Open the command prompt (Start -> Run -> type cmd and press enter) and type: net stop was /y

    Now double click on the file you just downloaded and install the product. It can take a few mins and look like it's after hanging but give it a moment and it will install for you. You will be prompted to restart your server. Do this now as without a restart IIS will give you a 503 HTTP error when attempting to display a webpage.

    Once the server has restarted open IIS Manager and make sure that both your domain and relevant application pool have been restarted.

    Open up your browser and test your site just to double check everything is ok after the install. You should find that everything is working as normal.

    You can now put the following rule in your web.config file within the <system.webServer> tag:

    
          
            
              
              
                
              
              
            
          
        
    

    Save and FTP the web.config file to your server. If you type in yourdomain.com (without www.) you should notice that it redirects you to www.yourdomain.com now.

    For more information about rerouting your traffic you can visit the IIS site for more details. A great place to start is on the Rule with Rewrite Map page.

  • Force domain.com to redirect to www.domain.com using IIS 6

    If you have a SSL on your site chances are that you only want your visitors to go through your site on one particular domain. Let's say you own domain.com and you always want your visitors to go to www.domain.com when using your site. IIS 7 has a really cool rewrite module that you can use but IIS 6 users need to jump through some hoops to get this function working.

  • How to use a JQuery UI modal box with asp.net

    View Demo | Download Source

    I was recently asked to look into making a JQuery UI dialog box (aka a modal box) work with asp.net. I thought it would be straight forward but as with anything in asp.net it turned out to be a little bit trickier than I had initially thought. Part of the problem was that I wanted to put the dialog box on an asp.net submit button and depending on the user's choice either submit the page or cancel the action.

    Thankfully I stumbled across this great article over at DeviantPoint. It was pretty much exactly what I needed. However, for my example I needed to only show the dialog box if any of the checkboxes on the screen were not selected. In other words a normal postback would occur if every check was selected but if there were any checkboxes not selected the user would be asked to confirm their action.

    If you take a look at my very basic demo page you will see exactly what I'm talking about. You will find all of the code within the source files I have posted for download but below is a brief overview of what is going on.

    View Demo | Download Source

    HTML used:

    This is a top class widget. Features include...

    Below are the required items for this product to function correctly:
    Required Item 1 Required Item 2
    Required Item 3 Required Item 4

    Javascript used:

    
    

    C# Codebehind:

    if (!Page.IsPostBack)
            {
                //this line is used to hold the exact postback function call used by the asp.net button
                this.MsgBoxContinue.Value = Page.ClientScript.GetPostBackEventReference(AddToBasket, string.Empty);
    
                //ensure the postback message is blank on load
                PostBackMsgTest.Text = ""; 
            }
    
            if (Page.IsPostBack)
            {
                PostBackMsgTest.Text = "Content posted back successfully.";
            }
    

Updates

Follow me online at TwitterFacebook or Flickr. If you want to get in touch with me try emailing me.

Latest Tweets