I have two html sheets, one in Spanish and one in English, and I want to put a bootstrap toggle switch so that every time I click I am redirected to a different sheet
<li>
<a href="secciones/index-esp.html">
ESP
</a>
<div class="form-check form-switch">
<input type="checkbox" id="flexSwitchCheckDefault">
</div>
<a href="secciones/index-esp.html">
ENG
</a>
</li>
Related
I want to create an checkbox group like so:
How do I make sure this is set up in the right way for it to be fully accessible?
I have something like this at the moment:
<div role="group" aria-labelledby="group_head" aria-describedby="group__description">
<h1 id="group_head">Heading 1</h1>
<div class="group__description">Descriptive text about this checkbox group</div>
<ul>
<li>
<input type="checkbox" name="checkbox_1" id="checkbox_1" aria-describedby="description_1">
<label for="checkbox_1">Checkbox 1</label>
<p id="description_1">This is the descriptive text explaining the checkbox 1</p>
</li>
<li>
<input type="checkbox" name="checkbox_2" id="checkbox_1" aria-describedby="description_2">
<label for="checkbox_1">Checkbox 2</label>
<p id="description_2">This is the descriptive text explaining the checkbox 2</p>
</li>
<li>
<input type="checkbox" name="checkbox_1" id="checkbox_3" aria-describedby="description_3">
<label for="checkbox_1">Checkbox 3</label>
<p id="description_1">This is the descriptive text explaining the checkbox 3</p>
</li>
</ul>
</div>
Or on jsfiddle
That already looks pretty good. Grouping has the advantage that it’s accessible name only gets announced once when the user enters the group.
It’s description (aria-describedby) is not part of the accessible name, so it won’t get announced by screen readers when the user navigates to the first checkbox (by means of tab).
If the group’s description is an indication important to the user’s choice, it shouldn’t be an optionally read description, but in the name. My suggestion would then be to group both texts together in a semantically correct <fieldset> and <legend>.
This will no longer respect the users verbosity setting and simply always announce that indication once the group is entered.
Alternatively, you might want to add the description’s ID to the group’s Labels: <div role="group" aria-labelledby="group_head group__description">.
<fieldset>
<legend>
<h1>Heading 1</h1>
<p>Descriptive text about this checkbox group</p>
</legend>
<ul>
<li>
<input type="checkbox" name="checkbox_1" id="checkbox_1" aria-describedby="description_1">
<label for="checkbox_1">Checkbox 1</label>
<p id="description_1">This is the descriptive text explaining the checkbox 1</p>
</li>
<li>
<input type="checkbox" name="checkbox_2" id="checkbox_2" aria-describedby="description_2">
<label for="checkbox_2">Checkbox 2</label>
<p id="description_2">This is the descriptive text explaining the checkbox 2</p>
</li>
<li>
<input type="checkbox" name="checkbox_1" id="checkbox_3" aria-describedby="description_3">
<label for="checkbox_3">Checkbox 3</label>
<p id="description_1">This is the descriptive text explaining the checkbox 3</p>
</li>
</ul>
</fieldset>
Below is the HTML code. Unable to click on the Login link at the navigation bar at the right hand side of the page .
<ul class="nav navbar-nav navbar-right">
<li class="online" data-toggle="modal" data-target="#loginPopup">
<a href="#">
<span class="glyphicon glyphicon-log-in">
</span> Login
<div class="ripple-container">
</div>
</a>
</li>
try
element(by.css('.glyphicon.glyphicon-log-in').click();
I've used to create tabs with some content on it using the following code:
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
<div class="tabs">
<a class="tab-item active" href="#">
<i class="icon ion-home"></i>
Test
<div class="item item-avatar">
<div ng-bind="profile.img_element"></div>
<h2 ng-bind="profile.name"></h2>
<p ng-bind="profile.points"></p><p> points</p>
</div>
</a>
<a class="tab-item" href="#">
<i class="icon ion-star"></i>
Favorites
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-a"></i>
Settings
</a>
</div>
</div>
However, my problem is that the tabs doesn't switch, and on the top of that I've been unable to set the content of the tab 'Test' properly.
I did some searches, but still didn't find a solution.
I don't have enough experience with Ionic, So any help will be much appreciated.
Thank you.
href="#" should not be '#' for every tab. '#' means default root url. So when you click on every page it redirect on same page. You need to set content using 'ion-nav-view' for tab view.
Please study this CodePen for more guid
Below please find my article (individual blog) template for Modx. Everything works fine except for the fact that my [[*pagetitle]] value is not visible. I can select it with the mouse, but it is invisible. I am using the default sample.ArticleRowTpl. Also, find below my container template as well. Does anyone know why it wont display the [[*pagetitle]] href?
Individual article blog template:
[[$blogHeader]]
[[$blogMenu]]
Blog
[[*pagetitle]]
<p class="post-info">
<span class="left">Posted on [[*publishedon:strtotime:date=`%b %d, %Y`]] by [[*publishedby:userinfo=`username`]]</span>
</p>
<br>
<div class="entry">
[[*content]]
</div>
<!--<hr />-->
<p>
[[*articlestags:notempty=`
<br>
<span class="tags left"> <b style="color: #000000">Tags: </b>[[+article_tags]]</span>
<br>
`]]
</p>
<div class="post-comments" id="comments">
<br>
[[+comments]]
<h3>Add a Comment</h3>
[[+comments_form]]
<br>
</div>
</div>
<div class="col-md-4 verticalLine">
<div class="sidemenu">
<h3>Latest Posts</h3>
<ul>
[[+latest_posts]]
</ul>
</div>
[[+comments_enabled:is=`1`:then=`
<div class="sidemenu">
<h3>Latest Comments</h3>
<ul>
[[+latest_comments]]
</ul>
</div>
`]]
</div>
</div>
<!-- end: .containter -->
[[$blogFooter]]
Blog container template
[[$blogHeader]]
[[$blogMenu]]
Blog
[[*content]]
<div class="col-md-4 verticalLine">
<div class="sidemenu">
<h3>Latest Posts</h3>
<ul>
[[+latest_posts]]
</ul>
</div>
[[+comments_enabled:is=`1`:then=`
<div class="sidemenu">
<h3>Latest Comments</h3>
<ul>
[[+latest_comments]]
</ul>
</div>
`]]
</div>
</div>
<!-- end: .containter -->
[[$blogFooter]]
I figured it out. Somehow I had a class in my .css file (which I wasnt actually using) that was causing this anomaly. It took me a while to troubleshoot, but I finally figured out which one it was and removed it. It works fine now:)
I've got the following nav on my site
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar pull-right" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="/"><span class="icon-chevron-up icon-medium"></span> Rocky Mountain Arts</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown">
Gallery <b class="caret"></b>
<ul class="dropdown-menu">
<li>For Sale</li>
<li>Sold</li>
<li>Private Collection</li>
</ul>
</li>
<li>About The Artist</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
When I view the site on my desktop, I see everything as expected, and I can navigate all of the links.
HOWEVER: When I load the site up on my iPhone, press the toggle collapse button and then expand the dropdown, I cannot click any of the sub links within the dropdown menu, rather the menu closes and either the "about" or the "contact" link activate instead.
How can I fix this?
Thanks #MiikaL for the comment. Looks like it's a bug filed over at Github that no-one is really addressing in the official source code.
https://github.com/twitter/bootstrap/issues/4550
This can be reproduced on the github components demo page
http://twitter.github.com/bootstrap/components.html#buttonDropdowns
There are people with helpful info in the tread, and the 'hack' solution seems to be
// Fixes sub-nav not working as expected on IOS
$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); });
This issue is finally fixed in the latest Twitter Bootstrap as of version 2.2.2:
You can read a short summary about the changelog in 2.2.2 here:
http://forwebonly.com/things-you-should-know-about-twitter-bootstrap-2-2-2/