SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Poll Graphics

  1. #1
    SitePoint Member
    Join Date
    Sep 2003
    Location
    Salt Lake City
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Poll Graphics

    Is there a using CSS in which to create a line?

    I am creating a little function that shows an individual the completion level of thier project in a percent (i.e., 34% done) and in my non-CSS days I took that number and had a 1 pixel image repeated 34 (or however many) times.

    I would love to not have to use a picture and am hoping that CSS has a solution. Does anyone have any ideas?

    Thanks in advance,
    whatknows

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Shoot, even "back then" you didn't need to repeat it

    <img src="pixel.gif" height="5" width="34">

    Nowadays, I'd use another element

    d.bar {
    background: color image(image/path.gif) repeat-x;
    height: 5px;
    }

    <div class="bar" style="width:34px">&nbsp;</div>

    Or something like that.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!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">
    <head>
    <title>Untitled</title>
    <style type="text/css">
    #container {
    position: relative;
    width: 200px;
    height: 20px;
    background: yellow;
    }
    #bar {
    width: 34%;
    height: 20px;
    background: red;
    }
    #percent {
    position: absolute;
    top: 0;
    left: 5px;
    font: bold 12px/20px Arial, sans-serif;
    vertical-align: center;
    }
    </style>
    </head>
    <body>
    <div id="container"><div id="bar"></div><div id="percent">34% completed</div></div></div>
    </body>
    </html>
    If you want to do the same thing in a more complicated way

  4. #4
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ya - this can definitely be done any of several different ways.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  5. #5
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nothin' wrong with using
    Code:
    <img src="bar.png" alt=" " style="width: _PERCENT_" /><br />
    _PERCENT_ Complete
    or something like that in my mind. I wouldn't use a <div>, since it's a bit of a semantic abuse, but as these things go that's small potatoes, I guess. :-)

    ~~Ian

  6. #6
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Agreed.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  7. #7
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    2nd thought...

    What's probably wanting something that can be put out by a server script as it's processing and not necessarily need to be altered by a client-side script, maybe?

    Just postulating here, but you could probably send out a main HTML page that says "Thanks and we're processing it now," or whatever. Then in a linked CSS file, just redefine the element. Uh, assuming that the status bar is id="status":
    Code:
    #status { width: 0%; }
    /*do some processing*/
    
    #status { width: 5%; }
    /*do some processing*/
    
    #status { width: 10%; }
    /*do some processing*/
    
    #status { width: 15%; }
    /*etc.*/
    You might even update a written number in browsers that support generated content with something like:
    Code:
    #status:before { display: block; text-align: center; content: "0% Complete"; }
    /*do some processing*/
    
    #status:before { content: "5% Complete"; }
    /*do some processing*/
    
    #status:before { content: "10% Complete"; }
    /*etc.*/
    Don't know if this it's really practical. Keep in mind also that CSS files can be cached, so if this is something a person might do more than once, they might think the processing's done when it isn't. If that's a big deal, you might consider using a unique identifier for each process, maybe? :-)

    ~~Ian


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
  •