Design and CSS styles
Version 3.x > Design and CSS styles > Menu Items Linking to Another Site View modes: 
User avatar
Member
Member
danielrichard-oaot - 2/10/2009 12:44:24 PM
   
Menu Items Linking to Another Site
Maybe I've been looking at Kentico too long today, but I'm trying to simply include some items in my navigation that are links to other sites (ie. Weather, Airport Info, etc.).

The trick is that I want that link to open in a new window instead of taking the user away from my site.

URL Redirection loads into the same page.

I tried the Javascript Command: window.open('http://www.gmia.ca'); which opens the window fine. But the underlying Kentico page refreshed to display "The system cannot find the path specified." page.

Is there not just a simple flag for a Menu Item that we can tell it to open in a new browser window (ie. target="_blank")?

User avatar
Kentico Developer
Kentico Developer
kentico_helenag - 2/11/2009 5:00:03 AM
   
RE:Menu Items Linking to Another Site
Hello,

you could use for example:

document Properties -> Menu -> Menu action -> Javascript command: window.open("http://www.google.com");

Best regards,
Helena Grulichova

User avatar
Member
Member
danielrichard-oaot - 2/11/2009 5:55:51 AM
   
RE:Menu Items Linking to Another Site
That will open a new window with the specified URL fine. But the problem with that method is that it reloads the main window (my site where I clicked the link) and comes up with a blank page and error: "The system cannot find the path specified."

I'm not sure what's making the main page refresh since it's just a regular <a href> that's in the code when I view source:

<a href="" style="" class="SubSubMenuCMSTreeMenuLink" id="ctl00_plcMain_LeftTreeMenu_tid_0_2_item" onclick="window.open('http://www.gmia.ca');" >Airport</a>

User avatar
Kentico Developer
Kentico Developer
kentico_helenag - 2/11/2009 7:10:04 AM
   
RE:Menu Items Linking to Another Site
Hello,

Could you please tell me what you see if you select the redirecting page in the CMSDesk in the Content tree? (e.g. the Live site mode)

It should show the same if you select your redirecting page in the menu and the new window with the specified URL is created.

The refresh is caused by PostBack of ASP.NET.

Best regards,
Helena Grulichova

User avatar
Member
Member
danielrichard-oaot - 2/11/2009 7:25:59 AM
   
RE:Menu Items Linking to Another Site
I'm not sure I understand exactly what you're asking for...

Here's the code in CMSDesk looking at the page where the tree menu is in "Live site" mode:

<table class="MainCMSTreeMenuTable" cellspacing="0" cellpadding="0"><tr><td class="MainCMSTreeMenuSelectedItem" id="ctl00_plcMain_LeftTreeMenu_tid_0_0" style=""><a href="/CompanyLocations/Canada" style="" class="MainCMSTreeMenuSelectedLink" id="ctl00_plcMain_LeftTreeMenu_tid_0_0_item">Canada</a></td></tr><tr><td class="SubMenuCMSTreeMenuSelectedItem" id="ctl00_plcMain_LeftTreeMenu_tid_0_1" style="">  <a href="/CompanyLocations/Canada/MonctonLocation" style="" class="SubMenuCMSTreeMenuSelectedLink" id="ctl00_plcMain_LeftTreeMenu_tid_0_1_item">Moncton Location</a></td></tr><tr><td class="SubSubMenuCMSTreeMenuItem" id="ctl00_plcMain_LeftTreeMenu_tid_0_2" style="">    <a href="" style="" class="SubSubMenuCMSTreeMenuLink" id="ctl00_plcMain_LeftTreeMenu_tid_0_2_item" onclick="window.open('http://www.gmia.ca');" >Airport</a></td></tr>

etc.... to complete the tree menu.

And the pop creates successfully, but the main page then "posts back" and returns with:
<html><head><title>Error</title></head><body>The system cannot find the path specified.
</body></html>

User avatar
Kentico Developer
Kentico Developer
kentico_helenag - 2/12/2009 8:29:15 AM
   
RE:Menu Items Linking to Another Site
Hello,

I am sorry for the inaccuracy. I meant if the redirecting page has some content.

1. Go to CMSDesk -> Content
2. Select the page which has the property of JavaScript redirection in Menu tab
3. View this page in the Live site mode (or Preview or Edit)

What is the result?

Do you see some content or the blank page? Or do you get the same page error?

Best regards,
Helena Grulichova

User avatar
Member
Member
danielrichard-oaot - 2/12/2009 10:48:29 AM
   
RE:Menu Items Linking to Another Site
Yup, that's what I did. Same result whether viewing it on the actual site or within CMSDesk -> Live site mode. It pops up the new window with the proper URL fine, but reloads the main page with the "The system cannot find the path specified" error.

When the page is first loaded, this is the URL:
http://mydomain/CompanyLocations/Canada/Moncton

Then, when it does the pop up and returns the postback, this is the URL it reloads:
http://mydomain/CompanyLocations/Canada/

So it seems it's truncating off the "Moncton" on the postback, which results in the page not found.

User avatar
Kentico Support
Kentico Support
kentico_jurajo - 2/17/2009 1:18:44 AM
   
RE:Menu Items Linking to Another Site
Hi,

Could you please try to use this javascript command in the URL redirection:

window.open('http://www.gmia.ca');return false;

The return false should ensure that the main page is not refreshed.


