You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

How does Overlay & Expose function work with select/option boxes? Created Jul 3, 2009

This thread is solved

Views: 1715     Replies: 1     Last reply Jul 10, 2009  
You must login first before you can use this feature

caratage

Posts: 1

Registered:
Jul 3, 2009

How does Overlay & Expose function work with select/option boxes?

Posted: Jul 3, 2009

Hi all,

I a newbie to jQuery and Javascript. In the process of enabling a modal box with Overlay and Expose, I am stuck in wring the correct function in order to get it work.

I have successfully done the job when having some a href or button with rel attributes, so I am confident, that I get the basics right.

On select/option, I fail to write the function to fire the event. Is there a way of using the option value to place my overlay ID?

Here some code for my html:

<form action="" name="foobar" id="foobar">
  <select name="foo" id="bar">
    <option>Do some stuff</option>
    <option>----------------</option>
    <option value="#boxAsk">Ask</option>
    <option value="#boxDone">Done</option>
    <option value="#boxError">Error</option>
  </select>
</form>
And the function, within my document ready function:

$(function() {		
  // initialize overlay trigger
  $('#bar option[value]').overlay({
    expose: '#222',
    finish:  { 
      top: 200, 
      left: 309
    }
  });
});
I appreciate any hints. Thank you.

crackberry

Posts: 1

Registered:
Jul 10, 2009

Wanted to ask the same thing...

Posted: Jul 10, 2009

Reply to: How does Overlay & Expose function work with select/option boxes?, from caratage
I am trying to get overlay to work with a select, but I can't get overlay to show or load the external page.

When selecting something, my change event is triggering and my alert shows the correct uri, but that's as far as I'm getting since the overlay is not showing up and I'm not picking any script errors.


<select name="test" id="test" size="1">
  <option value="1">hello</option>
  <option value="2">cruel</option>
  <option value="3">world</option>
</select>



$("select#test").change(function() {
  var api = $("#overlay").overlay({api:true}); 
  var uri = "TEST/2.php?ck=" + $("select#test").val();
  alert(uri);
  // define function that opens the overlay 
  window.openOverlay = function() { 
    api.load(uri); 
  } 
});

Any help would be appreciated.

TIA.

•