Dynamically change on link click without reloading any content</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2014-01-14T13:47:19.170" class="fromnow">Jan 14 '14 at 13:47</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2014-01-14T14:48:06.700" datetime="2014-01-14T14:48:06.700">Jan 14 '14 at 14:48</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 1,752 times"> <span class="fc-light mr2">Viewed</span> 1,752 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="21115128" data-ownerid="1894453" data-score="0"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="21115128"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p><strong>TL;DR</strong></p> <p>What is the best way to change a page's <code><title></code> tag when a link is clicked but page content is not re-loaded (simply shown/hidden via CSS)? Some JavaScript, I would assume?</p> <hr/> <p>On this page (<a class="external-link" href="http://www.ukipme.com/pub-marine.php" rel="nofollow">http://www.ukipme.com/pub-marine.php</a>) I have two methods for viewing individual magazines. Clicking on the magazine cover on the right completely re-loads the page with a query string (e.g. <code>?mag=1</code>) appended to the URL and we have set the <code><title></code> tag to change then, but this was additional functionality we added via PHP. The framework's original method of changing content was simply to change shown/hidden content via CSS (basic JavaScript to add and remove an <code>active</code> class) by clicking on the left-hand tabs.</p> <p>However, I would like for the page title to change when these left-hand tabs are clicked, also. The HTML code for the tabs is as follows:</p> <pre class="s-code-block"><code><ul class="tab-nav three columns"> <li class="active" ><a href="#" class="skip" gumby-goto="#top_of_page" gumby-offset="-60">Electric & Hybrid Marine</a></li> <li><a href="#" class="skip" gumby-goto="#top_of_page" gumby-offset="-60">Marine Catering</a></li> <li><a href="#" class="skip" gumby-goto="#top_of_page" gumby-offset="-60">Marine Maintenance</a></li> <li><a href="#" class="skip" gumby-goto="#top_of_page" gumby-offset="-60">Shipping Port</a></li> <li><a href="#" class="skip" gumby-goto="#top_of_page" gumby-offset="-60">ALL TITLES</a></li> </ul> </code></pre> <p>And for their content:</p> <pre class="s-code-block"><code><div class="tab-content nine columns"> <div class="row"> <div class="twelve columns"> <a href="?mag=1"><img src="../img/covers/evm.jpg" alt="Electric & Hybrid Marine" style="margin: 0 10px 10px 0;" /></a> <a href="?mag=2"><img src="../img/covers/mci.jpg" alt="Marine Catering" style="margin: 0 10px 10px 0;" /></a> <a href="?mag=3"><img src="../img/covers/mmi.jpg" alt="Marine Maintenance" style="margin: 0 10px 10px 0;" /></a> <a href="?mag=4"><img src="../img/covers/spi.jpg" alt="Shipping Port" style="margin: 0 10px 10px 0;" /></a> </div> </div> </div> </code></pre> <p>I tried investigating, and I think something needs to happen in the <code>DOM</code>, but my JavaScript knowledge is unfortunately, almost completely non-existent. Can anyone kindly help?</p> <p><strong>EDIT:</strong></p> <p>I've tried changing my <code><a></code> tags to the following, but this doesn't seem to do anything:</p> <pre class="s-code-block"><code><a onclick="window.document.title='<?=$title?> | UKIP Media & Events'" href="#" class="skip" gumby-goto="#top_of_page" gumby-offset="-60"></a> </code></pre> <p>(<code>$title</code> is a PHP variable set on page load)</p> <p><strong>SECOND EDIT @MGA</strong></p> <p>My link now looks like so:</p> <pre class="s-code-block"><code><a href="#" onclick="changetitle()" class="skip" gumby-goto="#top_of_page" gumby-offset="-60"> </code></pre> <p>With this script at the bottom of the page:</p> <pre class="s-code-block"><code><script type="text/javascript"> function changetitle() { document.title = "<?=$title?> | UKIP Media & Events"; } </script> </code></pre> <p>But still nothing happens?</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/jquery" class="post-tag js-gps-track" title="show questions tagged 'jquery'" rel="tag">jquery</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2014-01-14T14:09:24.653" class="relativetime">Jan 14 '14 at 14:09</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">mpdc</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jan 14 '14 at 13:47">asked Jan 14 '14 at 13:47</time> <a href="../../users/1894453/mpdc" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1894453.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="mpdc" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/1894453/mpdc" class="s-user-card--link">mpdc</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">3,440</li> <li class="s-award-bling s-award-blinggold" title="4 gold badges">4</li> <li class="s-award-bling s-award-blingsilver" title="20 silver badges">20</li> <li class="s-award-bling s-award-blingbronze" title="44 bronze badges">44</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-21115128" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="21115128" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-31769190" class="comment js-comment " data-comment-id="31769190" data-comment-owner-id="2535457" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment31769190_21115128"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Here is the way you can change the Title by JavaScript: http://stackoverflow.com/questions/413439/how-to-dynamically-change-a-web-pages-title</span> – <a href="../../users/2535457/schnawel007" title="3,770 reputation" class="comment-user ">schnawel007</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/21115128/dynamically-change-title-on-link-click-without-reloading-any-content#comment31769190_21115128"><span title="2014-01-14T13:50:20.243 License: CC BY-SA 3.0" class="relativetime-clean">Jan 14 '14 at 13:50</span></a></span> </div> </div> </li> <li id="comment-31769258" class="comment js-comment " data-comment-id="31769258" data-comment-owner-id="1894453" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment31769258_21115128"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">I had a look at this question, but unfortunately it turned in to a discussion on how this method is bad for SEO, and so a full answer never seemed to be given. I see that I should use `document.title`, but: Where? How? When?</span> – <a href="../../users/1894453/mpdc" title="3,440 reputation" class="comment-user owner">mpdc</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/21115128/dynamically-change-title-on-link-click-without-reloading-any-content#comment31769258_21115128"><span title="2014-01-14T13:52:05.453 License: CC BY-SA 3.0" class="relativetime-clean">Jan 14 '14 at 13:52</span></a></span> </div> </div> </li> <li id="comment-31769452" class="comment js-comment " data-comment-id="31769452" data-comment-owner-id="2535457" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment31769452_21115128"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Just everywhere, in your case, the best thing will be on the document ready event (jQuery). Than you can read your `mag` Parameter an then change the Title with `document.title = "I'm your Title"`.</span> – <a href="../../users/2535457/schnawel007" title="3,770 reputation" class="comment-user ">schnawel007</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/21115128/dynamically-change-title-on-link-click-without-reloading-any-content#comment31769452_21115128"><span title="2014-01-14T13:57:02.213 License: CC BY-SA 3.0" class="relativetime-clean">Jan 14 '14 at 13:57</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">2 Answers<span style="display:none;" itemprop="answerCount">2</span></h2> </div> </div> </div> <a name="21115476"></a> <div id="answer-21115476" class="answer " data-answerid="21115476" data-ownerid="1240115" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="21115476"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>function changetitle(value) { document.title = value; }</p> <p>Call this method on your onClick() method of link, and pass the value(new title) and keep this method either in your JS script file or write in script tag on HTML</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jan 14 '14 at 14:02">answered Jan 14 '14 at 14:02</time> <a href="../../users/1240115/mga" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1240115.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="MGA" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/1240115/mga" class="s-user-card--link">MGA</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">461</li> <li class="s-award-bling s-award-blingsilver" title="2 silver badges">2</li> <li class="s-award-bling s-award-blingbronze" title="11 bronze badges">11</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-21115476" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="21115476" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-31769995" class="comment js-comment " data-comment-id="31769995" data-comment-owner-id="1894453" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment31769995_21115476"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Thank you for your answer. Please could you take a look at my second edit and let me know where I'm going wrong with your method?</span> – <a href="../../users/1894453/mpdc" title="3,440 reputation" class="comment-user owner">mpdc</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/21115128/dynamically-change-title-on-link-click-without-reloading-any-content#comment31769995_21115476"><span title="2014-01-14T14:10:50.673 License: CC BY-SA 3.0" class="relativetime-clean">Jan 14 '14 at 14:10</span></a></span> </div> </div> </li> <li id="comment-31770034" class="comment js-comment " data-comment-id="31770034" data-comment-owner-id="1240115" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment31770034_21115476"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Try if this works ? <script type="text/javascript"> function changetitle() { document.title = "ABC"; } </script></span> – <a href="../../users/1240115/mga" title="461 reputation" class="comment-user ">MGA</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/21115128/dynamically-change-title-on-link-click-without-reloading-any-content#comment31770034_21115476"><span title="2014-01-14T14:11:52.690 License: CC BY-SA 3.0" class="relativetime-clean">Jan 14 '14 at 14:11</span></a></span> </div> </div> </li> <li id="comment-31770086" class="comment js-comment " data-comment-id="31770086" data-comment-owner-id="1894453" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment31770086_21115476"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Unfortunately not, no.</span> – <a href="../../users/1894453/mpdc" title="3,440 reputation" class="comment-user owner">mpdc</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/21115128/dynamically-change-title-on-link-click-without-reloading-any-content#comment31770086_21115476"><span title="2014-01-14T14:13:14.337 License: CC BY-SA 3.0" class="relativetime-clean">Jan 14 '14 at 14:13</span></a></span> </div> </div> </li> <li id="comment-31770465" class="comment js-comment " data-comment-id="31770465" data-comment-owner-id="1240115" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment31770465_21115476"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">If you are working with forms or iframes, try parent.document.title = "Value"</span> – <a href="../../users/1240115/mga" title="461 reputation" class="comment-user ">MGA</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/21115128/dynamically-change-title-on-link-click-without-reloading-any-content#comment31770465_21115476"><span title="2014-01-14T14:22:50.830 License: CC BY-SA 3.0" class="relativetime-clean">Jan 14 '14 at 14:22</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="21116453"></a> <div id="answer-21116453" class="answer " data-answerid="21116453" data-ownerid="650037" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="21116453"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>if i run this on your site, the effect is as desired, i think:</p> <pre class="s-code-block"><code>$('.tab-nav a').each(function() { $(this).on('click', function() { document.title = $(this).text() + ' | UKIP Media & Events'; }); }); </code></pre> <p>you could just put this in the document ready block of your general JS code. granted, this is a little hacky.</p> <hr/> <p>combining this with your approach, the link would be:</p> <pre class="s-code-block"><code><a href="#" onclick="changetitle($(this).text());" ...> </code></pre> <p>and the changetitle function:</p> <pre class="s-code-block"><code><script type="text/javascript"> function changetitle(title) { document.title = title + " | UKIP Media & Events"; } </script> </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jan 14 '14 at 14:48">answered Jan 14 '14 at 14:48</time> <a href="../../users/650037/sashn" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/650037.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="sashn" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/650037/sashn" class="s-user-card--link">sashn</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">2,389</li> <li class="s-award-bling s-award-blinggold" title="3 gold badges">3</li> <li class="s-award-bling s-award-blingsilver" title="18 silver badges">18</li> <li class="s-award-bling s-award-bling__bronze" title="15 bronze badges">15</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script> /* replace <time class="fromnow" /> with human delta between `datetime` attr and now */ document.addEventListener('DOMContentLoaded', function(){ var time_elements = document.querySelectorAll("time.fromnow"); for (var i=0; i<time_elements.length; i++) { time_elements[i].innerHTML = moment(time_elements[i].getAttribute("datetime")).fromNow(); } }); </script> </body> </html>