0

First I am using the jQuery colorbox plugin that is working fine so far but then I want to close the colorbox using a button. Unfortunately I can't just trigger the click event on that button by selecting its ID using jQuery, instead of that the button must call a javascript function called closepan() (this behavior is unfortunately mandatory for me).

I tried to create the function

closepan() {
$.colorbox.close();
}

first case : inside the

$(document).ready(function(){...});

but then I got the error closepan is undefined.

second case : before the 

$(document).ready(function(){...});

but then it's the colorbox method that is undefined!

I gave up after gazillion hours of fiddling with several solutions I've found all around stackoverflow.com regarding this topic! I can't figure out how to make this working!

In other words, how to create a function named closepan() that can execute $.colorbox.close(); while being available globally for my button?

Sidou
  • 117
  • 2
  • 7

3 Answers3

2

No matter where you create a variable or function if you create it on window it will be available globally.

window.closepan = function() {
   // hello there
}
iambriansreed
  • 21,935
  • 6
  • 63
  • 79
  • Yessss thanks a lot. It works perfectly by creating the function inside jQuery document ready using your advice. – Sidou Mar 31 '12 at 01:22
  • I learned about the `window.` trick a month ago. Super awesome when working in and outside jQuery `.ready`. – iambriansreed Mar 31 '12 at 01:30
  • @sidou You may want to do some reading on [variable scope in JavaScript](http://stackoverflow.com/a/500459/156755). There's no actual need to create it inside the `document.ready` and your code is usually cleaner and more maintainable if it isn't. – Basic Mar 31 '12 at 01:30
  • @Basic Has a point but *cleaner and more maintainable* is subjective. – iambriansreed Mar 31 '12 at 01:33
  • @Basic, I've already read that. See my comment on your answer. – Sidou Mar 31 '12 at 01:57
0
function closepan() {
    if($.colorbox) {
        $.colorbox.close();
    }
}

However, at the point where someone clicks your button all external scripts should have been loaded so that check shouldn't be necessary...

ThiefMaster
  • 310,957
  • 84
  • 592
  • 636
  • it doesn't work because either we create this function outside of jQuery document ready and then the $.colorbox.close() is not recognized or we create it inside jQuery document ready and then the function is unavailable for my button! – Sidou Mar 31 '12 at 01:18
  • To define a function nothing that is called inside the function has to be declared yet. Besides that, `$` and thus `$.colorbox` is also available outside the dom-ready event function. – ThiefMaster Mar 31 '12 at 01:19
0

Don't forget to put the keyword function in front of your declaration...

function closepan() {
    $.colorbox.close();
}

Working JSFiddle

Basic
  • 26,321
  • 24
  • 115
  • 201
  • No you don't get it. First, as I already stated, I can't use the click event as I HAVE TO make use of the closepan() function called by the button (something like 'javascript:closepan()'). Second, you need to know that the only purpose of this function is to use the colorbox close call and colorbox which is a jQuery plugin NEED TO work in a jQuery environment to be fired properly so it's not like alerting 'hello world' that doesn't need any jQuery prerequisites to run. – Sidou Mar 31 '12 at 01:56
  • The `$` jQuery variable is global in scope - you can reference it from anywhere on the page. I did read the requirements re: the function but assumed it was the definition of the methods which was the problem. I've updated the JSLint to call the function the way you define and demonstrate how you can either reference jQuery directly or use a variable which gets set inside `document.ready()` - Although in the latter case, you'd be better to opt for closures as mentioned on the linked answer. That's as close as I can get without implementing the panel – Basic Mar 31 '12 at 07:29