Pretty basic question.
How simple would it be to give an image an ID tag (obvs not that part..) and count how many of the images are on the page with that tag?
As ID's should be unique on a page, you should be using a class instead:
<img src="/img/src.jpg" class="my_image" />
You could then use javascript to count the number of elements
var imgCount = document.querySelectorAll('.my_image').length;
the variable imgCount now contains the number of img tags with the class my_image
DEMO
var imgCount = document.querySelectorAll('.my_image').length;
alert(imgCount);
<img src="/img/src.jpg" class="my_image" />
<img src="/img/src.jpg" class="my_image" />
If you absolutely must use the same ID on multiple elements (maybe these are generated by some third party scripts or CRM?) the above does work (in Chrome at least). Demo below.
var imgCount = document.querySelectorAll('#my_image').length;
alert(imgCount);
<img src="/img/src.jpg" id="my_image" />
<img src="/img/src.jpg" id="my_image" />
If you're using query better to used .length.
<div id="some_id">
<img src="some_image.png">
<img src="some_image.png">
<div class="another_div"></div>
<div class="another_div"></div>
</div>
<script>
var x = $("#some_id img").length
alert(x);
</script>
Check this link.
Related
I have a url with the following html part
<div class="shop cf">
<a class="shop-logo js-shop-logo" href="/m/3870/GMobile">
<noscript>
<img alt="GMobile" class="js-lazy" data-src="//a.scdn.gr/ds/shops/logos/3870/mid_20160920155600_71ff515d.jpeg" src="//a.scdn.gr/ds/shops/logos/3870/mid_20160920155600_71ff515d.jpeg" />
</noscript>
<img alt="GMobile" class="js-lazy" data-src="//a.scdn.gr/ds/shops/logos/3870/mid_20160920155600_71ff515d.jpeg" src="//c.scdn.gr/assets/transparent-325472601571f31e1bf00674c368d335.gif" />
</a>
</div>
I want to get the first img alt inside the div class shop cf and I do
Set seller = Doc.querySelectorAll("img")
wks.Cells(i, "D").Value = seller.getAttribute("alt").Content(0)
I get nothing what I forget to include?!?
Can I get it from
<noscript>
tag?
I tried the following as well
Set seller = Doc.getElementsByClassName("js-lazy")
wks.Cells(i, "D").Value = seller.getAttribute("alt")
Use element with attribute selector
CSS:
img[alt]
VBA:
ie.document.querySelector("img[alt]")
You may need to add
ie.document.querySelector("img[alt]").getAttribute("alt")
To include the class use
ie.document.querySelector("img.js-lazy[alt]")
If more than one element then use querySelectorAll and index into returned nodeList e.g.
Set list = ie.document.querySelectorAll("img.js-lazy[alt]")
list.item(0).getAttribute('alt')
list.item(1).getAttribute('alt')
have you try this way?
let lazy1 = document.querySelectorAll(".js-lazy")[0]
let lazyalt = lazy1.getAttribute("alt");
let shop = document.querySelector('.shop');
shop.classList.add(lazyalt);
console.log(lazyalt)
I would like to show the picture of a user if there is a user in my object list (profileList), and default/error as defaultProfile.png when no user is found ({{item.userProfile}} is null)
I have searched for similar approaches such as
angularjs: ng-src equivalent for background-image:url(…)
and
empty ng-src doesn't update image
My approach to this problem is:
<div ng-repeat="item in profileList">
<div>
<img src='assets/img/defaultProfile.png' data-ng-src="http://example.com/{{item.userProfile}}.jpg" onerror="this.src='assets/img/defaultProfile.png'" />
</div>
<div>
I am able to show error photo however I am still getting error 500,
GET http://example.com/.jpg 500 (INTERNAL SERVER ERROR)
How to avoid getting http://example.com//.jpg?
Thanks a lot
Your current issue is ng-src is still compiled and evaluated to an invalid url when userProfile is undefined.
A simple solution is to use ternary and check for userProfile before deciding with url should be rendered:
<img ng-src="{{ item.userProfile ? 'http://example.com/' + item.userProfile + '.jpg'}} : 'assets/img/defaultProfile.png'" />
It will guarantee that you will always fetch the default image unless item.userProfile is available.
One approach is to use ng-if and ng-hide:
<div ng-repeat="item in profileList">
<div>
<img ng-if="item.userProfile"
data-ng-src="http://example.com/{{item.userProfile}}.jpg" />
<img ng-hide="item.userProfile"
src="assets/img/defaultProfile.png" />
</div>
<div>
When item.userProfile exists, show the ng-src and hide the default otherwise vice versa.
It works.
ng-show
will run no matter {{item.userProfile}} is null or not.
By changing it to
ng-if
Below code is working:
<div ng-repeat="item in profileList">
<div>
<img ng-if="item.userProfile"
data-ng-src="http://example.com/{{item.userProfile}}.jpg" />
<img ng-if="item.userProfile == null"
src="assets/img/defaultProfile.png" />
</div>
note that my profileList is:
$scope.profileList = {userProfile = null}
Thanks a lot
I have a DOM structure like this:
<article class="detail">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
</article>
If I select using
immagini = $$('article.detail').getElements('img')
console.log(immagini[0]) // returns Object { 0: <img>, 1: <img>, 2: <img> }
If I select using
immagini = $$('article.detail img')
console.log(immagini[0]) // returns <img src="img1.jpg" />
I can't understand the difference since, as the Docs say:
getElements collects all descendant elements whose tag name matches the tag provided. Returns: (array) An Elements array of all matched Elements.
Thanks for any explanation
When you use $$ you get a array-like collection of article.detail elements. So for each element found getElements will get all img.
This means a mapping of the inicial articles array-like collection you got into arrays of what getElementsfound.
Check this example:
<article class="detail" id="foo">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
</article>
<article class="detail" id="bar">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
</article>
and the JS/MooTools:
var articles = $$('article.detail')
var img = articles.getElements('img')
console.log(articles, img);
This will print:
[article#foo.detail, article#bar.detail], [Elements.Elements[3], Elements.Elements[3]]
jsFiddle: http://jsfiddle.net/akcvx8gL/
If you want just a array with all img elements you could use the whole selector 'article.detail img' inside $$ like you suggested in your other example or use .flatten() in the end (jsFiddle).
There is a related blog post about this.
"All the methods that MooTools adds to the Element native are added to the Elements class as well. You can do some pretty nifty chaining because of this. This is because any method you call on Elements, will loop through the array and try to call the method on each individual element [...] will return an array of the values from each element.".
Is there any function or command that I can use to take the "pop-up" picture from this function:
<a class="thumbnail" href="#thumb">
<img src="productURL" width="100px" height="142px" border="0" />
<span>
<img src="productURL" />
<br />
<font face="arial">productname</font>
</span>
</a>
Be displayed in a table located to the right of the page?
Notes:
I'm using Dreamweaver CS6
Maybe there's a way to put, inside a class, that the pop up has to be shown inside a table, defined earlier?
EDITED
you can do that by this
in your html table cell tag add an id
HTML
<img src = "xyz.png" onmouseover="showimage();" onmouseout="hideimage();" />
and for table
<table><tr><td id="showimage"></td></tr></table>
Javascript
function showimage()
{
document.getElemtnById('showimage').append('<img src="xyz">');
}
function hideimage()
{
var elem = document.getElemtnById('showimage');
elem.removeChild(elem.childNodes[0]);
}
Regards.
Hey most of my issue has been solved but i have little problem
This is Html
<tr>
<td class="ttl">
</td>
<td class="nfo">- MP4/H.263/H.264/WMV player<br />
- MP3/WAV/еAAC+/WMA player<br />
- Photo editor<br />
- Organizer<br />
- Voice command/dial<br />
- Flash Lite 3.0<br />
- T9</td>
</tr>
Currently i am using this code provided by Stackoverflow User
var text1 = htmlDoc.DocumentNode.SelectNodes("//td[#class='nfo']")[1].InnerHtml;
textBox1.Text = text1;
know problem its is getting all text
with <br>
how i can remove <br> from it and put , between them
its should look like this
MP4/H.263/H.264/WMV player,- MP3/WAV/еAAC+/WMA player,- Photo editor,- Organizer,- Voice command/dial,- Flash Lite 3.0,- T9
Also how to get this
<div id="ttl" class="brand">
<h1>Nokia C5-03</h1>
<p><img src="http://img.gsmarena.com/vv/logos/lg_nokia.gif" alt="Nokia" /></p>
</div>
i am trying this
var text41 =
htmlDoc.DocumentNode.SelectNodes("//div
id[#class='brand']")[0].InnerText;
i get invalid token error
i only want C5-03 without nokia text
You can simply use a string.Replace("<br />", ""); to remove the <br /> tags.
Better yet, use the InnerText instead of InnerHtml, so no HTML comes through:
var text1 = htmlDoc.DocumentNode.SelectNodes("//td[#class='nfo']")[1].InnerText;
If you really want to replace all <br /> tags with a , you will indeed need to use Replace:
text1.Replace("<br />", ",");
To select the value in the <H1> tag, you could use:
var text42 = htmlDoc.DocumentNode.SelectNodes("//div[id='ttl']"/h1)[0].InnerText;