Using jQuery popups in DotNetNuke 6

If you follow me on twitter (@christoc) or read my personal blog, facebook, or google+ you likely have seen that I am riding for 100 miles on a bicycle charity in June of this year. If you didn’t know that, check out the Philanthropy page on ChrisHammond.com.

As part of my fund raising efforts for the event I decided to try and use my website a bit more to see if I could raise some additional funds. The website gets a decent amount of search referrals to the site on a daily basis (it should, I’ve been blogging there since July 2004 so it has almost 2600 posts). I had a couple of ways I wanted to utilize the website, the first was as a way to keep track of my fundraising efforts.

CSS Changes to MultiFunction

The first thing I did on the website was to change the skin around, because I use the MultiFunction Free DotNetNuke Skin I was able to change the CSS a bit, and provide some new graphics for the design to theme the site with LIVESTRONG colors. Rather than trying to include all the CSS that I used in this blog post, I’ll just point you to the Portal.css file for that website, you can open that file up and take a look. http://www.chrishammond.com/portals/0/portal.css

Being more proactive (annoying)

So rather than just changing the look/colors of my website I decided that I would try something else with the website. I wanted to try to put something in front of each and ever visitor to the website. I wanted to throw up a little popup window (modal) on the screen when someone was visiting the website to ask them to make a donation to my campaign if they thought that the content on my site proved useful to them. Realizing this might be a tad annoying to visitors of the website, but I still thought it might be worth the efforts to see if I could drum up more donations.

To do this I first attempted to use the OrangeBox jquery plugin that is included with the MultiFunction skin. I ran into a couple of bugs with that plugin though with the use of HTML or IFrames in the modal popup window. Because of these bugs, and not wanting to try to dig into the JavaScript for the plugin I decided to use some of the new features in DotNetNuke 6 to achieve the modal window I was looking for. For a full list of the reusable jquery plugins in DNN6 check out this link.

I chose to use the dnnAlert plugin, basically to use it you use similar code

$.dnnAlert({
  okText: 'OK BUTTON',
  text: 'MESSAGE TEXT'
});

For my purposes though I didn’t want to just include text, I wanted to include some real HTML, with text, a hyperlink and even an image. In order to do that in the dnnAlert plugin it required a little more work to get that working. I also wanted to have the alert window popup show up after a set amount of time. Here is the code I used to make all of this happen, the line that reads text: 'should all be on one line, instead of wrapped as it displays in the blog post.

<script type="text/javascript">
$(function(){

    function ShowPopup(){
        $.dnnAlert({
          okText: 'CLOSE',
          text: '<div style=\"text-align: center\"><h3>Did you find the content on my website helpful?</h3>If so, I would appreciate 
it if you could <a href=\"http://laf.livestrong.org/goto/chrishammond\" target=\"_blank\">donate to LIVESTRONG</a>. I\'m riding a bicycle
 100 miles at the Team LIVESTRONG Challenge in Davis California on 6/24/2012, and am raising money for the ride. Donating is easy, you can
 just click on this donate now button.<br /><a href=\"http://laf.livestrong.org/goto/chrishammond\" target=\"_blank\"><img
 src=\"/portals/0/Philanthropy/LSCDavis12/Donate-LiveStrongChallenge.png\" alt=\"Donate Now\" align=\"center\" width=\"250px\" /></a></div>'
        });
    }
    setTimeout(ShowPopup, 5000);
});
</script>

So what did I do with that code? Well I placed it into the Razor Host module, at the bottom of my page on ChrisHammond.com. If you tried putting that code in the HTML module, it would be stripped out due to the JavaScript filtering, and if you placed it in the Module Settings Header or Footer, each time you wanted to save it, the window would close, the page would refresh, and then you would have to navigate back into the Module Settings in order to make changes. Using Razor Host allowed me to make changes easily, and test them in another window, minimizing the number of clicks navigating around.

Right now the way the code works the popup window will load on every page of my website (except one) and after 5 seconds of viewing the page. In the future I may make the popup cookie based so that it only comes up once per session, but for now I am not worried about annoying people too much.

For a good cause

You can see this all in action at www.chrishammond.com just visit the site and wait 5 seconds (5000 in the setTimeout call), then you should see the window load up. Of course, if you found this blog post helpful, feel free to donate to my ride, I’ve set a goal of raising $1,000 for LIVESTRONG, but with very strong early support for my ride I should hit that goal soon, if that happens I’ll be increasing my fundraising goal.

As part of my fundraising efforts I am keeping track of who donates, and listing off each of the donors on my philanthropy page you can even get a link to your site from that page if you make a donation. You can donate right now by visiting http://laf.livestrong.org/goto/chrishammond

Ride with me

If you aren’t up for donating to the cause (or even if you are) perhaps you want to ride with me? I’m looking for people to join me on the ride, even if you don’t want to do the 100 mile distance for the ride, there are shorter rides available. You can join my team “Ride with Chris”. In order to ride though you do need to raise $250 to your individual campaign, it all goes into the team campaign as well. If you’re interested in riding, let me know, I have a few resources for training for a long distance ride that I am reviewing and going to be following myself.