We Keep Coding

Angular Move up/down through Dropdown List Items with Keyboard from Toggle Dropdown Button

I am working to add keyboard functionality to my Dropdown List, below is the directive template. I am passing in data through isolate scope bound to "ctrl". I am using Angular and Bootstrap. I'm wondering if anybody out there knows a good solution for efficiently allowing a user to move up and down through the list. I think I am getting stuck mostly on having to have the angular "ng-keydown" directive on the button, and then moving from there and being able to focus an item with the up/down keys. And then being able to select a list item with the space bar.
<div class="dropdown select-container" ng-class="{'open' : ctrl.isOpen}">
<div class="form-group" ng-if="ctrl.filterMode === 'off'">
<button class="btn btn-default form-control" type="button" ng-keydown="ctrl.onButtonKeydown($event)" ng-click="ctrl.toggleDropdown($event)" ng-disabled="ctrl.ngDisabled === true">
{{ctrl.selectedRow[ctrl.propertyName] ? ctrl.selectedRow[ctrl.propertyName] : ctrl.selectLabel}}
<div class="pull-right"><i ng-class="{'fa fa-angle-up': ctrl.isOpen, 'fa fa-angle-down': !ctrl.isOpen}"></i></div>
</button>
</div>
<ul class="dropdown-menu list-group" ng-disabled="ctrl.ngDisabled === true">
<li class="list-group-item" ng-repeat="row in ctrl.rows | filter: ctrl.filterText" ng-class="{'active': row === ctrl.selectedRow, 'disabledStandardList': ctrl.ngDisabled}"
ng-click="ctrl.onSelectedLocal(row)">
{{row[ctrl.propertyName]}}
</li>
<li class="list-group-item text-center" ng-show="ctrl.rows.length <= 0 || (ctrl.rows | filter: ctrl.filterText).length <= 0">
{{ctrl.emptyMessage}}
</li>
</ul>
</div>
I'm not able to get any keydown event unless the directive is on the button because the dropdown is hidden until the user clicks on the button to open it. Once the Dropdown list is open I want the user to be able to move up and down and highlight the current row as he or she is moving, as well as be able to select a row. Is it possible to use the css :focus class to add the list as the user moves up and down?
I have a somewhat working JQuery example but I feel like its hacked together and I'm trying to avoid JQuery as much as possible and use Angular/Vanilla Javascript. If you have a solution that uses some jquery though please share! I've seen some other similar examples around but nothing that has helped me. Any help is appreciated. Thanks

How to change elements being copied on dragging using Dragula JS Plugin

I have a page which is similar to page builder template editor. Im using Dragula.JS as a plugin for drag and drop and used their method copy to copy elements from other container. This is what it looks like:
The problem is when I drag from right side columns and put in the left box elements are copied exactly what it is on the right columns. This is my code:
<div id="2col" class="collapse column-choices">
<a href="#" class="list-group-item">
<div class="row">
<div class="layoutBorder one-half"></div>
<div class="layoutBorder one-half"></div>
</div>
</a>
<a href="#" class="list-group-item">
<div class="row">
<div class="one-four layoutBorder"></div>
<div class="three-four layoutBorder"></div>
</div>
</a>
<a href="#" class="list-group-item">
<div class="row">
<div class="three-four layoutBorder"></div>
<div class="one-four layoutBorder"></div>
</div>
</a>
</div>
and my JS:
// the `templateContainer is the right box container`
dragula([document.getElementById('2col'), document.getElementById('templateContainer')], {
copy: true,
});
When I drag things to left box container this code will be put on:
<a href="#" class="list-group-item">
<div class="row">
<div class="layoutBorder one-half"></div>
<div class="layoutBorder one-half"></div>
</div>
</a>
That is not I want. Question is How to copy elements from right container and when put to left box container elements are going to changed this my aim. I will change elements to:
<div class="element-to-paste">
This thing will be copy on the left box. From Right.
</div>
Please point me on other drag and drop plugin that can make my objective.

