beenull/tellform
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

added field focus controls

Browse source
This commit is contained in:
David Baldwynn 2015-11-06 11:00:45 -08:00
parent f7ba6a2df6
commit 16a80fbcfc
21 changed files with 127 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
public/modules/forms/directives/field.client.directive.js
View file

@ -45,7 +45,8 @@ angular.module('forms').directive('fieldDirective', ['$templateCache', '$http',
scope: {
field: '=',
required: '&',
design: '='
design: '=',
index: '=',
},
link: function(scope, element) {
scope.setActiveField = $rootScope.setActiveField;

31
public/modules/forms/directives/focus-on.client.directive.js Normal file
View file

@ -0,0 +1,31 @@
'use strict';
angular.module('forms').directive('focusOn',function() {
return {
restrict : 'A',
link : function($scope, $element, $attr) {
$scope.$watch($attr.focusOn,function(focusVal) {
// console.log($element);
if(focusVal === true) {
setTimeout(function() {
var $input_element;
if($element[0].querySelector('input')){
$input_element = $element[0].querySelector('input');
}else if($element[0].querySelector('select')){
$input_element = $element[0].querySelector('select');
}else if($element[0].querySelector('textarea')){
$input_element = $element[0].querySelector('textarea');
}else if($element[0].querySelector('.angular-input-stars')){
$input_element = $element[0].querySelector('.angular-input-stars');
}
// $('body').animate({
// scrollTop: $input_element.offset().top
// });
$input_element.focus();
},50);
}
});
}
}
})

45
public/modules/forms/directives/submit-form.client.directive.js
View file

@ -9,24 +9,52 @@ angular.module('forms').directive('submitFormDirective', ['$http', '$timeout', '
myform:'='
},
controller: function($scope){
angular.element(document).ready(function() {
// angular.element(document).ready(function() {
$scope.error = '';
$scope.selected = null;
$scope.selected = {
_id: $scope.myform.form_fields[0]._id,
index: 0,
};
$scope.submitted = false;
TimeCounter.startClock()
$scope.exitStartPage = function(){
$scope.myform.startPage.showStart = false;
}
$rootScope.setActiveField = function (field_id) {
$scope.selected = field_id;
};
$scope.hideOverlay = function (){
$scope.nextField = function(){
if($scope.selected.index < $scope.myform.form_fields.length){
$scope.selected.index++;
$scope.selected._id = $scope.myform.form_fields[$scope.selected.index]._id;
}
};
$scope.prevField = function(){
if($scope.selected.index > 0){
$scope.selected.index = $scope.selected.index - 1;
$scope.selected._id = $scope.myform.form_fields[$scope.selected.index]._id;
}
};
$rootScope.setActiveField = function(field_id, field_index) {
if($scope.selected === null){
$scope.selected = {
_id: '',
index: 0,
};
}
console.log('field_id: '+field_id);
console.log('field_index: '+field_index);
console.log($scope.selected);
$scope.selected._id = field_id;
$scope.selected.index = field_index;
};
$scope.hideOverlay = function(){
$scope.selected = null;
};
$scope.submit = function(){
$scope.submitForm = function(){
var _timeElapsed = TimeCounter.stopClock();
var form = _.cloneDeep($scope.myform);
@ -34,7 +62,6 @@ angular.module('forms').directive('submitFormDirective', ['$http', '$timeout', '
// console.log('percentageComplete: '+$filter('formValidity')($scope.myform)/$scope.myform.visible_form_fields.length*100+'%');
form.percentageComplete = $filter('formValidity')($scope.myform)/$scope.myform.visible_form_fields.length*100;
console.log(form.percentageComplete)
delete form.visible_form_fields;
$scope.authentication = Auth;
@ -62,7 +89,7 @@ angular.module('forms').directive('submitFormDirective', ['$http', '$timeout', '
return field;
}).value();
};
});
// });
}
};

4
public/modules/forms/views/directiveViews/field/checkbox.html
View file

@ -1,10 +1,10 @@
<div class="field row" ng-click="setActiveField(field._id)" ng-if="field.fieldOptions.length > 0">
<div class="field row" ng-click="setActiveField(field._id, index)" ng-if="field.fieldOptions.length > 0">
<div class="col-xs-12 field-title field-title">{{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">(* required)</span> </div>
<div class="col-xs-12 field-input">
<div ng-repeat="option in field.fieldOptions" class="row-fluid">
<label class="btn btn-info col-xs-3">
<input ng-focus="setActiveField(field._id)" ng-style="{'color': design.colors.answerColor}"
<input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor}"
type="checkbox"
value="{{option.option_id}}"
ng-model="field.fieldValue"

4
public/modules/forms/views/directiveViews/field/date.html
View file

@ -1,4 +1,4 @@
<div class="field row" ng-click="setActiveField(field._id)">
<div class="field row" ng-click="setActiveField(field._id, index)">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
<h3>
<span class="fa fa-angle-double-right"></span>
@ -8,7 +8,7 @@
</div>
<div class="col-xs-12 field-input">
<div class="control-group input-append">
<input ng-focus="setActiveField(field._id)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" ui-date="dateOptions" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled">
<input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" ui-date="dateOptions" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled">
</div>
</div>
</div>

2
public/modules/forms/views/directiveViews/field/dropdown.html
View file

@ -1,4 +1,4 @@
<div class="field row dropdown" ng-click="setActiveField(field._id)" ng-if="field.fieldOptions.length > 0">
<div class="field row dropdown" ng-click="setActiveField(field._id, index)" ng-if="field.fieldOptions.length > 0">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
<h3>
<span class="fa fa-angle-double-right"></span>

4
public/modules/forms/views/directiveViews/field/email.html
View file

@ -1,7 +1,7 @@
<div class="field row" ng-click="setActiveField(field._id)">
<div class="field row" ng-click="setActiveField(field._id, index)">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
<div class="col-xs-12 field-input">
<input ng-focus="setActiveField(field._id)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="email"
<input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="email"
class="text-field-input"
placeholder="email@example.com"
value="{{field.fieldValue}}"

2
public/modules/forms/views/directiveViews/field/hidden.html
View file

@ -1 +1 @@
<input ng-focus="setActiveField(field._id)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="hidden" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" value="{{field.fieldValue}}" ng-disabled="field.disabled">
<input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="hidden" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" value="{{field.fieldValue}}" ng-disabled="field.disabled">

6
public/modules/forms/views/directiveViews/field/legal.html
View file

@ -1,4 +1,4 @@
<div class="field row radio legal" ng-click="setActiveField(field._id)">
<div class="field row radio legal" ng-click="setActiveField(field._id, index)">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
<h3>{{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3>
<br>
@ -7,11 +7,11 @@
<div class="col-xs-12 field-input container">
<div class="row-fluid">
<label class="btn col-xs-5">
<input ng-focus="setActiveField(field._id)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="radio" value="true" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled"/>
<input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="radio" value="true" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled"/>
<span> I accept </span>
</label>
<label class="btn col-xs-5 col-xs-offset-1">
<input ng-focus="setActiveField(field._id)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="radio" value="false" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled"/>
<input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="radio" value="false" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled"/>
<span>I don't accept </span>
</label>
</div>

4
public/modules/forms/views/directiveViews/field/link.html
View file

@ -1,6 +1,6 @@
<div class="field row" ng-click="setActiveField(field._id)">
<div class="field row" ng-click="setActiveField(field._id, index)">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
<div class="col-xs-12 field-input">
<input ng-focus="setActiveField(field._id)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="url" class="text-field-input" placeholder="https://example.com/something" value="{{field.fieldValue}}" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled"/>
<input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="url" class="text-field-input" placeholder="https://example.com/something" value="{{field.fieldValue}}" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled"/>
</div>
</div>

4
public/modules/forms/views/directiveViews/field/natural.html
View file

@ -1,7 +1,7 @@
<div class="field row textfield natural" ng-click="setActiveField(field._id)">
<div class="field row textfield natural" ng-click="setActiveField(field._id, index)">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
<div class="col-xs-12 field-input">
<input ng-focus="setActiveField(field._id)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="text"
<input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="text"
class="text-field-input"
ng-model="field.fieldValue"
ng-model-options="{ debounce: 250 }"

4
public/modules/forms/views/directiveViews/field/number.html
View file

@ -1,6 +1,6 @@
<div class="field row" ng-click="setActiveField(field._id)">
<div class="field row" ng-click="setActiveField(field._id, index)">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
<div class="col-xs-12 field-input">
<input ng-focus="setActiveField(field._id)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="number" class="text-field-input" placeholder="" value="{{field.fieldValue}}" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled"/>
<input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="number" class="text-field-input" placeholder="" value="{{field.fieldValue}}" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled"/>
</div>
</div>

4
public/modules/forms/views/directiveViews/field/password.html
View file

@ -1,6 +1,6 @@
<div class="field row" ng-click="setActiveField(field._id)">
<div class="field row" ng-click="setActiveField(field._id, index)">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
<div class="col-xs-12 field-input">
<input ng-focus="setActiveField(field._id)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="password" class="text-field-input" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" value="{{field.fieldValue}}" ng-required="field.required" ng-disabled="field.disabled">
<input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="password" class="text-field-input" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" value="{{field.fieldValue}}" ng-required="field.required" ng-disabled="field.disabled">
</div>
</div>

4
public/modules/forms/views/directiveViews/field/radio.html
View file

@ -1,9 +1,9 @@
<div class="field row radio" ng-click="setActiveField(field._id)" ng-if="field.fieldOptions.length > 0">
<div class="field row radio" ng-click="setActiveField(field._id, index)" ng-if="field.fieldOptions.length > 0">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
<div class="col-xs-12 field-input">
<div ng-repeat="option in field.fieldOptions" class="row-fluid">
<label class="btn" style="margin: 0.5em; padding-left:30px" ng-class="{activeBtn: field.fieldValue == field.fieldOptions[$index].option_id}">
<input ng-focus="setActiveField(field._id)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
<input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
type="radio"
value="{{option.option_value}}"
ng-model="field.fieldValue"

4
public/modules/forms/views/directiveViews/field/rating.html
View file

@ -1,4 +1,4 @@
<div class="textfield field row" ng-click="setActiveField(field._id)">
<div class="textfield field row" ng-click="setActiveField(field._id, index)">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
<h3>
<span class="fa fa-angle-double-right"></span>
@ -7,7 +7,7 @@
</h3>
</div>
<div class="col-xs-12 field-input">
<input-stars max="5" ng-focus="setActiveField(field._id)"
<input-stars max="5" ng-focus="setActiveField(field._id, index)"
icon-full="fa-star"
icon-base="fa fa-3x"
icon-empty="fa-star-o"

2
public/modules/forms/views/directiveViews/field/statement.html
View file

@ -1,4 +1,4 @@
<div class="statement field row" ng-click="setActiveField(field._id)">
<div class="statement field row" ng-click="setActiveField(field._id, index)">
<div class="row field-title field-title">
<div class="col-xs-1"><i class="fa fa-quote-left fa-1"></i></div>
<h2 class="text-center col-xs-9">{{field.title}} </h2>

2
public/modules/forms/views/directiveViews/field/textarea.html
View file

@ -1,4 +1,4 @@
<div class="field row" ng-click="setActiveField(field._id)">
<div class="field row" ng-click="setActiveField(field._id, index)">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
<div class="col-xs-12 field-input">
<textarea type="text" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" value="{{field.fieldValue}}" ng-required="field.required" ng-disabled="field.disabled"></textarea>

4
public/modules/forms/views/directiveViews/field/textfield.html
View file

@ -1,4 +1,4 @@
<div class="textfield field row" ng-click="setActiveField(field._id)">
<div class="textfield field row" ng-click="setActiveField(field._id, index)">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}" ng-style="{'color': design.colors.questionColor}">
<h3>
<span class="fa fa-angle-double-right"></span> {{field.title}}
@ -8,7 +8,7 @@
</h3>
</div>
<div class="col-xs-12 field-input">
<input ng-focus="setActiveField(field._id)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
<input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
type="text"
class="text-field-input"
ng-model="field.fieldValue"

6
public/modules/forms/views/directiveViews/field/yes_no.html
View file

@ -1,4 +1,4 @@
<div class="field row radio" ng-click="setActiveField(field._id)">
setActiveField(field._id, index)<div class="field row radio" ng-click="setActiveField(field._id, index)">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
<h3 class="row">
<span class="fa fa-angle-double-right"></span> {{field.title}}
@ -14,12 +14,12 @@
<div class="col-xs-12 field-input">
<div class="row-fluid">
<label class="btn btn-success col-xs-3">
<input ng-focus="setActiveField(field._id)" type="radio" value="true" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled" ng-init="field.fieldValue = true"/>
<input ng-focus="setActiveField(field._id, index)" type="radio" value="true" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled" ng-init="field.fieldValue = true"/>
<span>Yes</span>
</label>
<label class="btn btn-danger col-xs-3">
<input ng-focus="setActiveField(field._id)" type="radio" value="false" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled"/>
<input ng-focus="setActiveField(field._id, index)" type="radio" value="false" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled"/>
<span>No</span>
</label>
</div>

43
public/modules/forms/views/directiveViews/form/submit-form.client.view.html
View file

@ -38,8 +38,8 @@
</div>
<div class="row">
<form name="myForm" class="submission-form col-sm-12 col-md-offset-1 col-md-10">
<div ng-repeat="field in myform.form_fields" ng-if="!field.deletePreserved" ng-class="{activeField: selected == field._id }" class="row field-directive">
<field-directive field="field" design="myform.design">
<div ng-repeat="field in myform.form_fields" ng-if="!field.deletePreserved" ng-class="{activeField: selected._id == field._id }" class="row field-directive">
<field-directive field="field" design="myform.design" index="$index" focus-on="selected._id == field._id">
</field-directive>
</div>
</form>
@ -48,22 +48,40 @@
<hr>
<div class="row form-actions">
<button class="btn btn-success col-sm-2 col-sm-offset-5" type="button" ng-disabled="mymyform.$invalid" ng-click="submit()" style="font-size: 1.6em;">
<button class="btn btn-success col-sm-2 col-sm-offset-5" type="button" ng-disabled="myform.$invalid" ng-click="submitForm()" style="font-size: 1.6em;">
Submit
</button>
</div>
<section ng-if="!myform.hideFooter" class="navbar navbar-fixed-bottom" style="background-color:rgba(242,242,242,0.5); padding-top:15px;">
<div class="container" >
<div class="row">
<div class="col-xs-4 col-xs-offset-4 col-sm-4 col-sm-offset-4 text-center col-md-3 col-md-offset-0" ng-show="!myform.submitted">
<p class="lead">{{myform | formValidity}} out of {{myform.visible_form_fields.length}} answered</p>
</div>
<div class="hidden-xs hidden-sm col-md-6 col-md-offset-3 row">
<div class="col-md-4 col-md-offset-2" ng-if="!authentication.isAuthenticated()">
<a href="/#!/forms" class="btn btn-default">Create a NodeForm</a>
</div>
<div class="col-md-4 col-md-offset-2" ng-if="authentication.isAuthenticated()" class="hidden-sm hidden-xs">
<a href="/#!/forms/{{myform._id}}/admin" class="btn btn-default">Edit this NodeForm</a>
</div>
<div class="col-md-1 col-md-offset-2" style="padding-left:5px" class="hidden-sm hidden-xs">
<div class="btn btn-info" id="focusDownButton" ng-click="nextField()">\/</div>
</div>
<div class="col-md-1" class="hidden-sm hidden-xs">
<div class="btn btn-info" id="focusUpButton" ng-click="prevField()">/\</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div ng-show="myform.submitted" class="form-submitted">
<!-- <div class="field row">
<div class="col-sm-11 col-sm-offset-1"><h1>{{ myform.title }}</h1>
<hr>
</div>
</div> -->
<div class="field row text-center">
<div class="col-xs-6 col-xs-offset-3 text-center">Form entry successfully submitted!<br><br> Please take a seat and wait for your number to be called!</div>
<div class="col-xs-6 col-xs-offset-3 text-center">Form entry successfully submitted!</div>
</div>
<div class="row form-actions">
<p class="text-center col-xs-4 col-xs-offset-4">
@ -71,10 +89,5 @@
<a ng-click="reloadForm()" style="color:white; font-size: 1.6em; text-decoration: none;" > Go back to Form</a>
</button>
</p>
<!-- <p class="text-center col-xs-2" ng-if="authentication.isAuthenticated()">
<button class="btn btn-caution left" type="button">
<a href="/#!/forms/{{myform._id}}/admin" style="color:white; font-size: 1.6em; text-decoration: none;">Edit Form</a>
</button>
</p> -->
</div>
</div>

23
public/modules/forms/views/submit-form.client.view.html
View file

@ -2,28 +2,5 @@
<submit-form-directive myform="myform"></submit-form-directive>
<section ng-if="!myform.hideFooter" class="navbar navbar-fixed-bottom" style="background-color:rgba(242,242,242,0.5); padding-top:15px;">
<div class="container" >
<div class="row">
<div class="col-xs-4 col-xs-offset-4 col-sm-4 col-sm-offset-4 text-center col-md-3 col-md-offset-0" ng-show="!myform.submitted">
<p class="lead">{{myform | formValidity}} out of {{myform.visible_form_fields.length}} answered</p>
</div>
<div class="hidden-xs hidden-sm col-md-6 col-md-offset-3 row">
<div class="col-md-4 col-md-offset-2" ng-if="!authentication.isAuthenticated()">
<a href="/#!/forms" class="btn btn-default">Create a NodeForm</a>
</div>
<div class="col-md-4 col-md-offset-2" ng-if="authentication.isAuthenticated()" class="hidden-sm hidden-xs">
<a href="/#!/forms/{{myform._id}}/admin" class="btn btn-default">Edit this NodeForm</a>
</div>
<div class="col-md-1 col-md-offset-2" style="padding-left:5px" class="hidden-sm hidden-xs">
<div class="btn btn-info" id="focusDownButton">\/</div>
</div>
<div class="col-md-1" class="hidden-sm hidden-xs">
<div class="btn btn-info" id="focusUpButton">/\</div>
</div>
</div>
</div>
</div>
</section>
</section>