I had seen a comments that Apache Superset was edited to allow user activation of top level navigation for links in a Markup slice (so clicking a link redirects the page instead of just the contents of the slice). Does anyone know how to enable this option?
You can use HTML coding in the mark-up.
It works
Related
I've inherited a project that uses a lot of click-triggered JS to change page content instead of linking to different actual HTML pages. I'm being asked to make JAWS read the page title when this happens, as if a new page is being loaded.
From my observations and a bit of light testing, reading the page title (meaning the contents of the <title> tag) is standard behavior for JAWS when linking to a new, separate page (as in a foo.html file), but not what happens when a same-page link or button is clicked.
How can I cause JAWS to read a page's title after a link or button is clicked that changes the existing page's content in a way that seems like a new page to the user but is actually the same file under the hood?
For this question, please assume that refactoring what I have to use an actual new page instead of JS content replacement is not an option. And if something is wrong with my initial assumptions, please let me know that as well.
It sounds like you have a single page app (SPA). You can't force the <title> element itself to be read but if you also put the same text into an aria-live="polite" container (a visually hidden <div> or <span> (*)), it'll be read.
You still want to update the title, even if it's not read, because the screen reader user can use a shortcut key (INS+T with jaws) to read the page title. And when the user switches between the browser and another app and then back again, they'll hear the title, so it's still important to update the title.
There are some decent blogs regarding accessible SPAs:
Accessible page titles in a Single Page App talks specifically
about the page title in SPAs
Building Accessible Single Page
Apps talks about general principles but doesn't really have any
code examples
Single page applications, Angular.js and accessibility talks specifically about using angular but the concepts and code examples can be applied generically.
(*) Note, when visually hiding the aria-live region, don't use CSS display:none because that'll hide it from the screen reader too. Use a sr-only type class. See What is sr-only in Bootstrap 3?
There's good info in slugolicious's answer. The specific issue has a simpler solution, though: <title> elements can be ARIA-ified.
<title role="banner" aria-live="polite">Default title here</title>
in conjunction with
$(function() {
// existing logic here
$(title).html("New title here");
});
being called when the new content loads.
I have a list of FAQ links on my home page in a static block in the footer. Each link however just opens up the FAQ page.
My code sample
What is Individually Quick Frozen?</li>
What I want is that when a user clicks a particular link in the list on the homepage footer under FAQs (as above), the user should be directly be taken to the answer of that question on the FAQ page i.e. the page should scroll down to where the questions is answered.
My Code sample
<p><strong><a id="1">What is Individually Quick Frozen?</a></strong></p>
But no joy! what am I doing wrong?
Make your link look like this:
What is Individually Quick Frozen?</li>
or better yet
What is Individually Quick Frozen?</li>
Note: For Cms pages urls use direct_url as a parameter for the {{store}} directive. It avoids having a / at the end of the URL. Useful if your pages end with .html. It's not your case but it may be useful in the future.
Now your code in the cms page should looks like this:
<p><strong><a id="_1">What is Individually Quick Frozen?</a></strong></p>
Avoid using numerical ids for elements. It's not standard
Worked perfectly, be sure to update
<a href="{{store url="faqs"}}#_1">
"faqs" to what ever page you want your tag to land on though.
I have a site with an "About us" page which is divided into multiple sections.
About Us
+Overview
+The Company
+Our services
+Future plans
(etc)
I want to have a floated block on the right hand side of each of these pages which contains links to every other page.
Ideally, what I would like is to create a page titled AboutUsSidebar, and then be able to include this page in all of the about sections through some kind of tag, ie..
{include('Sidebar')}
Is there anything like this in PyroCMS? Or perhaps a better way to do it?
You should use view partials.
Create your sidebar with it's HTML and save it into addons/shared_addons/themes/yourtheme/views/partials/sidebar.html and then you can include it in your layouts as so:
{{ theme:partial name="sidebar" }}
It looks like page types are the way to go, I didn't see the page types button at the top of the page before.
In the end what I was able to achieve the desired result by using a page type.
I have a page type called "About" which contains the sidebar html, then I use pages on top of that page type for each of the sections.
Worked very nicely.
In the past, I used to rely on hash for inline navigation, for example:
http://url?Category=a&item=3#Paragrah1
(Pointing to Paragraph1 within the http://url?Category=a&item=3 page)
With the widespread use of ajax, the hash tag has switched to a different purpose, allowing page refresh without full page reload. For example:
http://url#!Category=a&item=3
http://url#!Category=a&item=4 (the page switches to item 4, no full page reload)
My question: how can I make inline navigation work in such pages? To take the above example, how can I point to Paragraph1 in the http://url#!Category=a&item=4 page?
Use the HTML5 history API instead. Then you can use the hash for scrolling again.
If you need to use the hash # for both webapp page navigation and also for moving to a specific element on a specific page, then you'll need to handle the scrolling yourself.
javascript provides: window.scroll(x, y).
In your example, when you handle the URL http://url#!Category=a&item=4, you'll need to do a window.scroll using coordinates that cause Paragraph1 to move to the right place on the page, i.e. the top. You'll need to adjust these coordinates anytime the page layout changes.
So I have a website that has just two pages. On the home page, there are some things going on, but are not important. There are some links, however, that will need to link to a specific piece of content on the second page.
On the second page, I have content on there and it's all encased in the jcycle plugin.
What I need to do is if someone is on the homepage and they click on a link, it needs to load up the second page and show the correct "slide" that corresponds to what the homepage link is.
If you need any more clarification, please let me know.
In the cycle options reference, I see that there is a startingSlide option. You could set that dynamically. You could either do it with server-side code, e.g. /foo?slide=3 or you could check which anchor reference was used on the incoming link, e.g. /foo#slide3. Or, you could use DHTML to build the slideshow on the homepage when they click the given link.
Also note that there is a slideExpr option that you could use to filter the slides to a smaller set, depending on what they selected.