Im trying to create a button in jquery mobile only with a image and no text, as far as able to do is to add a data-icon, But i have i feeling it could be done better.
<a onclick="newfunction();" data-icon="plus" data-iconpos="notext" ></a>
You can create button with only images :
<img style="height: 40px; width: 40px;" id="newid" data-role="button" src="source\images\greenplus.png" data-iconpos="notext" data-theme="a" />
data-iconpos="notext"
is indeed the right-way ahead for you to create a button with no text, but image only.
But i would change the onclick function that you have written. Instead of :
<a onclick="newfunction();" data-icon="plus" data-iconpos="notext" ></a>
Try out :
<a class="plus_button" data-icon="plus" data-iconpos="notext" ></a>
Since you are using jquery, use maximum jquery and your function would be :
$(".plus_button").click(function(){
//something here
});
Cheers.
Related
I am trying to dynamically populate a Bootstrap 4 carousel via an ngFor iterating over an array of strings that contain the image urls. The carousel is not displaying the images, though looking at the markup generated everything looks fine. I'm guessing that the component is rendering before Angular is adding in the divs for each slide, as the "carousel slide" div has a height of 0px, which I think is what is hiding the slides themselves.
Behind-the-scenes I have an exposed property named "primarySlideshowImages" containing an array of urls:
ngOnInit() {
this.primarySlideshowImages = this.photoService.getImageLists(ImageListKeys.BrochureProductsPrimary);
}
The HTML markup looks like this:
<div id="carousel1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div *ngFor="let image of primarySlideshowImages; let i = index" class="carousel-item {{ (i == 0) ? 'active' : ''}}">
<img class="d-block img-fluid w-100" [src]="image" >
</div>
</div>
<a class="carousel-control-prev" href="#carousel1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
<a class="carousel-control-next" href="#carousel1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
FYI, I have tested this by hardcoding rather than dynamically adding the images, and everything renders just fine. I think it's a timing thing, but given my relative unfamiliarity with this technology I just don't know how to even search for a solution at this point.
Thank you in advance for your assistance. I do recognize that there are other components and approaches I could use - the ng-bootstrap components, open-source components, purchasable ones, etc. I'd like to try to figure this out using the bootstrap components because I'm pretty new at this technology and hate to jump to an easy solution if there is something I just don't understand that I should be doing. Thanks again for any help you may offer.
It may be that the div containing the image has a width and/or height of the div containing the image is/are 0.
Try setting a style on them. e.g .carousel-item {width:200px; height:200px;}
Also, try checking if the images are being retrieved by the browser using the Network tab on the dev tools.
I use collapse plugin from Bootstrap, and i also want to change class for another element accordingly (change class of fa-icon).
I also use AngularJS and i liked the idea of using condition in ngClass like this:
<i ng-class="collapsableItemId.hasClass('in') ? 'fa-chevron-up' : 'fa-chevron-down'">
When item is not collapsed bootstrap adds in class to it. I want to try to change icon based on class presence in collapsable item, but did not succeed in it. In bootstrap manual there is also mentioned that collapse generates events which i could probably use, but i also do not know how.
It should work like this. Use ng-click on the collapse toggle element to change some other scope var and then use that var in the ng-class of the icon..
<a href="" data-toggle="collapse" data-target=".collapse" ng-click="isOpen=!isOpen">
<i class="fa" ng-class="(isOpen) ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
</a>
<div class="collapse in">
I'm the collapsible element.
</div>
http://www.bootply.com/nqLf22HCli
<i ng-class="{'fa-chevron-up': abc.isOpen ,'fa-chevron-down': !abc.isOpen }"></i><div ng-show="abc.isOpen">Hi..This div will be show hide and icon will be change accordingly</div>
Use ng-click on collapsing header and put that div which you want to collapse
add ng-show="abc.isOpen".
I have the following in my Angular view:
<a ui-sref="mystate({'stateParam1': 99, 'stateParam1': 98})" ng-bind="myCtrl.something.something.username">
</a>
<img ng-src="http://www.gravatar.com/avatar/{{myCtrl.something.something.md5Email}}"/>
It works just fine. I can see a link (for my username). And it is followed by a nice Gravatar image of myself.
But I actually want my image and my username to both be in the body of the link.
I tried the following but it only showed my username, not the image:
<a ui-sref="mystate({'stateParam1': 99, 'stateParam1': 98})" ng-bind="myCtrl.something.something.username">
<img ng-src="http://www.gravatar.com/avatar/{{myCtrl.something.something.md5Email}}"/>
</a>
So how can I make this work? It seems using ng-bind in the <a></a> tag overrides any text that is inserted between the opening and closing tags.
I think you can do this without ng-bind
<a ui-sref="mystate({'stateParam1': 99, 'stateParam1': 98})">
{{ myCtrl.something.something.username }}
<img ng-src="http://www.gravatar.com/avatar/{{myCtrl.something.something.md5Email}}"/>
</a>
I am new to ui-router.
I am trying to navigate to models state. When I take the first apporach with button it works fine but it fails when I do the same with img tag.
//it works:
<a ui-sref="models">
<button class="btn btn-primary">goto models state</button>
</a>
//below code does not work:
<a ui-serf="models">
<img src="/content/images/_genericDevice.png" />
</a>
Can anybody explain why is this so ?
Not sure if this is intentional, but you have a typo:
<a ui-serf="models">
ui-serf should be ui-sref
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);
}