WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. nicpaice
    Member
    Posted 1 year ago #

    My site http://www.lidgetspares.com is a modified Twenty Ten theme.

    What I aim to achieve is to click link "New Garages" and for a pop up window of sizes 660 x 480 no tool or address bar to open.

  2. Marventus
    Member
    Posted 1 year ago #

    Hi there.
    You can accomplish that using JS. For that, your "New Garages" link's HTML code, which now looks like this:

    <a title="Whether it’s a secure, yet cost effective building, storage area, workshop or garage, then we are sure to be abled to cater for your needs" target="_blank" href="http://www.4concretegarages.com/quotation/step1.asp">New Garages</a>

    should be changed to this:

    <a title="Whether it’s a secure, yet cost effective building, storage area, workshop or garage, then we are sure to be abled to cater for your needs" 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')">New Garages</a>

    Cheers!

  3. nicpaice
    Member
    Posted 1 year ago #

    Thanks for the speedy response.

    I am not certain where you want me to paste the script you provided?

    I have tried Dashboard/Appearance/Menus/Custom Links/URL but to no avail?

  4. Marventus
    Member
    Posted 1 year ago #

    Hi.
    Open your theme's functions.php and place the following code at the end, right before the closing php tag; it looks like this ?>:

    function lidget_popup_link() {
    ?>
    <script type="text/javascript">
    	//<![CDATA[
    	(function($) {
    		$(window).load(function() {
    			var width = "680", /* Enter popup window width here */
    				height = "480", /* Enter popup window height here */
    				menuItem = "menu-item-783", /* Enter menu item ID */
    				target = "#"+menuItem+" a",
    				hrefVal = $(target).attr("href")
    			;
    			$(target).attr({
    				"href" : "#",
    				"onclick" : "window.open('"+hrefVal+"','','width="+width+",height="+height+",scrollbars=no,resizable=no,location=no,menubar=no,toolbar=no')"
    			});
    		});
    	})(jQuery);
    	//]]>
    </script>
    <?php
    }
    add_action('wp_head', 'lidget_popup_link');

    LMK if you want the popup to be centered on screen, and I'll make a few more adjustments.
    I made it so that you could customize the width, height and targeted menu item ID if needed, but it should work just fine the way it is now.
    Cheers!

  5. Marventus
    Member
    Posted 1 year ago #

    I just realized I forgot to change the menu item ID so that it works on your site.
    You should change that value to menu-item-47, meaning, change this:

    menuItem = "menu-item-783"

    to this:

    menuItem = "menu-item-47"
  6. nicpaice
    Member
    Posted 1 year ago #

    Thanks again,

    Code has been pasted into place, now what?

  7. Marventus
    Member
    Posted 1 year ago #

    The New Garages menu item should be opening the pop up. Is it not?

    Edit: I checked your site and the JS script is not being inserted, which means there must be smth wrong with the implementation. Could you do a pastebin of your functions.php file just in case?
    Thanks!

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    I've removed your massive code posts, Nicpaice. Please do not post more than 10 lines of code on these forums. You can instead use PasteBin for holding your code, then just link those PasteBin pages.

  9. Marventus
    Member
    Posted 1 year ago #

    Thanks, Andrew.
    @nicpaice: I saw the code you posted from the e-mail notification I received, and you don't seem to have placed my function at the very bottom of your functions.php, since there's more code afterwards.
    To avoid any problems, and since you are using TwentyTen, you should create a child theme and use my code there. Here's how:
    1. Create a folder called twentyten-child inside your wp-content/themes folder;
    2. Create a functions.php file in there and paste my php code wrapped inside an opening and closing php tag, like so:

    <?php
    /* code here */
    ?>

    3. Create a style.css file in your child theme folder and paste this code inside:

    /*
    Theme Name: TwentyTen Child
    Description: Child theme for the twentyten theme
    Author: Lidget Spares
    Template: twentyten
    */
    
    @import url("../twentytwelve/style.css");

    4. Upload your new child theme to your server;

    5. Activate it under in your admin panel under Appearance --> Themes.

    If you would rather not use a child theme because you have already edited TwentyTen directly, then paste the php code I provided above at the very bottom of your functions.php and it should work.
    If neither approaches work, LMK and I'll give you other ideas.

  10. nicpaice
    Member
    Posted 1 year ago #

    I've created the folder and uploaded the file but before I activate can you confirm that I wont lose the modifications that I have already made to my current theme in way of navigation-bar style and function?

  11. Marventus
    Member
    Posted 1 year ago #

    You shouldn't loose any of it. However, if you do, activating the old theme back should restore it all.
    One thing: the point of a child theme is not to modify the parent one so that you can keep updating the parent without overwriting your own mods. If you have already modified TwentyTen, a child theme would defeat the purpose.

  12. nicpaice
    Member
    Posted 1 year ago #

    OK, I have activated the child theme, the header was lost and my footer style sheet too. Easily rectified.

    No change with the external link and pop up however?

  13. Marventus
    Member
    Posted 1 year ago #

    Ok.
    I just checked your site and your New Garages menu item is no longer pointing to the form it was pointing to before.
    Also, the script is not being added to your site. Could you check your header.php file and make sure you see a call to wp_head() anywhere inside your <head> tag? If you do, LMK and we'll think of smth else. If you don't, simply add it before the closing tag (</head>) and check again to see if it works.

  14. nicpaice
    Member
    Posted 1 year ago #

    Yeah wp_head() was already included within header.php of the parent theme.

    As a consequence of activating a child theme a few items did change, but I have pointed the menu link "New Garages" to http://www.4concretegarages.com/quotation/step1.asp and I selected "Open link in a new window/tab" right?

  15. nicpaice
    Member
    Posted 1 year ago #

    now that's a bit odd, despite my alternations within Appearance/menus I noticed that the link under New Garages points towards http://www.lidgetspares.com/?page_id=9

  16. Marventus
    Member
    Posted 1 year ago #

    Ok. Can you deactivate the child theme and paste the entire contents of your main theme's functions.php file as a pastebin? To do so, follow the link, paste the code under "New Paste", select PHP under Syntax highlighting, and click "Submit". Then share your paste's url here.

  17. nicpaice
    Member
    Posted 1 year ago #

    howz that? http://pastebin.com/06qZbcBd

  18. Marventus
    Member
    Posted 1 year ago #

    Perfect.
    Now, look for the last two lines (539 and 539), They should look like this:

    }
    endif;

    Right under that, paste the PHP code I gave you. You can leave a line between the endif and the first line of my code, for clarity:

    }
    endif;
    
    /* code here */

    After you paste the code, do another pastebin of functions.php so I can make sure it's well placed.

  19. nicpaice
    Member
    Posted 1 year ago #

    http://pastebin.com/rbSvKTQE

  20. Marventus
    Member
    Posted 1 year ago #

    Ok, my code is good but you have two errors in lines 350 and 353. It seems some extra line breaks got inserted by accident. To fix them, replace these lines:

    <div class="comment-meta commentmetadata"><a href="<?php echo esc_url( get_comment_link( $comment-
    
    >comment_ID ) ); ?>">
    			<?php
    				/* translators: 1: date, 2: time */
    				printf( __( '%1$s at %2$s', 'twentyten' ), get_comment_date(),  get_comment_time() ); ?
    
    ></a><?php edit_comment_link( __( '(Edit)', 'twentyten' ), ' ' );
    			?>

    with these:

    <div class="comment-meta commentmetadata"><a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>">
    			<?php
    				/* translators: 1: date, 2: time */
    				printf( __( '%1$s at %2$s', 'twentyten' ), get_comment_date(),  get_comment_time() ); ?></a><?php edit_comment_link( __( '(Edit)', 'twentyten' ), ' ' );
    			?>
  21. nicpaice
    Member
    Posted 1 year ago #

    OK, this is done. What next?

  22. Marventus
    Member
    Posted 1 year ago #

    Well, the good news is that the script is now being inserted in your page. The bad news is that it's not working, which is weird because it worked on my test site. Try this code instead:

    function lidget_popup_link() {
    ?>
    <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')"
    		});
    	});
    </script>
    <?php
    }
    add_action('wp_head', 'lidget_popup_link');
    ?>
  23. nicpaice
    Member
    Posted 1 year ago #

    OK, I have replaced the code at functions.php

  24. Marventus
    Member
    Posted 1 year ago #

    I forgot to replace the menu-item number when I repasted the code. Just fixed it.

    Edit: I just realized your site is not loading jQuery (smacks himself in the head with a huge bat). This should do the trick for sure.

    function lidget_popup_link() {
    ?>
    <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-783", /* 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')"
    		});
    	});
    </script>
    <?php
    }
    add_action('wp_head', 'lidget_popup_link');
    
    function lidget_call_jquery() {
    	wp_enqueue_script('jquery');
    }
    add_action('wp_enqueue_scripts', 'lidget_call_jquery');
    ?>
  25. nicpaice
    Member
    Posted 1 year ago #

    I've fixed it too.
    What next?

  26. Marventus
    Member
    Posted 1 year ago #

    See my edit above. Sorry I missed that! ;-)

  27. nicpaice
    Member
    Posted 1 year ago #

    ho my goodness, I changed menu-item-47 after I pasted your code and it works! superb. Thank you very much indeed

  28. nicpaice
    Member
    Posted 1 year ago #

    just one more thing, if I was to attempt a link from the body text to this same pop-up window, how would I go about this?

  29. Marventus
    Member
    Posted 1 year ago #

    Cool! Glad it's working. I don't quite understand what you mean about fetching the link from the "body text". Where exactly would it be?

  30. nicpaice
    Member
    Posted 1 year ago #

    see on the home page I have links contained within the body text? well, how would I link the phrase "If it’s a

      new garage
    to the same URL and pop up window?

Topic Closed

This topic has been closed to new replies.

About this Topic