I am using semantic ui accordion in my template of my angular js project.
<div class="ui accordion">
<div class="active title">
<i class="dropdown icon"></i>
What is a dog?
</div>
<div class="active content">
<p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
Content
</div>
<div class="active content">
<p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
</div>
</div>
The problem is both the contents are in open state, without having a necessity to click on the accordion to open. What is the change I need to do?
There are four things you might check:
1) Remove the 'active' class from the last div in your markup since it makes its content visible.
2) You need to initialize the accordion via
$('.ui.accordion').accordion();
See the usage information on the Semantic UI accordion page:
http://semantic-ui.com/modules/accordion.html#/usage
3) You will also need to include the Semantic UI javascript files.
4) Since you said you use the accordion in a template, you have to wrap the initializtion inside a script inside the template or (the angular way) write a short directive which will invoke the accordion initialization on the element for you.
Related
I am wondering, I did not find carousel component in Semantic UI.
I feel it is very common and useful component.
I know one option OWL Carouse. I do not want to use jQuery, though for Semantic UI I will just include jQuery. Rest of the things I want to achieve via Angular.
I need to know the possible options without writing jQuery code.
Semantic UI evidently does not currently have a carousel module, and it is an open issue.
There are, however, some small snippets on that page that can achieve what you'd like to. See slick and Swiper.
Here is another alternative.
fotorama.io
yes there is no carousel in Semantic UI at moment but you can use cards somewhat similar here is one I found to be closest to bootstrap carousel;
<div class="ui card">
<div class="ui slide masked reveal image">
<img src="/images/avatar/large/jenny.jpg" class="visible content">
<img src="/images/avatar/large/elliot.jpg" class="hidden content">
</div>
<div class="content">
<a class="header">Team Fu & Hess</a>
<div class="meta">
<span class="date">Created in Sep 2014</span>
</div>
</div>
<div class="extra content">
<a>
<i class="users icon"></i>
2 Members
</a>
</div>
</div>
hope this helps,
cheers.
Here is the link you can create a coursel in semantic ui.
https://codesandbox.io/s/43pv7wm6n9
Hopefully it will help you.
Im working on a project where I want to use a carousel to display some different content. I will not create the slides dynamically using an ng-repeat, this is because I have to move some of the content from other parts of the DOM into the slide.
I want to have some links with title connected to each slide, so if I click that link it should scroll to that slide. I have managed to do this, but the sliding behaviour is not as expected. Here is a plunker in which the weird behaviour is displayed: http://plnkr.co/edit/oZrLzRaLb5cAmMBnz4p0?p=preview
<div ng-controller="CarouselDemoCtrl as car">
<a ng-click="car.active = 0">Slide 1</a>
<a ng-click="car.active = 1">Slide 2</a>
<a ng-click="car.active = 2">Slide 3</a>
<uib-carousel ng-model="" active="car.active" interval="0" no-wrap="true" no-transition="false">
<uib-slide index="0">
<div style="background:blue; height:600px;">
Some content in here
</div>
</uib-slide>
<uib-slide index="1">
<div style="background:red; height:600px;">
Some content in here as well
</div>
</uib-slide>
<uib-slide index="2">
<div style="background:green; height:600px;">
Some cool content in here
</div>
</uib-slide>
</uib-carousel>
</div>
Any thoughts of why this happens, and how I can solve it?
Note: Im using angular 1.5.0 and ui-bootstrap 1.2.4
Best regards,
Daniel
have you install ng animation,
or you don't want to sliding you could edit the transition="true" to disable it
<uib-carousel ng-model="" active="car.active" interval="0" no-wrap="true" no-transition="true">
https://github.com/angular-ui/bootstrap/issues/5601
Issue seems to be in the angular-ui code itself;
In the $watch of 'active' "currentIndex = index;" is set before "self.select(slides[index]);" is run, by moving it down after it it'll work
I'm working on a project where the client has supplied a pile of html where I need to plugin the data from our database and have hit a problem that I'm finding difficult to solve....
So first problem is with routing
<div ng-repeat="class in vm.classes">
<div class="class-overview">
<a href="#">
<span class="class-title">{{class.description}}</span>
... more stuff here
</a>
</div>
<div class="class-information collapse">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
</div>
he has supplied some javascript to handle the click on class-overview
$('.class-overview a').on('click',function(e) {
e.preventDefault();
});
$('.class-overview').on('click',function() {
$('.class-overview.active').removeClass('active').next('.class-information').collapse('hide');
$(this).addClass('active').next('.class-information').collapse('show');//.css('top',offset).collapse('show');
});
and i have a line like this in my state provider
// default route
$urlrouterProvider.otherwise("/")
So the problem is that the ui-router handles the click and sends me back to the home page.
The ideal solution is to leave as much of his markup intact, so can anyone tell me how I stop ui-router handling the click?
or failing that, how I might use ng-click and ng-show to get the same effect, i.e. hiding and showing the class-information div...
If I understand well your question, you want to display the .class-information div when you click on the .class-overview element.
That can be done by using a variable in a ng-show like this:
<div ng-repeat="class in vm.classes">
<div class="class-overview">
<a href="#" ng-click="display = !display">
<span class="class-title">{{class.description}}</span>
... more stuff here
</a>
</div>
<div class="class-information" ng-show="display">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
</div>
The display variable will be falsy when you land on the page, therefore the ng-click will be executed, this variable will be set to true.
I see that you are using a collapse class to hide the content if it is collapsed. Then you could use angular ng-class to put the collapse class when the display variable is false. Your div.class-information would look like this:
<div class="class-information" ng-class="{collapse: !display}">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
I'm trying to build a directive which will display a kendo window with a kendo tab strip in its body content.
It's a component I need to be reusable since I use it a lot in my web app.
Here is the flat html representation that I want to turn into a directive
<div style="padding:20px;" kendo-window="test" id="test" k-title="hello" k-options="popupOptions">
<div kendo-tab-strip k-content-urls="[ null, null]">
<!-- tab list -->
<ul>
<li class="k-state-active">View</li>
<li>Edit</li>
</ul>
<div style="padding: 1em">
This is the view tab
</div>
<div style="padding: 1em">
This is the edit tab
</div>
</div>
</div>
1) First step is creating the directive that wraps the kendo popup and this si where I'm having an issue
So basically, my directive includes the kendo-window widget in its template and has transclude="true", since the content of the popup will different each time.
It seems "transclude" and "scope" cause some issues.
Please have a look : http://plnkr.co/edit/c7qoKlh75s8aS7fazYSo
I've just started working on a project that requires me to learn AngularJS. What I'm trying to do is create two menus that slide into the screen, one from the left, one from the right. When they do this they push the content over.
Currently I can get one or the other to work, but not both. I realize this is because of the way that I'm defining the ng-class. I just can't quite conceptualize how to do it correctly.
<div ng-class="{true:'slide-left', false:''}[toggleSlide]" class="container">
<div class="content">
<button ng-click="toggleSlide = !toggleSlide" class="btn-left">From Left</button>
<button ng-click="toggleSlide = !toggleSlide" class="btn-right">From Right</button>
</div>
<div class="slide-from-left">
<p>Here is information that slides from off screen left.</p>
</div>
<div class="slide-from-right">
<p>Here is information that slides from off screen right.</p>
</div>
</div>
Set up the ng-class syntax like this for what you want:
<div ng-class="{'slide-left':toggleSlide, 'slide-right':!toggleSlide}" class="container">
Also, I'm guessing you were trying to adapt your code to something else you saw, so I'll offer something on that also. Here's an ng-class using ng-repeat's $index to dole out classes for even and odd:
ng-class="['even', 'odd'][$index % 2]"