Products

Solutions

Resources

Partners

Community

About

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.


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.

Comments

Comment Form

Only registered users may post comments.

NewsArchives


Aderson Oliveira (22)
Alec Whittington (11)
Alessandra Daniels (3)
Alex Shirley (10)
Andrew Hoefling (3)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (37)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Bogdan Litescu (1)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (213)
Chris Paterra (55)
Clint Patterson (108)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (181)
Daniel Valadas (48)
Dave Buckner (2)
David Poindexter (12)
David Rodriguez (3)
Dennis Shiao (1)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (80)
Francisco Perez Andres (17)
Geoff Barlow (12)
George Alatrash (12)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (274)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Kelly Ford (4)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matt Rutledge (2)
Matthias Schlomann (16)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (40)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Oliver Hine (1)
Patricio F. Salinas (1)
Patrick Ryan (1)
Peter Donker (54)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Sacha Trauwaen (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott Schlesier (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Steven Fisher (1)
Tony Henrich (3)
Torsten Weggen (3)
Tycho de Waard (4)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (40)
Will Strohl (180)
William Severance (5)
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out