WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] open external link within a defined pop up window (43 posts)

  1. Marventus
    Member
    Posted 1 year ago #

    Hi. You would have to turn the click here text into a link and add it to your body text, wherever those are being called from.
    The exact code for it would be:

    <a title="New Garages" target="_blank" href="#" onclick="window.open('http://www.4concretegarages.com/quotation/step1.asp','','width=680,height=480,scrollbars=no,resizable=no,location=no,menubar=no,toolbar=no')">click here</a>

    Remember that if you change your contact form's URL, you'll have to manually update this link as well. Same thing goes for the size of the pop up. You'll have to configure it manually.
    If you want the whole thing to work automatically from the script (i.e., have the script take care of both links and pop up sizes by itself using the script options), the body text link should look like this:

    <a class="lidget-popup" title="New Garages" target="_blank" href="#">click here</a>

    and then you would need to replace the script part (the rest remains the same) with this version:

    <script type="text/javascript">
    	jQuery(window).load(function() {
    		var width = "680", /* Enter popup window width here */
    			height = "480", /* Enter popup window height here */
    			menuItem = "menu-item-47", /* Enter menu item ID */
    			target = "#"+menuItem+" a",
    			hrefVal = jQuery(target).attr("href")
    		;
    		jQuery(target).attr({
    			"href" : "#",
    			"onclick" : "window.open('"+hrefVal+"','','width="+width+",height="+height+",scrollbars=no,resizable=no,location=no,menubar=no,toolbar=no')"
    		});
    		jQuery(".lidget-popup").attr("onclick", "window.open('"+hrefVal+"','','width="+width+",height="+height+",scrollbars=no,resizable=no,location=no,menubar=no,toolbar=no')");
    	});
    </script>

    With this new code, all links with the CSS class lidget-popup will be turned into pop up links (and point to the same URL as your menu item's).
    Cheers!

  2. nicpaice
    Member
    Posted 1 year ago #

    Yes, that just worked an absolute treat. And again, thanks

  3. Marventus
    Member
    Posted 1 year ago #

    Awesome. You are welcome, ;-)
    Oh, one last thing: since we are using wp_enqueue_scripts to load jQuery anyway, it will definitely be "neater" to add the script that way too. It won't make any difference in terms of functionality or outcome, but it would abide by best practices better.
    To do that, you would need to:
    1. Create a folder named js inside your theme folder, if it doesn't already exist. If it does, just skip this step.
    2. Create a lidget.js file in the js folder and paste this inside the file:

    jQuery(window).load(function() {
    	var width = "680", /* Enter popup window width here */
    		height = "480", /* Enter popup window height here */
    		menuItem = "menu-item-47", /* Enter menu item ID */
    		target = "#"+menuItem+" a",
    		hrefVal = jQuery(target).attr("href")
    	;
    	jQuery(target).attr({
    		"href" : "#",
    		"onclick" : "window.open('"+hrefVal+"','','width="+width+",height="+height+",scrollbars=no,resizable=no,location=no,menubar=no,toolbar=no')"
    	});
    	jQuery(".lidget-popup").attr("onclick", "window.open('"+hrefVal+"','','width="+width+",height="+height+",scrollbars=no,resizable=no,location=no,menubar=no,toolbar=no')");
    });

    3. Replace the entire old code you pasted in functions.php with this one:

    function lidget_script_call() {
    	wp_register_script('lidget_popup', get_stylesheet_directory_uri()."/js/lidget.js", array('jquery'), '', true);
    	wp_enqueue_script('lidget_popup');
    }
    add_action('wp_enqueue_scripts', 'lidget_script_call');

    That should do it. Have a good weekend!

  4. texasautoguide
    Member
    Posted 1 year ago #

    I am looking over this code and trying to implement it as a "speed bump" for a banking institution website I am redesigning. http://www.texasautoguide.com/westex (click on the FB and Twitter Logo)

    I like what I see and have it working with the exception of a few bugs.

    1. On opening of my "speed bump" exit window it says New Garages. WHERE in the world is that text coming from?
    2. Why does it open a new tab with the original index with a click of the link?
    3. There is obviously some code in there that doesn't need to be...

    Any thoughts would be great! Thanks!

    Rowdy

  5. Marventus
    Member
    Posted 1 year ago #

    Hello there.
    1. If you are using this code:

    <a class="lidget-popup" title="New Garages" target="_blank" href="#">click here</a>

    notice there's a title attribute you would need to adjust or remove to fit your needs. Also, the code changed as we went along, and the latest version does use that line of code (just an FYI).
    2. I don't get your question. The code provided is for a pop up link...
    3. What do you mean? It fit the OPs needs and was written for that purpose. Of course, if you want to give it another usage, you would need to make the necessary adjustments.

  6. texasautoguide
    Member
    Posted 1 year ago #

    Haha! I found the New Garages text. Dooh!

    Back to question 2. When you click on the link, the pop up opens and a new tab with the original index open at the same time.

  7. Marventus
    Member
    Posted 1 year ago #

    Haha! I found the New Garages text. Dooh!

    Glad you did.

    When you say "original index", are you referring to the url that appears in the address bar?

    http://www.texasautoguide.com/westex/exit.html

    That's because the code was originally designed for an <a> tag, so the href attribute of the targeted link is set to "#" on page load, and then replaced.

  8. Marventus
    Member
    Posted 1 year ago #

    Looking at the code again, I'm not sure what the purpose of this line is:

    jQuery(".lidget-popup").attr("onclick", "window.open('"+hrefVal+"','','width="+width+",height="+height+",scrollbars=no,resizable=no,location=no,menubar=no,toolbar=no')");

    Since it seems to do the exact same thing as the one before. Let me run some tests see if we can remove it.

  9. texasautoguide
    Member
    Posted 1 year ago #

    Ok. So I removed the target and href tags and it does not open the # which is correct. Thanks for the help!

  10. Marventus
    Member
    Posted 1 year ago #

    No pb. Glad I could help.
    Also, just confirmed you can totally delete the line I mentioned:

    jQuery(".lidget-popup").attr("onclick", "window.open('"+hrefVal+"','','width="+width+",height="+height+",scrollbars=no,resizable=no,location=no,menubar=no,toolbar=no')");
  11. fzishk
    Member
    Posted 1 year ago #

    hello sir! your code is great and its working fine in my theme... but i want to use this for my 3 menus !

    like : menu-item-542
    menu-item-544
    menu-item-546

    please tell me how can i handle it?

    my site is: Horizon Blanks
    and i m using this popup window on my "compare" dropdown menu

  12. fzishk
    Member
    Posted 1 year ago #

    I have currently one option to make 3 functions separately... but i don't think so its good idea, how can i manage it in one function ?

  13. LesTexas60
    Member
    Posted 8 months ago #

    @Marventus - Thank you for your post. I used the first line on your solution and it worked. The only problem is when it opens the pop-up window, it also opens a new tab of the original page I was on. Is this in the code you provided or a config type setting in WP?

    Thank you very much.

Topic Closed

This topic has been closed to new replies.

About this Topic