Question

I’m trying to work out how this can be achieved using jQuery, I have page 1 which has 2 links namely link 1 and link 2, what I want to achieve is when I click link 1 a new browser window is opened displaying the content for link 1 and when I click link 2 the same window is displayed but with the content for link 2.

Is this a matter of creating a page and hiding both sets of content then displaying the content when the appropriate link is clicked?

Has anyone any tutorials that are similar to this?

Answer 1

Give this a shot… I’m using the rel attribute of the link to point to the content, and a class on these links, which allows the click handler to work for any number of links/windows.

<div style="display:none" id="content1">This displays for link1</div>
<div style="display:none" id="content2">This displays for link2</div>
<a class="windowlink" rel="content1" href="#">Link 1</a><br>
<a class="windowlink" rel="content2" href="#">Link 2</a>

<script>
$(document).ready(function() {                       // Standard jQuery wrapper to ensure DOM/jQuery is loaded and ready for use.
 $('.windowlink').click(function() {                 // Assign a function to the Click handler of all elements with a class of 'windowlink'
   var html = $('#' + $(this).attr('rel')).html();   // Builds a jQuery ID selector using the rel attribute of the clicked link, grabs the html content of the div with that name.
                                                     // i.e. link 1 has a rel="content1" so this line will evaluate to var html = $('#content2').html();
   var newwindow = open('');                         //  Open a new window, store the handle
   newwindow.document.write(html);                   // Write the HTML to the new window
   newwindow.document.close();                       // Stop writing, finalize the new window document.
 });
});

Working JSFiddle: http://jsfiddle.net/gfosco/txMKb/