SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Oct 2008
    Location
    Virtual World is my location
    Posts
    307
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Question One Click Two Actions - jQuery Based?

    I am trying to achieve this. When I click on a specific content I want to copy that content as well as open a new page with a specific URL.
    Similar to what you see on some coupon sites, but mostly its made using flash.

    I do not want users to be able to copy that content but its revealed only once you click and are directed to the specific page.

    Any ideas of how it could be done using jQuery?

    Thanks

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by jaagare View Post
    I do not want users to be able to copy that content but its revealed only once you click and are directed to the specific page.
    When you provide the information to a public web browser, that information will by definition always be able to be copied.

    If you don't want people to copy the content, then don't provide the content in the first place.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Oct 2008
    Location
    Virtual World is my location
    Posts
    307
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Sorry for not getting my query more clearer. The content would be copied but only when on click function happens. If you see the functionality in any coupon site when you click on say Show Coupon Code or Reveal Code - it will not only show the code but will also copy the content and will take you to a specific site on click. Hence, mostly people use flash for such functionality but I do not wish to use flash and was wondering if multiple actions can happen on a single click? In this case it would be
    When a user clicks a specific div - lets say .
    Code:
    <div class="couponcode">Click to reveal code</div>
    Now on clicking this the following things would happen
    a) the click here to revel code is replaced with the actual coupon code
    Code:
    <div class="couponcode">COUPON100OFF</div>
    b) This code is also copied and
    c) the user is directed to a specific site - usually the site for which this code is meant.

    Any help?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by jaagare View Post
    Sorry for not getting my query more clearer. The content would be copied but only when on click function happens.
    Yes, that all looks to be fairly straight forward. What in particular are you having trouble with?

    Are you wanting us to tell you how to write the scripting code to achieve that? Normally we help people with what they are currently working on. If you want someone to write it for you, we have a marketplace for that.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    Oct 2008
    Location
    Virtual World is my location
    Posts
    307
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    No I do not want anyone to code the function for me.

    The issue I am facing is multiple items are not working when there are say close to 20 such instances. Like a coupon site - there are a list of codes so for each I need to assign the jquery. I am unable to do it for multiple items using single code.

    like if in jquery I mention on click content . text = ABC it does change. But like when I have 20 items I have to create 20 such queries which is not right according to me and should be managed in a simpler way.

    Similarly, copy to clipboard / copy text I have not found any solution without use of flash and that directly copies the content.

    Those were my issues. If there is any tutorial / resource that you can point towards, then it would help me accomplish my task.
    RecipesNext.com - recipes, kitchen queries, videos & more...
    BargainNext.com - coupons / deals / bargains / offers & more...

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Hi,

    Easiest to explain with an example.
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>untitled</title>
    </head>
    <body>
    <div class="couponcode">COUPON100OFF</div>
    <div class="couponcode">COUPON200OFF</div>
    <div class="couponcode">COUPON300OFF</div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script>
    $('body').on('click', '.couponcode', function(event) {
      $el = $(event.target)
      alert("You clicked " + $el.text());
      
      return false;
    })
    </script>
    </body>
    </html>
    That function listens to all click events on the <body> and runs the click event handler if the clicked element matches the selector(has a class of couponcode).

    Unfortunately copy to clipboard isn't something that javascript has access to in most browsers, so flash is still used for this feature. I've used clippy for this before.
    https://github.com/mojombo/clippy

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by jaagare View Post
    like if in jquery I mention on click content . text = ABC it does change. But like when I have 20 items I have to create 20 such queries which is not right according to me and should be managed in a simpler way.
    Ways of handling that in a simpler way can depend on where the unique information is stored.

    If for example the info is in the HTML content:

    HTML Code:
    <ul id="codes">
        <li><a href="#">Show coupon code</a> <span class="hidden">abc123</span></li>
        <li><a href="#">Show coupon code</a> <span class="hidden">hunter7</span></li>
    </ul>
    you can have a single event at a common parent location, which can find out what was clicked on and then take action based on what was clicked

    Code javascript:
    $('#codes').on('click', function (evt) {
        evt.preventDefault();
     
        var code;
        $(evt.target).is('a')) {
            $(evt.target).hide();
     
            code = $(evt.target).next();
            code.show();
     
            // copy code to clipboard
            // then navigate to site
        }
    });

    If instead the information is stored or accessed by some type of id key, then a similar technique can be used for that as well.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Addict
    Join Date
    Oct 2008
    Location
    Virtual World is my location
    Posts
    307
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Ok thank you very much for the basic path I need to follow.

    Will work on the code and get back with my final version soon.
    RecipesNext.com - recipes, kitchen queries, videos & more...
    BargainNext.com - coupons / deals / bargains / offers & more...


Tags for this Thread

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
  •