SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Any way to work out current position on the page?

    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?

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,839
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies. It looks like I will have to look into Javascript to do this.

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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.

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Ok, hang on and I'll see what I can come up with

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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>&nbsp;</p>
    Does that help?

  9. #9
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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.

  10. #10
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    <script>
    $(document).ready(function(){
    var h = $("#content").height();
    alert("The current height of the content div is " + h + "px");
    if (h < 500){
    document.write("CONTENT ADVERT");
    }
    });
    </script>

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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");
      }
    });

  12. #12
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,839
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •