Javascript – jQuery Facebox delay

faceboxjavascriptjquery

I need a very FAST and lightweight jquery based Modal box on my site, I am looking at Facebox http://famspam.com/facebox

It is a nice plugin and it seems fast and lightweight but I think I can still strip out some of the features I do not need. For example I do not need it to use regex and find photos, so I have removed that part of the code, also I do not want the box to close whenever you click anywhere or the escape key. I have this partially done, I removed the code that makes the escape key close the box but I have not figured out how to make it only close programaticly or when clicking the close button only, right now it closes on any click outside of the box.

Now I have one issue I have not been able to figure out yet, there appears to be 2 spots in the code that control the delay of fading the box in and out, they were set at 200 and I changed them to 0 and tried several other number combinations but I can not seem to get the speed to be faster (less delay).

Does anyone know how to remove the delay in opening a facebox? Also how to disable it from closing when you click anywhere outside of the box?

Best Answer

To disable closing it from clicking anywhere outside, you can find something called "overlay : true" change it to "overlay : false,"

To close it with-out delay, You can find something like '$(document).bind('close.facebox', function() {' there, change

"$('#facebox').fadeOut(function() {"

"$('#facebox').hide(function() {"

Related Solutions

Javascript – n “exists” function for jQuery

In JavaScript, everything is 'truthy' or 'falsy', and for numbers 0 means false, everything else true. So you could write:

if ($(selector).length)

You don't need that >0 part.

Javascript – Trigger a button click with JavaScript on the Enter key in a text box

In jQuery, the following would work:

$("#id_of_textbox").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#id_of_button").click();
    }
});

$("#pw").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#myButton").click();
    }
});

$("#myButton").click(function() {
  alert("Button code executed.");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton">Submit</button>

Or in plain JavaScript, the following would work:

document.getElementById("id_of_textbox")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("id_of_button").click();
    }
});

document.getElementById("pw")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
    }
});

function buttonCode()
{
  alert("Button code executed.");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton" onclick="buttonCode()">Submit</button>

Best Answer

Related Solutions

Javascript – n “exists” function for jQuery

Javascript – Trigger a button click with JavaScript on the Enter key in a text box

Related Topic