Getting the amount of images which are in a specific div - javascript

I'm trying to get the amount of images which are stored in the post-content container of each post.
The layout of a post looks like this:
<div class="post">
<div class="post-toolbar">
<div class="post-date">date</div>
<div class="signs">
<div class="hearts">♥</div>
<div><img src="logo.png"></div>
<div><img src="logo2.png"></div>
</div>
<div class="post-title">title</div>
</div>
<div class="post-content">
<img src="image.png">
<img src="image.png">
</div>
</div>
And a Javascript snippet which looks like this:
$('.hearts').live("click",function() {
var amount = $(this).parent().parent().parent().find("img").size();
console.log(amount);
});
At the moment the value of amount is 4.
I'm sure the is a much nicer way to access the .post-content div with jQuery.

$('.hearts').live("click",function() {
var post = $(this).closest('.post'); // will find the first element with the class post up the DOM tree
var amount = $('.post-content img', post).size();
console.log(amount);
});
BTW you should really look into .delegate() and never use .live() again since live is way slower than delegate.
Or even better if you are on jQuery 1.7 or higher use .on().

How about $(this).parents(".post") ?
$('.hearts').live("click",function() {
var amount = $(this).parents(".post").children(".post-content").find("img").size();
alert(amount);
});

Related

Onerror event add a new class and count how many times it replaces image source

