Apply a CSS class to captions under all images (in JavaScript) - javascript

I'm using the Divi theme builder on my site. I've placed captions under each of my images in a text block. The captions are all in italics. Could anyone tell me if it's possible for me add some JavaScript that would automatically recognise the caption lines and apply a CSS class to them? It would be good if this could be automated as it would be very time consuming to manually add the CSS class to each caption.
This is the HTML I'm using:
<div class="dmpro_timeline_item_description">
<p>
<a style="color: inherit;" href="https://path-to-image.jpg">
<img decoding="async" loading="lazy" src="https://path-to-image.jpg" width="300" height="237" alt="" class="wp-image-2179 alignnone size-medium" srcset="https://path-to-image.jpg 300w, https://path-to-image.jpg 1024w, https://path-to-image.jpg 768w, https://path-to-image.jpg 1536w, https://path-to-image.jpg 2048w, https://path-to-image.jpg 15w, https://path-to-image.jpg 1080w, https://path-to-image.jpg 1280w, https://path-to-image.jpg 980w, https://path-to-image.jpg 480w" sizes="(max-width: 300px) 100vw, 300px">
<br>
<em>This is the image caption text.</em>
</a>
</p>
<p>This is where further details go (outside of the caption)</p>
</div>

If your images and captions will always be in the following format:
<img>
<br>
<em>Caption</em>
Then you can do it with CSS:
img + br + em {
font-weight: bold; /* Or whichever styles you want to give to the captions */
}
If you want to actually add a class name to the <em> tags, you can do it with jQuery:
$('img + br + em').addClass('class-name-to-add');

Just add this to your javascript:
document.querySelectorAll('.dmpro_timeline_item_description em').forEach(item => {
item.classList.add('new-class');
});

you can use this
$(".dmpro_timeline_item_description")
.find('img[loading="lazy"]')
.next().next()
.addClass('some-class');
this will find images with lazy attribute and add class to second element after img.

Since CSS is read right to left you should always be as concise as possible, in this instance you should use the general sibling selector.
img ~ em {
font-style: normal;
}
In JavaScript, to apply a class, do the following:
const captions = document.querySelectorAll('img ~ em')
for (caption of captions) {
caption.classList.add('caption')
}
you could then style this as follows:
.caption {
font-style: normal;
}
But at this point, I would say that it is better to handle this entirely in CSS.
Otherwise, you are asking the browser to find all the elements initially (to apply the class to them), and then further processing to style the elements based on the class that you have added. This could be done in one step by CSS.

Related

Add text to a popup image only

I'm using this free HTML template https://html5up.net/ethereal
In the portfolio section, when you click on an image, the image appears bigger for a better view.
I want to add some info or some text along with the popup image but somehow cannot add it to this code
<img src="https://html5up.net/uploads/demos/ethereal/images/gallery/thumbs/01.jpg" alt="" />
Edit based on your comments: There are many approaches to toggling hidden content, below you will find a basic example. We are hiding the element with the class "hidden" and wiring up an event listener on the default image. Once the default image is clicked on it will fire a function that gets the parent element and applies a new class. In our CSS we are then hiding the default image and showing the previously hidden content. This is a rough example and by expanding on the styling you can do all sorts of things such as fading the hidden content in by setting a transition on the element's opacity or sliding the hidden content into view by transitioning the transform properties as a couple of examples.
var target = document.querySelector(".parent .default");
target.addEventListener("click", function(){
var parent = document.querySelector(".parent");
parent.classList.add("show-hidden");
});
.parent {
padding: 15px;
}
.parent p {
color: black;
font-size: 16px;
}
.hidden {
display: none;
}
.parent.show-hidden .hidden {
display: block
}
.parent.show-hidden .default {
display: none;
}
<div class="parent">
<img class="default" src="https://html5up.net/uploads/demos/ethereal/images/gallery/thumbs/01.jpg" alt="" />
<div class="hidden">
<img src="https://html5up.net/uploads/demos/ethereal/images/gallery/thumbs/01.jpg" alt="" />
<p>I am the text element</p>
</div>
</div>

Bootstrap 4 carousel captions disappear when resizing

Using Bootstrap 4. Essentially, I have a carousel that is cycling through a bunch of different project features (GIFs with captions). I have the captions below it based on some code from elsewhere on SO.
Works perfectly on medium/large screens but once I get too small, the captions just disappear altogether. How can I keep the captions on smaller screens?
<div class = "carousel-inner">
<div class = "carousel-item active">
<img class = "d-block carousel-image" src = "assets/translate-trimmed.gif" alt = "GIF of Sketchy translating objects.">
<div class = "carousel-caption d-none d-md-block">
<h5 class = "feature-name">Translate</h5>
<p class = "feature-detail">
Using the "Select Shape" option, user can move shapes around the canvas. Translation is controlled by dragging the mouse across the screen.
</p>
</div>
</div>
<div class = "carousel-item">
<img class = "d-block carousel-image" src = "assets/raise-lower-trimmed.gif" alt = "GIF of Sketchy raising/lowering layers.">
<div class = "carousel-caption d-none d-md-block">
<h5 class = "feature-name">
Raise/Lower
</h5>
<p class = "feature-detail">
The "Raise" and "Lower" buttons can move shapes up or down in the list of layers. Layers are preserved even after saving/loading.
</p>
</div>
</div>
For CSS, I'm using the following relevant stuff:
.carousel-item .carousel-caption {
position: static;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
margin-bottom: 10px;
}
Any ideas? I can provide more code but the project is pretty long and I don't think anything else is messing with it.
Answered my own question! Needed to remove d-md-block and d-none from each of the div of class "carousel-caption". See here for more info.

