PHP/JavaScript Duplicating Boxes - Math

PHP
1

In case you can’t already tell, I have no clue what to title this :slight_smile:

First things first, I want to use only HTML, CSS, and PHP. (JavaScript OK to, see edit at the bottom)

Next, here is an image
Image: (Blue box is used advertisement, and the yellow box is the footer)

image
image138×647 5.26 KB

The above screenshot is of the sidebar of my website. The blue box is the advertisement. I want to have JavaScript auto-calculate how many ads can fix on that page, than put that many ads on the page. For example, in the screenshot above, there is enough space for another ad (blue box), so end end result would be two ads (blue boxes) when the page loads. Right now, I have the following code:

control.php
Since this file is a huge mess, I’ll explain it. I basically takes one of three ads (Blue Box), adds the “Advertisement” text, and saves it to a variable. A different image is randomly picked on each page load.

<?php
    $imagesside = array('<p class="center" style="padding-right:20%;">Advertisement</p><a href="/"><img style="padding: 20px; width:100%; max-width:240px; height:auto;" src="/images/mos1.png" alt="text"></a>', '<p class="center" style="padding-right:20%;">Advertisement</p><a href="/"><img style="padding: 20px; width:100%; max-width:240px; height:auto;" src="/images/mos2.png" alt="text"></a>', '<p class="center" style="padding-right:20%;">Advertisement</p><a href="/"><img style="padding: 20px; width:100%; max-width:240px; height:auto;" src="/images/mos3.png" alt="text"></a>');
?>
<?php
    $random_side = array_rand($imagesside);
?>

page.php
Basically just takes that variable and adds it’s contents (Ad and text) to the page.

	       <div class="articlesidebar">
	            <ul class="relatedlinks">
			<li class="nobullet"><p class="bold">Related Articles</p></li>
	                <li><a href="/">ArticleName</a></li>
	                <li><a href="/">ArticleName</a></li>
	                <li><a href="/">ArticleName</a></li>
	                <li><a href="/">ArticleName</a></li>
	            </ul>
	            <ul class="relatedlinks">
			<li class="nobullet"><p class="bold">Quick Links</p></li>
	                <li><a href="/">Home</a></li>
	                <li><a href="/">Contribute</a></li>
	                <li><a href="/">Report An Error</a></li>
	            </ul>
	       <?php echo $imagesside[$random_side]; ?>
	        </div>

The code right now exports one box, no matter how long the page is. I want JavaScript to somehow determine the length of the page, subtract the length of the header, footer, and “Related Links”, than figure out how many ads can fit in the remaining space. Additionally, if the visitor has JavaScript turned off, I want just one ad to show, like how it is currently.

Please let me know if this is possible, and if so, how I would begin doing it.

Thanks!

Edit: I guess JavaScript will be needed (Thanks @windbeneathmywings). I am willing to use it, however I do want a fallback. (So if JavaScript is turned off, only one ad will show, like I have now.)

2

PHP doesn’t have any knowledge about the size of the page in the browser. This is going to require JavaScript. After the content is rendered on the page JavaScript will need to be be used to make those calculations via reading the document object model. Not to mention have you considered how the page will adapt to being resized. In theory when the page is resized the calculation would need to be made again and ad slots adjusted. That can only be achieved through client-side scripting via JavaScript.

2 Likes
3

Can I first and foremost suggest that stuffing as many ads as you can into the space is going to look blatant, and annoying, to most people.

That said.

What do you do if NONE of the ads will fit?
How do you know what size the ads are?
How do you determine which ad to show first?

Once you have enough information in the javascript, it’s certainly doable. For that matter, it’s probably doable with CSS if your ads, header, and footer are a fixed size…

4

Why even deal with “Fit” in the first place.
Just say I will accept or show up to X amount of ads in the layout and have the height of the page adjust to the content provided with footer below.
CSSPLAY has some great examples of pure CSS flexible layouts.
http://www.cssplay.co.uk/layouts/

5

Cough, Cough…Pagination along with Flex or Grids…I did something similar with Flex as it is more flexible (pun intended).

6

True, but I do need something in that spot as the user scrolls down, I don’t really want it blank.

Then none are shown. But I will always make sure at least one will fit.

None of them are :slight_smile:

The articles won’t really be long enough for that, and I truly despise sites that have that.

On second thought, It might be easier to just do this all manually.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.