Just rediscovered the beauty of thickbox: http://jquery.com/demo/thickbox/
This might be all I need, and with some added pizazz courtesy of
jquery!
On Feb 12, 10:04 am, cbmtrx <[EMAIL PROTECTED]> wrote:
> Thanks Tim, but I'm actually trying to pass variables the *other*
> direction.
>
> I have many divs on a page, and I need some mechanism of toggling
> these from different links and buttons within the page. There is no
> predictable parent-child relationship to these divs. What I was hoping
> to do was to use a similar approach to the existing javascript
> function, but using jquery's library of functions.
>
> lihao's example is probably the closest thing to what I'm looking for,
> but it seems overly complex for a function that javascript can
> accomplish by itself in 2 lines.
>
> After doing some different tests (based on many of the recommendations
> here), I've come to the conclusion that the only way to maintain a
> truly simple structure would be by somehow nesting a function within
> jquery OR nesting jquery inside a javascript function (I don't know if
> either of these is possible).
>
> Below is NOT real code, but it's what I would think SHOULD be possible
> with jquery (or some variant)...I just don't know the syntax well
> enough yet:
>
> function toggleDialog(oldscreen, newscreen) {
>
> $(function() {
>
> $(".toggle").click(function() {
> $(oldscreen).toggle(); //Click 1=Hide; Click 2=Show...etc
> $(newscreen).toggle(); //Inverse of above...etc
> return false;
> });
>
> });
>
> }
>
> To explain: The javascript function receives the two vars from the DOM
> element (could be a link, a form button, anything!), which are then>>used by
> jquery<< to identify which elements are to be affected. That
>
> way, jquery doesn't need to care which element triggered something, it
> will simply just toggle the element to the next state (on or off).
>
> So my HTML would look like this:
>
> <!--ONE-->
> <div id="oldscreen1">
> <a href="javascript:toggleDialog('oldscreen1','newscreen1');"
> class="toggle">Open 1</a>
> </div>
>
> <div id="newscreen1">
> <form>
> New page content 1
> <input type="button" value="Close" class="toggle"
> onclick="javascript:toggleDialog('newscreen1','oldscreen1');" />
> </form>
> </div>
>
> <!--TWO-->
> <div id="oldscreen2">
> <a href="javascript:toggleDialog('oldscreen2','newscreen2');"
> class="toggle">Open 2</a>
> <a href="javascript:toggleDialog('oldscreen2','newscreen3');"
> class="toggle">Open 3</a>
> <a href="javascript:toggleDialog('oldscreen2','newscreen4');"
> class="toggle">Open 4</a>
> </div>
>
> <div id="newscreen2">
> <form>
> New page content 2
> <input type="button" value="Close" class="toggle"
> onclick="javascript:toggleDialog('newscreen2','oldscreen2');" />
> </form>
> </div>
>
> <div id="newscreen3">
> <form>
> New page content 3
> <input type="button" value="Close" class="toggle"
> onclick="javascript:toggleDialog('newscreen3','oldscreen2');" />
> </form>
> </div>
>
> <div id="newscreen4">
> <form>
> New page content 4
> <input type="button" value="Close" class="toggle"
> onclick="javascript:toggleDialog('newscreen4','oldscreen2');" />
> </form>
> </div>
>
> Using javascript this is *a piece of cake* to pull off, so my question
> is, can this be done with jquery just as easily? Or am I really
> looking at having to use something more verbose like lihao's
> suggestion?
>
> Thanks, everyone, for your help so far :)
>
> Emlyn
>
> On Feb 10, 9:04 pm, Timothee Groleau <[EMAIL PROTECTED]>
> wrote:
>
> > On Fri, 2008-02-08 at 08:11 -0800, cbmtrx wrote:
> > > I've just barely started getting my feet wet with jquery, so please
> > > bear with this novice's question...
>
> > > With a javascript function you can accept vars like this:
>
> > > function doSomething(number, name) {
> > > //Do something with them
> > > }
>
> > > From an href in the HTML like this:
> > > <a href="javascript:doSomething('1234','john');>Click me</a>
>
> > > [...]
>
> > > Any suggestions?
>
> > If you are able to change your function 'doSomething' a little bit, you
> > may also use the jQuery method 'bind' to have custom parameters passed
> > with the event. For example:
>
> > ==========
> > function doSomething(evt)
> > {
> > var num = evt.data.num;
> > var name = evt.data.name;
>
> > // do whatever
>
> > }
>
> > $("a.link1").bind("click", {num:1234, name:'john'}, doSomething);
> > $("a.link2").bind("click", {num:4567, name:'harry'}, doSomething);
> > $("a.link3").bind("click", {num:8912, name:'dick'}, doSomething);
> > ==========
>
> > if you want it less verbose, you can use an array as your data
> > parameter:
>
> > ==========
> > function doSomething(evt)
> > {
> > var num = evt.data[0];
> > var name = evt.data[1];
>
> > // do whatever
>
> > }
>
> > $("a.link1").bind("click", [1234, 'john'], doSomething);
> > $("a.link2").bind("click", [4567, 'harry'], doSomething);
> > $("a.link3").bind("click", [8912, 'dick'], doSomething);
> > ==========
>
> > Tim.
