Rotating text links on homepage each time it loads

Discussion in 'HTML & Website Design' started by krebs, Dec 11, 2009.

  1. #1
    Hey all,
    I want to have a section on my home page rotate a block of text and/or links that lead to various other pages on my site. Like this, I design 3 or 4 squares of links then each time the page is loaded, a different one of those squares appear in the appropriate section.
    Can be random, can be in a certain order, whatever. I just want there to be different web links each time the page is loaded.
    I want to do this so the articles section block on the homepage always looks fresh for people who came back 3 or 4 times.

    What is this process called? How can I do it? Can I do it with php or html? Can I do it with a block of text and/or images?

    Thanks again, everyone.
     
    krebs, Dec 11, 2009 IP
  2. aquilax

    aquilax Member

    Messages:
    126
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    33
    #2
    Use something like this with PHP:
    
    $links = array(
      '<img src="1.jpg" />',
      '<img src="2.jpg" />',
      '<img src="3.jpg" />',
      '<img src="4.jpg" />',
    );
    echo $links[rand(0, count($links)-1)];
    
    PHP:
     
    aquilax, Dec 11, 2009 IP
  3. krebs

    krebs Greenhorn

    Messages:
    44
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    18
    #3
    What about doing it with a block or text. 300x300px, for example? Create the blocks as separate php files, then where do I insert that?

    Thanks in advance.
     
    krebs, Dec 11, 2009 IP
  4. aquilax

    aquilax Member

    Messages:
    126
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    33
    #4
    Almost the same:

    
    $links = array(
      '1.php',
      '2.php',
      '3.php',
      '4.php',
    );
    include($links[rand(0, count($links)-1)]);
    PHP:
     
    aquilax, Dec 11, 2009 IP
  5. krebs

    krebs Greenhorn

    Messages:
    44
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    18
    #5
    Great, now I just have to replace my homepage, index.html to index.php. If I just delete the index.html and upload the index.php I should be fine, right? Will the index.php automatically be used as the homepage and go right to "mypage.com/"?
     
    krebs, Dec 11, 2009 IP
  6. krebs

    krebs Greenhorn

    Messages:
    44
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    18
    #6
    I tried to insert the code you suggested but it doesnt seem to work. Am I missing something?

    <?php
    $links = array(
    'includes/arts1.php',
    'includes/arts2.php',
    );
    include($links[rand(0, count($links)-1)]); ?>
     
    krebs, Dec 11, 2009 IP
  7. vinpkl

    vinpkl Active Member

    Messages:
    899
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    58
    #7
    vinpkl, Dec 12, 2009 IP
  8. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #8
    You do understand this is a particularly bad idea, right? Users tend to go off a page, then return to try a new link. What happens when the next link he wanted to try is gone? Maybe he's confused by its not being there, or maybe he's pissed (American version). Either way, he's not happy.

    You may be bored by the content of your page, but the visitor (we hope) isn't. He's exploring, looking to find whatever it is that brought him to your page. Don't pull the rug out from under his mouse.

    cheers,

    gary
     
    kk5st, Dec 12, 2009 IP
  9. hdewantara

    hdewantara Well-Known Member

    Messages:
    541
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #9
    A visitor should stay on the page he's choosen.
    And we could vary a section of that page using ajax (async. javascript).

    See an example below:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    
    <head>
    <title>ajax to load various content</title>
    <script type="text/javascript" src="ajaxlib.js"></script>
    
    <script type="text/javascript">
    
    //TIMER TO UPDATE CHANGES TO PAGE.
      timerId=0;
      msec=100;
    
    function updatepage(){
      document.getElementById("page").innerHTML=ajaxresp;
    }
    </script>
    
    <style type="text/css">
    body{
      padding: 1em;
    }
    
    #wrapper{
      float: left;
      margin: 0em 1em 1em 0em; /* top right bottom left*/
      width: 300px;
      border: 1px solid black;
    }
    
    #page{
      width: 300px;
      height: 300px;
      overflow: auto;
      padding: 1em;
    }
    
    #navi{
      width: 300px;
      background-color: lightgray;
      text-align: center;
    }
    
    </style>
    
    </head>
    
    <body onload="javascript:timerId=setInterval(updatepage,msec);">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi a mauris. </p>
      <div id="wrapper">
        <div id="page"></div>
        <div id="navi">
          <a href="javascript:ajaxreq('page1.php');">page1</a>
          <a href="javascript:ajaxreq('page2.php');">page2</a>
          <a href="javascript:ajaxreq('page3.php')">page3</a>
        </div>
      </div>
    <p>Curabitur risus urna, placerat et, luctus pulvinar, auctor vel, orci. Mauris et dolor. ...</p>
    </body>
    </html>
    
    HTML:
    It calls an ajax function declared in ajaxlib.js shown below,
    and provides links to request php files on your server.

    So you just have to rewrite your various articles into some php files.

    // SIMPLE AJAX LIBRARY.
    // GET REQUEST METHOD ONLY, X-BROWSERS COMPATIBLE, UNOPTIMIZED.
    // 3:23 PM 12/18/2009 HENDRA D.
    // USAGE: CALL AJAXREQ("FILE.PHP"), THEN CHECK AJAXRESP AT TIMES.
    // IF SUCCESSFUL, AJAXRESP SHALL RETURNS CONTENT OF FILE.PHP
    // ELSE AN HTTP ERROR OR a CURRENT REQUEST STATE.
    
    // GLOBAL VARS
    var 
      ajaxresp="";
    
    function ajaxreq(url){
    var 
      ajax=null;
    
      // SUBFUNCTIONS
      function statef(){
        with (ajax){
          if (readyState==4){
            if (status==200){
              ajaxresp=responseText;  // RETURNS FILE.PHP CONTENT.
    	  delete ajax; ajax=null; // SAVE RESOURCE?
            }
            else{
              ajaxresp=status;        // RETURNS HTTP ERROR CODE.
            }
          }
          else{
              ajaxresp=readyState;    // RETURNS 0-3: UNSENT, OPENED, RECEIVING HEADERS, OR LOADING CODE.
          }
        }
      }
    
      // INITIALIZATION
      ajaxresp="";
      try{
        ajax = new XMLHttpRequest(); //FF,opera,safari,..
      }
      catch(e){
        try{
          ajax = new ActiveXObject("Msxml2.XMLHTTP"); //IE
        }
        catch(e){
          ajax = new ActiveXObject("Microsoft.XMLHTTP"); //IE other
        }
      }
      if(ajax == null){
        window.alert("Your browser does not support AJAX.");
        return;
      }    
      else{
        ajax.onreadystatechange=statef;
        ajax.open("GET",url,true);
        ajax.send(null);
      }
    }
    
    HTML:
     
    hdewantara, Dec 18, 2009 IP