I have a website for read comic online.
HTML of read page is:
<div id="listimages">
<img src="abc1.jpg" id="image1" />
<img src="abc2.jpg" id="image2" />
<img src="abc3.jpg" id="image3" />
<img src="abc4.jpg" id="image4" />
</div>
I want to get the id of the image being scrolled to.
Example when I'm viewing img abc2.jpg I want get element id of it is #image2.
idnow = idnow_getted
Please help me, thanks everybody !
You can compare the window's scrolltop and image's top position to get the id of the image which is scrolled to.
For ex,
$(window).scroll(function() {
var winTop = $(this).scrollTop();
var $imgs = $('img');
$.each($imgs, function(item) {
if($(item).position().top <= winTop)
//get id here
});
});
There may be two scenario in which you you want id of image and do further processing,
First scenario You want execute something on scroll of window.
In this case just add a handler on scroll event.
$(window).scroll(function() {
var windowTop = $(this).scrollTop(),
image = $('#listimages').find('img').filter(function(){
return $(this).offset().top < windowTop+100;
//i am adding 100 in windowTop as we can consider the the image as cuurent image even if it is little bit below than top of window.
});
//now you can directly use image if you want to manipulate it.
//if you want id you can get it by
var id=image[0].id //or image.attr('id');
});
Second scenario , if you want to perform some action on trigger of any event.
function currentImg(){
var windowTop = $(this).scrollTop(),
image = $('#listimages').find('img').filter(function(){
return $(this).offset().top < windowTop+100;
});
return image[0].id;
}
But remember adding events like scroll,mousemove are executed more often so they are suggested not to use much until you need it much .
Just Try with the following,
JavaScript and jQuery Part :
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#listimages img').mouseover(function() {
alert(this.id);
});
});
</script>
HTML Part :
<div id="listimages">
<img src="abc1.jpg" id="image1" />
<img src="abc2.jpg" id="image2" />
<img src="abc3.jpg" id="image3" />
<img src="abc4.jpg" id="image4" />
</div>
I think this may help you to resolve your problem.
Related
On my website I have three images 1.png, 2.png and 3.png. When I click on 1.png, I want the animated gif 1a.gif to be loaded and shown/updated in the img tag located in <div id="container">. When I click on 2.png, 2a.gif should be displayed (while 1a.gif vanishes) and so on... This is my code:
<html>
<body>
<div>
<img src="1.png" onclick="document.getElementById('img').src = '1a.gif'" />
<img src="2.png" onclick="document.getElementById('img').src = '2a.gif'" />
<img src="3.png" onclick="document.getElementById('img').src = '3a.gif'" />
</div>
<div id="container">
<img id="img" src="1a.gif" />
</div>
</html>
</body>
It is working, however unreliable (tested with firefox and chrome)! When I refresh the html page and click on 1.png, than on 2.png ... suddendly at one point only the first frame of the animated gif is shown. I have to click on the same image (1,2 or 3.png) again in order to make the gif run. Why? I am looking for a light weight javascript solution without jquery. I am just asking myself why the gif is not played properly once I click on the image.
As a side note: It would be nice to show a loading image while the gif (5 MB) is loading. I failed to achive that using css:
#container {background:url('loading.png') no-repeat; }
In this case the loading image doesn't show up at all. Probably because I am updating directly from one (e.g. 1a.gif) to another (e.g. 2a.gif).
Showing it right before loading the gif did not help as well:
<img src="1.png" onclick="document.getElementById('img').src = 'loading.png';
document.getElementById('img').src = '1a.gif'" />
There are many ways of implementing this kind of thing, but to keep in line with how you're doing it, you'll want to hook into the onload event of the img.
Note that in this snippet, I don't have access to your GIFs, so I'm using the dummyimage.com service, which is pretty fast, so you don't see the "loading" for very long.
window.onload = function() {
var img = document.getElementById('img');
var container = document.getElementById('container');
var showImage = function showImage() {
img.style.display = "inline";
container.style.backgroundImage = "";
};
img.addEventListener('load', showImage);
img.addEventListener('error', showImage);
var thumbs = document.getElementsByClassName('thumb');
for (var i = 0, z = thumbs.length; i < z; i++) {
var thumb = thumbs[i];
var handler = (function(t) {
return function clickThumb() {
container.style.backgroundImage = "url('https://dummyimage.com/500x500/000/fff.gif&text=loading')";
img.style.display = "none";
img.src = t.dataset['image'];
};
})(thumb);
thumb.addEventListener('click', handler);
}
};
<div>
<img src="1.png" class="thumb" data-image="https://dummyimage.com/500x200/000/fff.gif" />
<img src="2.png" class="thumb" data-image="https://dummyimage.com/200x200/000/fff.gif" />
<img src="3.png" class="thumb" data-image="https://dummyimage.com/500x500/000/fff.gif" />
</div>
<div id="container">
<img id="img" class="main" />
</div>
This happens bacause the second img is not loaded yet!
I suggest you to put the 2 img in 2 different divs and the use javascript to hide/show the entire div!
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>
I have a list of elements similar to simplified HTML below. When one of the images is clicked some JavaScript if fired, and the image that is clicked becomes this.theImage.
I now need to get the position of the image; for example if the first image was clicked, the position should be 1, if the second is clicked it should be 2, and so on.
I could use var elements = $('.image-preview', '#gallery');, to take a list of all elements with the image-preview class, and then loop through them and match the ID to the image, but that seems really inefficient.
Is there another way of achieving this task that is more efficient?
<div id="gallery">
<div class="image-preview">
<img id="image-1" src="http://www.mysite.com/image1.jpg" />
</div>
<div class="image-preview">
<img id="image-2" src="http://www.mysite.com/image2.jpg" />
</div>
<div class="image-preview">
<img id="image-3" src="http://www.mysite.com/image3.jpg" />
</div>
<div class="image-preview">
<img id="image-4" src="http://www.mysite.com/image4.jpg" />
</div>
</div>
Not sure I get it, you catch a click on the image like this
$('.image-preview img').on('click', function() {
});
and then to get the index you'd do
$('.image-preview img').on('click', function() {
var index = $('.image-preview img').index(this);
});
note that it's zero based
FIDDLE
You can make Array.prototype.indexOf do it for you:
var gallery = document.getElementById('gallery'),
els = [].slice.call(gallery.getElementsByTagName('img'));
gallery.onclick = function(e) {
if(e.target.tagName.toLowerCase() !== 'img') return;
var position = els.indexOf(e.target);
};
Demo
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
i have a list of images
<img src="image-1.jpg" />
<img src="image-2.jpg" />
<img src="image-3.jpg" />
<img src="image-4.jpg" />
<img src="image-5.jpg" />
whats the best way to reorder them such that image-1 is at the bottom? (but not necessarily image-1)
Edit: Preferably without using anything like the JQuery UI.
I would like this to be done with as little code as possible.
Simple and easy
$(function(){
var parent=$("img").parent();
$("img:first").appendTo(parent);
});
If you are not trying to create a dynamic sortable list and are just looking for a way to re-order images. You could try the following.
$("img[src$='image-1.jpg']").insertAfter("img[src$='image-5.jpg']");
This will allow you to find images and move them around based on the src of the image.
http://api.jquery.com/category/manipulation/
Look at the different methods that are available for DOMinsertion.
You can achieve this by using the jQuery UI:
http://jqueryui.com/demos/sortable/
(Supposing you want this to be dynamic, if not you should further explain the exact situation)
Then you want like something this? It sorts 1,2,3,4,5 to 5,4,3,2,1
<div id="reorder">
<img src="http://www.google.com.tr/images/srpr/logo3w.png" />
<img src="http://l.yimg.com/a/i/ww/met/logo/20100909/yahoo_logo_tr.png" />
<img src="http://www.rev2.org/wp-content/uploads/2009/06/bing-logo.png" />
<img src="http://a.l.yimg.com/a/i/us/sch/yhs4/altavista_logo.png" />
<img src="http://searchcdn.infospace.com/Dogpile-8.0.1.353/Content/Img/img_trans.gif?av=1353" />
</div>
<script>
$(function() {
$('#reorder').click(function() {
$("#reorder").randomize("img");
});
});
(function($) {
var onerandom = Math.random();
$.fn.randomize = function(childElem) {
return this.each(function() {
var $this = $(this);
var elems = $this.children(childElem);
elems.sort(function() { return (Math.round(onerandom)-0.5); });
$this.remove(childElem);
for(var i=0; i < elems.length; i++)
$this.append(elems[i]);
});
}
})(jQuery);
</script>