Best Regards,
Juraj Ondrus

User avatar
Member
Member
pralph-kids4truth - 6/2/2009 1:37:24 PM
   
RE:Menu Items Linking to Another Site
I was having the same problem as above.
I tried putting "javascript:window.open('http://www.google.com');return false;" in the URL redirection box, but after the new window opened correctly, the original webpage still posted back and I got a blank webpage that just said "false".

of course, putting "javascript:window.open('http://www.google.com');false;" into the URL redirection box did the same thing.

I solved this by putting "javascript:window.open('http://www.google.com');AnythingNonJavascriptHere;" into the URL box and it works. The new window opens the URL and the original window does nothing.

Since the page did a postback even when I returned false, I'm guessing what happens is that after opening the new window the script just dies on the next statement and doesn't return at all, so no post back.

User avatar
Kentico Developer
Kentico Developer
kentico_martind - 6/9/2009 10:49:26 AM
   
RE:Menu Items Linking to Another Site
Hello,

could you please put following code into 'Javascript command:' field:

window.open('http://www.google.com');return false;

instead of putting javascript:window.open('http://www.google.com');false; into 'URL redirection:' field?

This code has been tested and should work well.

Best Regards,

Martin Dobsicek

User avatar
Member
Member
Chris - 6/14/2009 9:07:03 PM
   
RE:Menu Items Linking to Another Site
You can solve your problem by approaching from an entirely different direction. The real problem with the inline JavaScript commands are that they aren't semantically correct HTML.

What about any scenario where JavaScript is inappropriate -- like a mobile browser or where JavaScript is disabled?

It is much better to start with semantically correct HTML and apply behavior with JavaScript after the fact -- just like format/style is applied after the fact with CSS.

So, instead, just link the menu directly to the external URL and skip all this futzing around with window.open(). Your HTML will be "correct" at that point.

Then, in your main script (or wherever) add one line of jQuery:

$("#nav a[href^='http://']").attr("target", "_blank");

...where "nav" is the ID of your menu. (The above could be optimized further depending on your markup but that isn't the point of this exercise.)

That finds all the anchor tags in your menu that start with "http://" (external links) and sets the "target" attribute to "_blank".

For browsers that support JavaScript, you get the desired effect. For other browsers or viewing scenarios, at least the markup contains the correct link and remains functional.

User avatar
Kentico Developer
Kentico Developer
kentico_zbysekn - 6/15/2009 4:43:39 AM
   
RE:Menu Items Linking to Another Site
Hi Chris,
thanks for suggestion, yes this is probably the most efficient way to achieve required behavior without problems connected with mobile devices etc.
Best Regards,
Zbysek Nemec.

User avatar
Member
Member
steve.grace-first4skills - 4/26/2011 7:32:53 AM
   
RE:Menu Items Linking to Another Site
I realise this is an old post but would like to implement the solution.

Can you give an example of ...
Then, in your main script (or wherever)
...as I'm unsure what the main script might be.

thanks,

steve


User avatar
Member
Member
Chris - 4/26/2011 7:44:56 AM
   
RE:Menu Items Linking to Another Site
Hi Steve -

The requirements for the suggested approach are a reference to jQuery and then some script block or externally referenced script that uses that jQuery selector and DOM manipulation to affect the external links.

So, you'll have a reference to jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

(or whatever version you want to use or a local version)

...and you'll have a reference to your "main script:"

<script src="/App_Themes/ThemeName/Scripts/main.js"></script>

Obviously that file name/location is arbitrary and can be called/located whatever/wherever it makes sense for you.

In main.js:

$(function(){
$('#nav a[href^="http://"]').attr('target', '_blank');
});

...where you'll need to adjust the selector (at least) to match whatever markup you're using.

Hope that helps.

User avatar
Kentico Developer
Kentico Developer
kentico_helenag - 4/26/2011 8:18:55 AM
   
RE:Menu Items Linking to Another Site
Hello,


thank you for your sample. Just a small note. I would recommend you using API to register jQuery:

CMS.GlobalHelper.ScriptHelper.RegisterJQuery(Page)

It ensures that jQuery is registered only once on the page. The double registration could cause an error.


Best regards,
Helena Grulichova

User avatar
Member
Member
steve.grace-first4skills - 4/26/2011 8:32:13 AM
   
RE:Menu Items Linking to Another Site
I'm working with an application already developed so I can see I'm likely to get into deep water here!

Re..
So, you'll have a reference to jQuery... where will/should this reference be, and will...
and you'll have a reference to your "main script:"....be in the same place?

Re using the API to register jQuery again where would..
CMS.GlobalHelper.ScriptHelper.RegisterJQuery(Page)...be entered?


User avatar
Member
Member
Chris - 4/26/2011 10:07:16 AM
   
RE:Menu Items Linking to Another Site
My guidance was unfortunately not meant to be a step-by-step on how to include and use jQuery and other JavaScript files so you'll need to find those answers elsewhere.

Helena may be able to provide more assistance on where their API call can be used to include jQuery safely, however.

User avatar
Kentico Developer
Kentico Developer
kentico_helenag - 4/27/2011 12:28:43 PM
   
RE:Menu Items Linking to Another Site
Hello,

you can register jQuery anywhere - a custom web part, control or in the code behing of ASPX template. You can use it like:

ScriptHelper.RegisterJQuery(this.Page);


Best regards,
Helena Grulichova