I'm using onerror feature to detect broken links and replace those with an image, the problem is that in my code images that are okay are clickable.
So I want to make it in that way that when the function imageOnError is called to make that image impossible to click.
I tried to do it like this (img).unbind("click");
Lik this also: img.class = "blocked";
but it doesn't work?
<img class="img img-click not-selected " src="" onerror="return imageOnError(this);" />
countImgReplaced = 0;
function imageOnError(img) {
img.onerror = '';
img.src = 'https://dummyimage.com/256x256?text=Broken%20images%20.';
(img).unbind("click");
countImgReplaced ++;
return true;
}
And also I want to get the number of times that the image is replaced I did that with countImgReplaced , but it gives me the total number of images :/
I'm really confused. Can somebody help me?
You can apply pointer-events: none; to them via a class. You can apply that using the classList API
i.e.
img.classList.add('blocked');
You can just do this in HTML tag.
<img src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" />
$(document).ready(function(){
$("img").click(function(){
alert("Valid");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="clear:both;"><lable>Click in image(Invalid img):</lable>
<img width=200px height=200px src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" />
</div>
<div style="clear:both;"><lable>Click in image (Valid img):<lable>
<img width=200px height=200px src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQzltPjpuUfCzEsYbhTYTm4xab4wfmCTFoNllbU5ljLLEAb3VvJXkgpWvU" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" /></div>

Using jQuery to change image source dynamically

I have a page that is a series of N img elements. I need each image to, when clicked, change to the next image in their own series of three. I have listed my html below to explain.
<body>
<div class="images">
<div class="image_group">
<img id="first" src="group1_image1"></img>
<img id="second" src="group1_image2"></img> //this isn't displayed until clicked
<img id="third" src="group1_image3"></img> //when this is displayed, it cycles back to group1image1
</div>
...
<div class="image_group">
<img id="first" src="groupN_image1"></img>
<img id="second" src="groupN_image2"></img>
<img id="third" src="groupN_image3"></img>
</div>
</div>
</body>
Each image_group div displays only one image until clicked, when it displays the second, then the third when clicked, then cycles back to the first when clicked a third time.
My problem is writing a JQuery method that can do this cycling by making "second" images replace "first" images when clicked and so on. The below method rewrites the image source which seems silly but I can't think of a better way to do it. I'm also not sure if the "first" class image will be isolated in the "image_group" div (as it should) or if it will change all images on the page to their "second" class image.
$("#first").attr("src","group1_image2.jpg");
Can anyone think of a way to do this?
I would do something like this
$("image_group img").on("click", function() {
var index = $(this).index();
$(this).attr("src", index === $("img").length - 1 ? $(this).next().src : $("img")[0].src);
});
refine your html:
<body>
<div class="images">
<div class="image_group">
<img id="1,1" data_num="1,1" src="group1_image1"></img>
</div>
...
<div class="image_group">
<img id="n,1" data_num="n,1" src="groupN_image1"></img>
</div>
</div>
</body>
and then you might do something like:
$("image_group img").on("click", function() {
var max = 3;
var indexes = $(this).data('num').split(',');
if ( indexes[1] == max
indexes[1] = 1;
else
indexes[1]++;
$(this).attr("src", "group" + indexes[0] + "_image" + indexes[1]);
$(this).data('num', indexes.join(','))
});

use html5 output tag to display javascript variables?

Sorry if this is a silly question, but I've been trying to use AJAX to display my javascript variables in 'real time' with little luck. I'm definitely a beginner though so this could be the problem haha- When I see the AJAX code, it always seems to require an additional url that it refreshes, but I just want to refresh the javascript variables on click.
http://jsfiddle.net/bagelpirate/m9Pm2/
<script>
var one = 0;
var two = 0;
var three = 0;
</script>
<body>
<div id="div_1">
One: <script>document.write(one)</script> |
Two: <script>document.write(two)</script> |
Three: <script>document.write(three)</script>
</div>
<div id="div_2">
<img id="mine" src="https://si0.twimg.com/profile_images/3170725828/ac1d6621fc3c3ecaa541d8073d4421cc.jpeg" onclick="one++;" />
<img id="forest" src="http://blogs.dallasobserver.com/sportatorium/No.%202.png" onclick="two++;" />
<img id="farm" src="https://si0.twimg.com/profile_images/3732261215/bd041d1f0948b6ea0493f90507d67ef2.png" onclick="three++;" />
</div>
</body>
As you can see in the above code, when a user clicks one of the images, I want to increment the count and display it at the top of the page. I found the HTML5 output tag, and was wondering if it's possible to use this to display the javascript variable in real time? Everything I've read seems to imply it can't be done because the output tag only works on forms? Anyway, I figured it couldn't hurt to ask!
Thanks for your time!
You shouldn't use document.write to write to the DOM after it's finished loading. You have tagged your question with jQuery, so I'll assume you can use that to update things. Instead, update the DOM from within your script block. Here is an example that might help you get started.
http://jsfiddle.net/prxBb/
<script type="text/javascript">
$(function() {
var one = 0;
var two = 0;
var three = 0;
$('img#mine').click(function() {
one++;
$('span#one').html(one);
});
$('img#forest').click(function() {
two++;
$('span#two').html(two);
});
$('img#farm').click(function() {
three++;
$('span#three').html(three);
});
});
</script>
<body>
<div id="div_1">
One: <span id="one"></span> |
Two: <span id="two"></span> |
Three: <span id="three"></span>
</div>
<div id="div_2">
<img id="mine" src="https://si0.twimg.com/profile_images/3170725828/ac1d6621fc3c3ecaa541d8073d4421cc.jpeg" />
<img id="forest" src="http://blogs.dallasobserver.com/sportatorium/No.%202.png" />
<img id="farm" src="https://si0.twimg.com/profile_images/3732261215/bd041d1f0948b6ea0493f90507d67ef2.png" />
</div>
</body>
Maybe you should try putting all your variables inside a named object, iterating through it at predefined interval and displaying the values.
var varContainer = {
one:0,
two:0,
three:0
};
jQuery("#div_2 img").on('click',function(){
jQuery.each(varContainer,function(key,value){
//Add key + value to the DOM
if(jQuery("."+key+value).length<1)
jQuery("#div_2").append("<div class='"+key+value+"'></div>");
var newHtmlVal= "<p><span>Var name: "+key+"</span><br><span>Value: "+value+"</span>";
jQuery("."+key+value).html();
});
});
HTML
<div id="div_2">
</div>
Of course the script could be upgraded to look through each variable recursivley in case of nested objects/arrays...
Hope this helps!

If image width is less than X, add class

As the title suggests, I'm looking to have a little bit of jQuery - if an image is less than a defined width, it adds a class a certain element. This, for me, seems pretty easy but for some reason it's not working.
$(document).ready(function() {
var image = $('.work-each img');
if (image.width() < 500) {
$('.work-text').addClass('work-text-small');
}
});
This, should, add a class 'work-text-small' to the element 'work-text' if the image found under each .work-each is less than 500px.
Example of HTML (for each)
<div class="work-each">
<div>
<img src=""/>
<div class="work-text">
<p>Title</p>
<p>Text</p>
</div>
</div>
</div>
<div class="work-each">
<div>
<img src=""/>
<div class="work-text">
<p>Title</p>
<p>Text</p>
</div>
</div>
</div>
<div class="work-each">
<div>
<img src=""/>
<div class="work-text">
<p>Title</p>
<p>Text</p>
</div>
</div>
</div>
Thanks,
R
Use load instead, when DOM is ready only img tag is defined but the image isn't loaded yet. Its size comes when it's fully loaded
$(window).load(function () {
var image = $('.work-each img');
if (image.width() < 500) {
$('.work-text').addClass('work-text-small');
}
});
However as #rdck pointed if there are more images with class=".work-each img" code won't work so in that case you go trough each image and apply the class
$(window).load(function () {
var image = $('.work-each img');
image.each(function () {
var that = $(this);
if (that.width() < 500) {
that.next('div.work-text').addClass('work-text-small');
}
})
});
If you get dimensions using server code and set class accordingly, there would be no need to wait for image to load and css would immediately take effect as soon as html exists

jQuery/JS - Count elements within element

In jQuery or JS I need to count the amount of DIV elements inside my parent DIV called cont? I've seen similar questions here on StackOverflow and have tried the following.
<div class="b-load" id="cont">
<div>
<img src="page2.jpg" alt=""/>
</div>
<div>
<img src="page3.jpg" alt="" />
</div>
<div>
<img src="page4.jpg" alt="" />
</div>
<div>
<img src="page5.jpg" alt="" />
</div>
</div>
function countPages() {
var maindiv = document.getElementById('cont');
var count = maindiv.getElementsByTagName('div').length;
alert(count);
}
The child DIV's are dynamically produced, so I need to count them after the page has finished loading. The problem I have is the function I wrote counts 13 DIV's and in this example, there should only 4!! Any help gratefully received..
console.log($("#cont div").length);
var maindiv = document.getElementById('cont');
var count = maindiv.children.length;
alert(count);
Try this
$(function(){
var mainDiv = $('#cont');
var childDivCount = mainDiv.find('div').length;
});
By the way, this is jQuery's syntax (one of them anyways) for document ready. This will only fire after your page has completed loading.
No need to use jQuery here. If you only need to know the amount of childElements, you can use node.childElementCount

Categories

Resources