anchor links on purl doesnt work

142 views
Skip to first unread message

Moritz Kress

unread,
Aug 1, 2019, 3:47:11 AM8/1/19
to XMPie Interest Group
Hi,
I have come accross a strange problem with anchor links an a purl:
Once I add the controler ng-controller="XMPPersonalizedPage" to the body tag my anchor links do not work anymore.

instead of .....link#destination it tries to go to ....link#/destination

Have I done anything wrong? Or has anyone an idea for a workaround?
Regards
Moritz

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Anchor Test</title>

<!-- XMPie XMPL library -->
<link href="https://ajax.xmcircle.com/ajax/libs/xmpl/3.1/xmp/css/xmp.css" rel="stylesheet" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.xmcircle.com/ajax/libs/xmpl/3.1/xmp/js/xmp.min.js"></script>
<script src="./xmpcfg.js"></script>


</head>
<body ng-app="xmp.app" ng-controller="XMPPersonalizedPage">

<div id="oben" style="background-color: yellow; height: 2000px; width: 100%">Top <a href="#unten" style="margin-bottom: 800px">go to bottom</a></div>
<div id="unten" style="background-color: #1e7e34; height: 100px; width: 100%">Bottom <a href="#oben" style="margin-bottom: 800px">go to top</a></div>

</body>
</html>


Moritz Kress

unread,
Aug 1, 2019, 5:01:29 AM8/1/19
to XMPie Interest Group
It works as expected when target="_self" is added to the link.

Jason Luczynski

unread,
Jan 13, 2020, 9:15:51 AM1/13/20
to XMPie Interest Group
Hi Moritz,

I am having the same issue as you were. I added target="_self" to my link as you stated but it is still adding link#/destination. Can you paste your link code or help me out. Maybe I'm missing something. Thank you.

Jason Luczynski

unread,
Jan 13, 2020, 9:20:32 AM1/13/20
to XMPie Interest Group
<!DOCTYPE HTML>

<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="assets/css/main.css" />
        <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>

        <!-- XMPie XMPL library -->
        <link href="https://ajax.xmcircle.com/ajax/libs/xmpl/3.1/xmp/css/xmp.css" rel="stylesheet" media="screen">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="https://ajax.xmcircle.com/ajax/libs/xmpl/3.1/xmp/js/xmp.min.js"></script>
        <script src="./xmpcfg.js"></script>
       
        </head>
    <body ng-app="xmp.app"
      ng-controller="XMPPersonalizedPage"
      xmp-cloak
      xmp-clear-all-cookies-onload
      xmp-tracking-page-name="Landing">

        <!-- Wrapper -->
            <div id="wrapper">
                <!-- Header -->
                    <header id="header">
                        <div class="logo">
                            <i class="fas fa-cross"></i>
                        </div>
                        <div class="content">
                            <div class="inner">
                                <h1>{{xmp.r.salutation}}</h1>
                            </div>
                        </div>
                        <nav>
                            <ul>
                                <li><a href="#letter" target="_self">Letter</a></li>
                            </ul>
                        </nav>
                    </header>

                <!-- Main -->
                    <div id="main">

                        <!-- Intro -->
                            <article id="letter" name="letter">
                                <h2 class="major">A Message</h2>

Wayne

unread,
Jan 13, 2020, 5:02:44 PM1/13/20
to XMPie Interest Group
Try copying the link into a browser.
I think you will find it is the browser adding the  / to the URL
See https://en.wikipedia.org/wiki/URL for more details.

Regards,
Wayne

Moritz Kress

unread,
Jan 14, 2020, 4:46:50 AM1/14/20
to XMPie Interest Group
Hi Jason,

I just looked at it again and noticed the URL does not show correctly, yet with the target it works even though the URL is shown wrong in the browser address. I put together an example and also added your code:


Regards
Moritz

Jason Luczynski

