ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

How do I tell "onclick" to open a new window??

September 19, 2008 5:31pm

Subscribe [2]
  • #1 / Sep 19, 2008 5:31pm

    RonTechMI

    1 posts

    Hello everyone,

    I’m very new here, so please forgive me if I’m asking this in the wrong spot, or even the wrong website (this may be an HTML syntax question instead).

    On our website, we have an option for the visitors to sign up for our Culinary newsletter.
    We do this with a picture of a frying pan in the upper right hand corner of our page.  We put the graphic there in the CSS and that area is called “corner”.  When the visitor clicks on the frying pan, we send them to a sign up page on another website.  We use Constant Contacts to manage our Culinary newsletter.  What I want to do is to open a new window when they click on the “subscribe” picture.  There is a sanitized version of the code below:


    div id=“corner” onclick=“window(dot)location = ‘http://aaaaaaa.constantcontact.com/b.ccc?d=000000000000000&p=oi’;”

    The (dot) in the above statement is in actuality a period in my code.  I’ve been unable to get the code to post properly.  Wow, talk about a rookie !!

    I’ve tried adding a template=“_blank” to different places in the above statement, but can’t get it to open a new window.

    The reason this is important to me, is that we have “Join Mailing List” tab on our navigation bar, and that opens a new window and we want to have the same apply to this as well.

    So any help will be appreciated, and if I’m in the wrong spot, please feel free to point me in the right direction 😊

    Thank You.

  • #2 / Sep 20, 2008 5:44am

    pushloop

    422 posts

    Doh, I can’t seem to be able to write the code here…

    {div onclick="window.open('mylink.htm','_blank')"}

    Ah, got it…

    Just remove the curly braces with you know what!

  • #3 / Sep 20, 2008 6:26am

    Daniel Walton

    553 posts

    If you want it to fall back gracefully if the user doesn’t have javascript enabled, you’ll need something like this:

    <html>
    <head>
    [removed][removed]
    [removed]
    $(function(){
      $("a[rel*='blank']").click(function(){
        window.open($(this).attr('href'));
        return false;
      })
    });
    [removed]
    </head>
    <body>
    <a href="http://example.com/yesrel=blank">This opens in a new tab/window</a>
    <a href="http://example.com/no">This does not</a>
    </body>
    </html>

    Edit: The first two [removed] replacements are the script tags linking to the jQuery library, the 3rd and 4th [removed] are the opening and closing script tags.

  • #4 / Sep 22, 2008 5:14pm

    RonTechMI

    1 posts

    Doh, I can’t seem to be able to write the code here…

    {div onclick="window.open('mylink.htm','_blank')"}

    Ah, got it…

    Just remove the curly braces with you know what!

    Thank you very much for your reply Pushloop.  For some reason though your ‘_blank’ did not work in my template.  I did modify my code slightly, but ended up having to use a different attribute called ‘newwindow’.  When I added that to the code, it now works just fine.

    The old code looked like this:
    {div id="corner" onclick="[removed] = ‘http://aaaaaaa.constantcontact.com/b.ccc?d=000000000000000&p=oi’;” }

    The new code that works for me is: 
    {div id="corner" onclick="window.open('http://visitor.constantcontact.com/d.jsp?m=1102122235505&p=oi','newwindow');"}

    Basically I needed to remove the equal sign after the window.open, and then just added the parenthesis, and the ‘newwindow’ attribute.

    I’m not sure if this is because I’m referring to an area defined in the CSS called “corner” or not, but this is the only version I got to work.  I am using Expression Engine 1.6.0, if that makes a difference, but in this case I don’t think so.

    Thank you again for your help,

    Ron

.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases