I'm using NVDA screen reader to read the content of the page, but unfortunately it does not work as intended. Screen reader does not read the full page (i.e. it doesnt read the labels). All the contents are in .twig file.
Here's the jsFiddle and a snippet.
JSFiddle: https://jsfiddle.net/juvysx6z/
<div class="buttons-block block-index">
<h3>NVDA doesnt read this header</h3>
<h6>This one as well</h6>
</div>
It seems a bit weird, because some parts of the page are just omitted, another example here:
<div class="row">
<div class="large-8 columns">
<section>
<header class="clean">
<h2 style="color: #004E9D">Does not read it</h2>
</header>
</section>
</div>
</div>
Could anybody help me with this one? The worst thing is that I don't know where to find reason why it's not working. I'm totally stuck.
Related
I understand fullpage.js is solely used to build single page vertical slider orienated sites where the content of the site transitions from slide to slide going up or down respectively.
Having successfully implemented and somewhat customised the vertical slider into new website layout, I am unable to view the others sections of the website that come below it.
The vertical slider it seems prevents the rest of the html section blocks below it to appear. Its as if the vertical slider is saying: 'I AM THE WEBSITE' ( ignores w/e the hell I place beneath it ).
Here is what we have:
<div id="fullpage">
<div class="slide" id="slide_1">
<div class="slide_caption">
<h1>This is slide 1</h1>
<h4>slide 1 description</h4>
Read More
</div>
</div>
<div class="slide" id="slide_2">
<div class="slide_caption">
<h1>This is slide 2</h1>
<h4>slide 2 description</h4>
Read More
</div>
</div>
<div class="slide" id="slide_3">
<div class="slide_caption">
<h1>This is slide 3</h1>
<h4>slide 3 description</h4>
Read More
</div>
</div>
<div class="slide" id="slide_4">
<div class="slide_caption">
<h1>This is slide 4</h1>
<h4>slide 4 description</h4>
Read More
</div>
</div>
</div>
<section class="full_width_container" id="home_container_1">
<!-- extra mark up for other stuff like latest products etc -->
</section>
<section class="full_width_container" id="home_container_2">
<!-- extra mark up for other stuff like news etc -->
</section>
<section class="full_width_container" id="home_container_3">
<!-- extra mark up for other stuff like testimonials etc -->
</section>
<section class="full_width_container" id="home_container_4">
<!-- extra mark up for blog post links -->
</section>
<footer>
<!-- extra mark up for footer items -->
</footer>
My question is - how the hell do I get the other sections below, i.e home_container_1, home_container_2, home_container_3 to show up ?
I tried applying overflow-y:scroll !important; on body whilst applying overflow-y:hidden on fullpage but it didn't quite work.
If somebody could point me in the right direction in terms of whats happening I would appreciate it no end.
SOLUTION: IF Anybody ends up having this problem, the issue is 99.999% related to not including the DOCTYPE html declarative.
grrrrr # this schoolboy error. Why, despite so many years of web dev am I making these kind of idiotic mistakes :| ? Alvaro the author of fullpage.js clearly mentioned this in his docs, 'make sure to include DOCTYPE html declarative else the heights wont work properly..'
So there you have it folks, the issue was the above.
Now the vertical slider stays put, takes up 100vh of the screen and if you use the mouse scroll it scrolls the ENTIRE content in the viewport so you can view whats beneath the slider (the other website sections).
I have a piece of markup where when a user clicks on "find a rider" the browser is supposed to take the user down to where the participants are on the same page. But when clicking the link it just takes me to a page not found on chrome, edge, and firefox (can't test safari).
<div class="container-fluid blue">
<div class="container text-center">
<h1 class="white">Prairie Women on Snowmobiles</h1>
Find a Rider
<div class="row">
<div class="col-lg-12" style="margin-bottom: 15px;">
<div class="hero elevation-z12" style="background-image: url('../images/content/pagebuilder/PWOS_banner.jpg');"></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="text-center">Prairie Women on Snowmobiles</h2>
<p>A non-profit organization whose annual missions are provincial awareness events that are designed to focus attention on breast cancer and the recreation of snowmobiling as well as raise the much-needed funds for breast cancer research. Over the past 18 years we have raised almost $2.5 million for the cause. To learn more about Prairie Women on Snowmobiles click here.</p>
</div>
</div>
<div class="container">
<div class="text-center">
<h2>Riders</h2>
<p>Meet our 2020 Riders</p>
</div>
<div class="events">
<div class="event-display" id="find">
[[S51:PWOS_SK_reus_riders]]
</div>
</div>
</div>
</div>
normally to fix this I would just put the url in the link "../site/SPageServer/?pagename=PWOS_SK_homepage#find" and that works, however, doing that will break my url tracking if people land on the page using the vanity url.
Here's a link to the page:
https://secure2.convio.net/cco/site/SPageServer/?pagename=PWOS_SK_homepage
any help is appreciated.
thanks,
Your page starts with <base href="https://secure2.convio.net/cco/site/" /> so when you click on href="#find" it resolves to https://secure2.convio.net/cco/site/#find.
You need to write your URL relative to the base URL, not the current page.
As mentioned in a comment, it would be better to do this with simple JS instead of playing with browser functionality. Without touching the HTML and assuming you have jQuery on the site, I would add something like the following in a script tag (obviously below both the <a href='#find'> and div#find)
jQuery("a[href='#find']").click(function() {
event.preventDefault();
jQuery("body, html").animate({
scrollTop: jQuery("#find").offset().top
});
})
This allows you to stay on the page without linking away/messing up tracking data while the window will scroll to the proper element no matter how far down. Hope this helps (even though you managed it before me ;) )
When you hover the mouse over the link you see:
https://secure2.convio.net/cco/site/#find
but you expect:
https://secure2.convio.net/cco/site/SPageServer/?pagename=PWOS_SK_homepage#find
This is caused by the tag in the header.
I have two divs that act as links (<a>). One in one paragraph, the other in the second paragraph. The second link works: on mouseover (in Chrome) the bottom left of the window displays the link address. The top one does not do the same. What is wrong? I'm talking about the links in the paragraph tags, not the menu links.
<body ontouchstart>
<div class="header">
<div class="logo">Q<sup>3</sup></div>
<div class="desc">Quito's Qustom Qode</div>
</div>
<div class="row">
<div class="sidenav col2">
<a id="about" class="link-active">about</a>
<a id="pricing">pricing</a>
<a id="projects">projects</a>
<a id="legal">legal</a>
</div>
</div><!-- /row -->
<div class="row">
<div id="content" class="col10">
<div class="info">
<div class="about">
<div class="profile-back">
<div class="profile"></div>
</div>
<div class="about-me">
<p>Kevin (Quito [Key'-tow]) Williams is an aspiring front-end web designer. He has 5 years of experience in HTML, 4 years experience in CSS, and is currently studying jQuery. As a modern web designer, he is using his coding background to study the latest web technologies: HTML5, CSS3, RWD. In addition to his web technology languages, he is also familiar with: C<sup>++</sup>, Javascript, Java, Perl, Lua (Minecraft based), LISP, SQL. </p>
<p>Hello</p>
You've forgotten to add the actual link on your anchor tags through href.
Your current code:
<a id="about" class="link-active">about</a>
<a id="pricing">pricing</a>
<a id="projects">projects</a>
<a id="legal">legal</a>
Changes:
about
pricing
projects
legal
Can you be a bit more clear about what outcome you are expecting?
Edit: I think i understand now, "About" "Pricing" "Projects" should be hyperlinks?
you are missing the "href" attribute in the tags which should fix your problem.
If you don't want the link to direct to a different page, you can use href="#" to stop this.
Are you on about the following lines?
RWD.
<p>Hello</p>
If so, both are working fine in chrome and IE for me. I'm not sure what the issue is for you.
try this code,add target="_blank" in your a href
<p>Hello</p>
And the working fiddle link is here https://jsfiddle.net/p7mnsj3p/
I wrote some custom HTML code in my Wikidot article - instead of the "original" Wikidot syntax, I have to use <a href="/page"> for links.
The content of my custom HTML block is like this:
<section class="intro">
<div class="container">
<h1>Headline-line text</h1>
</div>
</section>
<section class="timeline">
<ul>
<li>
<div>
<time>Time value </time> Text. Link here.
</div>
</li>
</ul>
</section>
The problem is that it loads the entire content of the HTML into that carefully selected small portion of the original site.
I can only assume that it has something to do with <div>s, as I've already seen this issue on other sites. Hence my assumption is that there must be a general source of this issue, and this is why I'm asking.
What's the reason of this problem and how can I avoid it?
I got this part of code:
<div id="main">
<div class="wrapper clearfix" id="content">
<section class="clearfix">
<article id="market_data" ng-app="eex.market_data" data-src="/blueprint/" data-config="/json/en/20776/content.json?config=" class="ng-cloak">
<div id="content">
<div market-data-page-title></div>
<div market-data-datepicker></div>
<div ng-view></div>
</div>
</article>
</section>
</div>
Where some data is retrieved using json, which makes the final HTML invisible to me, talking about code. I need to get some data that is drawed on the HTML using VB.NET, so I download the whole file and search for what I need but it isn't there.
Is there a way to catch this information?? I thought maybe using some Chrome extension where I can see all the transfers through TCP, I remember using one but can't recall the name now!!
Thanks a lot
Ricardo