Determine DOM width of parent div

Permalink
Is there any current functions/helpers in C5 that can be used in a block view/controller to tell the block what the pixel width is of its parent container?

I'm guessing the answer is "No" and that the solution involves using jQuery to set a variable somewhere?

Thanks!

-John

arrestingdevelopment
 
adajad replied on at Permalink Reply
adajad
You can find out with jquery. Something like (untested):

$(this).parent(div).css(width);
arrestingdevelopment replied on at Permalink Reply
arrestingdevelopment
That's what I thought. Thanks!

Now... how do I go about getting the Javascript value stored in a PHP variable so it can be used by the code? Would it be something like this?
<?php
$cssWidth = ?><script type="text/javascript">
     $(this).parent(div).css(width);
</script>
<?php ; ?>

I've never inter-mingled PHP and JS before... I always do it the other way around, embedding PHP values/variable into HTML, so I'm a little unsure.

Thanks!

- John
JohntheFish replied on at Permalink Reply
JohntheFish
The problem is that php has finished executing on the server and the page delivered to the browser before javascript can run. So you can only communicate the value back to the next page, not use it in the php for the current page. (The next page could be the next incarnation of the current page).

So, to do it:
- use jquery and ajax to call a C5 php tool that saves the value in a session variable. (I used a similar technique for Magic Heading)

- use jquery to save the value in a cookie that php can subsequently read

- use jquey to save the value in a hidden form field

- use jquey to attach the value to a link in the query string

If you search, there may even be a jquery plugin that does this sort of thing and takes account of browser resizing and only updates you when it changes.

When the next page is requested by the browser, then you can use the information from the previous page to adjust what php is doing.
ScottC replied on at Permalink Reply
ScottC
if you are relying on javascript to measure and store the value then you might as well use it to set the width on whatever parent element is wrapping the element that is causing you problems.

Unless I am entirely overlooking something.
arrestingdevelopment replied on at Permalink Reply
arrestingdevelopment
Thanks guys. That's all really good advice/instruction.

I'm not sure I'm going to bother proceeding. Basically, I have a situation on a "Management Team" page where I'm using a page_list block to gather the children pages (a portrait image, name, title and bio information for each management team member) and generate the HTML structure for some jQuery tabs. The tabs have a thumbnail of the team member's bio pic with their name and title beneath. Right now, there are six team members, so I have the code generating the correct-sized thumbnail image for that number of team members. But what if there are 7? Or 9? Or only 4? I'd like to have the thumbnails size based off of the number of team members being displayed... and didn't want to use CSS sizing since that relies on the browser doing it and most of them suck at it... I'd rather display a properly-sized thumbnail so it's higher quality.

So... I was thinking that in my foreach loop, I could get the width of the parent DIV container, then divide that by the number of child pages and VOILA! A quick and easy calculation for the thumbnail size.

I COULD just hard-code the page-width into the page_list template... but thought I'd see if it was reasonable to make this as flexible as possible... so I could re-use the functionality elsewhere without having to worry about it causing problems. Like if I make a similar block that could be put into an area, it would be great if the thumbs were sized to fit the width of the area, etc.

Pipe dream? Should I just accept the browser re-sizing the images and stick with CSS (i.e. % widths)?

Thanks!

- John
JohntheFish replied on at Permalink Reply
JohntheFish
If you really think it is worth the effort, you could pick a fixed size of thumbnail, but use jQuery to tweak the margins between them to spread them nicely.