Page Anchors In Yesod - html

Normally you can specify an anchor on a page such as "index.html" with code such as:
Link Text
You can then jump to that anchor when the page is displayed by including it in the path:
http://example.com/index.html#anchor
I am developing a landing page with the Yesod Haskell framework, and would like to integrate this functionality into my landing page.
Currently I have a navigation bar with several links at the top of the page. The navbar is specified with hamlet as:
<div #navbar .collapse.navbar-collapse>
<ul .nav.navbar-nav>
<li :Just HomeR == mcurrentRoute:.active>
<a href=#{HomeR}>_{MsgHome}
Note that the href is specified with "HomeR". "HomeR" is defined in the Yesode "config/routes" file that lists all of the paths for the site.
It looks like:
/ HomeR GET
/settings SettingsR GET
Here is my problem. I can add an anchor to a section of the hamlet specification, then modify the href on the title bar to jump to that section such as:
<li :Just HomeR == mcurrentRoute:.active>
<a href=#{HomeR}#section0>_{MsgHome}
However this is annoying for several reasons. First the anchor is not checked for validity at compile time like the other paths.
Second normally the current page is highlighted on the navigation bar with the code:
<li :Just HomeR == mcurrentRoute:.active>
With this approach I can highlight for individual pages, but not individual anchors within a page.
Is there a way to insert safe anchors into the Yesod config/routes file. Or is it only possible to have a route with actual pages. This would allow jumping to sections of the page in the navbar, then highlighting the section that was clicked on. If this is not possible is there a better way to deal with page anchors in yesod?

Related

Angular2 Routing Page Anchor Issue

I am having an issue where I believe Angular2 is interfering with how it handles normal anchor tags in HTML. I have several links within the page under "Content2" with attempts in referencing sections of that page.
<div id="navigation">
<a [routerLink]="['#section01']" fragment="section01" style=background:magenta>Section 1</a><br/>
<a [routerLink]="['#section02']" fragment="section02" style=background:cyan>Section 2</a><br/>
<a href="#section03" style=background:yellow>section 3</a><br/>
<a href="#section04" style=background:red>section 4</a><br/>
<a [routerLink]="['/content02']" fragment="section05" style=background:green>Section 5</a><br/>
</div>
My goal is to allow the navigation bar to serve as a navigation tool that sits outside of the HTML I am trying to call, but is still able to directly link sections within the HTML, in this case to Content2.
Here's the Plunker to my predicament:
https://next.plnkr.co/edit/MFtSgY0e57nAG6D5
I have even tried to reference the HTML with a direct routerLink from the navigation bar but it will not comply. I'm sure I am missing something very fundamental to Angular2 routing. Or perhaps I'm missing how the routes should have been structured in the first place.

Navigation Breaking Links By Word [Weebly]

