WEB styling a function ouput

Discussion in 'OT Technology' started by drpepper, Oct 3, 2008.

  1. drpepper

    drpepper Active Member

    Joined:
    Nov 13, 2006
    Messages:
    38,076
    Likes Received:
    2
    Location:
    San Antonio
    function:

    Code:
    $dimages .= '<center><a href="'.$dl->url.$image['name'].'"><img src="'.$dl->url.$image['thumb'].'" alt="'.$file['name'].'" title="'.$file['name'].'" border="0" /></a><br />Posted on '.vbdate($vbulletin->options['dateformat'], $image['date'], true).'<br />'.$edit.'</center>';
    This creates thumbnails that are displayed on top of each other like so:
    []
    []
    []
    []

    What i need is that they be displayed like so:
    [] [] [] []
    [] [] [] []

    This is due to the awful waste of space it takes to just stack 20 thumbnails instead of just put them side by side.

    This is the html.

    Code:
    <td class="alt2" colspan="4" valign="top">   
           $dimages
    </td>
    this might very well be due to the table layout, but im clueless with tables.
     
  2. whup

    whup I wish you had children and.. so that I could step

    Joined:
    Feb 12, 2007
    Messages:
    1,603
    Likes Received:
    0
    Are the images all the same width and height?

    Chuck them all in a div with a fixed width, and float the images to the left. They'll wrap to the next line, so if they're all a standard height and width, it'll flow nicely into columns and rows.

    Understand, or do you need code?
     
  3. drpepper

    drpepper Active Member

    Joined:
    Nov 13, 2006
    Messages:
    38,076
    Likes Received:
    2
    Location:
    San Antonio
    i think i understand, but yes they are all the same width and height for the most part.

    would i put the div in the function, or outside?

    like <div id="meh">$function</div>?

    or $function='<div> ?

    mind putting code for reference?
     
  4. drpepper

    drpepper Active Member

    Joined:
    Nov 13, 2006
    Messages:
    38,076
    Likes Received:
    2
    Location:
    San Antonio
    wait, im thinking inside, right?
     
  5. whup

    whup I wish you had children and.. so that I could step

    Joined:
    Feb 12, 2007
    Messages:
    1,603
    Likes Received:
    0
    CSS:

    Code:
    div.gallery-grid {
        width: 400px;
    }
    div.gallery-grid img {
        float: left;
    }
    
    Then the HTML:

    Code:
    <div class="gallery-grid">
    <img /><img /><img /><img /><img /><img /> etc
    </div>
    
    Then you can play around with the div width, + img border, padding etc.

    You might want to images in divs and make those divs float instead, as you're probably better off changing border/margin/padding on divs than img e.g.

    Code:
    div.gallery-grid {
        width: 400px;
    }
    div.gallery-grid div.image-wrapper {
        float: left;
    }
    
    Code:
    <div class="gallery-grid">
    <div class="image-wrapper"><img /></div> etc
    </div>
    
    I might have got some crap wrong seeing as this is from my head but I'm sure you can fix any silly mistakes :p
     
  6. drpepper

    drpepper Active Member

    Joined:
    Nov 13, 2006
    Messages:
    38,076
    Likes Received:
    2
    Location:
    San Antonio
    ok almost got it. just need to adjust padding
     
  7. drpepper

    drpepper Active Member

    Joined:
    Nov 13, 2006
    Messages:
    38,076
    Likes Received:
    2
    Location:
    San Antonio
  8. whup

    whup I wish you had children and.. so that I could step

    Joined:
    Feb 12, 2007
    Messages:
    1,603
    Likes Received:
    0
    Haha there's only me and you in this thread, I have no idea who else you're talking to!
     
  9. drpepper

    drpepper Active Member

    Joined:
    Nov 13, 2006
    Messages:
    38,076
    Likes Received:
    2
    Location:
    San Antonio
    oh well thank you brotato. fuck everyone else :p
     
  10. biawokauns

    biawokauns New Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
    you're welcome
     
  11. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,923
    Likes Received:
    11
    Location:
    Los Angeles
    :rofl:

    stealing creditz
     
  12. drpepper

    drpepper Active Member

    Joined:
    Nov 13, 2006
    Messages:
    38,076
    Likes Received:
    2
    Location:
    San Antonio
    any easy way to add an upload progress meter to an upload script?
     
  13. biawokauns

    biawokauns New Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
    is it an ajax fuction arleady? if so, you can use different loading images for the states
     
  14. whup

    whup I wish you had children and.. so that I could step

    Joined:
    Feb 12, 2007
    Messages:
    1,603
    Likes Received:
    0
    Lots of common ones post to an iframe and then use an ajax callback to report progress. The latter part can be difficult depending on the language you're using (such as PHP, which until recently didn't have an API for checking upload progress and needed system or PERL scripts).

    I think the easiest option for you would be a Flash-based upload widget. In fact it's probably the best option period.

    The upload progress things I've done were code-based so I can't say which Flash ones are good, but I've heard good things about http://swfupload.org/
     
  15. drpepper

    drpepper Active Member

    Joined:
    Nov 13, 2006
    Messages:
    38,076
    Likes Received:
    2
    Location:
    San Antonio
    well the site already has an upload utitlity from a vbulletin plugin. i just need to add a progress bar to avoid having users just staring at a screen. some of these file uploads can be as large as 100mb.
     
  16. drpepper

    drpepper Active Member

    Joined:
    Nov 13, 2006
    Messages:
    38,076
    Likes Received:
    2
    Location:
    San Antonio
    Code:
                else
    
                {
    
                     $_POST['desc'] = &$_POST['message'];
    
                 }
    
    
    
                $_POST['desc'] = convert_url_to_bbcode($_POST['desc']);
    
    
    
                if ($upload)
    
                {
    
                    $newfilename = (TIMENOW%100000).'-'.$_FILES['upload']['name'];
    
                    if (move_uploaded_file($_FILES['upload']['tmp_name'], $dl->url.$newfilename))
    
                    {
    
                        chmod($dl->url.$newfilename, 0666);
    
                        $size = @filesize($dl->url.$newfilename);
    
                    } 
    
                    else 
    
                    {
    
                        $errors['message'] .= '<center><span style="color: red;">The upload failed!  Upload error.</span></center><br />';
    
                    }
    
                }
    
                else if ($link)
    
                {
    
                    $newfilename = $_POST['link'];
    
    
    
                    if ($_POST['size'] == '')
    
                    {
    
                        $size = @filesize($newfilename);
    
                    } 
    
                    else 
    
                    {
    
                        if (is_numeric($_POST['size']))
    
                        {
    
                            $size = $_POST['size'];
    
                        }
    
                        else
    
                        {
    
                            $size = 0;
    
                        }
    
                    }
    
    
    
                    // check for http on beginning of link or d/l won't work
    
                    if (strpos($newfilename, "http://") === false AND strpos($newfilename, "ftp://") === false)
    
                    {
    
                        $newfilename = "http://".$newfilename;
    
                    }
    
                    // end of http check
    
                }
    
                else if ($_GET['do'] == 'edit')
    
                {
    
                    $newfilename = $file['url'];
    
                    $size = $file['size'];
    
                    $link = $file['link'];
    
                }
    
    im assuming the this is the piece of code that deals with the actual upload
     
  17. whup

    whup I wish you had children and.. so that I could step

    Joined:
    Feb 12, 2007
    Messages:
    1,603
    Likes Received:
    0
    You don't have to worry about any server-side stuff like that, as it's only dealing with the files once they've finished uploading.

    Ideally you want something that's not going to interfere with v-bulletin's form and require any server-side tampering.

    Have you seen if there's any v-bulletin plugins for this?
     
  18. whup

    whup I wish you had children and.. so that I could step

    Joined:
    Feb 12, 2007
    Messages:
    1,603
    Likes Received:
    0
  19. drpepper

    drpepper Active Member

    Joined:
    Nov 13, 2006
    Messages:
    38,076
    Likes Received:
    2
    Location:
    San Antonio
    yea ive checked extensively for vbulletin plugins. there are none that ive found.

    i would love to have something like what you posted, but thats waaaaaaay over my head. :sad2:
     

Share This Page