Javascript/HTML help

Discussion in 'HTML & Website Design' started by bauerdude, Nov 9, 2008.

  1. #1
    Heeey guys.

    My goal is to have a page where, if you clicked on an image, a string of text would be copied to the clipboard. I looked around and found that there were two main ways of doing this - a simple way of doing using silly IE commands (that would only work in IE) or the cross-browser way using *Javascript*:
    http://www.jeffothy.com/weblog/clipboard-copy
    Code (markup):
    Here's what I understand:
    • in the beginning of my HTML I'd have that big block of javascript defining function copy(inElement).
      I'd have clipboard.swf located in the same place as my HTML file on my server.
    What I don't:
    • where exactly to place that big chunk of javascript
      how would I use this function to have a specific string of text copied to the clipboard when an image is clicked on.
    Basically, having very little JS experience, I'm confused in the implementation.

    Any help? Thanks in advance!
     
    bauerdude, Nov 9, 2008 IP
  2. rene7705

    rene7705 Peon

    Messages:
    233
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    This function that's listed on the page you mentioned copies the .value of a <INPUT> element that it gets passed. That value is copied to the clipboard.

    You can list this function as inline-javascript in your page, or include it.
    see quirksmode.org/js/placejs.html

    Note that you'll have to download that SWF listed on the page, put it somewhere on your hoster, and modify the copy() function to have a correct path to it. It's the part that reads '<embed src="_clipboard.swf"'.
    Hope you can do that yourself ;)

    Then the simplest (to use this function un-modified) is to include an <INPUT> for each <IMG> you do, with the value of the <INPUT> being what you want copied to the clipboard.
    Then you must assign a click-handler-function to the <IMG> tag (or parent container perhaps), which looks up the corresponding <INPUT> and calls the copy() function with that <INPUT> as parameter.
    The simplest way of doing that is to create another function called imageClicked(imageElementOrParentContainer), then assign onclick="imageClicked(this)" to each <IMG> or parent container.

    Best to put both functions in a seperate .js file, and include that (c top link in this post).
     
    rene7705, Nov 9, 2008 IP