Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Noob JS help.

  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    19
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Question Noob JS help.

    i got this code which will open a new link in a new window.
    Code:
    <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.
    Code:
    <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.
    Last edited by laylo; 09-20-2011 at 06:52 PM. Reason: missing information

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,700
    Thanks
    80
    Thanked 4,658 Times in 4,620 Posts
    Why do you need jQuery for something so simple to do without all of its overhead??

    Code:
    <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:
    Code:
    <a href="http://www.google.com" class="popup"
      onclick="window.open(this.href,'popup400x600','height=400,width=600');return false;"
    >Latest Posts</a>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    19
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,700
    Thanks
    80
    Thanked 4,658 Times in 4,620 Posts
    Well, the other way:
    Code:
    <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:
    Code:
    <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.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    laylo (09-22-2011)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •