Revision 288 is a pre-publication revision. (Viewing current revision instead.)

wp_nav_menu – Make Links Open In A New Window

Taken from here: http://techstudio.co/web-design/the-best-way-to-make-links-open-in-a-new-window The old method for setting links up to open in a new window causes validation errors in xHTML. [html]<code><a href=</code><code>"#"</code> <code>target=</code><code>"_blank"</code><code>>link</a></code>[/html] The right way is to use the following markup. [html]<code><a href=</code><code>"#"</code> <code>rel=</code><code>"external"</code><code>>link</a></code>[/html] But for that markup to work the following Javascript must be included in your document. [js]<code>function</code> <code>externalLinks() {</code> <div><code>     </code><code>if</code> <code>(!document.getElementsByTagName) </code><code>return</code><code>;</code></div> <div><code>     </code><code>var</code> <code>anchors = document.getElementsByTagName(</code><code>"a"</code><code>);</code></div> <div><code>     </code><code>for</code> <code>(</code><code>var</code> <code>i=0; i<anchors.length; i++) {</code></div> <div><code>          </code><code>var</code> <code>anchor = anchors[i];</code></div> <div><code>          </code><code>if</code> <code>(anchor.getAttribute(</code><code>"href"</code><code>) && anchor.getAttribute(</code><code>"rel"</code><code>) == </code><code>"external"</code><code>) anchor.target = </code><code>"_blank"</code><code>;</code></div> <div><code>     </code><code>}</code></div> <div><code>}</code></div> [/js]

Revisions

  • October 18, 2012 @ 05:44:10 [Current Revision] by PeterLugg
  • October 18, 2012 @ 05:42:28 by PeterLugg

Revision Differences

October 18, 2012 @ 05:42:28Current Revision
Content
 Added: Taken from here: <a href="http:// techstudio.co/web-design/ the-best-way- to-make-links- open-in-a-new-window" target="_blank" >http://techstudio.co/web- design/the-best- way-to-make- links-open-in- a-new-window</a>
 Added: The old method for setting links up to open in a new window causes validation errors in xHTML.
 Added: [html]&lt;code&gt;&lt;a href=&lt;/code&gt; &lt;code&gt;&quot;#&quot; &lt;/code&gt; &lt;code&gt;target= &lt;/code&gt; &lt;code&gt; &quot;_blank&quot; &lt;/code&gt; &lt;code&gt;&gt;link&lt;/ a&gt;&lt;/code&gt;[/html]
 Added: The right way is to use the following markup.
 Added: [html]&lt;code&gt;&lt;a href=&lt;/code&gt; &lt;code&gt;&quot;#&quot; &lt;/code&gt; &lt;code&gt;rel= &lt;/code&gt; &lt;code&gt; &quot;external&quot;&lt;/ code&gt;&lt;code&gt; &gt;link&lt; /a&gt;&lt;/code&gt;[/html]
 Added: But for that markup to work the following Javascript must be included in your document.
 Added: [js]&lt;code&gt; function&lt;/code&gt; &lt;code&gt;externalLinks() {&lt;/code&gt;
 Added: &lt;div&gt;&lt; code&gt;     &lt;/code&gt; &lt;code&gt;if&lt;/code&gt; &lt;code&gt;( !document.getElementsByTagName) &lt;/code&gt; &lt;code&gt;return&lt;/code&gt; &lt;code&gt;; &lt;/code&gt; &lt;/div&gt;
 Added: &lt;div&gt;&lt; code&gt;     &lt;/code&gt; &lt;code&gt;var&lt;/code&gt; &lt;code&gt;anchors = document.getElementsByTagName( &lt;/code&gt; &lt;code&gt; &quot;a&quot; &lt;/code&gt; &lt;code&gt;) ;&lt;/code&gt; &lt;/div&gt;
 Added: &lt;div&gt;&lt; code&gt;     &lt;/code&gt; &lt;code&gt;for&lt;/code&gt; &lt;code&gt;( &lt;/code&gt; &lt;code&gt; var&lt;/code&gt; &lt;code&gt;i=0; i&lt;anchors.length; i++) {&lt;/code&gt; &lt;/div&gt;
 Added: &lt;div&gt;&lt; code&gt;          &lt; /code&gt;&lt; code&gt;var&lt;/code&gt; &lt;code&gt;anchor = anchors[i];&lt; /code&gt;&lt;/div&gt;
 Added: &lt;div&gt;&lt; code&gt;          &lt; /code&gt;&lt; code&gt;if&lt;/code&gt; &lt;code&gt;( anchor.getAttribute(&lt;/ code&gt;&lt;code&gt;&quot; href&quot;&lt; /code&gt;&lt;code&gt;) &amp;&amp; anchor.getAttribute( &lt;/code&gt; &lt;code&gt; &quot;rel&quot; &lt;/code&gt; &lt;code&gt;) == &lt;/code&gt; &lt;code&gt;&quot; external&quot; &lt;/code&gt; &lt;code&gt;) anchor.target = &lt;/code&gt; &lt;code&gt;&quot; _blank&quot; &lt;/code&gt; &lt;code&gt; ;&lt;/code&gt; &lt;/div&gt;
 Added: &lt;div&gt;&lt; code&gt;     &lt;/code&gt; &lt;code&gt;}&lt;/code&gt; &lt;/div&gt;
 Added: &lt;div&gt;&lt; code&gt;}&lt; /code&gt;&lt;/div&gt;
Deleted: Added: [/js]

Note: Spaces may be added to comparison text to allow better line wrapping.

Tags:

No comments yet.

Leave a Reply