How to disable onload on this js - javascript

I'd like to disable onload the popup and show it only after clicking an url link (onlick="echoSec()" ).
I did the 2nd step, so after pressing the button it works good, but it shows at the page load too. I don't want that.
There is no onload function in the code.
Could you help me?
/*
* Project: jQuery echoSoc - Social Sharer init
* Description: echoSoc is light weight jQuery Plugin for Social Shares.
* Author: dvL-den
* License: Copyrights dvL-den. All rights reserved.
*/
;(function ($, window, document, undefined) {
// Create the defaults once
var pluginName = 'echoSoc';
var defaults = {
title : 'echoSoc Social Sharer',
facebook_button : true,
facebook_url : window.location.origin,
twitter_button : true,
twitter_url : window.location.origin,
twitter_message : 'echoSoc Social Sharer Tweet Message!',
google_button : true,
google_url : window.location.origin,
timeout : 30,
message : 'Like, Tweet or +1 to unlock content',
reopen_task : false,
reopen_time : 60,
cookie_expire : 30,
close : false
};
// The actual plugin constructor
function EchoSoc(element, options) {
this.element = element;
this.options = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
EchoSoc.prototype = {
init: function () {
// Plugin HTML Structure
$('body').append( //-->
'<div class="echoSoc_wrap">' +
'<div class="echoSoc_frame">' +
'<div class="echoSoc_title" />' +
'<div class="echoSoc_content">' +
'<div class="echoSoc_description" />' +
'<div class="echoSoc_countdown" />' +
'</div>' +
'</div>' +
'<div class="echoSoc_overlay" />' +
'</div>'
// <--
);
// Title as Text or as Image
$('.echoSoc_title').html(this.options.title);
// Countdown Structure
if (this.options.timeout > 0) {
$('.echoSoc_countdown').html(this.options.message + ' or wait <span />' + ' ' + 'seconds.');
} else {
$('.echoSoc_countdown').html(this.options.message);
}
$('<div />')
.addClass('echoSoc_buttons')
.appendTo('.echoSoc_description');
this._echoTrigger();
if (this.options.timeout > 0)
this._echoTimeout();
if (this.options.close) {
$(document).on('keydown', function (e) {
if (e.keyCode == 27) {
$('.echoSoc_wrap').fadeOut();
}
});
$('.echoSoc_overlay').css('cursor', 'pointer');
$('.echoSoc_overlay').on('click', function () {
$('.echoSoc_wrap').fadeOut();
});
}
},
_echoTrigger: function () {
if (!$.cookie('echoSoc')) {
$('.echoSoc_wrap').show();
$('.echoSoc_frame').fadeIn(500);
$('.echoSoc_overlay').fadeIn(100);
this._echoCenter();
this._echoSwitcher();
this._echoAsync();
this._echoEvents();
}
},
_echoSwitcher: function () {
if (this.options.facebook_button) {
$('<div />')
.addClass('echoFacebook')
.css({ 'width': '48', 'height': '20' })
.appendTo('.echoSoc_buttons');
$('.echoFacebook').append('<fb:like href="' + this.options.facebook_url + '" send="false" layout="button_count" width="50" show_faces="false" colorscheme="light"></fb:like>');
}
if (this.options.twitter_button) {
$('<div />')
.addClass('echoTwitter')
.css('width', '58')
.appendTo('.echoSoc_buttons');
$('.echoTwitter').append('Tweet');
}
if (this.options.google_button) {
$('<div />')
.addClass('echoGoogle')
.css('width', '32')
.appendTo('.echoSoc_buttons');
$('.echoGoogle').append('<g:plusone size="medium" href="' + this.options.google_url + '" callback="googleCB"></g:plusone>');
}
var socButtons = $('.echoSoc_buttons').find('div').length,
socNumber = $.trim(socButtons).slice(0, 1),
socSort_one = $('.echoSoc_buttons > div').eq(0),
socSort_two = $('.echoSoc_buttons > div').eq(1),
socSort_three = $('.echoSoc_buttons > div').eq(2),
buttons_wrap = $('.echoSoc_buttons');
if (socNumber == 3) {
buttons_wrap.css('width', '85%');
socSort_one.add(socSort_three).css('display', 'inline-block');
socSort_one.add(socSort_three).css({
'position': 'absolute',
'top': '10px',
'overflow': 'hidden'
});
socSort_two.css({
'position': 'relative',
'margin': '0 auto',
'overflow': 'hidden'
});
socSort_one.css({ 'left': '0' });
socSort_three.css({ 'right': '0' });
}
else if (socNumber == 2) {
buttons_wrap.css('width', '50%');
socSort_one.add(socSort_two).css('display', 'inline-block');
socSort_one.add(socSort_two).css({
'position': 'absolute',
'top': '10px',
'overflow': 'hidden'
});
socSort_one.css({ 'left': '0' });
socSort_two.css({ 'right': '0' });
}
else if (socNumber == 1) {
buttons_wrap.css('width', '50%');
socSort_one.css({
'position': 'relative',
'margin': '0 auto',
'overflow': 'hidden'
});
}
else {
buttons_wrap
.css('text-align', 'center')
.text('Error! Enable at least one Social Button!');
}
},
_echoTimeout: function () {
$('.echoSoc_countdown')
.find('span')
.addClass('timer')
.text(this.options.timeout);
var countdown = $('.timer'),
seconds = $('.timer').text(),
that = this,
timer = setInterval(function () {
countdown.text(--seconds);
if (seconds === 0) {
clearInterval(timer);
that._echoClose();
}
}, 1000);
},
_echoDestroy: function () {
$('.echoSoc_wrap').fadeOut(500);
},
_echoClose: function () {
this._echoDestroy();
if (this.options.reopen_task) {
var that = this;
setTimeout(function () {
$('.echoSoc_wrap').fadeIn(500);
that._echoTimeout();
that._echoCenter();
}, this.options.reopen_time * 1000);
}
},
_echoCenter: function () {
function reposition () {
var str_wrap = $('.echoSoc_wrap'),
str_frame = $('.echoSoc_frame');
str_frame.css({
top: Math.round(
str_wrap.height() / 2 -
str_frame.outerHeight() / 2 -
parseInt(str_frame.css('margin-top'), 10)
),
left: Math.round(
str_wrap.width() / 2 -
str_frame.outerWidth() / 2 -
parseInt(str_frame.css('margin-left'), 10)
)
});
}
if ( $('.echoSoc_wrap').length ) {
reposition();
$(window).on('resize', function () {
reposition();
});
}
},
_echoAsync: function () {
if (this.options.twitter_button) {
if (typeof (twttr) != 'undefined') {
twttr.widgets.load();
} else {
$.getScript('http://platform.twitter.com/widgets.js', function () {
twttr.ready(function (twttr) {
twttr.events.bind("tweet", twitterCB);
});
});
}
}
if (this.options.facebook_button) {
if (typeof (FB) != 'undefined') {
FB.init({ status: true, cookie: true, xfbml: true });
} else {
$.getScript("http://connect.facebook.net/en_US/all.js#xfbml=1", function () {
FB.init({ status: true, cookie: true, xfbml: true });
});
}
}
if (this.options.google_button) {
if (typeof (gapi) != 'undefined') {
$(".g-plusone").each(function () {
gapi.plusone.render($(this).get(0));
});
} else {
$.getScript('https://apis.google.com/js/plusone.js');
}
}
},
_echoEvents: function () {
var cookie_sum = parseInt(this.options.cookie_expire, 10);
window.fbAsyncInit = function () {
FB.Event.subscribe('edge.create', function(response) {
if (cookie_sum >= 1) {
$.cookie('echoSoc', 'done', { expires: cookie_sum , path: '/' });
}
$('.echoSoc_wrap').fadeOut(500, function () {
$('.echoSoc_wrap').remove();
openGatewayACAPI(8978, '76276')
});
});
};
googleCB = function() {
if (cookie_sum >= 1) {
$.cookie('echoSoc', 'done', { expires: cookie_sum , path: '/' });
}
$('.echoSoc_wrap').fadeOut(500, function () {
$('.echoSoc_wrap').remove();
openGatewayACAPI(8978, '76276')
});
};
twitterCB = function () {
if (cookie_sum >= 1) {
$.cookie('echoSoc', 'done', { expires: cookie_sum , path: '/' });
}
$('.echoSoc_wrap').fadeOut(500, function () {
$('.echoSoc_wrap').remove();
openGatewayACAPI(8978, '76276')
});
};
}
};
$.fn[pluginName] = function (options) {
return this.each(function () {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName, new EchoSoc(this, options));
}
});
};
})(jQuery, window, document);
my html is only :
<a href="" onclick="echoSoc()" class="box_single_ability">
And this js is also included in index.html file
<script>
$(document).echoSoc({
title : '<h3>title</h3>',
facebook_button : true,
facebook_url : 'https://www.facebook.com/',
twitter_button : true,
twitter_url : 'twitterurl/',
twitter_message : 'Checking out this jQuery echoSoc plugin for social sharing by #Nenad_Novakovic (dvLden).',
google_button : true,
google_url : 'googleurl/',
timeout : 2,
message : 'Like, Tweet or +1 to unlock content',
reopen_task : false,
reopen_time : 1,
cookie_expire : 30,
close : false
});
</script>

