I am having some issues adding a hyperlink to a 'hcard' in ionic. I am using the following plugin (https://github.com/drewrygh/ionic-ion-horizontal-scroll-cards) and the codepen is here: http://codepen.io/drewrygh/pen/jEJGLx
When I try to add hyperlink to hcard nothing happens. What is the best way to do this, does anyone know?
<div ng-controller="barsCtrl">
<h4>Top Rated Bars</h4>
<hscroller>
<hcard ng-repeat="bar in bars" index="{{$index}}" desc="{{bar.name}}" image="{{bar.profile_pic}}">
</hcard>
</hscroller>
</div>
Do you mean you want the cards to link to something as an anchor tag? You can wrap the cards in an anchor tag: http://codepen.io/anon/pen/Nqvjpv
<a ng-repeat="item in items" href="http://www.google.com?q={{item.desc}}" target="_blank">
<hcard index="{{$index}}" desc="{{item.desc}}" image="{{item.image}}"></hcard>
</a>
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
So I'm writing a thumbnail display using the Bootstrap css template.
<div class="col-xs-6 col-md-3">
<a href class="thumbnail" data-ng-repeat="(key, value) in vm.photosOfUser" ng-click="vm.doStuff($index)">
<img data-ng-src="data:image/png;base64, {{value}}" data-err-src="./images/icon.png"><!--alt="{{key}}"-->
</a>
</div>
The images are being displayed perfectly. However, when I click each image link, nothing happens. I know it's kind of tricky dealing with ng-repeat with ng-click. I'm new to Angular so I was wondering if anyone could help :)
Thanks in advance!
this works but it can't scroll down to the very bottom. I have home button at the bottom and and few items are blocked by it and won't scroll up. home button is in footer in the main page and not on the same controller. how do I make sure I see all picture at the bottom. appreciated for any advice.
<ion-scroll direction='y' zooming='true' style="height: 1024px">
<div class="favorites list item item-text-wrap" ng-repeat="photo in favorites">
<a class="item item-thumbnail-left" href="#">
<img src="sourceURL</p>
</a>
</div>
</ion-scroll>
I think the better way is use <ion-content>, this was designed for scrolling as well. But it has some class that help us detect the bottom and top margin like has-footer or has-sub-footer. This won't need to specify an exact height value by style attribute too.
For <ion-content> you can do like this:
<ion-content direction="y" class="has-footer" <!-- has-bouncing="true" --> >
<div class="favorites list item item-text-wrap" ng-repeat="photo in favorites">
<a class="item item-thumbnail-left" href="#">
<img src="sourceURL"</p>
</a>
</div>
</ion-content>
Like the example above, I added has-footer class, it will automatically push the main content up for you, all the content will be shown as you expected. You can also put the has-bouncing="true" attribute like <ion-scroll>
I am trying to put href link to slider images and text in ion-slide.
Here is the code of mine.
<ion-slide-box ng-show="!cloading">
<ion-slide ng-repeat="img in simgs">
<div class="box">
<a ng-href="#/menu/tab/featured-post/{{post.id}}" style="text-decoration:none;">
<img src="{{img.url}}" ></img>
<p class="prodblk2" ng-href="#/menu/tab/featured-post/{{post.id}}" >
{{img.title}}
</p>
</a>
</div>
</ion-slide>
</ion-slide-box>
The link is appearing, but its not working when I click on it. I guess, the ion-slider properties like sliding or dragging overriding the mouse actions.
I tried ng-href and even ng-click by adding some JS function.
I hope nothing wrong about the code. I think, I need to add some property to the ion-slide tag.
I searched for similar questions but I haven't found. If anybody knows it please help me.
Thanks in advance.
I end up with the same problem as you, my solution was to use ng-click on the ion-slide directive, because in there it will fire up.
So you can create a method, pass the id's you need as parameters and then handle the route in the controller. Here's my solution for your problem:
HTML:
<ion-slide-box ng-show="!cloading">
<ion-slide ng-repeat="img in simgs" ng-click="slideClick({{post.id}})">
<div class="box">
<a style="text-decoration:none;">enter code here
<img src="{{img.url}}" ></img>
<p class="prodblk2 >
{{img.title}}
</p>
</a>
</div>
Then create some method on your controller using $location to go to your URL.
JS:
$scope.slideClick = function(postId) {
$location.path("/menu/tab/featured-post/" + postId);
}