SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Print button for a specific UL

    Hi all,

    I'm building a page that, of course has all the usual nav stuff and layout. Within this layout is a UL of images. What I'd like is a way to create a print button with several options. Option one would be to print the entire UL list. Option two would be to print an individual item (listed image) within the UL.

    In other words, I want a button that will simply print the list of images, not the entire page.

    How can I do this?

    Thanks!

    Chris
    Last edited by Worldbuilder; Jun 9, 2006 at 11:38. Reason: Gettin' more specific

  2. #2
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When you say print, do you mean to a printer?

  3. #3
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes.

  4. #4
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had a thought... What about using frames and creating a child frame then using javascript to focus on printing only that child frame? I haven't played with frames, well in forever and remember nothing really about their use. But that might work, you think? If so, how might I do it?

  5. #5
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could do an IFRAME as well. Just remember that if you use frames/iframes to adjust the DOCTYPE declaration for the FRAMESET DTD, otherwise stuff will invalidate. Do you also have screenshots/code to help sort of visualize this?

  6. #6
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Never used an IFrame before. I really don't like the idea of frames, there's got to be a better way...

    Check out the basic test page: http://www.bartlett-family.net/chrisbartlett/drinks/

    See the three images in the main content area (The three images of drinks: CEO, Continental, Belvedere Myrtle Martini)? Basiclly, I'd like a button to print only those images (and those images are LI's in a UL). Perhaps even with an option to print only an individual image?

    Chris

  7. #7
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't confirm this but, this might work:

    Code:
    document.getElementById('ul_id').print();
    you can try that out, but I can't get a verifiable source that that will, or won't work.

  8. #8
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I'll try it. I assume this snippet of code will go inside the form tag for the button?

    And please excuse my lack of JS knowledge, but how will this know which UL to print (assuming it'll work at all)? I assume that ('ul_id') needs to somehow reference the specific UL? How?

    Thanks!

    Chris

  9. #9
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I added the button with your mod, but don't think I did it right.

    I addthe following:
    Code:
    <label for="print"><input id="print" type="submit" name="name" value="Print the entire drink list!" document.getElementById('ul_id').print(); size="50"/></label>
    right above the UL. Button doesn't do anything when clicked. Does this method somply not work or did I implement it wrongly?

    Chris

  10. #10
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Complete code:
    Code:
    <label for="print"><input id="print" type="submit" name="name" value="Print the entire drink list!" document.getElementById('ul_id').print(); size="50"/></label>
    <ul id="print">
    <li><img src="../pix/Continental.jpg" width="479" height="292" alt="The Hennessy Continental"/></li>
    <li><img src="../pix/ceo.jpg" width="479" height="292" alt="The Hennessy CEO"/></li>
    <li><img src="../pix/BMM.jpg" width="479" height="291" alt="The Myrtle Martini"/></li>
    </ul>

  11. #11
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Change ul_id to print in the code

  12. #12
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <label for="print"><input id="print" type="submit" name="name" value="Print the entire drink list!" document.getElementById('print').print(); size="50"/></label>
    <ul id="print">
    <li><img src="../pix/Continental.jpg" width="479" height="292" alt="The Hennessy Continental"/></li>
    <li><img src="../pix/ceo.jpg" width="479" height="292" alt="The Hennessy CEO"/></li>
    <li><img src="../pix/BMM.jpg" width="479" height="291" alt="The Myrtle Martini"/></li>
    </ul>
    Is that what you meant? Not working. My bad?

    Chris

  13. #13
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nah, it looks like you can only do it on the window object.. oh well, I thought it would work

  14. #14
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Window Object... Eh?

  15. #15
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I noticed on some sites that they showed window.print();. My incorrect guess was that you would be able to do it on any object, as it really didn't say "This works on the window object only".

  16. #16
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Check out _Aerospace_Eng_'s suggestion.

    Yes, print() is a method of window only.

    The <label> element should not be used with <input type="submit">, <input type="reset">, <input type="button">, <input type="image">, or <button> elements.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •