Run a jquery without click function

Question

I use expose in one link, with this code and it works:

$(document).ready(function() {
  var triggers = $("a[rel]").overlay({
    expose: {
      color: '#212121',
      loadSpeed: 200,
      opacity: 0.9
    },
    closeOnClick: false
  });
});

The link is:

<div id="triggers"><a href="" rel="#pop_member">Click here</a></div>

But I want to run the code printed in php so I change it to:

$(document).ready(function() {
  function run_expire(){
    var triggers = $("#pop_member").overlay({
      expose: {
        color: '#212121',
        loadSpeed: 200,
        opacity: 0.9
      },
      closeOnClick: false
    });
  }
});

and print in php:

echo '<script type="text/JavaScript">run_expire();</script>';

but this doesn't work.

Answer 1

try this:

echo '<script type="text/JavaScript">$(function () { run_expire(); });</script>';

Answer 2

The problem is that the run_expire function is only defined within the document.ready() function, so the code in your script tag can't find it.

There's no need to use $(document).ready() here. A better solution would be simply this:

function run_expire(){
  var triggers = $("#pop_member").overlay({
    expose: {
        color: '#212121',
        loadSpeed: 200,
        opacity: 0.9
    },
    closeOnClick: false
  });
}

You may want to make sure the document is ready before running run_expire though, which you can do like this:

echo '<script type="text/JavaScript">$(run_expire);</script>';

Edit

Looking back at your code, there is another problem. $("#pop_member") will not select a link defined this way:

<a href="" rel="#pop_member">

If you want the selector to work, you'd have to do this:

<a href="" id="pop_member">

However, this may not be what you want, because you can only have one element on a page with the same id attribute. The rel attribute isn't really appropriate here, either. You probably want to define it with a class, like this:

<a href="" class="pop_member">

with this selector:

$(".pop_member")

Alternatively, if you really want to select the link the way you have it written, you can use this selector:

$("a[rel='#pop_member']")

Edit 3

Your real problem was stated in this question, which was that the jQuery tools library wasn't being used properly. You need to pass api: true to the overlay function, and call .load() on the return value of the overlay function, in order for the overlay to be displayed programmatically on page load.

Answer 3

That's is because your run_expire function is defined inside the scope of the $(document).ready event handler.

You could define your function outside:

function run_expire(){
    var triggers = $("#pop_member").overlay({
        expose: {
            color: '#212121',
          loadSpeed: 200,
          opacity: 0.9
        },
        closeOnClick: false
    });
}

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

That will define run_expire in the global scope, and your php generated script will work.