I'm trying to pull a link from the following html. There's lots of bits of HTML like this one in an array.
tweets[0] is:
var tweets = Array.from(document.querySelectorAll("[class ^= AdaptiveMedia-ph]"));
console.log(tweets);
<div class="AdaptiveMedia-photoContainer js-adaptive-photo " data-image-url="https://pbs.twimg.com/media/DfFmgY6WAAAh0sG.jpg" data-element-context="platform_photo_card" style="background-color:rgba(51,64,18,1.0);" data-dominant-color="[51,64,18]">
<img data-aria-label-part="" src="https://pbs.twimg.com/media/DfFmgY6WAAAh0sG.jpg" alt="A tree" style="width: 100%; top: -0px;">
</div>
How do I go about actually pulling the link in "src" and the alt text from "alt" from the HTML text? Thanks in advance!
Like this:
var tweets = document.querySelectorAll("[class ^= AdaptiveMedia-ph]");
for (var i=0;i<tweets.length;i++) {
console.log("data-image-url",tweets[i].getAttribute("data-image-url"));
var img = tweets[i].querySelector("img");
console.log("image-url",img.src,"alt",img.alt);
}
<div class="AdaptiveMedia-photoContainer js-adaptive-photo " data-image-url="https://pbs.twimg.com/media/DfFmgY6WAAAh0sG.jpg" data-element-context="platform_photo_card" style="background-color:rgba(51,64,18,1.0);" data-dominant-color="[51,64,18]">
<img data-aria-label-part="" src="https://pbs.twimg.com/media/DfFmgY6WAAAh0sG.jpg" alt="A tree" style="width: 100%; top: -0px;">
</div>
Would be easier if you would select directly the img elements and then just .map() the results:
// Select img inside the cards
var tweets = Array.from(document.querySelectorAll("[class ^= AdaptiveMedia-ph] img"));
var imgData = tweets.map(e => ({src: e.src, alt: e.alt}));
console.log(imgData);
<div class="AdaptiveMedia-photoContainer js-adaptive-photo " data-image-url="https://pbs.twimg.com/media/DfFmgY6WAAAh0sG.jpg" data-element-context="platform_photo_card" style="background-color:rgba(51,64,18,1.0);" data-dominant-color="[51,64,18]">
<img data-aria-label-part="" src="https://pbs.twimg.com/media/DfFmgY6WAAAh0sG.jpg" alt="A tree" style="width: 100%; top: -0px;">
</div>
Related
I've correctly did this with displaying text in a p tag but i can't figure out why my image won't show up in the same manner and I'm not sure if it has to do with how it was set up in html.
let imgArray = ["beastiary.jpg"];
window.addEventListener("load", showImages);
function showImages() {
let i = 0;
let images = document.getElementsByTagName("img");
while (i < imgArray.length) {
images[i].innerHTML = imgArray[i]
i++
}
}
<div class="w3-col m3 l3 " style="padding-right: 5px">
<div class="w3-card-4 w3-theme-l1" id="book">
<img src="" alt="book">
<div class="w3-container w3-center w3-theme-d3">
<p></p>
</div>
</div>
</div>
I have tried to do away with using img and instead put it in a div using an id but it still won't show up. There will be more images I'm just making sure this one works first before I start adding the rest.
For showing image you need to set src to proper url
let imgArray = ["https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png"];
window.addEventListener("load", showImages);
function showImages() {
let i = 0;
let images = document.getElementsByTagName("img");
while (i < imgArray.length) {
images[i].src = imgArray[i]
i++
}
}
.img {
width: 200px;
height: 200px;
}
<img class='img'/>
I'm building an electron app and I created a div menu with spans in it that contain their own Iframe HTML. I want to be able to click on a specific span and for it to display its Iframe. Right now when I have more than one Iframe in the HTML file, it displays them over each other. Here is my HTML:
<div class="menu">
<img src="./images/group-30.png" class="logo"></img>
<span class="menu_spans" id="tasks">
<img src="images/group-47.png" class="tasks-img"></img>
<!--<iframe src="tasks.html"></iframe>-->
</span>
<span class="menu_spans" id="add-tasks">
<img src="images/group-55.png" class="add-tasks-img">
<iframe src="addTasks.html" scrolling="no" allowtransparency="yes" style="width:1020px; height: 574px; position: relative; top:-350%; left: 57px; border:none;"></iframe>
</span>
<span class="menu_spans" id="billing">
<img src="images/group-60.png" class="billing-img">
<!--<iframe src="billing.html" scrolling="no" allowtransparency="yes" style="width: 1020px; height: 574px; position: relative; top:-269px; left: 57px; border: none;"></iframe>-->
</span>
<span class="menu_spans" id="proxies">
<img src="images/group-61.png" class="proxies-img">
<!--<iframe src=""></iframe>-->
</span>
etc...
I've tried something like this but it doesn't work:
let menu_spans = document.querySelectorAll(".menu_spans");
for (var i = 0; i < menu_spans.length; i++) {
menu_spans[i].addEventListener('click', () => {
console.log(this.id);
});
}
I've coded this before in jQuery a while ago but im not sure how to do it in just regular js.
Any help is appreciated thank you!
You could use something like this:
let menu_spans = document.querySelectorAll(".menu_spans");
for (var i = 0; i < menu_spans.length; i++) {
menu_spans[i].addEventListener('click', smth, false);
}
function smth() {
console.log(this.id);
}
Here is JavaScript code which properly reads id of clicked element, so you can use the id of element to set iframe thing in future.
let menu_spans = document.querySelectorAll(".menu_spans");
for (var i = 0; i < menu_spans.length; i++) {
menu_spans[i].addEventListener('click', (event) => {
if (event.currentTarget.nodeName === "SPAN") {
console.log(event.currentTarget.id);
return true;
}
});
}
Link to fiddle: fiddle
How do I change the script to also populate the src of the images contained in .seperate-group, matching the uploaded images in A with FOR A and B with FOR B?
var $ = uploadcare.jQuery;
var widgets = uploadcare.initialize(); // get all widget instances
widgets.forEach(function(widget) {
widget.onUploadComplete(function(fileInfo) {
var group = $(widget.inputElement).closest(".group"); // find a group the instance is related to
$(group).find('.feature-img').each(function(i, img) { // find image tags in the group
img.src = fileInfo.cdnUrl; // update previews
});
});
});
.image-input {
display: block;
position: relative;
height: 100px;
width: 200px;
}
.container {
display: flex;
}
.image-preview-wrapper {
height: 50px;
}
.feature-img {
height: 100%;
}
.seperate-group img {
height: 100px;
width: 100px;
}
<div class="container">
<div class="group">A
<div class="image-input">
<input type="hidden" role="uploadcare-uploader" data-clearable="" data-images-only="" data-public-key="1c86ca998ba22e75fbc6" value="">
</div>
<div class="image-preview-wrapper">
<img class="feature-img" src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder4.png"></img>
<img class="feature-img" src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder4.png"></img>
</div>
</div>
<div class="group">B
<div class="image-input">
<input type="hidden" role="uploadcare-uploader" data-clearable="" data-images-only="" data-public-key="1c86ca998ba22e75fbc6" value="">
</div>
<div class="image-preview-wrapper">
<img class="feature-img" src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder4.png"></img>
<img class="feature-img" src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder4.png"></img>
</div>
</div>
<div class="seperate-group">
<img class="feature-img" src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder4.png">FOR A</img>
<img class="feature-img" src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder4.png">FOR B</img>
</div>
</div>
<script>
UPLOADCARE_LOCALE = "en";
UPLOADCARE_TABS = "file url facebook dropbox instagram";
UPLOADCARE_PUBLIC_KEY = "7d504e167ecaef7b82d4";
</script>
<script charset="utf-8" src="//ucarecdn.com/libs/widget/3.2.2/uploadcare.full.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Kyle, try this code snippet
var $ = uploadcare.jQuery;
var widgets = uploadcare.initialize(); // get all widget instances
widgets.forEach(function (widget) {
widget.onUploadComplete(function (fileInfo) {
var group = $(widget.inputElement).parent().parent(); // find a group the instance is related to
$(group).find('.feature-img').each(function (i, img) { // find image tags in the group
img.src = fileInfo.cdnUrl; // update previews
});
});
});
I have three images and I am displaying them one by one, they have different height and that push and pull other content based on image height. When I set fixed height for image, the height will not be responsive anymore. How to set same height for these images where responsive can still work?
This is my Script:
var i = 0; var path = new Array();
path[0] = "/pic/Company.png";
path[1] = "/pic/S031.png";
path[2] = "/pic/AnnualReport2015_f.png";
function swapImage() {
document.slide.src = path[i];
if (i < path.length - 1) i++;
else i = 0;
setTimeout("swapImage()", 3000);
}
CSS but it does not solve my problem :
#left-img
{
max-height: 500px;
}
HTML:
<div class="col-md-8">
<img name="slide" src="home1.jpg" class="img-responsive" id="left-img"/>
</div>
Use their class instead of their id, and btw, id should be unique for every image
With max-height: 300px, only bigger gets resized down to 300px, using height: 300px will do the same but also up size smaller (and all will keep their aspect ratio).
.img-responsive
{
height: 300px;
}
<div class="col-md-8">
<img name="slide" src="http://placehold.it/150x200" class="img-responsive" id="left-img-1"/>
<img name="slide" src="http://placehold.it/150x300" class="img-responsive" id="left-img-2"/>
<img name="slide" src="http://placehold.it/150x400" class="img-responsive" id="left-img-3"/>
<img name="slide" src="http://placehold.it/150x500" class="img-responsive" id="left-img-4"/>
</div>
So I'm trying to put together a Javascript toggle for my photography portfolio site. My goal is to be able to click a button labeled Show Only Sunsets and hide every image without a "Sunsets" Class. The code I've come up with below ALMOST works, but there's a major flaw:
This code only preserves the visibility of images such as "1.jpg" below whose Class is exactly/only "Sunsets" (or "NSFW," or whatever). But often I'll need to give images more than one class, for example to differentiate verticals, or images that fall into multiple categories. So I need the code to preserve the visibility of any image such as "2.jpg" below which has "Sunsets" (or whatever) anywhere in its Class.
JS:
<script>
function filterOn(imageClass) {
var image = document.getElementsByTagName('figure');
for (i = 0; i < image.length; i++) {
if (image[i].className != imageClass) {
image[i].style.display = 'none';
}
}
document.getElementById(imageClass + '-off').innerHTML = 'Undo Filter';
document.getElementById(imageClass + '-off').setAttribute('onClick', "filterOff('" + imageClass + "')");
document.getElementById(imageClass + '-off').id = imageClass + '-on';
}
function filterOff(imageClass) {
var image = document.getElementsByTagName('figure');
for (i = 0; i < image.length; i++) {
if (image[i].className != imageClass) {
image[i].style.display = 'inline-block';
}
}
document.getElementById(imageClass + '-on').innerHTML = 'Show Only ' + imageClass;
document.getElementById(imageClass + '-on').setAttribute('onClick', "filterOn('" + imageClass + "')");
document.getElementById(imageClass + '-on').id = imageClass + '-off';
}
</script>
HTML:
<ul>
<li id="Sunsets-off" onClick="filterOn('Sunsets')">Show Only Sunsets</li>
<li id="NSFW-off" onClick="filterOn('NSFW')">Show Only NSFW</li>
</ul>
<img class="Sunsets" src="1.jpg">
<img class="vertical Sunsets" src="2.jpg">
<img class="NSFW vertical" src="3.jpg">
<img class="Architectural" src="4.jpg">
<img class="Sunsets Landscapes" src="5.jpg">
<img class="Abstract" src="6.jpg">
<img class="NSFW LondonAndrews" src="7.jpg">
That test:
if (image[i].className != imageClass) {
will indeed do a check against the whole class string.
There's the classList API for doing what you want, replacing your test with:
if (!image[i].classList.contains(imageClass)) {
I would simplify it by adding a class name to all images so you can easily target all the images, then use a toggled class to hide the images you don't want to see. this also gives you the ability to use css3 animations to fade the images you don't want to see.
function filterOn( clazz ){
// get all the images using the additional img class
var images = slice(document.getElementsByClassName('img'));
// hide all the images
var ret = images.map(function( image ){
image.classList.add('hide');
return image;
})
// reduce the images to only contain those you want to show
.filter(function( image ){
return image.classList.contains( clazz );
})
// show the image by removing the hide class
.forEach(function( image ){
image.classList.remove('hide');
});
}
// show all images
function showAll(){
var images = slice(document.getElementsByClassName('img'));
images.forEach(function( image ){
image.classList.remove('hide');
});
}
// helper function to get an array from an array like object
function slice( arrayLike ){
return Array.prototype.slice.call( arrayLike );
}
.img {
display: block;
float: left;
margin-left: .8em;
border: .3em solid #aaa;
}
.hide {
display: none;
}
.filters {
display: block;
width: 100%;
float: left;
}
.Sunsets {
border: .3em solid orange;
}
.NSFW {
border: .3em solid magenta;
}
<nav class="filters">
<button id="Sunsets-off" onClick="filterOn('Sunsets')">Show Only Sunsets</button>
<button id="NSFW-off" onClick="filterOn('NSFW')">Show Only NSFW</button>
<button id="show-all" onClick="showAll()">Show All</button>
</nav>
<!-- I added an img class to the images for ease of use later -->
<section class="images">
<img class="img Sunsets" src="http://placehold.it/50/50">
<img class="img vertical Sunsets" src="http://placehold.it/50/50">
<img class="img NSFW vertical" src="http://placehold.it/50/50">
<img class="img Architectural" src="http://placehold.it/50/50">
<img class="img Sunsets Landscapes" src="http://placehold.it/50/50">
<img class="img Abstract" src="http://placehold.it/50/50">
<img class="img NSFW LondonAndrews" src="http://placehold.it/50/50">
</section>