One Click Two Actions - jQuery Based?

JavaScript
1

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

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.

3

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 .

<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

<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

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.

5

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.

6

Hi,

Easiest to explain with an example.


<!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.

7

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:


<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


$('#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.

8

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.