Open Shadow box Using a Button instead of link

5 messages

Open Shadow box Using a Button instead of link

Reply Threaded

Hi
i am new in java script and don't know anything so i want to request that if any1 can help me in invoking shadowbox onclick of a button

something like <input type="submit" value="submit"> etc

rather than link.
please script guru's help me as it is bit urgent....
kind regards
Ravish Sehgal

Ambient.Impact

Re: Open Shadow box Using a Button instead of link

Reply Threaded

I would recommend using a button element (<button>) rather than an input, unless you're also trying to submit a form with the same action. If you're not already using a JavaScript library (such as jQuery), you're going to have a harder time finding the appropriate element to attach to. If you take a look at Shadowbox's API page, you'll notice that there's a Shadowbox.open() method, which accepts an object with the various options needed to tell Shadowbox what to display. Attach an event to your button, with a function that calls Shadowbox.open(), and you're set.

ravishsehgal

Re: Open Shadow box Using a Button instead of link

Reply Threaded

No i am not able to do it that i am trying to call shadow.open but no
or may be i am trying to it in a wrong way.

<head>
<script type="text/javascript">
function open_sbox()
{
alert("Muzi1");
Shadowbox.open({
content: '<div id="welcome-msg">Welcome to my website!</div>',
player: "html",
title: "Welcome",
height: 350,
width: 350
});
</script>
</head>
<body>

<button type="button" onclick="open_sbox()">Click Me!</button>
</body>

I am able to open the gry window but not the new window

ravishsehgal

Re: Open Shadow box Using a Button instead of link

Reply Threaded

Thanks a lottttttttttttttttttttttttttt!!!!!!!!!!!
ur hint worked for me..............

its working!!!!!!!!!

Only last thing i want to know is how when i close this shadow box the parent window gets refresh????
i know there is a onclose method for this in init() but i am unable to hook a funtion in that.
thanks a millllllllionnnn!!!!!!!!!! Ambient.Impact

Ambient.Impact

Re: Open Shadow box Using a Button instead of link

Reply Threaded

Here's how to hook it into your open() call (remember that JavaScript is a case-sensitive language, onclose() is not the same as onClose() ):

Shadowbox.open({
content: '<div id="welcome-msg">Welcome to my website!</div>',
player: "html",
title: "Welcome",
height: 350,
width: 350,
onClose: function() {
window.location.reload();
}
});

I would also highly recommend that you look into attaching event handlers using JavaScript, instead of inline the way you did with onclick="open_sbox()". As you learn more JavaScript, you'll find that there are a bunch of disadvantages to attaching this way. An industry veteran puts it best. If you were using jQuery, and you gave your button id="welcome-button", then you'd do this:

$('#welcome-button').bind('click', function(event) {
Shadowbox.open(
...
);
});