Custom jQuery Script–Advanced Login
We had a situation that clearly shows the use of the DotNetNuke Advanced Login Custom Script template, and how it can be used to deliver expected results.
The client wanted to use a custom search function that enabled search, twitter and Facebook into the top area of their skin.
The issue was, that when the this would cause some errors with the way that the search would display on top of the Advanced Login Module slide down effect that was set to run on the site.
The solution to this turned out to be a great example of how the “Custom Script” option from within the module, can be used to deliver a custom experience that takes into account other custom features of the skin or site.
So in this case we needed to move the Search, twitter, and Facebook information into the same layer as the slide down effect. We then changed some CSS styles to make the alignment of the item sit in the correct place on the skin, and not move to the right when the skin was on a wise display.
or
The end result
The custom script ended up looking like this:
jQuery(document).ready(function(){
jQuery(“#open”).click(function(){
jQuery(“div#adv_slidedown_panel”).slideDown(“slow”);
jQuery(“.search_style”).css(‘display’,’none’);
});
// Collapse Panel
jQuery(“#iwebs-close”).click(function(){
jQuery(“div#adv_slidedown_panel”).slideUp(“slow”);
jQuery(“.search_style”).css(‘display’,’block’);
});
// Switch buttons from “Log In | Register” to “Close Panel” on click
jQuery(“#toggle a”).click(function () {
jQuery(“#toggle a”).toggle();
});
jQuery(“#dnn_dnnLOGIN_cmdLogin”).css(“display”,”none”);
jQuery(“#dnn_dnnUSER_cmdRegister”).css(“display”,”none”);
if(jQuery(“.wsc_login”).length>0){
jQuery(“.wsc_login”).css(“visibility”,”hidden”);
}
jQuery(“.search_style”).appendTo(jQuery(“.tab”));
jQuery(“.search_style”).css(‘margin-top’,’10px’);
var w=jQuery(“.search_style”).offset().left- jQuery(“#s_wrap_main”).offset().left-jQuery(“#s_wrap_main”).width()+jQuery(“.search_style”).width();
if(w>0){
jQuery(“.search_style”).css(‘margin-right’,w+’px’);
}
})
function custom_validate_login(){
/*
add any custom login form validation logic here,
return true if pass validation
*/
return true;
}
function custom_validate_registration(){
/*
add any custom registration form validation logic here,
return true if pass validation
*/
return true;
}
The end result being that the skin, search and advanced login module slide down effect works well together.
slidedown-export