unread,
Feb 13, 2020, 10:46:26 AM2/13/20
to XMPie Interest Group
Doing a little more research on this i discovered that everything does work as it is intended to with the #/ in I.E. but will not work in Chrome, FireFox or Edge.

I get a syntax error at this point in my js.

       else if ($main_articles.filter(location.hash).length > 0)

I'm not knowledgeable in js, so i have no idea how to fix this.

Here is a sample page.


Any help would be greatly appreciated.

Jason

On Thursday, August 1, 2019 at 3:47:11 AM UTC-4, Moritz Kress wrote:

Wayne

unread,
Feb 13, 2020, 3:43:37 PM2/13/20
to XMPie Interest Group
Hi Jason
I added a .replace('/','') to remove the "/" please see updated main.js file below
Also JQuery is loaded in the deader so you don't need to reload at the bottom.



/*
Dimension by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

(function($) {

var $window = $(window),
$body = $('body'),
$wrapper = $('#wrapper'),
$header = $('#header'),
$footer = $('#footer'),
$main = $('#main'),
$main_articles = $main.children('article');

// Breakpoints.
breakpoints({
xlarge:   [ '1281px',  '1680px' ],
large:    [ '981px',   '1280px' ],
medium:   [ '737px',   '980px'  ],
small:    [ '481px',   '736px'  ],
xsmall:   [ '361px',   '480px'  ],
xxsmall:  [ null,      '360px'  ]
});

// Play initial animations on page load.
$window.on('load', function() {
window.setTimeout(function() {
$body.removeClass('is-preload');
}, 100);
});

// Fix: Flexbox min-height bug on IE.
if (browser.name == 'ie') {

var flexboxFixTimeoutId;

$window.on('resize.flexbox-fix', function() {

clearTimeout(flexboxFixTimeoutId);

flexboxFixTimeoutId = setTimeout(function() {

if ($wrapper.prop('scrollHeight') > $window.height())
$wrapper.css('height', 'auto');
else
$wrapper.css('height', '100vh');

}, 250);

}).triggerHandler('resize.flexbox-fix');

}

// Nav.
var $nav = $header.children('nav'),
$nav_li = $nav.find('li');

// Add "middle" alignment classes if we're dealing with an even number of items.
if ($nav_li.length % 2 == 0) {

$nav.addClass('use-middle');
$nav_li.eq( ($nav_li.length / 2) ).addClass('is-middle');

}

// Main.
var delay = 325,
locked = false;

// Methods.
$main._show = function(id, initial) {

var $article = $main_articles.filter('#' + id);

// No such article? Bail.
if ($article.length == 0)
return;

// Handle lock.

// Already locked? Speed through "show" steps w/o delays.
if (locked || (typeof initial != 'undefined' && initial === true)) {

// Mark as switching.
$body.addClass('is-switching');

// Mark as visible.
$body.addClass('is-article-visible');

// Deactivate all articles (just in case one's already active).
$main_articles.removeClass('active');

// Hide header, footer.
$header.hide();
$footer.hide();

// Show main, article.
$main.show();
$article.show();

// Activate article.
$article.addClass('active');

// Unlock.
locked = false;

// Unmark as switching.
setTimeout(function() {
$body.removeClass('is-switching');
}, (initial ? 1000 : 0));

return;

}

// Lock.
locked = true;

// Article already visible? Just swap articles.
if ($body.hasClass('is-article-visible')) {

// Deactivate current article.
var $currentArticle = $main_articles.filter('.active');

$currentArticle.removeClass('active');

// Show article.
setTimeout(function() {

// Hide current article.
$currentArticle.hide();

// Show article.
$article.show();

// Activate article.
setTimeout(function() {

$article.addClass('active');

// Window stuff.
$window
.scrollTop(0)
.triggerHandler('resize.flexbox-fix');

// Unlock.
setTimeout(function() {
locked = false;
}, delay);

}, 25);

}, delay);

}

// Otherwise, handle as normal.
else {

// Mark as visible.
$body
.addClass('is-article-visible');

// Show article.
setTimeout(function() {

// Hide header, footer.
$header.hide();
$footer.hide();

// Show main, article.
$main.show();
$article.show();

// Activate article.
setTimeout(function() {

$article.addClass('active');

// Window stuff.
$window
.scrollTop(0)
.triggerHandler('resize.flexbox-fix');

// Unlock.
setTimeout(function() {
locked = false;
}, delay);

}, 25);

}, delay);

}

};

$main._hide = function(addState) {

var $article = $main_articles.filter('.active');

// Article not visible? Bail.
if (!$body.hasClass('is-article-visible'))
return;

// Add state?
if (typeof addState != 'undefined'
&& addState === true)
history.pushState(null, null, '#');

// Handle lock.

// Already locked? Speed through "hide" steps w/o delays.
if (locked) {

// Mark as switching.
$body.addClass('is-switching');

// Deactivate article.
$article.removeClass('active');

// Hide article, main.
$article.hide();
$main.hide();

// Show footer, header.
$footer.show();
$header.show();

// Unmark as visible.
$body.removeClass('is-article-visible');

// Unlock.
locked = false;

// Unmark as switching.
$body.removeClass('is-switching');

// Window stuff.
$window
.scrollTop(0)
.triggerHandler('resize.flexbox-fix');

return;

}

// Lock.
locked = true;

// Deactivate article.
$article.removeClass('active');

// Hide article.
setTimeout(function() {

// Hide article, main.
$article.hide();
$main.hide();

// Show footer, header.
$footer.show();
$header.show();

// Unmark as visible.
setTimeout(function() {

$body.removeClass('is-article-visible');

// Window stuff.
$window
.scrollTop(0)
.triggerHandler('resize.flexbox-fix');

// Unlock.
setTimeout(function() {
locked = false;
}, delay);

}, 25);

}, delay);


};

// Articles.
$main_articles.each(function() {

var $this = $(this);

// Close.
$('<div class="close">Close</div>')
.appendTo($this)
.on('click', function() {
location.hash = '';
});

// Prevent clicks from inside article from bubbling.
$this.on('click', function(event) {
event.stopPropagation();
});

});

// Events.
$body.on('click', function(event) {

// Article visible? Hide.
if ($body.hasClass('is-article-visible'))
$main._hide(true);

});

$window.on('keyup', function(event) {

switch (event.keyCode) {

case 27:

// Article visible? Hide.
if ($body.hasClass('is-article-visible'))
$main._hide(true);

break;

default:
break;

}

});

$window.on('hashchange', function(event) {
// Empty hash?
if (location.hash == ''
|| location.hash == '#') {

// Prevent default.
event.preventDefault();
event.stopPropagation();

// Hide.
$main._hide();

}

// Otherwise, check for a matching article.
else if ($main_articles.filter(location.hash.replace('/','')).length > 0) {
// Prevent default.
event.preventDefault();
event.stopPropagation();

// Show article.
$main._show(location.hash.substr(1).replace('/',''));

}

});

// Scroll restoration.
// This prevents the page from scrolling back to the top on a hashchange.
if ('scrollRestoration' in history)
history.scrollRestoration = 'manual';
else {

var oldScrollPos = 0,
scrollPos = 0,
$htmlbody = $('html,body');

$window
.on('scroll', function() {

oldScrollPos = scrollPos;
scrollPos = $htmlbody.scrollTop();

})
.on('hashchange', function() {
$window.scrollTop(oldScrollPos);
});

}

// Initialize.

// Hide main, articles.
$main.hide();
$main_articles.hide();

// Initial article.
if (location.hash != ''
&& location.hash != '#')
$window.on('load', function() {
$main._show(location.hash.substr(1).replace('/',''), true);
});

})(jQuery);

Jason Luczynski

unread,
Feb 14, 2020, 12:46:42 PM2/14/20
to XMPie Interest Group
Wayne,
That worked great! I appreciate you looking into this!
Jason
Reply all
Reply to author
Forward
0 new messages