The way to do what your asking is to utilize the .drop Dragula callback.
.on("drop", function(el, container, source) {}
https://github.com/bevacqua/dragula#drakeon-events
I've built one app where the 'drop zone' only had one column, so all elements would be lined-up vertically.. Similar to a sortable list. I used Angular for my project and my whole drop-zone used an ng-repeat directive, which is just a way to loop through an array of data. For an example it could be:
var data = [
{
index: 1,
type: 'image',
data: 'image.jpg'
},
{
index: 2,
type: 'textblock',
data: 'lorem ipsum, blah blah'
}]
Then in your ng-repeat directive you can read the type property, and put in some HTML for it, like
<div ng-if="mydata.type='image'">
<img src='{{ mydata.data}}'>
</div>
<div ng-if="mydata.type='text'">
<p>{{ mydata.data }}</p>
</div>
To get the correct order for your elements, you could use the ng-orderBy directive using the object's index.
This way the dropping action is a facade. You actually remove the dragged element from the DOM and replace it with a new one.
Dragula appends a .gu-transit class to elements while they're being dragged, so within your .drop callback you can loop through the DOM elements in your drop-container, find the .gu-transit, then you know the index that it's at, and can assign it a correct index property when you push it into your data array.
I'm using Angular as an example because that's what I used, and I think using it or another framework substantially helped implement this functionality. I think it'd be a lot more difficult to do with straight jQuery.

Hide div by default and show it on click with bootstrap

I want to show and hide a div, but I want it to be hidden by default and to be able to show and hide it on click. Here is the code that I have made :
<a class="button" onclick="$('#target').toggle();">
<i class="fa fa-level-down"></i>
</a>
<div id="target">
Hello world...
</div>

Here I propose a way to do this exclusively using the Bootstrap framework built-in functionality.
You need to make sure the target div has an ID.
Bootstrap has a class "collapse", this will hide your block by
default. If you want your div to be collapsible AND be shown by
default you need to add "in" class to the collapse. Otherwise the
toggle behavior will not work properly.
Then, on your hyperlink (also works for buttons), add an href
attribute that points to your target div.
Finally, add the attribute data-toggle="collapse" to instruct
Bootstrap to add an appropriate toggle script to this tag.
Here is a code sample than can be copy-pasted directly on a page that already includes Bootstrap framework (up to version 3.4.1):
Toggle Foo
<button href="#Bar" class="btn btn-default" data-toggle="collapse">Toggle Bar</button>
<div id="Foo" class="collapse">
This div (Foo) is hidden by default
</div>
<div id="Bar" class="collapse in">
This div (Bar) is shown by default and can toggle
</div>

Just add water style="display:none"; to the <div>
Fiddles I say: http://jsfiddle.net/krY56/13/
jQuery:
function toggler(divId) {
$("#" + divId).toggle();
}
Preferred to have a CSS Class .hidden
.hidden {
display:none;
}

Try this one:
<button class="button" onclick="$('#target').toggle();">
Show/Hide
</button>
<div id="target" style="display: none">
Hide show.....
</div>

I realize this question is a bit dated and since it shows up on Google search for similar issue I thought I will expand a little bit more on top of #CowWarrior's answer. I was looking for somewhat similar solution, and after scouring through countless SO question/answers and Bootstrap documentations the solution was pretty simple. Again, this would be using inbuilt Bootstrap collapse class to show/hide divs and Bootstrap's "Collapse Event".
What I realized is that it is easy to do it using a Bootstrap Accordion, but most of the time even though the functionality required is "somewhat" similar to an Accordion, it's different in a way that one would want to show hide <div> based on, lets say, menu buttons on a navbar. Below is a simple solution to this. The anchor tags (<a>) could be navbar items and based on a collapse event the corresponding div will replace the existing div. It looks slightly sloppy in CodeSnippet, but it is pretty close to achieving the functionality-
All that the JavaScript does is makes all the other <div> hide using
$(".main-container.collapse").not($(this)).collapse('hide');
when the loaded <div> is displayed by checking the Collapse event shown.bs.collapse. Here's the Bootstrap documentation on Collapse Event.
Note: main-container is just a custom class.
Here it goes-
$(".main-container.collapse").on('shown.bs.collapse', function () {
//when a collapsed div is shown hide all other collapsible divs that are visible
$(".main-container.collapse").not($(this)).collapse('hide');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
Toggle Foo
Toggle Bar
<div id="Bar" class="main-container collapse in">
This div (#Bar) is shown by default and can toggle
</div>
<div id="Foo" class="main-container collapse">
This div (#Foo) is hidden by default
</div>

Animate span based on variable selection

Is there a way to animate a span within a div, based on a selection within ul?
I used an unordered list to create my nav.
I have the idea that selecting the li will change a global variable, and that I can use jQuery to animate the span within the div based on what my variable says?
JSFiddle: http://jsfiddle.net/43rt2/
<ul id='nav'>
<li id='a'>First</li>
<li id='b'>Second</li>
<li id='c'>Third</li>
</ul>
<div id='container'>
<div class='page' id='first'>Content From 'a'</div>
<div class='page' id='second'>Content From 'b'</div>
<div class='page' id='third'>Content From 'c'</div>
</div>
I want the containers of content to slide from left to right based on which 'li' is currently selected. I just dont know what direction i should be looking in.
I dont want you to do this for me, instead hint towards a certain type of syntax for me to Google.

Positioning issue in ExpressionEngine cms

I have a positioning issue with my in expression engine. click Here On the following link I am looping elements with <div id="services-container"> I have noticed it loops fine on the first row however begins to misalign on the second row. I have made attempts to use the switch="" tag to create an individual class for each loop, see below:
{exp:channel:entries channel="services" dynamic="no" sort="asc|desc"}
<div id="services-container" class="{switch='1|2|3|4|5|6'}">
<div class="service-content">
<img src="{service_image}" alt="banner" alt="{alt}" class="service-banner">
<p>{service_head_line}</p>
{service_listed_items}
<ul class="service-credentials">
<li>{service_list_1}</li>
<li>{service_list_2}</li>
<li>{service_list_3}</li>
</ul>
<ul class="service-credentials">
<li>{service_list_4}</li>
<li>{service_list_5}</li>
<li>{service_list_6}</li>
</ul>
View related projects »
{/service_listed_items}
</div><!--service-content-->
</div><!--SERVICES CONTAINER-->
{/exp:channel:entries}
When i try to class these classes out in my style sheet nothing is happening. Does anyone know what i am doing wrong?

This involves ExpressionEngine but also css. Basically you are trying to create a grid with 3 items in each row, correct ?
Each of these "row" has to adopt a float containment strategy, since it only contains 3 floated items. The way I would go about it using the switch parameter:
{exp:channel:entries channel="services" dynamic="no" orderby="date" sort="asc"}
{if "{switch='one|two|three'}" == "one"}<div class="row">{/if}
<div class="item">
...code...
</div>
{if "{switch='one|two|three'}" == "three" || count == total_results}</div>{/if}
{/exp:channel:entries}
That code would include a div with a class of row every three items in that loop.
Then, if your items are floated, your rows must have some sort of float clearing strategy to contain them like overflow:hidden; or a clearfix method.