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.
I chose to use the dnnAlert plugin, basically to use it you use similar code
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.
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>'
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.