I have a well-known problem of the iPhone users with my current website.
I have two tabs allowing my users to switch between two weeks:
<ul class="nav nav-tabs justify-content-center" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#currentWeekTab" role="tab" aria-controls="home" aria-selected="true" >
{{{weekInterval 1}}}
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#nextWeekTab" role="tab" aria-controls="profile" aria-selected="false" >
{{{weekInterval 0}}}
</a>
</li>
</ul>
My problem is that my iPhone users need to click twice to actually change the tab. I read that the problem was coming from the hover but no answer fixed my problem.
How can I allow my customers using iPhone to change tab with just one click? Thanks in advance.
You can let Blaze solve your problem by listening to the "click, touchstart" (=tap) event (I am not sure if cordova automatically converts click to tap but I think you will get the point) and force a redraw based on a reactive variable:
First rewrite your ul to not use any bootstrap based events but Blaze helpers:
<ul class="nav nav-tabs justify-content-center" id="myTab">
<li class="nav-item">
<a class="nav-link week-tab-link {{#if active 'currentWeek'}}active{{/if}}"
id="home-tab"
data-state="currentWeek"
href="#currentWeekTab"
aria-controls="home" aria-selected="{{active 'currentWeek'}}">
1
</a>
</li>
<li class="nav-item">
<a class="nav-link week-tab-link {{#if active 'nextWeek'}}active{{/if}}"
id="profile-tab"
data-state="nextWeek"
href="#nextWeekTab"
aria-controls="profile" aria-selected="{{active 'nextWeek'}}">
2
</a>
</li>
</ul>
{{#if active 'currentWeek'}}
<p>render current week</p>
{{/if}}
{{#if active 'nextWeek'}}
<p>render next week</p>
{{/if}}
As you can see the template relies on some state to determine a) which tab is active and b) which content to render.
To resolve this active state a helper is required:
Template.myTemplate.helpers({
active (tabName) {
return Template.instance().state.get('active') === tabName
}
})
There also needs to be a default state to be set in order to determine what to render when the page is loaded:
Template.myTemplate.onCreated(function helloOnCreated () {
const instance = this
instance.state = new ReactiveDict(0)
instance.state.set('active', 'currentWeek')
})
In order to save lines of code (=less possible errors) you can create an event map for a common class selector .week-tab-link which triggers an event callback if any of the tab is clicked. In this callback you can "read" the data-state attribute from the tab in order to set the active state:
Template.myTemplate.events({
'click, touchstart .week-tab-link' (event, templateInstance) {
// event.preventDefault() // uncomment this to prevent href update
const $target = templateInstance.$(event.currentTarget)
const activeState = $target.data('state')
templateInstance.state.set('active', activeState)
}
})
Note, that this uses ReactiveDict but you can also implement this using ReactiveVar.
Related:
Touch events in Meteor
Related
dropdown click working on one page but not on another even though its the same component that these page load and same javaScript file
Here's the component
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Please Select A Fabric Range</a>
<ul class="dropdown-menu">
{% for fabricRange in fabricRanges %}
<li>
<a class="nav-link dropdown-item" id="tab-{{ fabricRange.id }}" data-bs-toggle="tab" data-bs-target="#tabpane{{fabricRange.id}}" type="button" role="tab" aria-controls="tabpane-{{fabricRange.id}}" aria-selected="true">{{fabricRange.title}}</a>
</li>
{% endfor %}
</ul>
</li>
And JS
$(".dropdown-menu").on("click", "a.nav-link.dropdown-item", function() {
console.log("clicked")
$(this).parents(".nav-item.dropdown").find("a.dropdown-toggle").html($(this).html())
})
I have used it in three pages, two works, one doesn't.
the console.log() also works fine on the two pages but no response in third. Please Help
First you need to verify whether dropdown-menu class exists or not. In case if it exists then you need to check whether it has nav-link dropdown-item class or not.
So for this you need to check HTML of that element. Please follow below piece of code for this purpose.
$(document).ready(function(){
var count = 0;
if ($(".dropdown-menu").length > 0) {
$(".dropdown-menu").each(function(index, item) {
count = count + 1;
if(count !== 0){
console.log($(item).html());
console.log(item.innerHTML);
}
});
}
//alert("count-->"+count);
console.log(count);})
After verification, if you've everything mention in point 1 above and still click is not working then you have to verify if
JQUERY is getting loaded correctly and in the same hierarchy as on other 2 pages.
I'm building a portfolio site and have a sliding nav on index.html which contains a group of projects with links leading to other work.html pages once an element is clicked on the nav in the header.
What I want to do is when returning from a work.html page to the index.html page, is auto open the sliding nav automatically.
Thanks a lot if you can help!
document.querySelector(".work").click()
works with opening the sliding nav, but I don't know how to only run this when returning from one of the projects or work.html pages
this is the nav on the index.html and work.html pages
<ul class="nav-list">
<li class="nav-item">
<a class="nav-link work" href=# onclick="openNav();showButton()">work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="...">experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="..." rel="noopener noreferrer" target="_blank">blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">about</a>
</li>
</ul>
When returning to index.html '.work' will automatically open
Try below.
window.addEventListener('load', (event) => {
if (document.referrer.indexOf('work') > -1) {
//Perform required operation
}
});
document.referrer gives the previous URL.
If you are using React try putting the function in componentDidUpdate(). If you are using only JS no framework, try keeping a list so you know from where the user is coming on to your index page. Use window.location for that. Might not be the best approach, but play with it see what happens
When programming/designing for accessibility, is there a proper method for conveying that a particular item is "completed"?
Currently building some accessible e-learning. In a particular activity there are a number of buttons that must be pressed, where activating each button reveals further information in a separate panel. In this particular example, I am using a tablist.
Once all tabs have been visited, the user can move forward to the next activity.
Would changing the aria-label's to something like "Tab 1 - complete" or "Tab 1 - not complete" suffice for indicating their state?
Update 1
For clarification, in this particular example I'm using a tablist, using the methodology from Inclusive Components - Tabbed Interfaces. The unordered list is required to have a role="tablist", so I can't use the role="progressbar".
ie:
<ul role="tablist">
<li role="presentation"> <a role="tab" href="javascript:void(0)">Tab 1</a> </li>
<li role="presentation"> <a role="tab" href="javascript:void(0)">Tab 2</a> </li>
</ul>
You can tell assistive technologies such as screen readers that an element shows progress by giving it role="progressbar". Then, you can set up minimum and maximum values with aria-valuemin and aria-valuemax, respectively, and display the current value with aria-valuenow. By default, screen readers speak aria-valuenow as a percentage based on min and max. However, you can set aria-valuetext to tell the screen reader to present the value in a different format. It can look something like this:
<ol tabindex="0" role="progressbar" aria-valuemin="1" aria-valuemax="3" aria-valuenow="1" aria-valuetext="Step 1 of 3: First Step">
<li>First Step</li>
<li>Second Step</li>
<li>Last Step</li>
</ol>
Giving the element tabindex="0" will assure that the user tabs to it after each completed step, thus getting the new information.
Be sure to give the non-current sections of content aria-hidden="true" to make the screen reader skip them.
Update 1
In the case of role="tablist" there are a few different elements that can assist you. In your case, you can use aria-hidden and aria-selected as your states and control focus with tabindex. So let's say the screen reader user is on the first tab, your code can look something like this:
<ul role="tablist">
<li role="presentation">
<a role="tab" href="#section1" id="tab1" aria-selected="true" tabindex="0">Tab 1</a>
</li>
<li role="presentation">
<a role="tab" href="#section2" id="tab2" aria-selected="false" tabindex="-1">Tab 2</a>
</li>
</ul>
<section role="tabpanel" id="section1" aria-labelledby="tab1" aria-hidden="false">
// Tab1 content here
</section>
<section role="tabpanel" id="section2" aria-labelledby="tab2" aria-hidden="true">
// Tab2 content here
</section>
With this setup your screen reader user is unable to tab to the second tab, and its content is also hidden to the screen reader. You can trigger the appropriate tab when the screen reader user clicks the corresponding button by changing tabindex, aria-hidden, and aria-selected.
If you want to inform the screen reader user of the progress you can simply give the buttons aria-label. For example, the button for tab 1 can have: aria-label="Complete step 1 out of 3".
Hope it helps!
I have bootstrap Sidebar menu in my admin panel, when I click and fetch a link then two items are active, like in the picture, why?
Check the li tag to see if the tag contains active option in distributor's package page. You need active on current page only & not on distrubutor's page when you are on dp page
Adding more to that answer,
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
Keeping a list item 'active' would mean, that item would be always selected. Check the list item class for this.
I am editing a template and links don't respond to left clicks. If you right-click and choose 'Open in New Tab,' they work just fine. When you hover over them, you can see the URL in the status bar at the bottom of the browser.
I will only post the menu section of the index file since the webpage is too long. Please download the template from the following link to see it yourselfClick Here
I am new here so I don't clearly understand the rules of posting a question. let me know if you need other info and please help me out.
`
<nav class="navbar navbar-light">
<ul class="nav navbar-nav single-page-nav">
<li class="nav-item">
<a class="nav-link" href="#home">Home <!-- <span class="sr-only">(current)</span> --></a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Products</a>
</li> <!-- this link won't work -->
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</nav>
</div>`.
<div class="sigma-content col-lg-6 col-md-6 photo text-center" >
<h2></h2>
VISIT OUR GALLERY
</div>
EDIT: I just learned about browser console and the error is
Uncaught Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)
at bootstrap.min.js:7
at bootstrap.min.js:7
at bootstrap.min.js:7
How do I fix this.
A quick inspection of the live demo of the linked template shows, at the bottom of the source (the frame source, not the page source) this code
// The actual plugin
$('.single-page-nav').singlePageNav({
offset: $('.single-page-nav').outerHeight(),
filter: ':not(.external)',
updateHash: true,
beforeStart: function() {
console.log('begin scrolling');
},
onComplete: function() {
console.log('done scrolling');
}
});
which looks like it's using this library which states
Clicking on any links within the container will cause an animated scroll down to the element whose ID is identified by that link's "hash" (if it exists)
and then in the options
'filter' - By default, the plugin will be applied to all links within the container, use this to filter out certain links using jquery's built in filter method (e.g. ':not(.external)')
So, since the code on the live demo has filter: ':not(.external)', and I assume you have that on your page as well (and since your <ul> has the single-page-nav class) changing
<a class="nav-link" href="gallery.html">Products</a>
to
<a class="nav-link external" href="gallery.html">Products</a>
should fix your problem