Support » Fixing WordPress » Have link open a popup window in a smaller size

  • Resolved Chris

    (@curbano1972)


    Hello,

    I know this has been asked repeatedly and answered even more times, but none of those worked for me. I’ve installed 4 plugins and none work… I’ve tried all of the code suggested and none work. Sorry for being blunt, but reading through all of those posts (and there were a lot!) people started getting rude because the same question was being repeated. I’m scared to keep downloading plugins because I do not want to mess up my page! My question is:

    How do I have a link on my WordPress page open up into a smaller window? Not a new tab. I’ve tried all of the “target=…..” and NONE work!!

    The page I am trying to fix is: http://www.website-startup.com

    As an EXAMPLE:

    If you scroll down just a tad, under the video is a heading: User-Friendly CP
    There is a link in the first sentence: Control Panel

    Say, just for example, I would like that link to open up into a smaller window with my original page behind it. How can I do this?

    If you suggest a plugin, please check to see if it compatible with WP 3.6.1 because the ones that were suggested in other posts were only compatible with 3.5.2 and the ones that claimed to be compatible with 3.6.1 did not work and I would rather not install any more plugins that do not work.

    I would GREATLY appreciate any suggestions or any code that you have to offer. Please understand that I am not very good at coding, I only know what I have researched and am self-taught. I beg you to forgive my ignorance.

    Anyone who provides a working solution, I will gladly wrestle an alligator diagnosed with lockjaw for your amusement! 🙂

    ~Chris

