How to rezise the shadowbox from inside

Question

I have a very simple link with shadowbox like this:

index.html:

<a href='test.html' rel='shadowbox;width=400;height:300'>Go to Test</a>

And in my test.html i have this button, which i want to make a function (i think it should be in javascript) to resize the shadowbox:

test.html:

<input type="button" value="Resize this page" onClick="ResizeSB(600, 200)" />

<script>

   function ResizeSB(widthVal, heightVal) {

      // CODE TO RESIZE

   }

</script>

How can i do this?

Answer 1

You wouldn't put it in a rel attribute for one... The correct HTML markup would be:

<a href='test.html' class='shadowbox' data-width='400' data-height:'300'>Go to Test</a>

Inside your function simply do this:

function ResizeSB(widthVal, heightVal) {

 var link = document.getElementsByTagName('a')[0]; // or any other identifier
 link.style.width = widthVal;
 link.style.height = heightVal;
}

Or even better, if you store the width and height parameters in a class, say .shadowbox_modif class...

<a href='test.html' class='shadowbox'>Go to Test</a>

And the JS

function ResizeSB(widthVal, heightVal) {

 var link = document.getElementsByTagName('a')[0]; // or any other identifier
 link.className += ' shadowbox_modif';
}

Note: It's less obtrusive to put the onclick handler in the Javascript, like so:

document.getElementsByTagName('input')[0].onclick = ResizeSB(400, 300);

Note2: Start JS function names in lowercase as a convention (Uppercase is reserved for 'class' functions)