I have the following code:
<li ng-repeat="item in somearray">
<img src="{{ item.url }}" />
</li>
For every item the browser makes a GET request that is an encoded expression, for example:
"http://someurl.com/somepath/blalba/1/%7B%7Bitem.url%7D%7D". Although it does load these images properly, it makes unnecessary requests. Is there any way to avoid this?
Use:
<li ng-repeat="item in somearray">
<img ng-src="{{item.url}}" />
</li>
Related
I am trying to change an image from an old to new using jquery or javascript only. It is the second picture out of three total that has a common parent element and is not separated by any specific parameters.
I believe I need to use a DOM navigation of some sort to get to the exact picture in the common class but haven't had any luck.
As I mentioned the 'make' class is shared between all three images as is 'make-image'. I need to simply swap the image for another updated version, facebook1.jpg.
<li class="make ">
<a href="#">
<img class="make-image" src="facebook.jpg">
<div class="make-info">
<img class="make-logo" src="facebook.jpg">
<div class="clearall"></div>
</div>
</a>
</li>
It should simply swap the existing image for another.
You can query for the image tags inside the list-item and iterate with each over the returned array. Inside that loop you can check if the src of that image-element is what you are looking for and replace it.
$('li.make img').each(function(index){
if ($(this).attr('src') == 'facebook.jpg') {
$(this).attr('src', 'facebook1.jpg');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="make">
<a href="#">
<img class="make-image" src="facebook.jpg">
<div class="make-info">
<img class="make-logo" src="facebook.jpg">
<div class="clearall"></div>
</div>
</a>
</li>
I'm doing some work and still fairly new to CSS,
I have some code here,
<div id='ninja-slider'>
<ul>
<li>
<div data-image="images/md/1.jpg" </div> </li>
<li>
<div data-image="images/md/2.jpg"> </div>
</li>
<li>
<div data-image="images/md/3.jpg"></div>
</li>
<li>
<div data-image="images/md/4.jpg"></div>
</li>
</ul>
</div>
I want to know how can i add a hyperlink to each of these images? I've tried however it hasn't worked for me unfortunately.
Please help, I even tried Javascript from a google search. Something to do with onclick
Cheers
wrap the div in <a> tag
<ul>
<li>
<div data-image="images/md/1.jpg"></div>
</li>
</ul>
Use <a></a> tag.
you can do this
<img src="your_image.jpg" width="" height="">
href will contain the page or wherever you want user to redirect.
This approach is better and more widely used than the one's you showed
I want to use a different template within a repeated block based on the type of data that I am repeating. In my example, the array could contain data or it could contain tweet objects from Twitter. Currently my code looks like this...
<ul data-ng-hide="sourceIsTwitter()" collapse="!showStrings">
<li data-ng-repeat="matchedString in matches">{{matchedString}}</li>
</ul>
<ul data-ng-show="sourceIsTwitter()" collapse="!showStrings">
<li data-ng-repeat="tweet in matches">
{{ tweet.text }}
<i>{{ tweet.user.name }}</i>
{{ formatDateFromTwitter(tweet.created_at) }}
</li>
</ul>
... and throws lots of errors when the content source isn't Twitter. How should I restructure this to use the right template based on the type of the object? Assume that matches is an array of objects and each object has a property type that I can check.
You would probably be best served by the ngSwitch directive:
<li data-ng-repeat="obj in matches" data-ng-switch="obj.type">
<span data-ng-switch-when="twitter"><!-- Do Twitter Rendering --></span>
<span data-ng-switch-when="facebook"><!-- Do Facebook Rendering --></span>
<span data-ng-switch-when="foo"><!-- Do Foo Rendering --></span>
</li>
I had this situation with lots of possible templates - which made ng-switch a bit clunky looking. I put each template in it's own html file and used ng-include with a scope function to retrieve the correct template name:
<ul>
<li data-ng-repeat="match in matches">
<div ng-include="getTemplate(match)"></div>
</li>
</ul>
I've got the following AngularJS structure
<li ng-repeat="content in contents">
<img src="{{content.image_url}}" />
<div class="title">{{content_title}}</div>
</li>
But if "content.image_url" is NULL or it doesn't exist, I don't want to display the IMG tag. So something like
{{#if content.image_url}}
<img.....
{{/if}}
Which is the handlebarjs way of doing a conditional check. How could I achieve this in AngularJS? Do I need a directive to do this?
Use ng-show:
<li ng-repeat="content in contents">
<img ng-show="content.image_url != ''" src="{{content.image_url}}" />
<div class="title">{{content_title}}</div>
</li>
Also, I would use ng-src instead of src to avoid errors in the console while the image is loading:
<li ng-repeat="content in contents">
<img ng-show="content.image_url != ''" ng-src="{{content.image_url}}" />
<div class="title">{{content_title}}</div>
</li>
I've just run the homepage of a site I'm working on through the w3c HTML validator and it's come back with 3 errors and 2 warnings. I've taken a look at them but can't see why they would be causing a problem. I've pasted them in below (I've removed URL's/strings etc as the site isn't quite ready to be made public yet). This is being validated against XHTML Transitional by the way.
The UL comes back with the following error: end tag for "ul" which is not finished <ul id='tabs'></ul>
<ul id='tabs'>
<li>
<a href="/en/folder/folder/search?categories[]=cat1" class="tab1" title="tab_title">
<img alt="img_alt" src="img_src" />
<span>
tab1_text
</span>
</a>
</li>
<li>
<a href="/en/folder/folder/search?categories[]=cat2" class="tab2" title="tab_title">
<img alt="img_alt" src="img_src" />
<span>
tab2_text
</span>
</a>
</li>
<li>
<a href="/en/folder/folder/search?categories[]=cat3" class="tab3" title="tab_title">
<img alt="img_alt" src="img_src" />
<span>
tab3_text
</span>
</a>
</li>
<li>
<a href="/en/folder/folder/search?categories[]=cat4" class="tab4" title="tab_title">
<img alt="img_alt" src="img_src" />
<span>
tab4_text
</span>
</a>
</li>
<li>
<a href="/en/folder/folder/search?categories[]=cat5" class="tab5" title="tab_title">
<img alt="img_alt" src="img_src" />
<span>
tab5_text
</span>
</a>
</li>
<li>
<a href="/en/folder/folder/search?categories[]=cat6" class="tab6" title="tab_title">
<img alt="img_alt" src="img_src" />
<span>
tab6_text
</span>
</a>
</li>
<li>
<a href="/en/folder/folder/search?categories[]=cat7" class="tab7" title="tab_title">
<img alt="img_alt" src="img_src" />
<span>
tab7_text
</span>
</a>
</li>
<li>
<a href="/en/folder/folder/search?categories[]=cat8" class="tab8" title="tab_title">
<img alt="img_alt" src="img_src" />
<span>
tab8_text
</span>
</a>
</li>
</ul>
For the inline javascript, I'm getting 2 errors and 2 warnings all for the same thing - I have a simple if statement with && and the validator appears to be seeing this as HTML rather than javascript: character "&" is the first character of a delimiter but occurred as data and xmlParseEntityRef: no name
<script type='text/javascript'>
if (weather_data != null && weather_data['data'] != null){
display_weather();
}
</script>
The javascript is placed just before the body close tag at the end of the document.
If you need to see the full source then let me know and I can send it over.
XML doesn't support intrinsic CDATA so ampersands have special meaning in XHTML that they don't have in HTML, but you are probably serving your XHTML as text/html so see the compatibility guidelines for Embedded Style Sheets and Scripts
As for:
end tag for "ul" which is not finished
given
<ul id='tabs'></ul>
A list has to at least one list item in it. I'm guessing that you are populating it with JavaScript (hence your second example of a ul), but the validator doesn't care about that.
Not sure about the UL problem, but you might want to put CDATA around your script.
see http://www.w3schools.com/xml/xml_cdata.asp
To validate the inline Javascript, you need to wrap the contents in CDATA tags, and add JS comments, to make it validate:
<script type='text/javascript'>
//<![CDATA[
if (weather_data != null && weather_data['data'] != null){
display_weather();
}
//]]>
</script>
I checked the HTML list fragment you posted in the W3C validator and it validated successfully as HTML 4.01 Strict and XHTML 1.0 Strict. So the problem is somewhere else. Can you post a link to your entire page?