SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    Jul 2006
    Location
    New Zealand
    Posts
    1,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    PHP css preloader not loading

    Hi all,

    I am developing a php progress bar so i can get to see how much of somthing they have till they reach their target dynamically, this is my attempt below to draw out a progress bar and see how far i am from my target,
    PHP Code:
    function processbar($i,$e)
    {
        
    //
        
    $width round(($e $i) * 100);
        
    $display '<style type="text/css">';
        
    $display .= ' #progress {   display: block;   }';
        
    $display .= ' #bar {   display: inline;   width: '.$width.'px;   height: 10px; background-image:   }';
        
    $display .= ' span:before {   display: block;   content: "'.$_progress.'%";   }';
        
    $display .= '</style>'."\n";
        echo 
    $display;
        
    flush();
        
    //
    }
    //
    function progress_bar($_image$_lenght)
    {
        
    $display '<style type="text/css">';
        
    $display .= '
        #bar
        {
            display: none;
            width: 0px;
            height: 10px;
        }'
    ;
        
    $display .= ' span:before
        {
            display: none; 
            content: "0%"; 
        }'
    ;
            
    $display .= '</style>';
            
    $display .= '<div id="progress">';
            
    $display .= ' <img id="bar" src="'.$_image.'" alt="Progressbar" title="Progressbar" />';
            
    $display .= ' <span id="percent_progress"></span>';
            
    $display .= '</div>';
            echo 
    $display
        
    flush();
    }
    //
    $max=1000;
    $cexp=950;

    for(
    $i=1$i>$max$i++)
    {
        echo 
    "".$i."";
        for(
    $e=1$e>=$cexp$e++)
        {
            
    //
            
    progress_bar('progress.gif'200);
            echo 
    progressbar($i,$e);
            
    //    
        
    }

    What i am hopiing to achieve is have the current is the exact they have atm and how much they need remaining to go to the next level,

    only problem is that its not working the way i am wanting to display the current amount of experience they have and how much they have left.

    How can i achieve that with the code above can anyone help me to achieve the above,

    Thanks,William

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Neither of those for loops will ever run because the conditions (the middle part) are never true -- $i starts at 1 which is not greater than 1000, and $e starts at 1 which is not greater than or equal to 950.

    I don't think you need a loop anyway. You just want to show a bar whose width is proportional to ($cexp / $max) right?

    You can also pull all that CSS out of the code and into your page, and just use PHP to output an inline style for the width (style="width: ##") on the element.

  3. #3
    SitePoint Wizard
    Join Date
    Jul 2006
    Location
    New Zealand
    Posts
    1,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yea i soon realised that i went ahead with another method of mine that did the trick its simply this

    Code:
    <html>
        <head>
          <link type="text/css" href="http://jqueryui.com/latest/themes/base/jquery.ui.all.css" rel="stylesheet" />
          <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.4.2.js"></script>
          <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc1/jquery-1.4.1.js"></script>
        <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc1/ui/jquery-ui.js"></script>
        
          <script type="text/javascript">
          $(document).ready(function(){
            $("#progressbar").progressbar({ value: 5});
          });
          </script>
        </head>
        <body style="font-size:62.5&#37;; width:169px;">
          
        <div id="progressbar"></div>
        
        </body>
        </html>
    It all works now thanks for the help anyway mate,


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
  •