I'm very new to website creation. I've been using Weebly and I have a navigation bar that I'd like to change up a bit. I got in contact with the support team as I was unable to do what I wanted to do - they said I would need (myself or someone else) to edit the HTML and CSS to get my desired output.
Current Navigation
This is my navigation bar - I'm looking to break each of the links into multi-line (if that makes sense). So where it says: "Management Consulting" - I want Management to be on top, and Consulting to be under that. Same goes for "Economic Development," "Strategic Communications," and "About Us." So navigation links with more than 1 word, I want to break by word.
I went to the Weebly navigation folder for the code: Weebly Navigation Code Location
Here is the file item.tpl
<li {{#id}}id="{{id}}"{{/id}} class="wsite-menu-item-wrap">
<a
{{^nonclickable}}
{{^nav_menu}}
href="{{url}}"
{{/nav_menu}}
{{/nonclickable}}
{{#target}}
target="{{target}}"
{{/target}}
{{#membership_required}}
data-membership-required="{{.}}"
{{/membership_required}}
class="wsite-menu-item"
>
{{{title_html}}}
</a>
{{#has_children}}{{> navigation/flyout/list}}{{/has_children}}
</li>
list.tpl
<ul class="wsite-menu-default">
{{#links}}
{{> navigation/item}}
{{/links}}
</ul>
From my understanding (or lack there of), the "Flyout" is the mobile tab thing. So this shouldn't need an edit!
Is this doable? I appreciate it!

html navigation page-jump

I am creating a website with navigation that causes a page-jump. But when the page-jump event is executed my page will not load properly, and most content above the called is not loaded. Here is a copy of my navigation:
<div id="navbar-type">
<ul>
<li>BEAR SOUP</li>
<li>FIAT MOTORS</li>
<li>NEWSEUM</li>
<li>TEXAS PARKS</li>
<li>ZACH THEATRE</li>
<li>GUINNESS</li>
</ul>
</div>
How can I fix the code so that the items above the page-jump are visible?
Thanks
you just need to put <a name="bear-logo"> where you want the page to scroll to when the user clicks the link and the same for the others. For example, if you wanted to scroll to the <p> tag below, you could do it like this:
BEAR SOUP
<!--More Code-->
<a name="bear-logo">
<p>Bear Soup:</p>
There doesn't seem to be any error in the displayed HTML. However, you shouldn't need to include the target for inline page anchors.
I assume you actually have the links on the page. For example, <a id="bear-logo"></a>, <a id="fiat-logo"></a>, and so on.
Moreover, the issue you describe seems to indicate that there is some invalid code elsewhere on the page (perhaps JS or jQuery). I'd recommend commenting out sections of your HTML until you isolate the interfering culprit.
BTW, have you considering using a simple jQuery script to flow the navigation to the logos instead of just abruptly jumping to them?

Linking within a page with Bootstrap

I'm very confused about how linking to an element within a page works. I'm learning the starter template for Twitter Bootstrap, and it contains the following code in the navbar:
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
I understand that within the list elements are anchor tags to #about and #contact, but where is the content defined for this? In the example site, the .starter-template div stays the same whenever I click the navbar buttons. What do I have to do to change the div whenever a navbar button is clicked? I tried doing this, but it just made a giant link as you would expect:
<a name="about">
<div class="container">
<div class="starter-template">
<h1>About.</h1>
<p class="lead">#about</p>
</div>
</div>
</a>
Thank you for any help!
~Carpetfizz
The links are placeholders. If you want to keep them the same, such as #about, you'd want to define an element in your page with that ID. For example, make a longer page, and include the following tag:
<h1 id="about">Here's the About Content</h1>
Clicking the link will jump to that spot in the page.
Wikipedia uses this approach to jump to sections in an article. For example, inspect the <span> tag containing the "See Also" text here:
http://en.wikipedia.org/wiki/Twitter_Bootstrap#See_also
However, since they are placeholders in the Bootstrap template, the idea is that you'll put in your own links as you see fit. For example, if you wanted to add a link to Yahoo, you'd enter your own HREF, like so:
Yahoo
Or target any other link in your site.
They're just placeholders. And if you want those targets to exist, you have to create the pages at the URLs they point to.
Such hash links can behave a little differently if you're developing a Single-page Application (SPA), but I think I've covered the simpler answer to what's confusing you. I.e., hash links attempt to jump to an ID within the page, but an element with that ID needs to exist for anything noticeable to occur.
This behavior is built into HTML; it's not something unique to using Bootstrap.

Make image link to a page using Logo Attributes in Oracle APEX

I'm currently running Oracle Applications Express on my corporate network (for an internal project) and I am simply trying to make the Logo that I have used to link to the home page. The logo appears on every page and when a user clicks on the logo, it navigates them back to the home page.
I've tried all sorts of different strings, like
$('a[href*="HOME"]')
<a href="/">
<a href="f?p=300">
etc. etc.
My application is lying on Application 300, since this is the development version. The home URL is: f?p=300:1:17112837468263
Is what I am asking actually possible to do?
Thanks
When you define the logo on the application attributes, it will be shown on pages because it has been included in the page template(s).
For example, on my apex (4.2) instance I'm using "Theme 24 - Cloudy". In the "One Level Tabs - No Sidebar" template the logo substitution string #LOGO# is used in the "Definition > Body" section:
<header id="uHeader">
#REGION_POSITION_07#
<hgroup>
#LOGO#
<div class="uAPEXNavBar">
<ul>
#NAVIGATION_BAR#
</ul>
</div>
#REGION_POSITION_08#
</hgroup>
<nav>
<ul>
#TAB_CELLS#
</ul>
</nav>
#REGION_POSITION_04#
</header>
#REGION_POSITION_01#
#SUCCESS_MESSAGE##NOTIFICATION_MESSAGE##GLOBAL_NOTIFICATION#
<div id="uOneCol">
#REGION_POSITION_02#
#BOX_BODY#
#REGION_POSITION_03#
</div>
header > hgroup > a if you didn't spot it.
As you can see, the logo here is already wrapped in an anchor which refers to the homelink #HOME_LINK#. This homelink is something you can define aswell by the way. You can set the homelink through "Application Properties > User interfaces" and selecting the interface you use, for example "Desktop". "Home URL" is a field there.
So what you should do is:
Check the theme you are using
Check the default page template (and any other used page templates of
course)
See where the #LOGO# substitution string is used and how it is put
out
If it isn't in an anchor yet you can do that. If you aren't on apex 4.2 (You didn't specify) I'm not sure if you can use #HOME_LINK#, I can't recall. You could always use string substitution syntax however (and you should, especially when constructing these types of links): href='f?p=&APP_ID.:1:&SESSION.'