Can't focus fancybox iframe input - javascript

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();
});
});

Related

Cannot read property 'currentHash' of undefined

I using fancybox in my project
Here is code, how
$(".hotel_gallery").attr("data-fancybox", "quick-view")
.fancybox({
prevEffect: "none",
nextEffect: "none",
closeBtn: true,
arrows: true,
beforeShow(): void {
this.title = this.src;
},
afterLoad(instance, current ){
if ( instance.group.length > 1 && current.$content ) {
current.$content.append('<a data-fancybox-next class="button-next" href="javascript:;">→</a><a data-fancybox-previous class="button-previous" href="javascript:;">←</a>');
}
current.$content.append('<a data-fancybox-close class="button-close" href="javascript:;">×</a>');
},
helpers: { title : { type : "inside" } }
});
It working great. But when I close fancybox, I have this error in console
Cannot read property 'currentHash' of undefined
But I can't understood why?

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);

How to disable onload on this js

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.

how to redirect in jquery fancybox pop up to next page...in jquery

I m using jquery fancy box popup window....for pop up....
But when i submit ...my form that redirect in same window.....in popup..
I want to redirect my page to another open window....not in same popup...
I used target blank ..but it work every..time on click...i need to redirect when i got my login is done....
I m creating my project in codeigniter.....
my controller....
public function login()
{
if ( $this->input->post('action') )
{
$this->form_validation->set_rules('user_name', 'Username','required|valid_email');
$this->form_validation->set_rules('password', 'Password', 'required|');
if ($this->form_validation->run() == TRUE)
{
$username = $this->input->post('user_name');
$password = $this->input->post('password');
$rember = ($this->input->post('remember')!="") ? TRUE : FALSE;
if( $this->input->post('remember')=="Y" )
{
set_cookie('userName',$this->input->post('user_name'), time()+60*60*24*30 );
set_cookie('pwd',$this->input->post('password'), time()+60*60*24*30 );
}
else
{
delete_cookie('userName');
delete_cookie('pwd');
}
$this->auth->verify_user($username,$password);
if( $this->auth->is_user_logged_in() )
{
if( $this->session->userdata('ref')!="" )
{
redirect($this->session->userdata('ref'),'');
}
else
{
redirect('members/myaccount','refresh');
}
}
else
{
$this->session->unset_userdata(array("ref"=>'0'));
$this->session->set_userdata(array('msg_type'=>'error'));
$this->session->set_flashdata('error',$this->config->item('login_invalid'));
redirect('users/login', '');
}
}
else
{
$data['heading_title'] = "Login";
$this->load->view('users_login',$data);
}
}
else
{
$data['heading_title'] = "Login";
$this->load->view('users_login',$data);
}
}
$(window).load(function (e) {
$("#back-top").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
})
});
$(".login").fancybox({
'width': 367,
'height': 600,
'autoScale': false,
'type': 'iframe'
});
$(".fotget").fancybox({
'width': 425,
'height': 286,
'autoScale': false,
'type': 'iframe'
});
$(".profile").fancybox({
'width': 700,
'height': 505,
'autoScale': false,
'type': 'iframe'
});
$(".details").fancybox({
'width': 400,
'height': 200,
'autoScale': false,
'type': 'iframe'
});
$(".enquiry").fancybox({
'width': 359,
'height': 450,
'autoScale': false,
'type': 'iframe'
});
$(".contact").fancybox({
'width': 317,
'height': 353,
'autoScale': false,
'type': 'iframe'
});
$(".map").fancybox({
'width': 425,
'height': 355,
'autoScale': false,
'type': 'iframe'
});
});
the reason this is happening is because your popup content is iframed... you could send a message back to the parent window to do the redirect in the main browser window, a google on iframe communication to it's parent window should get you the info you need to do this, however this all hinges on you having control of the page being iframed!
EXAMPLE:...where ever your redirects are...replace with...
echo "<script type=\"text/javascript\">window.top.postMessage('logged_in', '*');</script>";
exit; //make sure this is here, to stop php execution!!
Then in your parent window (the one intitializing the fancyboxes...)
window.onmesage = function(e){
if(e.data == 'logged_in'){
window.location.href = 'http://pathtopage';
}
}
NOTE: 'logged_in' could also be json string
'{ "action":"something","redirect":"http://url" }'
just use
JSON.parse(e.data);
in the listener to extract the json object
EDIT: well crap... I misunderstood your question... I don't see the element you are using to submit the form... but generally you would do e.preventDefault(); on that element before letting it redirect anywhere....so for example you are using an anchor tag...
$('a.form-submit').on('click',function(e){
e.preventDefault();
var redir = $(this).attr('href');
var formData = $('#theform').serialize();
$.post('http://formhandler/route',formdata,function(){
//open a new window...
window.open(redir);
//or send data back to parent window...
window.top.postMessage(redir,'*');
});
});

Fancybox YOutube Video Keeps Playing

Not sure what the catch is but in FF the video keeps playing. All other browsers close when you click outside of fancybox... the embeded Youtube Video will stop playing as well. Firefox seems to ignore this. What am I doing wrong?
$(document).ready(function() {
$(".fancybox").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
callbackOnClose: function() {
$("#fancy_content").html(" ");
}
});
});
$("#fancy_content").empty();
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0,
opacity: 0.3,
css: {'background-color': '#cdc3b7'}
}
}
});
});
You don't have to initialize the same .fancybox selector twice. In other words, you don't have to do :
$(".fancybox").fancybox({
// options
});
... and later :
$(".fancybox").fancybox();
#fancy_content is not a valid fancybox selector (at least not for v2.x)
$("#fancy_content").empty(); is outside of the .ready() method. Anyway is useless as explained above.
callbackOnClose is not a valid API option (use afterClose instead if needed)
This script works perfectly fine cross-browser :
$(".fancybox").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
/*
// yo don't need this
,
callbackOnClose: function() {
$("#fancy_content").html(" ");
}
*/
});
... as you can see in this JSFIDDLE. Make sure you test it with FF (works fine with my FF v17.0.1)

Categories