It has to do with when this.echoTrigger(); is being called. So, either remove that from init (not sure if that's the behaviour you want), or don't do your initialization step (the html snippet you posted) until a click happens. Currently init is being called

I am developer of this one and I know it's not built to function this way. However you can accomplish that by removing plugin call from your page(s) and move it within click event of desired button as triggerer.
HTML
<button type="button" id="echoSoc-trigger">Trigger Plugin</button>
jQuery
$('#echoSoc-trigger').on('click', function () {
$(document).echoSoc({
title : '<h3>CPA Elites - Viral Plugin</h3>',
facebook_button : true,
facebook_url : 'http://dvL-den.net/',
twitter_button : true,
twitter_url : 'http://dvL-den.net/',
twitter_message : 'Checking out this jQuery echoSoc plugin for social sharing by #Nenad_Novakovic (dvLden).',
google_button : true,
google_url : 'http://dvL-den.net/',
timeout : 30,
message : 'Like, Tweet or +1 to unlock content',
reopen_task : false,
reopen_time : 60,
cookie_expire : 30,
close : false
});
});
This way it will work fine and it will call the plugin only when you click specified button, obviously.

Related

How to call a function after click on input to chose image then button show?

I want to put something instead of on select for show button in fileup plugin after loaded all images.
$.fileup({
url: '/photo-gallery/api/photo/new/',
inputID: 'upload-demo',
queueID: 'upload-demo-queue',
fieldName: 'original_photo',
autostart: false,
extraFields: {
'title': title,
'uploaded_photo_set_title': $("#uploaded_photo_set_title").val()
},
onSelect: function(file) {
$('.next-session-upload').removeClass('none');
},
onSuccess: function(response, file_number, file) {
$('.waiting-msg').addClass('none');
$('.for-success').removeClass('none');
succsees_file_count = succsees_file_count + 1;
if (succsees_file_count + error_file_count === countOfUpload) {
window.location = "/photo-gallery/photo/new/" + jQuery.parseJSON(response).uploaded_photo_set_id + "/complete";
}
},
onError: function(event, file, file_number) {
$('.next-session-upload').removeClass('none');
$('.for-error').addClass('block-alert');
error_file_count = error_file_count + 1;
alert(error_file_count);
if (succsees_file_count + error_file_count === countOfUpload) {
window.location = "/photo-gallery/photo/new/" + jQuery.parseJSON(response).uploaded_photo_set_id + "/complete";
}
},
onStart: function(file_number, file) {
$('.waiting-msg').removeClass('none');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="original_photo" type="file" id="upload-demo" multiple="" accept="image/jpg,image/jpeg,image/Tiff,image/NEF,image/Raw,image/CR2,image/">

Loading javascript after AJAX load

I have a woocommerce site that uses light-box products with AJAX filters.
To access the light box a quick-view button appears when you hover over the product.
When I load an AJAX filter the light-box quick-view button is no longer clickable.
I need to add the code to the button after the AJAX load.
Below is the function that the theme uses.
85: function(t, e) {
"use strict";
Flatsome.behavior("quick-view", {
attach: function(t) {
jQuery(".quick-view", t).each(function(t, e) {
jQuery(e).hasClass("quick-view-added") || (jQuery(e).click(function(t) {
if ("" != jQuery(this).attr("data-prod")) {
jQuery(this).parent().parent().addClass("processing");
var e = jQuery(this).attr("data-prod"),
i = {
action: "flatsome_quickview",
product: e
};
jQuery.post(flatsomeVars.ajaxurl, i, function(t) {
jQuery(".processing").removeClass("processing"), jQuery.magnificPopup.open({
removalDelay: 300,
closeBtnInside: !0,
autoFocusLast: !1,
items: {
src: '<div class="product-lightbox lightbox-content">' + t + "</div>",
type: "inline"
}
}), setTimeout(function() {
jQuery(".product-lightbox").imagesLoaded(function() {
jQuery(".product-lightbox .slider").flickity({
cellAlign: "left",
wrapAround: !0,
autoPlay: !1,
prevNextButtons: !0,
adaptiveHeight: !0,
imagesLoaded: !0,
dragThreshold: 15
})
})
}, 300), jQuery(".product-lightbox form").hasClass("variations_form") && jQuery(".product-lightbox form.variations_form").wc_variation_form(), jQuery(".product-lightbox form.variations_form").on("show_variation", function(t, e) {
e.image.src ? (jQuery(".product-lightbox .product-gallery-slider .slide.first img").attr("src", e.image.src).attr("srcset", ""), jQuery(".product-lightbox .product-gallery-slider .slide.first a").attr("href", e.image_link), jQuery(".product-lightbox .product-gallery-slider").flickity("select", 0)) : e.image_src && (jQuery(".product-lightbox .product-gallery-slider .slide.first img").attr("src", e.image_src).attr("srcset", ""), jQuery(".product-lightbox .product-gallery-slider .slide.first a").attr("href", e.image_link), jQuery(".product-lightbox .product-gallery-slider").flickity("select", 0))
}), jQuery(".product-lightbox .quantity").addQty()
}), t.preventDefault()
}
}), jQuery(e).addClass("quick-view-added"))
})
}
})
}
If you can edit the theme, write the code directly into the success callback:
jQuery.post(flatsomeVars.ajaxurl, i, function(t) {
// Code you want to run
// Other code. i.e. jQuery(".processing").removeClass ... etc.
});
Or define the function and call it inside your success() callback.
var myFunction = function() {
// Code to run after success
}
jQuery.post(flatsomeVars.ajaxurl, i, function(t) {
myFunction();
// Other code
});

Fancyapps overlay not showing

We are loading fancybox css file dynamically after page load and try to open fancybox with overlay active and custom html content.
Sometimes overlay doesn't appear. If we try to open fancybox with a delay, probability of getting no overlay is decreasing, but it is not totally gone away.
I have already created an issue for this problem: https://github.com/fancyapps/fancyBox/issues/1126
That's how we initialize fancybox:
var fancyboxParams = {
minHeight: 10,
width: params.width || 'auto',
height: params.height || 'auto',
autoSize: false,
autoWidth: params.width ? false : true,
autoHeight: params.height ? false : true,
autoHide: params.autoHide,
topRatio: params.topRatio || topRatio,
leftRatio: params.leftRatio || leftRatio,
title: title,
helpers: {
title: (title && params.windowStyle !== 'seamless') ? {
type: 'inside',
position: 'top'
} : null,
overlay: (params.overlay != "false") ? {} : null
},
content: notificationBody,
fixed: false, // HADDITION - scroll with the page 16.10.2015
wrapCSS: (params.cssClass || "") + " " + "fancybox-" + (params.windowStyle || "seamless"),
beforeShow: function () {
cssCode && $('<style />').html(params.cssCode).prependTo(this.outer);
try {
javascriptCode && eval(javascriptCode);
beforeShow.call(this); // change context
}
catch (err) {
$.fancybox.close(true);
}
},
afterClose: function () {
$(".fancybox-segmentify").remove();
}
};
if (params.isModal == 'true') {
fancyboxParams.closeBtn = false;
fancyboxParams.closeClick = false;
fancyboxParams.keys = null;
if (fancyboxParams.helpers.overlay) {
fancyboxParams.helpers.overlay.closeClick = false;
}
}
$.fancybox(fancyboxParams);

Script that calls a jquery function before the library load

I have problems with a Jquery function.
I get the jquery library from google.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
First, I put the following the code on a .js
(function($){
jQuery.fn.jConfirmAction = function (options) {
var theOptions = jQuery.extend ({
question: "Are You Sure ?",
yesAnswer: "Yes",
cancelAnswer: "Cancel"
}, options);
return this.each (function () {
$(this).bind('click', function(e) {
var submitBtn = $(this);
if($(this).attr("jconfirmed")){
submitBtn.removeAttr("jconfirmed");
}else{
e.preventDefault();
thisHref = $(this).attr('href');
var btns = {};
btns[theOptions.yesAnswer]=function() {
$( this ).dialog( "close" );
if (thisHref!=null){
window.location = thisHref;
}else{
submitBtn.attr("jconfirmed", true);
submitBtn.click();
}
};
btns[theOptions.cancelAnswer]=function() {
$( this ).dialog( "close" );
submitBtn.removeAttr("jconfirmed");
};
var content='<p>'+theOptions.question+'</p>';
if(theOptions.checkboxText!=undefined){
content='<p>'+'<input type="checkbox" id="cbox">'+theOptions.checkboxText+'<br/><br/>'+theOptions.question+'</p>';
}
$('#dialog-confirm').html(content);
$('#cbox').click(function() {
/*
if($('#cbox').attr("checked")){
$('.ui-dialog-buttonset button:first-child').show();
}else{
$('.ui-dialog-buttonset button:first-child').hide();
}
*/
});
$('#dialog-confirm').dialog({
resizable: false,
modal: true,
buttons: btns,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
draggable: false,
dialogClass: 'main-dialog-class'
});
}
});
});
};
})(jQuery);
And, in a jsp file call the function.
<script type="text/javascript">
$(document).ready(function() {
$('.confirm').jConfirmAction();
});
</script>
But i have the following error in console:
Uncaught TypeError: Object [object Object] has no method 'jConfirmAction'
I tried to fix this by putting the function code in the same jsp, between <script type="text/javascript"></script>. That works for some pages, but in others pages have the same error. Is there a way to call the function only if jquery has been loaded?
Wrap your entire JS code with document.ready()
$(document).ready(function () {
(function ($) {
jQuery.fn.jConfirmAction = function (options) {
var theOptions = jQuery.extend({
question: "Are You Sure ?",
yesAnswer: "Yes",
cancelAnswer: "Cancel"
}, options);
return this.each(function () {
$(this).bind('click', function (e) {
var submitBtn = $(this);
if ($(this).attr("jconfirmed")) {
submitBtn.removeAttr("jconfirmed");
} else {
e.preventDefault();
thisHref = $(this).attr('href');
var btns = {};
btns[theOptions.yesAnswer] = function () {
$(this).dialog("close");
if (thisHref !== null) {
window.location = thisHref;
} else {
submitBtn.attr("jconfirmed", true);
submitBtn.click();
}
};
btns[theOptions.cancelAnswer] = function () {
$(this).dialog("close");
submitBtn.removeAttr("jconfirmed");
};
var content = '<p>' + theOptions.question + '</p>';
if (theOptions.checkboxText !== undefined) {
content = '<p>' + '<input type="checkbox" id="cbox">' + theOptions.checkboxText + '<br/><br/>' + theOptions.question + '</p>';
}
$('#dialog-confirm').html(content);
$('#cbox').click(function () {
/*
if($('#cbox').attr("checked")){
$('.ui-dialog-buttonset button:first-child').show();
}else{
$('.ui-dialog-buttonset button:first-child').hide();
}
*/
});
$('#dialog-confirm').dialog({
resizable: false,
modal: true,
buttons: btns,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
draggable: false,
dialogClass: 'main-dialog-class'
});
}
});
});
};
})(jQuery);
});
Include all your JS files at the end of the file and try again, and one side note ? use '!==' to compare variables with 'null' and 'undefined'

Can't focus fancybox iframe input

So I'm using fancybox to load up a login iframe, and I would like it onComplete to bring focus to the username field. If someone could take a look at this code and let me know what's wrong, that'd be great.
Gracias.
/* Function to resize the height of the fancybox window */
(function($){ $.fn.resize = function(width, height) {
if (!width || (width == "inherit")) inner_width = parent.$("#fancybox-inner").width();
if (!height || (height == "inherit")) inner_height = parent.$("#fancybox-inner").height();
inner_width = width;
outer_width = (inner_width + 14);
inner_height = height;
outer_height = (inner_height + 14);
parent.$("#fancybox-inner").css({'width':inner_width, 'height':inner_height});
parent.$("#fancybox-outer").css({'width':outer_width, 'height':outer_height});
}
})(jQuery);
$(document).ready(function(){
var pasturl = parent.location.href;
$("a.iframe#register").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'speedIn' : 600,
'speedOut' : 350,
'width' : 450,
'height' : 385,
'scrolling' : 'no',
'autoScale' : false,
'autoDimensions' : false,
'overlayShow' : true,
'overlayOpacity' : 0.7,
'padding' : 7,
'hideOnContentClick': false,
'titleShow' : false,
'onStart' : function() {
$.fn.resize(450,385);
},
'onComplete' : function() {
$("#realname").focus();
},
'onClosed' : function() {
$(".warningmsg").hide();
$(".errormsg").hide();
$(".successfulmsg").hide();
}
});
$("a.iframe#login").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'speedIn' : 600,
'speedOut' : 350,
'width' : 400,
'height' : 250,
'scrolling' : 'no',
'autoScale' : false,
'overlayShow' : true,
'overlayOpacity' : 0.7,
'padding' : 7,
'hideOnContentClick': false,
'titleShow' : false,
'onStart' : function() {
$.fn.resize(400,250);
},
'onComplete' : function() {
$("#login_username").focus();
},
'onClosed' : function() {
$(".warningmsg").hide();
$(".errormsg").hide();
$(".successfulmsg").hide();
}
});
$("#register").click(function() {
$("#login_form").hide();
$(".registertext").hide();
$.fn.resize(450,385);
$("label").addClass("#register_form label");
});
$("#login").click(function() {
$.fn.resize(400,250);
$("label").addClass("#login_form label");
});
$("#register_form").bind("submit", function() {
$(".warningmsg").hide();
$(".errormsg").hide();
$(".successfulmsg").hide();
if ($("#realname").val().length < 1 || $("#password").val().length < 1 || $("#username").val().length < 1) {
$("#no_fields").addClass("warningmsg").show().resize(inherit,405);
return false;
}
if ($("#password").val() != $("#password2").val()) {
$("#no_pass_match").addClass("errormsg").show().resize();
return false;
}
$.fancybox.showActivity();
$.post(
"../../submit.php",
{ realname:$('#realname').val(),
email:$('#email').val(),
username:$('#username').val(),
password:MD5($('#password').val()),
rand:Math.random() }
,function(data){
if(data == "OK"){
$(".registerbox").hide();
$.fancybox.hideActivity();
$.fn.resize(inherit,300);
$("#successful_login").addClass("successfulmsg").show();
}
else if(data == "user_taken"){
$.fancybox.hideActivity();
$("#user_taken").addClass("errormsg").show().resize(inherit,405);
$("#username").val("");
}
else {
$.fancybox.hideActivity();
document.write("Well, that was weird. Give me a shout at webmaster#criticalwire.com.");
}
return false;
});
return false;
});
$("#login_form").bind("submit", function() {
$(".warningmsg").hide();
$(".errormsg").hide();
$(".successfulmsg").hide();
if ($("#login_username").val().length < 1 || $("#login_password").val().length < 1) {
$("#no_fields").addClass("warningmsg").show().resize(inherit,280);
return false;
}
$.fancybox.showActivity();
$.post(
"../../admin/users/login_submit.php",
{ username:$('#login_username').val(),
password:MD5($('#login_password').val()),
rand:Math.random() }
,function(data){
if(data == "authenticated"){
$(".loginbox").hide();
$(".registertext").hide();
$.fancybox.hideActivity();
$("#successful_login").addClass("successfulmsg").show();
parent.document.location.href=pasturl;
}
else if(data == "no_user"){
$.fancybox.hideActivity();
$("#no_user").addClass("errormsg").show().resize();
$("#login_username").val("");
$("#login_password").val("");
}
else if(data == "wrong_password"){
$.fancybox.hideActivity();
$("#wrong_password").addClass("warningmsg").show().resize();
$("#login_password").val("");
}
else {
$.fancybox.hideActivity();
document.write("Well, that was weird.");
}
return false;
});
return false;
});
});
And here is the HTML:
<p><a class="iframe" id="login" href="/login/">Login</a></p>
You can try:
$('#fancybox-frame').contents().find('#login_username').focus();
in your onComplete, or simply add a $('#login_username').focus(); in a $(document).ready(); of your actual login page.
If you're not using an iframe then these may not work for you. We set up our fancybox to target a div which is contained within a hidden div on the page.
Calling focus() on a hidden element on $(document).ready() doesn't work. Binding to the fancybox onComplete event didn't work because the event was fired on page load, rather than when the fancybox was actually shown.
In the end what worked for us was binding to the mouseleave event of the fancybox anchor. So something like:
$(document).ready(function () {
$('#LoginLink').mouseleave(function () {
$('#UserName').focus();
});
});

Categories