A cool Jquery popup window with ASP.Net Master Page
So the brief was pretty simple – create a slick, “popup” form to allow site users to register for the monthly newsletter.
First thoughts were to use a JQuery popup – as always there are a million and one cool ways to do it but I really like this one:
http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/
Now the (slightly) challenging part – integrating it with ASP.Net master pages. Basically when the button is inside a form in the master page, so by default the form is submitted as soon as the button is clicked.
To get around this we just need to prevent the default behaviour of the button – seriously easy – basically something like this:
$(document).ready(function () {
$("#theModal").click(function (e) { //e = the element that raised the event (button)
e.preventDefault(); //prevent the default action of the button click
$("#sample").modal({
opacity: 80,
overlayCss: { backgroundColor: "#fff" }
});
});
});
And that’s it!! See it in action here:
FunHouse – click the “register” link near the top to see it in action
Sliding Panels/DIVs using JQuery
As a Flashophobe, being asked by a client to provide sliding, animated graphics is the stuff of nightmares.
Not any more!!
Here’s the original blog post:
http://www.ultramegatech.com/blog/2009/06/create-a-slide-in-panel-jquery/
Mine uses three panels, sliding in from the left, but is very much based on the UltraMegaTech approach – and looks pretty swish even if I do say so myself.
I’ll update this post with my code tomorrow
Authentication in ASP.Net 4.0
Aaargh – after yet more authentication headaches we decided to go back to basics – this post is a great comprehensive guide to ASP.Net authentication, one we should really consult at the start of every project rather than as an afterthought
Basically it’s a simple guide to what we need to do before the Application_AuthenticateRequest method is called in global.asax. There’s a handy download too:
Sending HTML email with ASP.Net and C#
As with many seemingly simple things within the world of ASP.Net, sending html email using C# is actually a bit of a PITA
This article is a must-read for anyone trying it:
http://www.reachcustomersonline.com/2010/01/23/09.27.00/#step2
I particularly like the Googlemail section, which is something I was struggling with earlier:
“…Here are coding techniques that appear to work well in Google Mail and older email software:
- Define the background color in a TD cell with bgcolor=, not the CSS style.
- Use the background= attribute in the TD cell for background images, not the CSS. A corollary is that the background image can be made as tall as needed. If the content of an email template might be short or tall depending on the email content, using an extra-tall background image this way lets the email layout height shrink or expand based on the height of the copy from one email to the next. Note, however, that Outlook 2007 ignores background images. (Campaign Monitor has published a solution to the background problem with Outlook 2007 and 2010, Add a Background Image to your Email in Two Simple Steps.)
- If it works better, use the padding style to control margins within a TD cell. The margin style does not work in these cells. Padding does work.
- If a border around a TD cell is needed, Google Mail displays a border when defined in a DIV but not when defined as a border style in a TD tag.
- If a light colored link against a dark background color is needed, put the font definition in the TD cell (so it applies to P and A tags equally) then add a color= style to the A tag.
- If the P and A fonts appear to be different sizes, wrap the A tag in a P tag.
- Google Mail aggressively uses the right column of their interface which squeezes the html email into the center panel. Be sure the padding style in the content TDs is set at 10 pixels all round so text does not smash against the left and right edges.
- When testing an html email with a Google Mail account, it is likely one or more missing font styles in the TD, H1, H2, P, A, and other tags will be found. Inspect every font carefully to make sure Google Mail displays the fonts correctly…”
So it looks like it’s back to the old school with tables and inline styling to get html emails working as expected. Great
Welcome to the Zap WordPress Blog
OK, since everyone’s using it and I’ve had a couple of requests, I thought I’d give it a whirl… so here goes.
