Noob JS help.

laylo

09-20-2011, 05:50 PM

i got this code which will open a new link in a new window.
<script type="text/javascript">
$(function(){
$(".popup").click(function(event){
event.preventDefault();
var href = $(this.)attr("href");
var width = $(this.)attr("data-width");
var height = $(this.)attr("data-height");
var popup = window.open (href, "popup",
"height=" + height +",width=" + width + "");
});
});
</script>

This is the html which it should be targeting.
<li><a href="http://www.google.com" data-width="600" data-height="400" class="popup">Latest Posts</a></li>

i'm just starting out with js/jq. i dont know what's wrong. :(
thanks for your help. p.s I have explicitly tried the onclick approach where I already gave the function a name followed by () between quotes but same thing happens. The link opens in the same window.

Old Pedant

09-20-2011, 09:31 PM

Why do you need jQuery for something so simple to do without all of its overhead??

<a href="http://www.google.com" class="popup"
onclick="window.open(this.href,'popup','height=400,width=600');return false;"
>Latest Posts</a>

If it persists in opening in the same window, it may be because your current window name is *already" "popup". So just use another name. Example:

<a href="http://www.google.com" class="popup"
onclick="window.open(this.href,'popup400x600','height=400,width=600');return false;"
>Latest Posts</a>

laylo

09-20-2011, 10:13 PM

It's just that this book reccomended that I abandon the onclick method and showed me this example of using custom data attributes to create pop up windows. the book is 'the pragmatic programmers' HTML5 & CSS3 on pg 30-31.

i don't know whether i have the wrong jquery library src or if im missing extra code.

Although thanks. your examples do work.

Old Pedant

09-20-2011, 11:57 PM

Well, the other way:

<html>
<head>
<script type="text/javascript">
function pageinit()
{
document.getElementById("LINK1").onclick =
function() {
window.open(this.href,'popup400x600','height=400,width=600');
return false;
};
}
window.onload = pageinit;
</script>
</head>
<body>
...
<a id="LINK1" href="http://www.google.com" class="popup">Latest Posts</a>
....

Or, if you really did want to apply this same code to all <a>'s with class="popup", then:

<html>
<head>
<script type="text/javascript">
function pageinit()
{
var links = document.getElementsByTagName("a");
for ( var i = 0; i < links.length; ++i )
{
var link = links[i];
if ( link.className == "popup" )
{
link.onclick =
function() {
window.open(this.href,'popup400x600','height=400,width=600');
return false;
};
}
}
}
window.onload = pageinit;
</script>
</head>
<body>
...
<a href="http://www.google.com" class="popup">Latest Posts</a>
....

The second version there is more or less what the jQuery code is doing (in about 3% as much overhead), but the jQuery version is not ensuring that all the elements in question are indeed <a> tags. It will apply the onclick to any element with the class="popup". (Easily changed with a minor tweak to the jQuery, but just showing you the difference.)