SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pages jumpy/flickering on navigating to other pages on the site

    Hi

    I have a site originally ASP which I have now converted to PHP . The pages are all the same size (re. height/width) but the php pages are jumpy or flickering on navigating through the site pages, alomost like they are being reloaded. Doesn't happen with the asp pages. Both ASP & php pages use sql to retrieve database info. Both contain include files for the footer which include a single line of javascript to display a lightbox on click.

    Hoping someone may have seen this issue before.

    Best

    Sue

  2. #2
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)
    Sue,

    Do you know when they lived as ASP pages where they set not to cache and then have a loader that prepared the content. So when this was converted to PHP the HTML may still specify no cache which would cause all data to reload each time even if it doesn't change from one load to the next? This will cause flickering.

    Can you post the whole php page?

    Steve
    ictus==""

  3. #3
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Steve,

    Thanks for your reply. No there wasn't any non-cache effect in the header of the ASP pages. Not using a loader for the content either. Newbie to PHP so pages are definitely a work in progress.

    This is an example of the HTML page:

    <?php
    include("_private/logon_details.php"); ?>
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Language" content="no-bok">
    <meta charset="iso-8859-1">

    <link rel="icon" type="image/png" href="images/favicon.ico">
    <link rel="stylesheet" href="css/css-main.css" type="text/css" media="screen" />


    </head>
    <body>
    <div class="wrapper">
    <div class ="innerwrap">
    <div class="home-link"><a href="index.php"></a></div>
    <div class="navigation">
    <ul>
    <li><a href="prosjekter.php">PROSJEKTER</a></li>
    <li><a href="samarbeidspartnere.php">SAMARBEIDSPARTNERE</a></li>
    <li><a href="om-oss.php">OM OSS</a></li>
    <li>TJENESTER</li>
    <li><a href="http:www.blogspot.com/">V┼R BLOGG</a></li>
    <li><a href="kontakt-oss.php">KONTAKT OSS</a></li>
    </ul>
    </div>


    <div class ="tab_container">
    <div class= "capacity_nav">
    <ul class="tabs">
    <li><a href="metallforming.php">Metallforming</a></li>
    <li><a href="mekanisk-bearbeiding.php">Mekanisk Bearbeiding</a></li>
    <li><a href="overflatebehandling.php">Overflatebehandling</li></a></li>
    <li class="maintab"><a class="activetab"href="#">Sammenf°ying</li></a></li>
    <li><a href="varmebehandling.php">Varmebehandling</li></a></li>
    <li><a href="produktutvikling.php">Produktutvikling</li></a></li>
    <li><a href="verkt°yutvikling.php">Verkt°yutvikling</li></a></li>
    <li><a href="montasje.php">Montasje</li></a></li>
    </ul>
    </div>
    <div class="subcapacity_nav">
    <ul class="subcat">
    <li><a href="sveising-TIG.php">Sveising TIG</a></li>
    <li><a href="sveising-MIG.php">Sveising MIG</a></li>
    <li><a href="lodding.php">Lodding</li></a></li>
    <li><a href="liming.php">Liming</li></a></li>
    <li><a class ="activesubtab" href="#">Friction Stiring Welding</li></a></li>
    <li><a href="robotsveising.php">Robotsveising</li></a></li>

    </ul>
    </div>
    <div class="content_tjenester">
    <h1>FRICTION STIRING WELDING</h1>
    <hr class ="shiftleft16" >
    <?php $subcapacity="Friction Stiring Welding";
    include("script/displaysubcapacity.php");?>

    </div>

    </div>
    </div>
    <?php include("footer.php");?>

    </div>




    </body>
    </html>

    The displaysubcapacity.php script :

    <?php
    $rsSubCapacity = mysql_query("SELECT * FROM S_tbl_sub_capacity where name= '$subcapacity'")or die(mysql_error());

    if ($rowCap = mysql_fetch_assoc($rsSubCapacity)) {

    $SubCapID=$rowCap['id'];
    $rsCompanySubCapacities=mysql_query("SELECT * FROM S_tbl_company_sub_capacities where fk_sub_capacity_id= '$SubCapID'")or die(mysql_error());
    while ($rowCompSubCap = mysql_fetch_assoc($rsCompanySubCapacities)) {
    $CompanyID=$rowCompSubCap['fk_company_id'];

    $rscompany = mysql_query("SELECT * FROM S_tbl_company where id= '$CompanyID'")or die(mysql_error());
    while ($result = mysql_fetch_assoc($rscompany)) {?>

    <h2><?php echo $result['name'];?> </h2>
    <p class="reducespace">
    <?php echo $result['address']."". $result['postal_code']. " " . $result['postal_area'] ;?>
    </p>
    <p class="reducespace"> Telefon: <?php echo $result['phone1'];?>
    </p>
    <p>
    <?php echo '<a class ="maillink" href="mailto:' . $rsCompany['e_mail'] . '">' . $result['e_mail'] . '</a>';?>
    </p>
    <br>
    <p class="reducespace">
    <?php echo $rowCompSubCap['description'];?>
    </p>
    <?php
    }
    }
    }


    ?>


    And the footer.php script:

    <div class="footer">

    <a class="bedrift1 hidetext" href = "javascript:void(0)" onclick = "document.getElementById('light1').style.display='block';document.getElementById('fade').style.display='block'">Sauda Maskinering AS</a>
    <div id="light1" class="white_content">
    <?php
    $Bedriftstr="bedrift";
    include("script/displaybedrift.php");?>

    <a class="close" title="close window" href = "javascript:void(0)" onclick = "document.getElementById('light1').style.display='none';document.getElementById('fade').style.display='none'">X</a></div>
    <div id="fade" class="black_overlay"></div>
    <?php mysql_close($con); ?>



    Many thanks

    Sue

  4. #4
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)
    Hi Sue,

    Is this site public enough so we can view and analyze it with firebug or dragonfly? If so can you post a link? If not then could you post your C.S.S.

    Please also post the contents of
    • include("script/displaybedrift.php");
    • include("_private/logon_details.php");
    as if we visit the link we won't see the php of these files.

    We will figure this out
    Steve
    ictus==""

  5. #5
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,398
    Mentioned
    81 Post(s)
    Tagged
    3 Thread(s)
    Is it the same in IE as Firefox? From memory IE waits until everything is ready before it loads the page and Firefox does not and that can have an effect.
    I assume it is not the fact that some pages have a vertical scroll bar and others do not.

  6. #6
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Just tested in Firefox, works perfectly, no jumping/flickering at all. Jumps in Chrome & Safari however & at its worse in IE. Any tips on how I can achieve the same smooth transition I see in FF in the other browsers?

    Many Thanks

    Sue

  7. #7
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Sue Jespersen View Post
    Hi

    Just tested in Firefox, works perfectly, no jumping/flickering at all. Jumps in Chrome & Safari however & at its worse in IE. Any tips on how I can achieve the same smooth transition I see in FF in the other browsers?

    Many Thanks

    Sue
    You can load your page content with AJAX after a skeleton page quickly loads - even in IE.
    ictus==""

  8. #8
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,398
    Mentioned
    81 Post(s)
    Tagged
    3 Thread(s)
    I only work on small sites and from memory I improved the flickering by including the header and footer on each page and only changing the page content; but this may not work in your case.

    I suppose the more page content the more the "flicker".

  9. #9
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Steve

    I haven't loaded page content with AJAX before, will do a search now on how to do it. If that doesn't resolve the issue can I still post a link to the pages so you can have a look?

    Many thanks for the info & help, very much appreciated.

    Best

    Sue

  10. #10
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again

    Decided to post link hope that's alright : iutvikling.no/ny/engineering-iutvikling.php. It is really only on the page TJENESTER that the flickering occurs.

    The script for display bedrift.php is :

    <?php
    $Bedrift=utf8_decode($Bedriftstr);

    $rs = mysql_query("SELECT * FROM S_tbl_company where name= '$Bedrift'")or die(mysql_error());

    while ($result = mysql_fetch_assoc($rs)) {?>
    <h2><?php echo $result['name'];?> </h2>
    <p class="reducespace">
    <?php echo $result['address']."". $result['postal_code']. " " . $result['postal_area'] ;?>
    </p>
    <p class="reducespace"> Telefon: <?php echo $result['phone1'];?>
    </p>
    <p>
    <?php echo '<a class ="maillink" href="mailto:' . $result['e_mail'] . '">' . $result['e_mail'] . '</a>';?>
    </p>
    <br>
    <p>
    <?php echo '<a class= "weblink" href="'. $result['web_address']. '">' . $result['web_address'] .'</a>'; ?>
    <br><br>
    <?php echo $result['description'];
    }

    ?>


    The logon.php without the particulars is :


    <?php

    // Connects to Database
    $con = mysql_connect("server", "user", "password") or die(mysql_error());
    mysql_select_db("database", $con) or die(mysql_error());
    ?>

    Thanks again Sue

  11. #11
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)
    Hi Sue,

    Thanks for the link!

    I think the flickering is due to your background image loading, Ajax won't help this as it is something that will be noticeable if you load it later. You could use a JS transition effect that would fade the background image for all your pages so it looks like it is done on purpose.

    You can also try the following:
    HTML Code:
    <!--[if IE]>    
      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>    <meta http-equiv="Page-Enter" content="blendTrans(Duration=.01)" />        
      <meta http-equiv="Page-Exit" content="blendTrans(Duration=.01)" />    
      <script language="javascript" type="text/javascript">        
        try {
                  document.execCommand("BackgroundImageCache", false, true);        
              } catch(e) {}    
       </script>
    <![endif]-->
    If your host allows .htaccess files then take a look here:http://www.explainth.at/en/tricks/flickfix.shtml

    Nothing obvious in your $Bedrift code that contributes to the flashing.

    Another idea is to take out the background image replacing with a basic colour and see if you still get the flash. If you don't then the background image is causing this issue in IE. Your background is 222.53 Kb, while that may not seem like a large image, it is for a background. If you are set on using this background then trying using GIMP or Photoshop (or your favourite image editor) and compress this image try 12-20 % quality. This should be between 30 - 50 Kb.

    Let us know how this goes.

    Regards,
    Steve
    ictus==""

  12. #12
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much for looking at the code Steve. Thanks too for the link, suggestions & HTML code, very much appreciated. I will try all your suggestions & let you know how I get on.

    Have a great day there.

    Regards

    Sue


Tags for this Thread

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
  •