DIV Conditioning - Checking if an IMG exists within a DIV - javascript

I have the following lines of code in my website:
HTML:
<div class="the-post-thumbnail">
<p><img src="http://placehold.it/350x150/FF0000/FFFFFF?text=Automatic+Thumbnail" alt="" width="" height="" /></p>
</div>
<div class="post-body">
<p><img src="http://placehold.it/350x150/00FF00/FFFFFF?text=Manual+Thumbnail" alt="" width="" height="" /></p>
<p>Paragraph</p>
<p><img src="http://placehold.it/350x150/0000FF/FFFFFF?text=Body+Image" alt="" width="" height="" /></p>
</div>
JavaScript/jQuery:
var ele = $('.post-body p:has(img):first');
if ($('.the-post-thumbnail img').length) {
ele.hide();
}
else {
ele.show();
}
What I am trying to do is:
Check if there is an image within the the-post-thumbnail div and if so, hide the manual thumbnail image within the post-body
Check if there is not an image within the the-post-thumbnail div and if so, show the manual thumbnail image within the post-body
This is partially working, however, what I've noticed is that if I remove the manual thumbnail image from within the post-body div, it will remove the second body image after the paragraph tag as well.
How can I target just the manual thumbnail image which is directly within the post-body div correctly so that I can achieve the two list items above, without adding additional classes?
FYI:
This is due to swapping my website's theme for a different one. The older version required me to place in a thumbnail image for each post manually at the top of the article, and the new theme does this for me automatically. This resulted in duplicate images for older posts.
CodePen Example

Working fiddle.
Just changing the position of :first selector should do the work, because it will select always the first p and check if it has an image :
var ele = $('.post-body p:first:has(img)');
Hope this helps.

Without using any extra selectors, you could check for an image in the first paragraph.
var ele = $('.post-body p:eq(0):has(img)');

Related

Add an image id by finding the image alt

