We Keep Coding

my accesskey control is for the top row in safari and bottom row in chrome

I have a dynamic editable table with JavaScript, each row has an edit and delete button.
I have given accesskey "e" for edit and "d" for delete.
In safari ctrl+alt+e and ctrl+alt+d selects the first row of the table.
In chrome ctrl+alt+e and ctrl+alt+d selects the last row of the table.
I want it to access the first row in chrome as well.
<button id="bEdit" type="button" class="btn btn-sm btn-outline-secondary" accesskey="e" onclick="butRowEdit(this);notApplicable();">
<span class="fa fa-pencil" > </span>
</button>
<button id="bElim" type="button" class="btn btn-sm btn-outline-secondary" accesskey="d" onclick="butRowDelete(this);remove();">
<span class="fa fa-trash" > </span>
</button>
<button id="bAcep" type="button" class="btn btn-sm btn-outline-secondary" style="display:none;" accesskey="s" onclick="save();butRowAcep(this);">
<span class="fa fa-check" > </span>
</button>
<button id="bCanc" type="button" class="btn btn-sm btn-outline-secondary" style="display:none;" accesskey="c" onclick="butRowCancel(this);">
<span class="fa fa-times" > </span>
</button>
</div>````

How to hide/show using angular ng-click?

I am trying to create something like toggle so when user click on 1sideBarMenui want to displayshowMenu` and if click again it should hide it , i think below code should do it , where i am making mistake ?
main.html
<button type="button" ng-click="showSideBarMenu()" tooltip-placement="top" tooltip-popup-delay="300" uib-tooltip="Browse more" class="btn btn-success btn-circle pull-right"><span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></button>
<div class="sideBarMenu" ng-show="showMenu">
<ul>
<li>
<button type="button" title="start recording" class="btn btn-danger btn-xlarge" ng-click="recordLogs()" ng-disabled="disabledRecBtn"><span class="glyphicon glyphicon-record"></span></button>
</li>
<li>
<button type="button" class="btn btn-primary btn-xlarge" ng-click="stopLogs()" ng-disabled="disabledStopBtn"><span class="glyphicon glyphicon-stop" title="stop recording"></span></button>
</li>
<li>
<!--<button type="button" class="btn btn-success btn-md" ng-click="searchLogs()"><span class="glyphicon glyphicon-search" title="search logs in bowser"></span></button>-->
<button type="button" class="btn btn-info btn-xlarge" ng-click="serverFiles()"><span class="glyphicon glyphicon-folder-open" title="download server logged files"></span></button>
</li>
</ul>
</div>
ctrl.js
$scope.showMenu = false;
$scope.showSideBarMenu = function(){
$scope.showMenu = true;
};

$scope.toggleSideBarMenu = function() { // function name changed to be more semantic
$scope.showMenu = !$scope.showMenu;
};
Note that you don't need to initialize scope vars to false in most cases. Angular treats undefined values and false values the same way in the view.

Changing button classes in Angular UI Datepicker

In this plunk I have an Angular UI Datepicker that uses a template. I need to change the colors of the "Today", "Clear" and "Close" buttons but changing them in popup.html doesn't work. It should show gray, orange and blue buttons.
I changed from
<li ng-if="showButtonBar" class="uib-button-bar">
<span class="btn-group pull-left">
<button type="button" class="btn btn-sm btn-info uib-datepicker-current" ng-click="select('today', $event)" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
<button type="button" class="btn btn-sm btn-danger uib-clear" ng-click="select(null, $event)">{{ getText('clear') }}</button>
</span>
<button type="button" class="btn btn-sm btn-success pull-right uib-close" ng-click="close($event)">{{ getText('close') }}</button>
</li>
to
<li ng-if="showButtonBar" class="uib-button-bar">
<span class="btn-group pull-left">
<button type="button" class="btn btn-sm btn-default uib-datepicker-current" ng-click="select('today', $event)" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
<button type="button" class="btn btn-sm btn-warning uib-clear" ng-click="select(null, $event)">{{ getText('clear') }}</button>
</span>
<button type="button" class="btn btn-sm btn-primary pull-right uib-close" ng-click="close($event)">{{ getText('close') }}</button>
</li>
Note that I changed the button class names to change the color, but when I inspect in the browser, the datepicker is still using the old classes. How to fix this?

To set a custom popup template use datepicker-popup-template-url attribute, for example:
<input datepicker-popup-template-url="popup.html" type="text" class="form-control" is-open="true" ng-model="dt" uib-datepicker-popup="MM-dd-yyyy"
datepicker-options="dateOptions" close-text="Close" popup-placement="bottom-left" on-open-focus="false" />
Demo

jquery get array of buttons and their values

Im new in JS and Jquery.
I have been trying to set an event to all buttons in the same class, meanwhile I'm tryinh to get the value of each button.
In my HTML I got:
<div id="highlightButtons">
<button type="button" class="btn btn-primary" value="1">1</button>
<button type="button" class="btn btn-primary" value="2">2</button>
<button type="button" class="btn btn-primary" value="3">3</button>
<button type="button" class="btn btn-primary" value="4">4</button>
<button type="button" class="btn btn-primary" value="5">5</button>
<button type="button" class="btn btn-primary" value="6">6</button>
<button type="button" class="btn btn-primary" value="7">7</button>
<button type="button" class="btn btn-primary" value="8">8</button>
<button type="button" class="btn btn-primary" value="9">9</button>
</div>
And in my JS I tried this:
(function() {
'use strict'
var all_hl_btns = $('#highlightButtons');
all_hl_btns.click(function(){
var value = $(this).text();
alert(value);
});
}());
At this point, I'm just trying get the value of each button that I click, but when I click in any button, I got a text of numbers (1 to 9) in a Column.
I would appreciate any kind of help.
Thank you in advance!

You trying to add click event to #highlightButtons and when you click on it, javascript get text of it that is 123456789. You need to add click event to buttons. In the case, your selector changed to $('#highlightButtons > button')
(function() {
'use strict'
var all_hl_btns = $('#highlightButtons > button');
all_hl_btns.click(function(){
var value = $(this).text();
alert(value);
});
}());
var all_hl_btns = $('#highlightButtons > button');
all_hl_btns.click(function(){
var value = $(this).text();
console.log(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="highlightButtons">
<button type="button" class="btn btn-primary" value="1">1</button>
<button type="button" class="btn btn-primary" value="2">2</button>
<button type="button" class="btn btn-primary" value="3">3</button>
<button type="button" class="btn btn-primary" value="4">4</button>
<button type="button" class="btn btn-primary" value="5">5</button>
<button type="button" class="btn btn-primary" value="6">6</button>
<button type="button" class="btn btn-primary" value="7">7</button>
<button type="button" class="btn btn-primary" value="8">8</button>
<button type="button" class="btn btn-primary" value="9">9</button>
</div>

Bootstrap Container & Container Fluid have an issue

I am using Bootstrap 3.3.7.
I have used and to add content to the page.
When I use container-fluid, it will not span the content across the page but will limit the size to the page center area.
The same thing happened when I used container. It spans to the outside of the page> My screen resolution is 1366 x 768.
This is the code I have used
<div class="container">
<h4>Bootstrap Buttons</h4>
<!-- The Large size buttons -->
<p>
<button type="button" class="btn btn-default btn-lg">Default</button>
<button type="button" class="btn btn-primary btn-lg">Primary</button>
<button type="button" class="btn btn-success btn-lg">Success</button>
<button type="button" class="btn btn-info btn-lg">Info</button>
<button type="button" class="btn btn-warning btn-lg">Warning</button>
<button type="button" class="btn btn-danger btn-lg">Danger</button>
<button type="button" class="btn btn-link btn-lg">Link</button>
</p>
<!-- The default size buttons -->
<p>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</p>
<!-- The small size buttons -->
<p>
<button type="button" class="btn btn-default btn-sm">Default</button>
<button type="button" class="btn btn-primary btn-sm">Primary</button>
<button type="button" class="btn btn-success btn-sm">Success</button>
<button type="button" class="btn btn-info btn-sm">Info</button>
<button type="button" class="btn btn-warning btn-sm">Warning</button>
<button type="button" class="btn btn-danger btn-sm">Danger</button>
<button type="button" class="btn btn-link btn-sm">Link</button>
</p>
<!-- The small size buttons -->
<p>
<button type="button" class="btn btn-default btn-xs">Default</button>
<button type="button" class="btn btn-primary btn-xs">Primary</button>
<button type="button" class="btn btn-success btn-xs">Success</button>
<button type="button" class="btn btn-info btn-xs">Info</button>
<button type="button" class="btn btn-warning btn-xs">Warning</button>
<button type="button" class="btn btn-danger btn-xs">Danger</button>
<button type="button" class="btn btn-link btn-xs">Link</button>
</p>
<!-- Bootstrap container & container-fluid -->
<!-- Bootstrap container example -->
<div class="container bootcontainer">
<h1>Hello, world! - Using Container</h1>
</div>
<!-- Bootstrap container-fluid example -->
<div class="container-fluid bootcontainerfluid">
<h1>Hello, world! - Using Container Fluid</h1>
</div>

This is the container that contains the other ones, so:
<!--Bootstrap Modal (Dialog Box / Pop-up Window) Example-->
<div class="container-fluid">
...
Then replace container with container-fluid everywhere you need it, worked for me.

I found the answer. Actually it's an HTML break. I hadn't put the <div> tag after declaring the 'Bootstrap Button Example'.
Thanks anyway!
Regards,
Chiranthaka