I have an api end point which return an image in response. So, I directly bind the ng-src for an image tag with my end point that looks like this
<img data-ng-src="https://loventedtest.appspot.com/image/255fe126-bfa8-4b7b-ac14-b53751b88470" />
What I am wondering is to show upfront image until the image get load from the server or keep the upfront image if the image not found on the server. I am not sure, how can I make it possible, any suggestion please?
See this Plunkr for more details.
Maybe you can resolve your problem with css. In you html :
<img class="img-wrapped" ng-src="{{ imgSrc }}">
in your css :
.img-wrapped {
width: 200px;
height: 200px;
background-image: url(http://www.placehold.it/200x200);
}
For compatibility purposes (tested on Firefox too), you may wrap your img.
Markup :
<div class="img-wrapper">
<img ng-src="{{ imgSrc }}">
</div>
css :
.img-wrapper {
width: 200px;
height: 200px;
background-image: url(http://www.placehold.it/200x200);
}
See the updated Plunkr
ng-src allows you to use data binding. You can have a string called $scope.imageUrl in your controller, and use
img data-ng-src="{{imageUrl}}"
in your html file. You can then change that variable's value in your controller and it will change that image automatically.
Related
I have added span tag in between the img tag so its giving an error Please Explain Why it is giving an error. What the exactly problem is...
<img src="any demo images here" alt="Nadeem">
<span>adeem</span>
</img>
The reason is because the img tag can not have any child elements.
To get the result you are looking for you may want to wrap both the img and span in a wrapper div like this.
<div style={{position: "relative"}} />
<img src="any demo images here" alt="Nadeem">
<span style={{position:"absolute", bottom: "0px", margin: "0px auth"}}>adeem</span>
</div>
(I am not sure if this is what you are looking for but assuming so from your question)
I have an ionic project where I want to add a dynamic amount of buttons to the page.
On the page there is just an image. And I need to inject these buttons on top of the image.
So I get data from the web where the buttons have to be. (position)
How can I inject HTML Code from a controller like:
<button class="hotpoint" style="position: absolute; top: 10pt; left: 10pt"></button>
to the page.
I need something like:
for(var obj in objects)
{
$scope.addHTML("<button style="top: obj.y; left: obj.x;">...</button>");
}
How can I achieve this?
Thanks
So I resolved the problem by myself.
The trick was "ng-bind-html"
In index.html I've added a div with:
<div ng-bind-html="hotpoints"></div>
And then I can inject HTML Code in the controller like this:
$scope.hotpoints = $sce.trustAsHtml('<a id="but" class="hotpoint animated infinite" style="top: 100pt; left: 100pt;"></a>');
In below attached image, I'm trying to pick the enabled tag. But i couldn't.
Is there any way to pick all the attribute values of only enabled tag.enter image description here
<div class="site-status" data-connection="true" data-configuration="true">
<img id="site-status-error" aria-label="Not Connected" aria-describedby="site-status-error" role="alert" alt="Connected" src="img/icn_error.svg" style="display: none; background-color: transparent;">
<img id="site-status-ok" hidden="" aria-label="Connected" aria-describedby="site-status-ok" alt="Not Connected" src="img/icn_check.svg" style="display: inline;">
</div>
First img tag is disabled. Second img tag is enabled.
Try below xpath:-
//div[#class='site-status']/img[not(#style='display: none;')]
Hope it will help you :)
Is it not working if you use id for enabled tag as it is unique{//img[#id='site-status-ok']} ideally it should work??
Can you please provide the code which you are using to click on this image.
Try this xpath for
//*[#class='site-status']/img[2]
I have this in my dom
<div id=“my-lightbox-container" style="height: 0px;”>
<div id=“my-lightbox" role="dialog" style="width: 660px; height: 342px;”>
<button id=“my-close" aria-label="Close Dialog"></button>
<iframe id=“my-iframe" name=“my-iframe" title="" src="https://mysite.com/mypage.php?page=sign-in&prop=sign-in" data-view-mode="" scrolling="no" frameborder="0" allowtransparency="true" style="display: block; width: 660px; height: 342px;"></iframe>
<div class="my-clear"></div>
</div>
</div>
I need to be able to parse the value of src to do some business logic. I need to get the value of my attribute. I am pretty new to angular. I have done some reading and seems like that I should be using directives. However I wasn't able to make sense of the solutions. Below is my controller which is barebones
module.exports = function($scope, $routeParams, $location)
{
}
would appreciate any help here. Coming from jQuery background.
Use the ng-src directive instead of src and bind it to a variable in your scope :
<iframe id=“my-iframe" name=“my-iframe" title="" ng-src="context.url" data-view-mode="" scrolling="no" frameborder="0" allowtransparency="true" style="display: block; width: 660px; height: 342px;"></iframe>
And in your controller :
$scope.context = {'url':'https://mysite.com/mypage.php?page=sign-in&prop=sign-in'};
That way, you have two-way binding between your controller variable and your iframe source. If one changes, the other will reflect this change.
You might also want to look into the $sce service : How to set an iframe src attribute from a variable in AngularJS
Angular doc: https://docs.angularjs.org/api/ng/service/$sce
Here is the link :
www.guidegather.com
(sorry, tried posting image but cannot)
If you look at the footer section, it appears correctly in all major browser (including IE9) but in IE7, the width of the div#mainfooter follows the max-width of .center class instead of extending horizontally to fill the space.
Here is the CSS :
.center{
margin:0 auto;
padding:0 50px;
max-width:960px;
}
#mainfooter{
background-color:#000;
color:#CCC;
list-style:none;
}
Here is how the HTML roughly looks like :
<body>
<div class="center">
Something here
</div>
<div id="mainfooter">
<div class="center">
Something here
</div>
</div>
</body>
As you can see, the div#mainfooter is independent of the previous div, but the width is restricted to the max-width of the previous div (and child div). Any solution to this?
Any help is appreciated. Thanks!
Since #mainfooter's rules will take priority over any inherited rules, you could specify a width for #mainfooter (width: 100%, or barring that, max-width: 100%). That should solve the problem.
So the solution is to add display:block to #mainfooter. Hope this helps anyone facing this issue in the future and great thanks for those who tried helping me