I currently have a button with a span that displays an icon with an arrow, like so:
<button id="btnCollapse" type="button" onClick="hey()" class="btn btn-default btn-sm">
<span id="iconCollapse" class="glyphicon glyphicon-collapse-down"></span>
Collapse Views
</button>
I would want onClick function to instead now say Expand Views, and have the glyphicon-collapse icon to be up rather than down
Here's what I have come up with:
function hey() {
var btn = $("#btnCollapse");
var span = btn.children("#iconCollapse");
span.addClass("glyphicon glyphicon-collapse-up");
btn.html = "Expand Views"
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button id="btnCollapse" type="button" onClick="hey()" class="btn btn-default btn-sm">
<span id="iconCollapse" class="glyphicon glyphicon-collapse-down"></span>
Collapse Views
</button>
What I am actually trying to achieve is this:
If user clicks on Collapse View - I want to perform some functionality, something along the lines of
if (btn.html.contains('Collapase'))
Then
//do something
Else
//do something else
First: ID should be unique .. That means if you will use multiple collapse/expand elements you need to change the id to class
Second: if you change the HTML you'll remove the icon so it will be better to wrap the text inside <span>Collapse</span> or change all the html like the example below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<button type="button" onClick="hey()" class="btnCollapse btn btn-default btn-sm">
<span class="iconCollapse glyphicon glyphicon-collapse-down"></span>
Collapse Views
</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>
<script>
function hey(){
var btn = $(".btnCollapse");
var span = btn.children(".iconCollapse");
btn.html(
btn.text().trim().indexOf("Collapse") > -1 ?
'<span class="iconCollapse glyphicon glyphicon-collapse-up"></span> Expand Views'
:
'<span class="iconCollapse glyphicon glyphicon-collapse-down"></span> Collapse Views');
}
</script>
For me this isn't the good way to do that .. But you can use this code temporarily untill you get a best code of it
And the good way to do this is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<button type="button" onClick="hey(this)" class="btnCollapse btn btn-default btn-sm">
<span class="iconCollapse glyphicon glyphicon-collapse-down"></span>
<span class="textCollapse">Collapse Views</span>
</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>
<script>
function hey(el){
var btn = $(el);
var span = btn.find(".iconCollapse");
var text = btn.find(".textCollapse");
span.toggleClass("glyphicon-collapse-down glyphicon-collapse-up");
text.text(span.hasClass("glyphicon-collapse-up") ? "Expand Views" : "Collapse Views");
}
</script>
JS ES6/css3 make it easier:
const
btn = document.querySelector('#btnCollapse')
, btnIcon = document.querySelector('#btnCollapse > span.glyphicon')
;
btnCollapse.onclick = () =>
{
btnIcon.className = (btn.classList.toggle('viewExpend'))
? 'glyphicon glyphicon-collapse-up'
: 'glyphicon glyphicon-collapse-down'
;
}
#btnCollapse
{
font-size : 3rem;
}
#btnCollapse::after
{
content : 'Collapse Views'
}
#btnCollapse.viewExpend::after
{
content : 'Expand Views'
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<button id="btnCollapse" type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-collapse-down"></span>
</button>
also :
const btn = document.querySelector('#btnCollapse')
;
btnCollapse.onclick =()=>
{
console.log( btn.classList.toggle('viewExpend') );
}
#btnCollapse
{
font-size : 3rem;
width : 10em;
}
#btnCollapse > span.glyphicon
{
float : left;
}
#btnCollapse.viewExpend > span:first-of-type,
#btnCollapse:not(.viewExpend) > span:last-of-type
{
display: none;
}
#btnCollapse::after
{
content: 'Collapse Views'
}
#btnCollapse.viewExpend::after
{
content: 'Expand Views'
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<button id="btnCollapse" type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-collapse-down"></span>
<span class="glyphicon glyphicon-collapse-up"></span>
</button>
Related
I have the switch button showing on/off, when switch in between. I don't seem to see any errors on browser while inspecting it. Yet if I use JsFiddlenet as a browser IDE, the button are working fine. Maybe let me share the order of my HTML for using bootstrap and javascript.
The html Part:
<link href="https://raw.githack.com/jamiebicknell/Toggle-Switch/master/toggleswitch.css" rel="stylesheet" />
<pre lang="Javascript">
<div class = "wrapper" align = "center">
<div class="btn-group" id="toggle_event_editing">
<button type="button" class="btn btn-info locked_active">OFF</button>
<button type="button" class="btn btn-default unlocked_inactive">ON</button>
</div>
<div class="alert alert-info" id="switch_status">
Switched off.
</div>
</div>
And the JS Part:
<script src ="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script type='text/javascript' src='https://raw.githack.com/jamiebicknell/Toggle-Switch/master/jquery.toggleswitch.js'></script>
<script type="text/javascript">
$('#toggle_event_editing button').click(function(){
if( $(this).hasClass('locked_active') ||
$(this).hasClass('unlocked_inactive')) {
/* code to do when unlocking */
$('#switch_status').html('Switched on.');
} else {
/* code to do when locking */
$('#switch_status').html('Switched off.');
}
/* reverse locking status */
$('#toggle_event_editing button').eq(0).toggleClass('locked_inactive locked_active btn-default btn-info');
$('#toggle_event_editing button').eq(1).toggleClass('unlocked_inactive unlocked_active btn-info btn-default');
});
</script>
this will work:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<link href="https://raw.githack.com/jamiebicknell/Toggle-Switch/master/toggleswitch.css" rel="stylesheet" />
<pre lang="Javascript"><div class = "wrapper" align = "center">
<div class="btn-group" id="toggle_event_editing">
<button type="button" class="btn btn-info locked_active">OFF</button><button type="button" class="btn btn-default unlocked_inactive">ON</button>
</div>
<div class="alert alert-info" id="switch_status">Switched off.</div>
</div>
<script src ="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script type='text/javascript' src='https://raw.githack.com/jamiebicknell/Toggle-Switch/master/jquery.toggleswitch.js'></script>
<script type="text/javascript">
$('#toggle_event_editing button').click(function(){
if($(this).hasClass('locked_active') || $(this).hasClass('unlocked_inactive')){
/* code to do when unlocking */
$('#switch_status').html('Switched on.');
}else{
/* code to do when locking */
$('#switch_status').html('Switched off.');
}
/* reverse locking status */
$('#toggle_event_editing button').eq(0).toggleClass('locked_inactive locked_active btn-default btn-info');
$('#toggle_event_editing button').eq(1).toggleClass('unlocked_inactive unlocked_active btn-info btn-default');
});
</script>
I have a page where a button is labelled with a glyphicon (bootstrap).
I have a new requirement that there must be no "Errors" when the page is checked with the "Wave" tool ( https://wave.webaim.org/extension/ ).
The problem is that Wave throws an Error for the button because it is an "empty button".
I tried to use an image with alt text. That fixes the Wave error, but it makes the button slightly larger, and I am also uneasy about the abuse of the image for this.
This is the minimal version of my page showing the problem:
<html lang="en">
<head>
<title>title</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
</head>
<body>
<div>
<button>
<span class="glyphicon glyphicon-chevron-up"></span>
</button>
</div>
<div>
<button>
<span class="glyphicon glyphicon-chevron-up"></span>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" alt="UP button">
</button>
</div>
</body>
</html>
Is there a better way to ensure accessibility (provide alternative text for the glyphicon) than dummy img?
Instead of adding an image with an alt text, add aria-label or title attribute on the button with the required text.
<html lang="en">
<head>
<title>title</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div>
<button>
<span class="glyphicon glyphicon-chevron-up"></span>
</button>
</div>
<div>
<button aria-label="UP button" title="UP button">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span>
</button>
</div>
</body>
</html>
For good accessibility every interaction element needs to have an text, in your case you could add the corresponding text to the button element in an extra tag, which is invisible but technical readable.
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}
This class is already included in bootstrap https://getbootstrap.com/docs/4.1/getting-started/accessibility/
To have an readable text there is also the possibility to add an aria-label attribute as described here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
But I'm not sure if this fits the checker you mentioned.
Your code extenden with aditional description and aria-label:
<html lang="en">
<head>
<title>title</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
</head>
<body>
<div>
<button aria-label="description">
<span class="glyphicon glyphicon-chevron-up"></span>
<span class="sr-only">Description</span>
</button>
</div>
<div>
<button aria-label="description">
<span class="glyphicon glyphicon-chevron-up"></span>
<span class="sr-only">Description</span>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" alt="UP button">
</button>
</div>
</body>
</html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/
3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h2>Button Group</h2>
<p>The .btn-group class creates a button group:</p>
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
<style type="text/css">
button{
background-color:red;
}
</style>
</body>
</html>
In the above segment, Bootstrap is being used and when tried to apply the background-color property for the button tag,it is not being reflected.What is the reason for that?
Try to add !important:
<style type="text/css">
button{
background-color: red !important;
}
</style>
Or put your <style> upper, than your divs and buttons... sometimes that is the issue.
You can use !important, because bootstrap already written a style. So if you want to overwrite that style, maybe you will need to write it down under the bootstrap's style, otherwise you will need to add !important.
I think this website will help you to understand the reason of !important.
https://css-tricks.com/when-using-important-is-the-right-choice/
.menu {
max-width: 350px;
margin: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Booting the mind with Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container-fluid">
<div class="btn-group-vertical menu">
<button type="button" class="btn btn-default btn-block menuitem" data-toggle="collapse" data-target="#demo">Apple</button>
<div id="demo" class="collapse">
Hello world! I am Raj. I am trying to make something. But I don't know if I could do that.
</div>
<button type="button" class="btn btn-default menuitem">Samsung</button>
<button type="button" class="btn btn-default menuitem">Sony</button>
</div>
</div>
</body>
</html>
I am trying to create a collapsible button menu having a fixed initial width using Bootstrap. I want this menu to be responsive. By setting the width of the button group, I am being able to get a menu with a perfect width. However, I am loosing its responsive property. By replacing the width property in the CSS file with the max-width property, I am getting a responsive menu. But then the width of the menu is changing when a menu item is expanded and collapsed. I also tried to set the width, max-width and min-width of .btn class. But all these trials went in vain. Is there any way through which I can achieve both responsiveness and a fixed width?
Try this
.menu {
width: 350px;
margin: 50px;
}
#media only screen and (max-width: 769px) {
.menu{
width:25%;
}
}
sample fiddle..
I am using UI-Router to do the routing for my new application.I have my state defined for home page. I have link in my page for "Sign Up" which needs to open as a modal window as separate state and i am using "onEnter" to trigger the modal window . When a user clicks the close button of modal window, i want the user to be re-directed to home page state. I am able to route back to home state using "ui-sref" but not able to close the modal window. I tried using data-dismiss="modal". Am i doing anything wrong?
Below is the configuration i am trying:
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>Idea Generation App</title>
<!-- inject:css -->
<link rel="stylesheet" href="app/styles/css/bootstrap.min.css">
<link rel="stylesheet" href="app/styles/css/ideaManagementUI.css">
<!-- endinject -->
</head>
<body ng-app="app">
<div id="mainContainer">
<div id="ideaDriveImgContainer" class="backgroundSize">
<img id="ideaDriveImg" class="backgroundSize">
</div>
<div ui-view></div>
</div>
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-ui-bootstrap-bower/ui-bootstrap-tpls.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endinject -->
<!-- inject:js -->
<script src="app/scripts/module/app.js"></script>
<script src="app/scripts/controllers/IdeaMgmtMainController.js"></script>
<!-- endinject -->
</body>
</html>
ideaMgmt-landing.html(html for my homepage)
<div id="signUpContainer" style="cursor: pointer;">
<div id="signUpArea" class="text">
<a ui-sref="signUp"><span>SignUp</span></a> //to trigger the signUp state
</div>
</div>
signUpModal.html
<div id="close" class="ax_shape">
<a ui-sref="home">
<button type="button" class="close" aria-label="Close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button></a>
</div>
app.js (route-configuration)
(function(){
'use strict';
var App = angular.module('app', ['ui.router','ui.bootstrap']);
App.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
url:'/home',
templateUrl:'app/views/ideaMgmt-landing.html' ,
controller: 'IdeaMgmtMainController'
}),
$stateProvider.state('signUp', {
url: '/signUp',
// trigger the modal to open when this route is active
onEnter: ['$stateParams', '$state', '$modal',
function($stateParams, $state, $modal) {
// handle modal open
$modal.open({
templateUrl: 'app/views/modalTemplates/signUpModal.html',
});
}]
});
$urlRouterProvider.otherwise('/home');
});
}
());
You can add a controller to your modal:
$modal.open({
templateUrl: 'app/views/modalTemplates/signUpModal.html',
controller: 'signupModalCtrl'
});
And do the closing and state change from there:
angular.module('app').controller('signupModalCtrl',
function($uibModalInstance, $state){
$scope.close = function(){
$uibModalInstance.dismiss('cancel');
$state.go('home');
};
});
HTML:
<a ng-click="close()">
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</a>