13 Jul 2010, 23:50
Generic-user-small

Ben Reinhart (3 posts)

I apologize for posting this because I’m sure this is something really dumb and simple, but I can’t seem to get the javascript code for the pop up links working. I’ve tried on Safari 5 and FireFox 3.5.10. Here is my code:

<!DOCTYPE HTML>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>Reflective Interiors, LLC</title>

  <link href="style.css" media="screen" rel="stylesheet" type="text/css" />
  
  <script type="text/javascript" src="jquery.js"></script>
  
  <script type="text/javascript">
    // Display Links in New Window
    var links = $("a.popup");
    
	links.click(function(event) {
		event.preventDefault();
		window.open($(this).attr('href'));
	});
  </script>

</head>
<body>

  <a href="index.html" class="popup">Index</html>

</body>	
</html>

There is no pop up, it just works like a regular link. I’m taken to the new page but in the same window.

Also, if it helps, I could not even get the old example of how not to do it (with onclick) to work.

I tried so many different things. Adding jquery, removing jquery (v1.4.2 btw) removing ‘type=”text/javascript”’ from the script tags.

I also tried putting script tags around the html link in the body.

As you can tell, I’m not javascript expert :(

13 Jul 2010, 23:50
Bphogan_pragsmall

Brian P. Hogan (140 posts)

You need to put your code in a document.ready event handler or move the JS code OUT of the header and put the script block AFTER the actual links. Since the links haven’t been rendered yet, the script doesn’t “see” them.

I’m sorry if that wasn’t clear - I’ll review the chapter and make sure it is. But also look at the code. If you have the pdf, you can click the grey header on the code and bring up the actual source file.

  <script>
  $(function(){
     <script type="text/javascript">
    // Display Links in New Window
    var links = $("a.popup");

    links.click(function(event) {
        event.preventDefault();
        window.open($(this).attr('href'));
    });
  });
  </script>

I hope that helps. Thanks for reading!

13 Jul 2010, 23:55
Generic-user-small

Ben Reinhart (3 posts)

Thanks a lot for your response, and like I said, I apologize for wasting your time with a very simple question. But then I guess I’ll point out to you that (since I did click on the grey link) the download code link on page 35 does not have that extra $(function(){ tag.

Looking at page 40 though, it does.

Sorry to waste your time on that easy one!

13 Jul 2010, 23:59
Bphogan_pragsmall

Brian P. Hogan (140 posts)

Ok, that’s interesting to know. But feel free to grab the code from the book’s web site. That contains the complete code for each of the examples. So, if you get stuck on anything else, you’ll at least have something more to look at.

14 Jul 2010, 00:04
Generic-user-small

Ben Reinhart (3 posts)

Alright, thanks a lot for the help!

22 Nov 2011, 01:41
John-mayer-michael-jackson_pragsmall

bob phil (1 post)

thanks, it helped a lot..

16 Jan 2012, 09:29
Like a boss_pragsmall

Allen Edward (1 post)

Seems interesting. Let me also try this one.

  You must be logged in to comment