show one div and hide the rest onclick

https://leiacarts.github.io/index.html
https://codepen.io/leiacarts/pen/PoqRxNZ
I'm trying to get images to show in the red portions and to stay within the content div, but any time I add images, the layout breaks. I would really appreciate some help with these two things I want to achieve and thank you in advance:
1.) keep images constrained to and auto resizable within the (red) content div
2.) hide the images when the section is "shut" onclick.
HTML:
<div class="section">
<div class="bookmark">↑ ten ↔ sion ↓</div>
<div class="content"><p></p>
<!-- <div class="space"></div> -->
<!-- <img class="fit" src="images/ziptiesmall.png">
<img class="fit" src="images/ziptiesmall2.png">
<img class="fit" src="images/ziptiesmall3.png"> -->
</div>
</div>
the JavaScript:
var sections = document.querySelectorAll(".section")
sections.forEach(function(section) {
section.addEventListener("click", expandSection);
})
function expandSection(event) {
let section = (event.target.classList.contains("section")) ? event.target : event.target.parentNode;
sections.forEach(function(section) {
section.classList.remove("open")
})
section.classList.add("open");
}
I just added this class to the rest of the divs which didnt have any images on them, hence the reason for them to show the red content div. Remove the 100%, the image text in between every column as well and create ids for every column and add background image to them and you are good to go :).
.content.bg.zip {
margin-left: 40px;
/* width: 100%; */
background-color: #000;
background-image: url(images/ziptiepattern.png);
background-repeat: repeat;
}

how to resize images inside a div inside another div with css?

I want to only resize images that are in a div with a specific class, inside an other div with an other specific class. but the images which are only inside the div which is inside the other div should not be resized.
This works if I want to resize images inside a classed div:
div.classname>img { width:something; }
but this doesn't work:
div.classname2 > div.classname > img { width:something; }
Markup
<div class="classname2">
<div class="classname">
<img>
</div>
</div>
But I can't refer to it with the inside class name.
So, to make it really clear, i need to resize these images:
<div class="classname2">
<div class="classname">
<img>
</div>
</div>
But not these:
<div class="classname">
<img>
</div>
I feel like your css rule should work
div.classname2 > div.classname > img { width:something; }
Does this fiddle show what you're trying to illustrate? If so, perhaps you just have overriding CSS rules somewhere?
I think this should work
CSS
.classname2 .classname img { width: 200px; }
Having:
<div class="parentDiv">
<img class="img1">
<div class="childDiv">
<img class="img2">
</div>
</div>
do it like this:
.parentDiv > img { width: 100px }
will just effect <img>s having class="img1" not those having class="img2"
Edit the only the single image you want without changing the rest, by going to that specific tag and putting the following style attributes.
<img class = "example" style = "width: 50px !important;">
UPDATE
Give this a try, add "!important" to the inside class to override the parent.
div.classname2 > div.classname > img { width:something !important; }

Mousing over different images makes different text appear in the same text box

Thanks so much for your help. I am new to JavaScript and trying to learn, but it's a lot to take in. In the meantime, my team created a site where we have 5 different images that represent a capability. Under all those images, we want to have text appear. When you mouse over the image, the corresponding description of the capability should appear centered under all the images. If you move to a different image, the text should change, but it should be in the same location.
It would kind of be like jQuery tabs but with images.
If anyone could help with the code or point me in the right direction, I would really appreciate it!!
With jQuery you can use the hover method to add a animation css to your image text on hover. To update the text in your textbox just place the image text below the hovered image then you can find the text with jQuery and copy that text to the textbox with .text(newText).
To find the text you first have to go to the parent of the image with .parent() (the li tag here) and then you can use .find(class) to go down to the image text.
For documentation to .hover(handlerIn, handlerOut) see the docs here.
A demo for what you're looking for see the demo below and here at jsFiddle.
To the css:
The overflow: hidden; on the li tag is only to hide the text below the images. The li and the image have the same height so the text is invisble.
var $textbox = $('#textbox'),
handlerIn = function () {
var $imgText = $(this).parent().find('.imgText'); // find the text
$textbox.text($imgText.text()); // add the text to the p-tag
$textbox.removeClass('animated fadeOut');
$textbox.addClass('animated fadeIn');
},
handlerOut = function () {
//var $imgText = $(this).parent().find('.imgText');
$textbox.removeClass('andimated fadeIn');
$textbox.addClass('animated fadeOut');
};
$('img').hover(handlerIn, handlerOut);
body {
font-family: Arial, Helvetica, sans-serif;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
border: 1px solid black;
height: 200px;
overflow: hidden;
}
.imgText {
text-align: center;
opacity: 0.0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<img src="http://lorempixel.com/200/200/sports/1" />
<p class="imgText">first image text...</p>
</li>
<li>
<img src="http://lorempixel.com/200/200/sports/2" />
<p class="imgText">second image text...</p>
</li>
<li>
<img src="http://lorempixel.com/200/200/sports/3" />
<p class="imgText">third image text...</p>
</li>
</ul>
<p id="textbox"></p>

Categories