Open in new tab with dynamic content

Question

for this example I'm going to use a property site. If at the top of the site I had the main viewed property ad, and below a whole lot of small square divs with the other ad's. Now when you click on one of the smaller ads it swaps place with the main ad (dynamic content change using JavaScript, all ad data exists in JavaScript multidimensional array and is loaded from sql via php via ajax on page load.

Now when a user right clicks on one of these smaller ads and want to open it in a new tab (as the main ad) so all I need is to load the same page in the new tab with a ?id='id of ad' argument to do so.

so how do it so the ad has an onlick (which runs javascript to switch it with the main ad) and have a right click open in new tab which loads same page with the argument in the new tab?

like if there was a jquery function for this would be amazing.

Answer 1

You need to use a hashtag function and append a hash value onto the URL. So the square divs would actually be links like:

<a href="http://your-site.com/page#advert1">Ad 1</a>
<a href="http://your-site.com/page#advert2">Ad 2</a>
<!-- Ad3, Ad4 etc. -->

Here's an example of the jQuery you could use to read the hashtag:

// CHECK IF A HASHTAG EXISTS IN THE URL
if(window.location.hash.length > 2) {
    // GET THE HASHTAG NAME
    var advert = window.location.hash.replace('#', '').replace(/\/$/, '').substr(1);

    // THEN CALL FUNCTION TO GET AD CONTENT FROM YOUR ARRAY USING THIS INFO
}

Alternatively you could use a plugin for this like jQuery Address which is made for this exact thing and has a load more features including the capture of hashchange events and click tracking for Google Analytics.