How to get css animations working in Ember - css

Note: I am using the INSPINIA administrative theme and this question is an extension of the following question: How do I install bootstrap 4 template to Ember web project?
How do I get css animations working in Ember?
I am attempting to get the collapse-able sidebar navigation menu working (see the INSPINIA link here). Currently, I do not see the arrow and the menu is displayed only in expanded form in the <ul class="nav nav-second-level">...</ul> block of code.
In looking at the sample projects and View Source page, there appear to be a lot of add-ons that INSPINIA uses. Do I need to install all of them? Or, do I just need jQuery?
Here is the code for my handlebar file in question.
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav metismenu" id="side-menu">
{{#if session.isAuthenticated}}
<li class="active"><i class="fa fa-th-large"></i> <span class="nav-label">Client</span> <span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>Update Information</li>
<li>{{#link-to "clients.change-password"}}Change Password{{/link-to}}</li>
<li><a href="#" onclick={{action "logout"}}>Logout</a></li>
</ul>
</li>
{{else}}
<li>{{#link-to "clients.login"}}Login{{/link-to}}</li>
<li>{{#link-to "clients.register"}}Register{{/link-to}}</li>
{{/if}}
<li>{{#link-to "misc.about"}}About{{/link-to}}</li>
<li>{{#link-to "misc.contactus"}}Contact Us{{/link-to}}</li>
</ul>
</div>
</nav>

I'd suggest using Liquid Fire.
Liquid Fire is a toolkit for managing animated transitions in an Ember application.
You can use the transition.js file to manage the duration, direction, timing etc. of CSS transitions in your app.
You may use Ember Animated if you need more control over your animations.

Related

How do I refresh tab content using Bootstrap 4 / bootstrap-native-v4

I want to present Tabs using Bootstrap 4 with bootstrap-native-v4 within an Angular 2 application. (I am including bootstrap-native-v4 via the angular.json file 'scripts' value "./node_modules/bootstrap.native/dist/bootstrap-native-v4.min.js" - note I can see bootstrap-native-v4 included within the source [scripts.js file] when viewed thru the Chrome Developer Tools)
I am using localhost:4200/myfolder to run my application locally however for the code below, when I hover-over/click the tabs the URL defaults to localhost:4200/#home (instead of localhost:4200/myfolder#home), localhost:4200/#profile (instead of localhost:4200/myfolder#profile), etc.
So what happens is that the page does a post back to a none existent URL
I've tried setting the BaseURL in the head, however although this fixes the URL issue the page doesn't refresh the content when I click on the tabs. I've also tried to set the href of each anchor to myfolder#home, myfolder#profile, etc however again although this fixes the URL issue (no postback), the tab content doesn't refresh
I really want to avoid using JQuery (hence the use of bootstrap-native-v4) - most/all of the examples seem to use JQuery - I am trying to go via Data API (JS within the bootstrap-native-v4 scope is OK tho)
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist" data-tabs="tabs">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">a...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">b...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">c...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">d...</div>
</div>
I am wanting the code to not postback to the server and to simply switch between tabs showing the corresponding tab's content
Can anyone help ?
BSN developer here. I want to say this: I'm no Angular expert, but I can tell my library goes away from traditional jQuery methods, events and plugin structure, you need to think Native JavaScript FIRST.
Supposing you're working with fully dynamic content, where content is added/changed/removed later into/from the DOM, you can try to work with it following the documentation:
init each of your newly added tabs with var myTab[N] = new Tab(element,options); (myTab[N]/myTab1 is the initialization object to work with)
interact with your object via method, EG myTab[N].show();
dispose the object via myTab[N] = null; then remove its respective tab+tabContent from the DOM
the Tab component (as well as all others in the library) does NOT handle #myTab URL navigation
Check the documentation and wiki for more info, you might find some guides to help you hopefully.

Ruby on Rails 5, tabbed template

I am trying to figure out how I can implement a tabbed site similar to the image below. Does anyone know/recognize this template or can guide me on how I can design something similar with bootstrap and css?
Bootstrap has a javascript tab plugin included to change tabs on clicking. You can checkout https://v4-alpha.getbootstrap.com/components/navs/#javascript-behavior
If you want the pages to load a new page on clicking you could do something like (I've used font awesome for the icons here)
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="/sourcing"><i class="fa fa-pie-chart"></i>Sourcing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/people"><i class="fa fa-user-o"></i>People</a>
</li>
</ul>
In bootstrap 4 this would get the basic example working and you could play around with the CSS to change the look of each a when it has the "active" class

WAI-ARIA - selected/current menuitem/page, how to set the correct state in a menubar?

I'm doing some code clean up / validation in a web site, and have run into an issue. The site have a main menu (menubar) where the current page should be indicated.
The menu structure as is:
<nav role="navigation">
<ul role="menubar">
<li role="menuitem" aria-selected="true">
Current page
</li>
<li role="menuitem">
Another page
</li>
</ul>
</nav>
According to the WAI-ARIA spec, the state aria-selected is not allowed on the role menuitem: http://www.w3.org/TR/wai-aria/states_and_properties#aria-selected. Neither can I find any state for menuitem that seem to mark the menuitem as selected: http://www.w3.org/TR/wai-aria/roles#menuitem.
What would be the correct implementation of a selected menuitem/page in a menubar?
Update:
I found one answer suggesting to leave the anchor out on the current page in the menu, but not sure if that will give me what I want.
<li role="menuitem">Current page</li>
As laid out very nicely in the blog entry The Accessible Current Page Link Conundrum there seems to be an upcoming solution by introducing the attribute aria-current="true".
For now, you stay with
your finding of either leaving the anchor out on the current page menu item
or include an aria-described attribute, which is specified to attach descriptive information to one or more elements by referencing an ID. Example:
<nav role="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<span id="a11y-desc-current">current page</span>
</nav>

bootstrap dropdown menu always showing

The code:
<nav class='secondary-nav container'>
<ul>
<li>Customer Care</li>
<li class='dropdown'>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Home
<b class='caret'></b>
</a>
<ul class='dropdown-menu'>
<li>
Google
</li>
</ul>
</li>
<li>Sign Out</li>
</ul>
</nav>
I have jQuery, bootstrap-dropdown.js, and bootstrap.css incuded. jQuery is included before everything.
The dropdown menu is appearing by default before a mouse click or hover on the list element.
screenshot - http://cl.ly/image/41122D2Z3R38
Anyone know why?
Thanks!
Try This :
$('.dropdown-toggle').dropdown();
The thing without your css code we can not understand your problem.
But as I can see, you data attribute is correctly used, but are you linking you javascript files correctly?
"bootsrtap.js" and "Your jquery File"
The second thing look out on your javascript applying code.
The applying code of the nav menu of bootsrtap is :
$('.dropdown-toggle').dropdown();
try to revise your file codes and I think this will help you ^_^

How to style the tabs in primary menu links in a Drupal 7 subtheme?

I was just wondering what the general procedure is to style the tabs in the primary menu links. Where is the CSS that takes care of that? How can I change it? At the moment I have a Zen subtheme installed and I would like to completely restyle the tabs. The tabs' markup looks like this:
<div class="tabs">
<h2 class="element-invisible">Primary tabs</h2>
<ul class="tabs primary clearfix">
<li class="active"><a href="/drupal/user/1" class="active">
<span class="tab">View</span><span class="element-invisible">(active tab)</span></a>
</li>
<li><span class="tab">Venues</span></li>
<li><span class="tab">Events</span></li>
<li><span class="tab">Edit</span></li>
<li><span class="tab">Shortcuts</span></li>
<li><span class="tab">Devel</span></li>
</ul>
</div>
What I would like is to be able to change the background colour of the tabs as tehy are now (they are greyish). I've tried setting the background colour of the spans, li, and a elements but that didn't work.
Any ideas?
Thanks,
The answer is inside the tabs.css in the Zen theme - can't believe I didn't see it before!

Resources