Dynamic resize of Popup based on content

[ugottasalsa]

Hi All...

I was told this was the place to find the JavaScript gurus and was recommended by others to post my question here. This is my first post, so be gentle. :rolleyes:

I am in the process of writing an add-on for an e-commerce package (php/MySQL) that will display the Shopping Cart contents in a JavaScript pop-up window when a button in the header is clicked. That part I have working without issue.

My question is in regards to the sizing of the pop-up window.

Depending on the contents of the Shopping Cart, I would like to be able to have the pop-up window dynamically resize the height of the pop-up window according to the contents of the Shopping Cart.

For example...

If the Customer has only one item in their Shopping Cart, when the Cart Contents pop-up is displayed, the height of the pop-up window would be about 300 pixels.

If the Customer has 5 items in their Shopping Cart, when the Cart Contents pop-up is displayed, the height size of the pop-up window would dynamically adjust to the size of the content. In this example, the height would be approximately 500 pixels.

Does this make sense? I hope so.

Your advise and suggestions are definitely appreciated.

Thank you.

-R

[xataku_nakusute]

well, first off, id suggest making the code occur within the popup's coding, not when the popup is executed.
and i remember that setting height to "auto" when calling a popup always takes default size instead, so thats out.
so id prolly look into something for making a function using resizeTo().
though that sounds much like just restating your question, itll help a bit.

[David Harrison]

If you can find out the number of items in the cart and store it in a variable called number_of_items, you can use the script below. For a demonstration I have used 10 items:

number_of_items=10;
item_height=50;
min_height=250;
max_height=600;

win_height = (item_height * number_of_items) + min_height;

win_height=(win_height>max_height)?max_height:win_height;

shopcart = window.open("", "shopcart", "toolbar=no,status=no,width="+win_height+",height=200");

[ugottasalsa]

Thank you both for the replies.

lavalamp...
The only way I can get the quantity of items in the cart is via this existing php function, ($cart->count_contents());

I guessing then, using the example above, that in order to get the actual number of items in the cart and set the "number_of_items" variable, maybe I could do something like this...

number_of_items = '<?php echo ($cart->count_contents()); ?>';

When I try this example, the height of the popup becomes 600, which is the max. With only 2 items in my cart, it should use the minimum of 250.

Any ideas why this isn't working?

Thanks again.

-R

[David Harrison]

Sorry I assumed that the other content you had in the window takes up 250px of room, as this isn't the case replace the script with this new one:

number_of_items = <?php echo ($cart->count_contents()); ?>;
item_height=50;
min_height=250;
max_height=600;

win_height=(item_height * number_of_items);

win_height=(win_height<min_height)?min_height:win_height;
win_height=(win_height>max_height)?max_height:win_height;

shopcart = window.open("", "shopcart", "toolbar=no,status=no,width=200,height="+win_height);

I have removed the single quotation marks from around the php because the number of items should be a number and with the quotation marks you are making it into a string.

[ugottasalsa]

Thanks for the reply...

Man, this JavaScript thing is a whole different world. I tried using your example, but could not get it to work.

But it gave me an idea... I tried setting all the variables with php, then calling that php result as the height of the pop-up window. I'll be damned... wouldn't ya know it... it worked!

Here's what I did...

********************

$count=($cart->count_contents());
$number_of_items = $count;

define('ITEM_HEIGHT', '20');
define('MIN_HEIGHT','200');
define('MAX_HEIGHT', '600');

$win_height = ITEM_HEIGHT * $number_of_items + MIN_HEIGHT;

if ($win_height >= MAX_HEIGHT) {
$win_height = MAX_HEIGHT;
}

?>
<script language="javascript"><!--
function MiniCart(url) {
window.open(url,'MiniCart','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no ,resizable=yes,copyhistory=no,width=400,height=<?php echo $win_height; ?>,screenX=150,screenY=150,top=150,left=150')
}
//--></script>

****************************

I hope this might help others out that are trying to do the same thing, or maybe something similar.

Thank you lavalamp for the leading me toward the right direction. I really appreciate it.

Have a great day!

Thanks again.

-R

[David Harrison]

Change this line:

$win_height = ITEM_HEIGHT * $number_of_items + MIN_HEIGHT;

to this:

$win_height = ITEM_HEIGHT * $number_of_items;


And then throw in a check to make sure that the window doesn't drop below the min_height.