Enable fancy JQuery captcha in Blogengine 1.4.5.0 (UPDATED)

First of all you need to download the files from here http://www.webdesignbeach.com/ajax-fancy-captcha-php.zip I won’t waste time writing how to install the files since there is a good explanation on the website http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin

But copy the files into your Blogengine folder

 

The first problem I faced was that it was made with PHP in mind and since BlogEngine are using .NET I had to change the captcha.php file to a .NET version.
So I created a new file in the captcha folder called captcha.aspx looking like this:

<%@ Page Language="C#" AutoEventWireup="true" %>
<%
    if(Request["REQUEST_METHOD"] == "POST" && !string.IsNullOrEmpty(Request["captcha"]) && Request["captcha"] == Session["captcha"])
 {
  Response.Write( "Passed!"); /* YOUR CODE GOES HERE */
  Session["captcha"] = string.Empty; /* this line makes session free, we recommend you to keep it */
 }
else if(Request["REQUEST_METHOD"] == "POST" && !string.IsNullOrEmpty(Request["captcha"]))
 {
  Response.Write("Failed!");
 }
/* in case that form isn't submitted this file will create a random number and save it in session */
else
 {
    Random r = new Random();
   
  int random = r.Next(0,4);
  Session["captcha"] = r.Next(0,4);;
        Response.Write(Session["captcha"]);
 }
     %>

I really don’t care much about anything  in here besides the Session handling that’s because .NET and Blogengine both submits form data using javascript and I don’t like to mess with the mechanics so nothing special happens here, except the random numbers generated.

The original plug-in was made so a post could not happen without the right icon was chosen, but in this version the submit button is merely disabled/enabled.

Make sure that you have enabled session in the web.config or nothing will happen.

In the jquery.captcha.js file find the following line and comment it out

 //$("#" + options.formId).append("<input type=\"hidden\" style=\"display: none;\" id=\"captcha\" name=\"captcha\" value=\"" + rand + "\">");

Insert thes after the line above
$("#captcha").val(rand);

Next a little configuration of Blogengine is required, bear in mind that this is only tested in version 1.4.5.0, but in the settings page the references to the scripts are inserted


 <script type="text/javascript" src="../latest-jquery/jquery-1.3.2.min.js"></script>
 <script type="text/javascript" src="../latest-jquery-ui/jquery-ui-1.7.2.custom.min.js"></script>

<script type="text/javascript" src="../captcha/jquery.captcha.js"></script>
 <link href="../captcha/captcha.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8">
$j = jQuery.noConflict();
 $j(document).ready(function(){
       $j("#btnSaveAjax").attr("disabled","disabled");
  $j(function() {
   $j(".ajax-fc-container").captcha({
    borderColor: "silver",
    text: "Verify that you are a human,<br />drag <span>scissors</span> into the circle."   });
  });
  });
 </script>

BlogEngine uses the $ sign too so in order to avoid problems with JQuery make sure that you add $j = jQuery.noConflict(); that cause some grief on my behalf but luckily I found this blog http://www.dscoduc.com/2008/09/jquery-goodness-for-blogenginenet/

Back in the file system locate the User Controls folder in BlogEngine and open the CommentView.aspx file and insert the following:
<!-- Begin of captcha --> 
<div class="ajax-fc-container">You must enable javascript to see captcha here</div>
<!-- End of captcha -->

This is the container for the Plugin so place it somewhere fitting like before the submit button. Before this line: 
<input type="button" id="btnSaveAjax" value="<%=Resources.labels.saveComment %>" onclick="if(Page_ClientValidate('AddComment')){AddComment()}" tabindex="7" />   

Insert the following line in the same file <input type="hidden" name="captcha" id="captcha" value="" /> this is the value generated by the captcha script.

Lastly you must edit the AddComment() method in the blog.js file after all the variable declarations replace:

 WebForm_DoCallback('ctl00$cphBody$CommentView1',argument, callback,'comment',null,false);

with
var cap = $("captcha");
if(cap.value != "") {
  WebForm_DoCallback('ctl00$cphBody$CommentView1',argument, callback,'comment',null,false);
}

This will make sure the submit will never run unless the hidden field has a value. Alternatively you could move the check into the comments.ascx.cs file and  check the value against the session value. But so far I have'nt got any spam.

That’s it time will tell if it solves the spam problem but why don’t try it out and leave a comment.

Pretty neat if I might say so, all credits to http://www.webdesignbeach.com of cause.


 

Modifying Quick launch bar with JQuery

The Quick launch bar 

Many people are annoyed with the Quick Launchbar, because it quickly gets very large; I'm going to show how this can be solved with JQuery. I was inspired by a post made by Jan Tielens, you can read more about it here. I'm not going to claim to be any kind of expert with regards to JQuery so it's a learning experience for me too.

But what is wrong?

   

Well, there's nothing wrong with it by default, but it really takes up a lot of space and you need to scroll down the page just to see all the links, like this screenshot, not that many lists but a lot of space taken up. I know it's possible to remove the lists from the quick launch bar but then you need mere clicks to get the information.

It's obvious that this needs to be fixed.

JQuery

Unfortunately all the items in the quick launch are all using the same CSS classes so I haven't been able to find a way (yet) to select the individual sections. So this will only work on all the sub items. Insert this code into a Content Editor Webpart:

<style type="text/css">
   .myRowHighlight {color:red; background-color:#FFCC66}
</style>

<script>
$(document).ready(function()
 {
       $("table[class='ms-navSubMenu2 zz2_QuickLaunchMenu_8']").hide("slow");
       $("table[class='ms-navheader zz2_QuickLaunchMenu_4']").hover
        (
            function() {
                $("table[class='ms-navSubMenu2 zz2_QuickLaunchMenu_8']").show("slow");
            }
        );

       $("#OuterLeftCell").hover
        (
             function() {
                 $("table[class='ms-navSubMenu2 zz2_QuickLaunchMenu_8']").hide("slow"); 
             }
        );
 }
);

</script>

I have tested this in IE8 in normal and compatibility mode, Firefox, Opera and Safari and it looks fine in every one of them.

Update Update I managed to find someone that made a better implementation where the individual sections are expaneded check out this great post http://www.endusersharepoint.com/?p=985

About the author

Jesper is a serlfemployed IT-consultant and owner of Nsight ApS.

His primary focus is on SharePoint and Microsoft online services like Azure and Office 365

Month List

Page List