Any way to work out current position on the page?

**SandyPodenco** · Nov 25, 2012 14:51

Is there a variable or some other way of finding out in PHP how far down the page the current position is (if that makes any sense)? Basically for pages with not much information on I want to display an advert at the bottom of the page, but for pages with a lot of information I want to put the advert in the sidebar. To decide what to do I need to know where the page ends, so I need a function something like current echo position.

Any suggestions?

**Pullo** · Nov 25, 2012 14:59

Hi there,

PHP is a server side language and doesn't have much concept of how long your pages are.
You could easily do this with JavaScript though.

**felgall** · Nov 25, 2012 19:47

The PHP always runs before the page loads so none of the page is in the browser window at the time the PHP runs. Unless there is a # in the address the page will load at the top so you could assume a position of 0,0 and position the ad on that basis. Where the address contains a # the value after the # will be an id in the page that will be positioned as close to the top of the browser viewport as possible - but PHP has no way to work out what that will be as it doesn't know how big the viewport is or what font size that your visitor is using.

**SandyPodenco** · Nov 26, 2012 02:34

Thanks for the replies. It looks like I will have to look into Javascript to do this.

**Pullo** · Nov 26, 2012 02:38

Good morning,

A couple of pointers:
I would start off by positioning the element at the bottom of the page in your HTML.
This will be the default position and ensures that people with JavaScript turned off still get to see it.
Then, use JavaScript to get the height of the document and if that is greater than a predefined number, move the element to the sidebar.
It's not too complicated, so let us know if you need any help.

**SandyPodenco** · Nov 26, 2012 02:43

Thanks Pullo - I don't know enough about Javascript to code this myself, so I am going to have to find some code that does what I need without too much modification.

**Pullo** · Nov 26, 2012 02:44

Ok, hang on and I'll see what I can come up with

**Pullo** · Nov 26, 2012 03:14

So, here's a quick example which does what you want:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Repositioning example</title>
    <style type="text/css">
      body{
        font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
        background: #42413C;
        margin: 0;
        padding: 0;
        color: #000;
      }
      
      h1, p{
        margin-top: 0;  
        padding-right: 15px;
        padding-left: 15px;
      }
      
      #container{
        width: 960px;
        background: #FFF;
        margin: 0 auto; 
        overflow: hidden; 
      }
      
      #sidebar{
        float: left;
        width: 200px;
        background: #EADCAE;
        padding-top: 15px;
        padding-bottom: 10px;
      }
      
      #content{
        padding: 10px 0;
        width: 760px;
        float: left;
      }
      
      #red{
        width:100%; 
        height:50px; 
        background:red; 
      }
    </style>
    
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  </head>
  
  <body>
    <div id="container">
      <div id="sidebar">
        <p>
          This is the sidebar.<br />
          The red div will get pushed over here when the content in the main div exceeds a height of 500px
        </p>
      </div>
      <div id="content">
        <h1>Home</h1>
        <p>This is your main page with a bit of text on it.</p>
        <div id="red">This is a lovely red div. Isn't it tasteful?</div>
      </div>
    </div>
    
    <script>
      $(document).ready(function(){
        var h = $("#content").height();
        alert("The current height of the content div is " + h + "px");
        if (h > 500){
          $("#sidebar").append($("#red"));
        }
      });
    </script>
  </body>
</html>

As you will see, there is a div#red which is initially placed within div#content.
If the height of div#content grows to more than 500px, div#red is repositioned to div#sidebar.

You can alter the height by pasting the following into div#content a few times: <p> </p>
Does that help?

**SandyPodenco** · Nov 26, 2012 03:51

Originally Posted by Pullo

As you will see, there is a div#red which is initially placed within div#content.
If the height of div#content grows to more than 500px, div#red is repositioned to div#sidebar.

You can alter the height by pasting the following into div#content a few times: <p>*</p>
Does that help?

Thanks Pullo - that looks like a good start. The only problem would be is that the advert for the content would be a letterbox, whilst the advert for the sidebar would be a skyscraper, so I would have to display one of two different adverts.

**SandyPodenco** · Nov 26, 2012 04:12

Actually I have just realised that I just need to have the code at the bottom of the content div and in the sidebar and display the ad in the content if the h variable is less than a certain value, and in the sidebar if the h variable is greater than a certain value. Eg

**Pullo** · Nov 26, 2012 04:16

Exactly!
However, it might be better to hardcode both adverts into your HTML, then set the property of the advert in the sidebar to display:none.
This ensures that people without JavScript get to see an advert, too.

Then, as you say, you'd use jQuery to toggle what the visitor sees based on the height of the page.
Something like:

Code JavaScript:

$(document).ready(function(){
  var h = $("#content").height();
  if (h > 500){
    $("#sidebarAd").css("display", "block");
    $("#contentAd").css("display", "none");
  }
});

**SandyPodenco** · Nov 26, 2012 04:52

Thanks Pullo - I will experiment. The ads are google ads, which are Javascript, so if Javascript is blocked there would be no ads anyway. Maybe as a refinement I can set it up to show a HTML ad as a default, then display the google ads as appropriate.

**felgall** · Nov 26, 2012 14:28

Don't use document.write to insert content from JavaScript - give the place you want to insert it an id and then use getElementById and innerHTML to insert the content - that way your JavaScript can be at the bottom of the page where it belongs rather than jumbled with the HTML.

Unfortunately Google is still providing their ad JavaScript so it will work in the long dead Netscape 4 browser and have not yet updated it to use 21st Century JavaScript - from what I have seen Google don't have any JavaScript programmers and rely on their staff who work with other languages to grab antiquated JavaScript to work their services. Their JavaScript is so attrocious that for most Google services I turn JavaScript off before visiting - only where their attricious mess is being used in other people's pages - as with adsens - do I allwow Google's javamess to run.

User Tag List

Thread: Any way to work out current position on the page?

Thread Tools

Display

Any way to work out current position on the page?

Bookmarks

Bookmarks

Posting Permissions