Tag: fancybox
Nabin Nepal (Starx) fancybox javascript jquery
February 25, 2013

simple alert box doesn't close after the first click, what to do to make it work?

Question by sasori

sasorisasori

i have a simple jquery script that calls a fancybox after a button was clicked,
now the problem is, the fancy box doesn’t close after the first click of the button, only after the 2nd click…

The second problem is, inside the fancy box, there is a form with 3 input fields, the submit button/button doesn’t work in one click, it needs to get clicked twice as well..any ideas on what to do?

jQuery("#hsbcloanbutton").click(function(e){

    e.preventDefault();
    var loanAmount = jQuery('#loanAmount').val();
    var loanTenure = jQuery('#loanTenure').val();
    var InstalmentAmount = jQuery('#InstalmentAmount').val();
    var loanName = jQuery('#loanName').val();
    var loanNric = jQuery('#loanNric').val();
    var loanContact = jQuery('#loanContact').val();
    if(loanAmount.length < 1 || loanTenure.length  < 1 || InstalmentAmount.length < 1)
    {
        alert("Please enter data");
        return false;
    } else if(isNaN(loanAmount) || isNaN(InstalmentAmount)){
        alert("Please put numbers only in Loan Amount and Instalment Amount fields");
        return false;
    } else {
                jQuery("#hsbcloanbutton").fancybox({
                'titlePosition' : 'inside',
                'transitionIn' : 'none',
                'transitionOut' : 'none',
                'hideOnOverlayClick' : false,
                'hideOnContentClick' : false,
                'showCloseButton' : false,
        });


    }
    jQuery("#hsbcloansubmitformbutton").click(function(e){
        e.preventDefault();
        jQuery.ajax({
            'type' : 'POST',
            'url' : "<?php echo Yii::app()->createUrl?>",   
        )};
    });
});

Answer by Starx

StarxStarx

It seems you are initializing your fancybox, on the click event: That might be causing this.

Initialize the script on $(document).ready()

$(function() {
        jQuery("#hsbcloanbutton").fancybox({
                'titlePosition' : 'inside',
                'transitionIn' : 'none',
                'transitionOut' : 'none',
                'hideOnOverlayClick' : false,
                'hideOnContentClick' : false,
                'showCloseButton' : false,
        });
});
Nabin Nepal (Starx) fancybox javascript jquery
March 4, 2012

Opening a fancyBox with a certain aspect ratio

Question by smares

smaressmares

Does anyone know how I can open a resizable fancyBox with a certain aspect ratio (for example 16:9)?

Answer by Adam Prax

Adam PraxAdam Prax

There isn’t a native way of easily resizing Fancybox. You can do some simple math with screen.height to open a Fancybox in a particular aspect ratio relative to the current screen resolution.

height = screen.height/4;

$("#test").fancybox({
           'width' : 16/9. * height,
           'height' : height,
           'autoDimensions' : false
      }); 
});

Answer by Starx

StarxStarx

AFAIK, Fancybox right now, does not support this. However, You can control the dimension of fancy box size

("#yourbox").fancybox({
    'width'             : 680,
    'height'             495,
    'showCloseButton'   : false,
    'titlePosition'     : 'inside',
    'titleFormat'       : formatTitle
});
Nabin Nepal (Starx) fancybox jquery jquery-ui php
July 1, 2010

How to use jQuery to set value on screen rather than use alert?

Question by Autolycus

AutolycusAutolycus

I am using the code that I will post below. I generates the password and works fine. Only problem is that it shows me the regenerated password in the alert box. I want to echo it on the screen. how can I do that. Thanks Using jQuery fancybox and php

$.ajax({
    type: 'POST',
    url: '/processPassword.php',
    data: 'newPassword=' + password,
    success: function(success) {
        if(success == 1) {
            alert('The password has been reset. to: ' + password);
            location.href = 'mainpage.php';
        } else {
            alert('The password was not reset.');
        }
    }
});
});

function newPassword() {
        var password = "";
        some logic...
        return password;
}

Answer by RSolberg

RSolbergRSolberg

Try this. Replace the “alert” call with the jQuery line below to set the HTML of a div…

HTML

<div id="newPass"></div>

jQuery

//this assumes that "password" has already been setup.
$("#newPass").html(password);

I also would strongly advise you to consider having your PHP page generate the password and to use jQuery or something similar to request a PW to be built with server side code. Making the PW with client side code seems to be a huge security hole, almost like giving the blue prints of the prison to the prisoners…

Answer by Starx

StarxStarx

This is something you could try

$.post {
   "processPassword.php",
   { newPassword: 'password' },
   function(data) {
       alert('Your new password is+'+data) ;
});

In this the data is the value echoed by the page processPassword.php not return so you must echo your new password in the end of page or somewhere.

...

Please fill the form - I will response as fast as I can!