There is an image without an id on a page that I can't manually access to change the html. I'd like to be able to add an id value in a javascript file that I do have access to.
I found this thread:
Finding An image tag using the alt text
And this one:
Replace image and image title/alt text with Javascript
And I've been trying a few variations to get it to work.
Can someone show me where I'm going wrong? I'm currently using:
$('img[alt="close_pop"]').attr('id','close');
I don't think I'm fully understanding, as this is what I thought it was doing:
$('img[alt="close_pop"]') //getting the image based on the alt tag using jquery.
.attr('id','close'); //then I was applying a new id to that image.
All help appreciated!
Inspect the element and search for the id. It gets alt's value:
$(window).load(function() {
var img = $('img[alt="test"]');
var alt = img.attr('alt');
console.log(alt);
img.attr('id', alt);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img alt="test" src="" />
<img src="smiley.gif" class="smile" id="smiley" alt="Smiley face" width="42" height="42">
$(window).load(function(){
$("img").click(function() {
var img = $("img[alt='Smiley face']");
img.attr("id", "fool");
console.log(img.attr("id"));
});
});

Overlap two images in HTML5

im trying to overlap to images. One of them is hidden and its show after picking in the right image in the "clipart library" section. And the other image i get is uploading it from your browser.
I have used posiotion:absolute before to overlap two images, but it doesnt work for me in this caes.
<div id="bgcolor">
<img id="thumbnil" style="width:100%; margin-top:10px;" src="" alt="" style="position:absolute;" />
<img id="tiger" src="https://openclipart.org/image/800px/svg_to_png/202300/Blue-surprised-cartoon-smiley.png" height="50" width="50" style="position:absolute;">
</div>
Here is the code in jsfiddle: http://jsfiddle.net/xq239ko9/
Make the containing div have a style position:relative;. Then make the images position:absolute; top:0; left: 0;. This makes both images appear on the same position within the parent div. Please note, that the parent div will lose it's size, as the images will be positioned outside the document flow.
Another remark:
- Try to use one style attribute per tag.
- Try to hide images by using display:none; instead of an empty src attribute
- Try to use the width and height style properties instead of tag attributes

How to put the ALT-value of an image into a variable in javascript or jquery

I’ve made a cardspread program that is based on the source of the image. It works allright, but it is loading slowly, because now 78 different cards are loaded. I like to speed up the loading and I thought I needed an extra item per DIV. So I added an ALT-tag to each image. Like this:
<div id="kaart1">
<alt=kaart14.jpg>
<img src="images/kaart1.jpg" width="110" height="180" onclick="showDiv(event)>
</alt=kaart14.jpg>
</div>
Now I need only 1 image to load 78 times, which is faster. The problem which I am facing now is that I want to read the alt value into a variable (in this case: kaart14.jpg).
I’ve tried :
$('.status').click(function() {
var status = $(this).attr('alt');
});
But that stays empty. Does anyone have a suggestion how to solve this in Javascript or jQuery?
First, there is no <alt> tag. It is used as alternative to <img>. The value is displayed if the image is not loaded.
It is just plain text. If you put a url there, it will just display the url and not the image itself.
Eg:
<img src="myphoto.jpg" alt="This is my photo">
There is no performance gain if you use alt or not, but you definitely SEO
Your alt attribute should be like
<div id="kaart1">
<img src="images/kaart1.jpg" alt="kaart Image" width="110" height="180" onclick="showDiv(event)>
</div>
alt is an attribute of the img tag,its not a tag itself.And as #Bergi said,the alt attribute will not be an another image.It may be the description.

How to get an iframe to show when hidden?

I have an image that I want the user to see. When the user clicks on this image I want the image to go away and have the video show in it's place. Can someone show me how to do this?
Here is the code I have so far.
<div id="homeflash" style="height:413px; background-image:url(../../../upload/1/img/homeFlashBG.jpg);">
<a href="#">
<img src="../../../upload/1/img/video.jpg" style="display:none" />
</a>
<div id="video" style="display:inline">
<iframe allowfullscreen="" frameborder="0" height="395" src="//www.youtube.com/embed/X8mLel_werQ?rel=0" width="691"></iframe>
</div>
</div>
If someone could edit my post to clean the code up that would be great. I can't figure it out.
To describe the code a little bit:
This is what the code should look like after I click on the image. When you first see the page, the two display styles will be reversed.
Any help will be awesome.
Thanks
A general Idea can be like this:
$(function() {
$("img").click(function() {
$(this).css("display","none"); // will hide your image
$("body").append("<div id='video'></div>"); // will append div with id video, this div should have video code inside this.
});
});
You want to hide the video initially, so give it the style display:none. You also want to give your thumbnail image an id so you can reference it in jQuery. You can also remove the <a> tag from around the image (its not needed)
HTML
<div id="homeflash" style="height:413px; background-image:url(../../../upload/1/img/homeFlashBG.jpg);">
<img id="thumbnail" src="../../../upload/1/img/video.jpg" />
<div id="video" style="display:none">
<iframe allowfullscreen="" frameborder="0" height="395" src="//www.youtube.com/embed/X8mLel_werQ?rel=0" width="691"></iframe>
</div>
</div>
JavaScript
$(document).ready(function(){
$("#thumbnail").click(function(){
$(this).hide()
$("#video").show()
})
})
I would also try to avoid adding CSS styles inline if you can

Image thumbnail is not loading and onmousehover my images move up when hovering over an image?

?I am having an issue with a website i uploaded to test. They all work work fine when they are checked locally in Dreamweaver cs6 but when uploaded they do this, Roll over the images you will see the problem, when hovering over Texas longhorn image there is a problem and the Michigan state image isn't loading Anyone see my error.
Here is the code that matters Thanks for any help And the link to the site page http://odintest.co.nf/product_select.html
<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a;
}
</script>
<div id="main_img">
<img id="img" src="images/placeholder.jpg"/>
</div>
<div id="thumb_img">
<img src='images/notredamelogo.JPG' width="200" height="150" onmouseover='changeImage("images/notredame.JPG");'>
<img src="images/ohiostatelogo.jpg" onmouseover='changeImage("images/ohiostate.jpg");'>
<img src='images/michiganstatelogo.jpg' onmouseover='changeImage("images/michiganstate.jpg");'>
<img src='images/floridagatorslogo.jpg' onmouseover='changeImage("images/floridagators.jpg");'>
<img src='images/texaslonghornslogo.jpg' onmouseover='changeImage("images/texaslonghorns.jpg");'>
</div>
I don't know what problem you're describing, but I'm guessing a hover delay. Use a javascript preloader or load them in a div with styles along the lines of {position: absolute; left: -999em;} to keep them offscreen. This makes the images available immediately on hover, where normally you'd see a delay while they're downloaded.
The image at http://odintest.co.nf/images/texaslonghorns.jpg doesn't seem to exist on the server.
Well I see 2 issues.
For me the "notredamelogo.JPG" did not load. Probably because of "JPG". Try "jpg" instead.
Main image does not load for texaslonghorns. That might be because the image does not exist in that directory and/or the image name or extension is not right.

Categories