I use this to retrieve clickable links in a webpage:
javascript:(function(){as=document.getElementsByTagName(%22a%22);str=%22<ul>%22;for(i=0;i<as%20.length;i++){str+=%22<br><a%20href=%22+as[i].href+%22>%22+as[i].href+%22</a>\n%22}str+=%22</as></ul>%22;with(window.open()){document.write(str);document.close();}})()
But how do i retrieve unclickable image links in a web page? i don't have any knowledge in javascript :D
If you are not using any js frameworks like jQuery/ExtJS etc, then you resort to this solutin:
<input type="button" value="Calculate" onclick="checkImages()"/>
Google
<img src="1" /> sss
<span><img src="2" /> sss</span>
<img src="3" />
<img src="4" />
<div id="outputDiv">
</div>
<script type="text/javascript">
function checkImages()
{
var str="<ul>";
var imgs = document.getElementsByTagName("IMG");
var len = imgs.length;
for(var i=0; i<len; i++)
{
var img = imgs[i];
//console.log("Checking" + img);
if(!hasParentAnchor(img))
{
str+="<li><img src="+img.src+"/></li>";
}
}
document.getElementById("outputDiv").innerHTML = str;
}
function hasParentAnchor(el)
{
if(!el.parentNode || !el.parentNode.tagName) return false;
else if(el.parentNode.tagName.toUpperCase() == "A") return true;
else return hasParentAnchor(el.parentNode);
}
</script>
Related
In a given id of a <div> I need to get a list of all the elements which are in that div.
My goal is to get a list of all elements in the given div and loop over them hide everyone except the first one.
Example:
<div id="RandomId">
<img src="src_1" />
<img src="src_2" />
<img src="src_3" />
.
.
.
<img src="src_n" />
</div>
<script>
function handleImages(divID) {
const div = document.getElementById(DivID);
if(div) {
const Elements = // Here, I need the list;
for (let i = 0; i < Elements.length; i++) {
if (i == 0) {
continue;
}
else {
Elements[i].style = "display:block";
}
}
}
return null;
}
</script>
You could also use querySelectorAll:
const Elements = document.querySelectorAll('#RandomId > img')
You need to use Element.children to get the list of elements inside the div.
That's very easy to do when you're using native JavaScript. Use the following:
<script>
function handleImages(divID){
const div = document.getElementById(DivID);
if(div){
const Elements = div.children //Here, I need the list;
for (let i = 0; i < Elements.length; i++){
if (i == 0) { continue; }
else {Elements[i].style = "display:block";}
}
}
return null;
}
</script>
More details about Element.children.
You can use querySelectorAll to get rid of first child as:
function handleImages(id) {
const allChildren = [...document.querySelectorAll(`#${id} > img`)];
allChildren.forEach(
(imgChild, index) =>
(imgChild.style.display = index === 0 ? "block" : "none")
);
}
handleImages("RandomId");
<div id="RandomId">
<img src="https://picsum.photos/200/300" />
<img src="https://picsum.photos/200/300" />
<img src="https://picsum.photos/200/300" />
<img src="https://picsum.photos/200/300" />
</div>
I want to insert image src with while loop in javascript
$(document).ready(function(){
var i=1;
while(i <= 40)
{
document.getElementByClassName("fruit").src += "path" + i + ".png";
i+=1;
}
});
<img class="img-responsive" src="path/1.png" />
<img class="img-responsive" src="path/2.png" />
<img class="img-responsive" src="path/3.png" />
...
<img class="img-responsive" src="path/40.png" />
How to create this series with javascript
It's better to look at the collection of elements with the class name first, rather than evaluate the collection with each pass through the while loop.
$(document).ready(function(){
var i = 0;
var elementCollection = document.getElementsByClassName('img-responsive');
var max_i = elementCollection.length;
while(i < 40 && i < max_i) {
elementCollection[i].src = "path/" + i + ".png";
i+=1;
}
});
HTML:
<div id='container'>
<img id= 'img' src='images/pic1.jpg' name='slideshow'/>
<button onclick='slide(-1)'>previous</button>
<button onclick='slide(1)'>next</button>
</div>
Try to make a JavaScript slideshow but the code doesn't work. What is wrong with my code?
JavaScript:
var i = 0;
var path = new Array();
path[0] = "images/pic1.jpg";
path[1] = "images/pic2.jpg";
path[2] = "images/pic3.jpg";
function slide(v) {
var x = x + v;
if(i < path.length){
i = i - x;
}
if(i > path.length){
x = path.length;
}
document.slideshow.src = path[i];
Try this:
<html>
<head>
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="1.jpg"
var image2=new Image()
image2.src="2.jpg"
var image3=new Image()
image3.src="3.jpg"
//-->
</script>
</head>
<body>
<img src="1.jpg" name="slide" width="500" height="250" />
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>
</body>
you need to check the value if i if you can still increment or decrement
var path = new Array();
path[0] = "https://www.mavericklabel.com/images/products/preprinted-stock/stock-label/color-coded/rectangle/rectangle-green-3x5-inch-200x200.png";
path[1] = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLNrcoSk41WfHji3m9JPbgWkdgPPstVtWfDLLUtcnEGloFwDNT";
path[2] = "http://www.dots-by-inlingua.com/img/intro/dot_7.png";
var x;
var i = 0;
function slide(v) {
if (v === -1) {
if (i !== 0) i = i + v;
}
if (v === 1) {
if (i < path.length -1) i = i + v;
}
document.slideshow.src = path[i];
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='container'>
<img id= 'img' src='https://www.mavericklabel.com/images/products/preprinted-stock/stock-label/color-coded/rectangle/rectangle-green-3x5-inch-200x200.png' name='slideshow'/>
<button onclick='slide(-1)'>previous</button>
<button onclick='slide(1)'>next</button>
</div>
I want to insert an ending slash before the closing bracket of every img tag found in a string.
This (modified from here) is correctly returning the position of each instance of img:
var re = /img\s/g,
match;
while (match = re.exec(str)) {
console.log(match.index); //
}
Knowing this, how can I find the next > after each imgand insert a / before it?
How about this, it's simple but seems like it would work for your case:
str.replace(/(<img[^>]*)>/g, "$1 />");
if you wanted it to be a little more smart, you could do something like this:
str.replace(/(<img[^>]*?) *\/?>/g, "$1 />");
this would account for things that already have a space and/or a slash at the end... and create the same output for all of the following:
IN:
<img src='foo.png'>
<img src='foo.png' >
<img src='foo.png'/>
<img src='foo.png' />
OUT for all the above:
<img src='foo.png' />
if you would rather have <img src='foo.png'/>, just remove the space after $1 in the replace.
try something like this:
var imgs = "<img blblblb > <img adadasd>"
var pattern = /(<img[^>]*)>/g;
imgs = imgs.replace(pattern, "$1/>");
console.log(imgs);
//<img blblblb /> <img adadasd/>
I have a non-regex solution, if you’re interested:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1"/>
<script type="text/javascript">
function close_img_tags(){
var str = document.getElementById("txt").value, len = str.length, i, j;
for(i = 0; i < len-4; i++){
if(str[i]+str[i+1]+str[i+2]+str[i+3] == "<img"){
for(j = i+4; j < len; j++){
if(str[j] == ">"){
if(str[j-1] != "/"){
str = str.substr(0, j)+"/"+str.substr(j);
i = j+2;
}
else{
i = j+1;
}
break;
}
}
}
}
document.getElementById("txt").value = str;
}
</script>
<style type="text/css">
textarea{
width:400px;
height:300px;
}
</style>
</head>
<body>
<textarea id="txt"></textarea><br/>
<button type="button" onclick="close_img_tags();">Edit HTML</button>
</body>
</html>
Demo: http://jsfiddle.net/eZu9U/
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to sort LI's based on their ID
I have a div that is dynamically populated with various images and looks something like:
<div id="images">
<img id="img1" src="..." />
<img id="img3" src="..." />
<img id="img2" src="..." />
<img id="img6" src="..." />
<img id="img5" src="..." />
<img id="img4" src="..." />
</div>
Using javascript and jQuery, i need to sort the images into order of ID but i'm struggling. Heres what I've got so far:
var toSort = $('#images').children;
toSort = Array.prototype.slice.call(toSort,0);
toSort.sort(function(a,b){
var aord = +a.id.substr(6);
var bord = +b.id.substr(6);
return aord - bord;
});
var parent = $('#images');
parent.innerHTML="";
for(var i=0, l = toSort.length; i<l; ++i){
parent.appendChild(toSort[i]);
}
How close am I? What am I doing wrong? Thanks guys.
var imgs = $('#images img');
imgs.sort(function(a, b) {
return a.id > b.id;
});
$('#images').html(imgs);
DEMO
OR
var imgs = $('#images img');
imgs.sort(function(a, b) {
return +a.id.replace('img','') - +b.id.replace('img','');
});
$('#images').html(imgs);
DEMO
Edition with your code:
var parent = $('#images'),
children = parent.children(),
toSort = Array.prototype.slice.call(children, 0);
parent[0].innerHTML = ""; //or parent.empty();
toSort.sort(function(a, b) {
var aord = +a.id.substr(3);
var bord = +b.id.substr(3);
return aord - bord;
});
for (var i = 0; i < toSort.length; i++) {
parent.append(toSort[i]);
}
DEMO
var elem = $('#images'),
imgs = elem.find('img');
imgs.sort(function(a, b) {
return a.id.toUpperCase().localeCompare(b.id.toUpperCase());
});
$.each(imgs, function(idx, itm) { elem.append(itm); });
FIDDLE
I think #thecodeparadox version is better but here is your code corrected a little bit. I changed img to span to make it more visible.
http://jsfiddle.net/whnyn/