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.
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