Viewing 15 replies - 1 through 15 (of 30 total)
  • Moderator cubecolour

    (@numeeja)

    You can do this using a little jQuery. I am going to assume you are using a child theme or your own custom theme so it is OK to customise. If you are not, you should make a child theme.

    In your child theme’s folder create another folder called js (unless your theme already has a js folder) and within that folder create a new file called popup.js
    Paste into that file the following:

    jQuery(document).ready(function($) {
       $('.popup').click(function() {
         var NWin = window.open($(this).prop('href'), '', 'scrollbars=1,height=400,width=400');
         if (window.focus)
         {
           NWin.focus();
         }
         return false;
        });
    });

    In your child theme’s functions.php add the following:

    //* Register and Enqueue scripts for popup
    function cc_popup_script() {
    	wp_register_script( 'popup', get_stylesheet_directory_uri() . '/js/popup.js', array( 'jquery' ), '1.0.0', false );
    	wp_enqueue_script( 'popup' );
     }
    
    add_action('wp_enqueue_scripts', 'cc_popup_script');

    Once you have added the code above, you can now use this in your page/post content by attaching a class of ‘popup’ to any link you want to open in a popup. For example

    <a href="http://cubecolour.co.uk/wp" class="popup">popup example page</a>

    It would also be easy to also make this into a plugin which should be tidier than adding to the theme.

    Chris

    (@curbano1972)

    THAT IS AMAZING!!! It worked EXACTLY as you instructed! I am forever in your debt, Kind Sir!! I only hope that my page doesn’t get all messed up when I uninstall all of those plugins that wouldn’t work…

    THANK YOU! 🙂

    Moderator cubecolour

    (@numeeja)

    Looking forward to seeing you wrestle that alligator ;o)

    Chris

    (@curbano1972)

    Not to bother you again, but I do have another question:

    In the ‘popup.js’ file, the line:

    var NWin = window.open($(this).prop('href'), '', 'scrollbars=1,height=400,width=400');

    Can you please explain to me how to set it to where I can define the height & width for different links? To explain it in my dumb way (I am trying to be as thorough as possible)

    For instance:

    xHeight=myHValue
    xWidth=myWValue

    What I am trying to accomplish:

    var NWin = window.open($(this).prop('href'), '', 'scrollbars=1,height=xHeight,width=xWidth');

    This way I can define the H x W for each link. I have dozens that I need to do this for…

    I’m sorry if this is very bad coding practices and probably incorrect, but this is the best that I can do….for now.

    Thank you, again, for your help!

    Chris

    Chris

    (@curbano1972)

    I am looking for the smallest one that I can find! I will be packing a can of mace just in case! 😉

    Moderator cubecolour

    (@numeeja)

    To achieve this, the code could be put into a plugin & extended to use a WordPress shortcode with some parameters to allow the dimensions to be set for each link. It shouldn’t be a complicated plugin to create.

    Moderator cubecolour

    (@numeeja)

    I’ve now made a plugin to do this. I just need to do a little more testing on it & tidy it up a little before releasing it.

    To make a link with this plugin once I release it, you can add a shortcode to your page/post content and include parameters for link url, height & width:

    [popup url="http://cubecolour.co.uk/wp" height="300" width="300"]Link Text[/popup]

    The popup would be much the same as before, but using the height & width values set in the shortcode, and with a default value used if those parameters are not set.

    Does this sound like it might do the job for what you are trying to do?

    Chris

    (@curbano1972)

    That is EXACTLY what I was hoping to accomplish! To be honest, when I read your last post, my jaw dropped! I was thinking: “It would take me a thousand years to write a plugin. And even then, it still probably wouldn’t work.” And when I got the email this morning that you had already written one, I was like: “Are you kidding me? That fast???” I thought writing a plugin would take months to do…
    I don’t mean for this to sound greedy, although it will, but is there a way to set X and Y coordinates for positioning? It defaults to the upper-left corner, which is fine as wine. But if there was a way to also set the X and Y values (or have a default that could be set that would apply to all) that would be AWESOME!
    Thank you so much for this! I’m still in shock that this was done so fast! You ROCK!! 🙂

    Moderator cubecolour

    (@numeeja)

    I think that can probably be done. Positioning the popups to centre of the screen might be appropriate. It might require the alligator to be a little larger though.

    Moderator cubecolour

    (@numeeja)

    Ok, I’ve added something to make the popup appear in the centre of the screen now.

    I’ve submitted the plugin to the WordPress.org plugin directory. It may take a short while to get reviewed and passed by the lovely people of the plugins review team.

    I’ll post back once the plugin is available to install. You’ll need to remove the stuff you added earlier before installing it as I’ve reused some of the same code in the plugin so it might crash your site to have both.

    Moderator cubecolour

    (@numeeja)

    The plugin is now live at: http://wordpress.org/plugins/alligator-popup/

    Don’t forget to remove the code added earlier to your functions.php & remove the js/popup.js file before trying the plugin.

    Chris

    (@curbano1972)

    LOL! I cannot wait to try this!! I am going to remove all of the code I added earlier and then install this plugin. Love the name, btw!! 🙂

    As per our agreement, I shall wrestle any alligator of your choosing… Inside a tank of hungry piranha. After I cut myself shaving.

    And after that win–because I don’t plan on losing–I’m going to track down that croc from the movie “Lake Placid” and punch him square in the face to get another fight started.

    You, Sir, are AWESOME!!! 🙂

    Moderator cubecolour

    (@numeeja)

    Cheers Chris

    Unfortunately the only alligator I know by name is Wally Gator but I don’t think he’d be much of an opponent as he was never particularly frightening and is probably quite old now.

    When you have had a chance to try the plugin, post back here if you have any problems. I’ve tested it on a couple of my own sites & it’s working for me so far.

    Chris

    (@curbano1972)

    I’ve tried it using several different links and dimensions, and I have not run into a single problem! It works PERFECTLY!! I can’t thank you enough!! 🙂

    And I think Wally Gator would be a fun challenge. He doesn’t look like he’d cause me too much damage, which is what I was hoping for. 😉

    Hi all,

    I was looking for a plugin like this, and think this could use more promotion.

    Excellent!
    Thanks Chris for initiating this, and CubeColor for creating it.

    It could have a bit more explanation. E.g.

      There are no settings for this plugin.
      Copy-Paste the [popup url=”http://URL_You_Want_To_Pop-Up” height=”500″ width=”800″]Text You Want Displayed[/popup] in any post/page you want.

    Other than that, GREAT plugin. Works like a charm.

    Thanks for creating it.

Viewing 15 replies - 1 through 15 (of 30 total)
  • The topic ‘Have link open a popup window in a smaller size’ is closed to new replies.