We Keep Coding

How can I attach an event to an object, that is covered by another one?

I'm trying to unhide a div, when the mouse pointer enters its sibling image and hide it when it leaves. But in fact, when I move the mouse pointer while it is on the image, it just starts to twinkle.
Both image and div have the same size.
HTML code:
<img src="../recource/person/1.png">
<div class="o_p_faces_e_glass_off">
<div><p>Well, I enjoy working for this company, everything is okay.</p></div>
</div>
JS code:
var entertimes = 0;
$(".o_p_faces_e img").mouseenter(function(){
if(entertimes==0) {
var glassON = $(this).next();
glassON.removeClass("o_p_faces_e_glass_off");
glassON.addClass("o_p_faces_e_glass_on");
entertimes++;
}
});
$(".o_p_faces_e img").mouseleave(function(){
if(entertimes==1) {
var glassOFF = $(this).next();
glassOFF.removeClass("o_p_faces_e_glass_on");
glassOFF.addClass("o_p_faces_e_glass_off");
entertimes--;
}
})
CSS code:
.o_p_faces_e img {
position: absolute;
top:0;
left:51px;
border:5px solid #f7ec16;
border-radius:50%;
display:block;
margin-left:auto;
margin-right:auto;
}
.o_p_faces_e_glass_off {
display: none;
cursor: pointer;
}
.o_p_faces_e_glass_on {
position:absolute;
left:56px;
top:5px;
width:330px;
height:330px;
background-color:rgb(252, 247, 156, 0.7);
display: block;
margin-left:auto;
margin-right:auto;
border-radius:50%;
cursor:pointer;
overflow: hidden;
transition:all 1s ease-out;
}

Both can be added to the same div like so:
$(".o_p_faces_e img").mouseenter(function() {
//mouse enter code
}).mouseleave(function() {
//mouse leave code
});

Image scroll fadeIn, go to next section when done

Things I'm trying to accomplish:
Images go to the next one based on scroll.
The images will cycle through, and when they are all done the view will proceed to the bottom section. A problem with what I have right now is that, when I scroll, the view doesn't stay on the image, but moves on to the rest of the page--so even if the image changes, the image is no longer in the viewport.
fadeIn when it goes to the next image (or use another animation).
When scrolling up, it goes back up the image sequence.
If there is a jQuery plugin that does this, please feel free to refer.
jsfiddle: http://jsfiddle.net/jzhang172/gcSe8/145/
$(document).ready(function () {
$(window).scroll(function () {
if ($(document).scrollTop() > 100) {
$(".img-container > img").fadeIn("slow").attr('src',' http://vignette3.wikia.nocookie.net/pokemon/images/1/13/007Squirtle_Pokemon_Mystery_Dungeon_Explorers_of_Sky.png/revision/latest?cb=20150105230449');
} else if ($(document).scrollTop() > 110) {
$(".img-container > img").fadeIn("slow").attr('src','http://vignette2.wikia.nocookie.net/pokemon/images/5/52/417Pachirisu_Pokemon_Ranger_Shadows_of_Almia.png/revision/latest?cb=20141021151508');
}
});
});
.left{
position:fixed;
left:0;
height:100%;
width:200px;
background:black;
color:white;
font-size:20px;
text-align:center;
}
body,html{
margin:0px;
}
.bottom{
height:500px;
width:100%;
background:gray;
}
.bottom p{
text-align:center;
font-size:40px;
}
.img-container{
height:700px;
width:100%;
}
.img-container img{
height:100%;
width:auto;
}
.img-container p{
position:absolute;
text-align:center;
color:#00FFF5;
font-size:30px;
margin:300px;
background:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
<p>
This is fixed!
</p>
</div>
<div class="img-container">
<p>
This section should stay focused on image until all images have been scrolled through and then it can go to the bottom.
</p>
<img src="https://i.kinja-img.com/gawker-media/image/upload/unnbgkdbmsszmazgxkmr.jpg">
</div>
<div class="bottom">
<p>
Please don't cover me
</p>
</div>

Try this:
$(document).ready(function () {
var images_index = 0;
var act_cycle = 0;
var n_cycles = 5;
var images = ["https://i.kinja-img.com/gawker-media/image/upload/unnbgkdbmsszmazgxkmr.jpg","http://vignette3.wikia.nocookie.net/pokemon/images/1/13/007Squirtle_Pokemon_Mystery_Dungeon_Explorers_of_Sky.png/revision/latest?cb=20150105230449","http://vignette2.wikia.nocookie.net/pokemon/images/5/52/417Pachirisu_Pokemon_Ranger_Shadows_of_Almia.png/revision/latest?cb=20141021151508",]
$(window).on('DOMMouseScroll mousewheel', function (e) {
if ($(".img-container").is(':hover')){
if (e.originalEvent.wheelDelta < 0) {
if(images_index < images.length-1){
$(document).scrollTop(".img-container");
e.preventDefault();
e.stopPropagation();
if(++act_cycle % n_cycles == 0){
act_cycle = 0;
$(".img-container > img").hide().attr('src',images[++images_index]).fadeIn("slow");
}
}
}
else {
if(images_index > 0){
$(document).scrollTop(".img-container");
e.preventDefault();
e.stopPropagation();
if (--act_cycle == -n_cycles){
act_cycle = 0;
$(".img-container > img").hide().attr('src',images[--images_index]).fadeIn("slow");
}
}
}
}
});
});
.left{
position:fixed;
left:0;
height:100%;
width:200px;
background:black;
color:white;
font-size:20px;
text-align:center;
z-index: 2;
}
body,html{
margin:0px;
}
.bottom{
height:500px;
width:100%;
background:gray;
}
.bottom p{
text-align:center;
font-size:40px;
}
.img-container{
height:700px;
width:100%;
z-index: 1;
}
.img-container img{
height:100%;
width:auto;
z-index: 1;
}
.img-container p{
position:absolute;
text-align:center;
color:#00FFF5;
font-size:30px;
margin:300px;
background:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
<p>
This is fixed!
</p>
</div>
<div class="img-container">
<p>
This section should stay focused on image until all images have been scrolled through and then it can go to the bottom.
</p>
<img src="https://i.kinja-img.com/gawker-media/image/upload/unnbgkdbmsszmazgxkmr.jpg">
</div>
<div class="bottom">
<p>
Please don't cover me
</p>
</div>
Explanation:
Images go to the next one based on scroll.
To solve this I just put in an array all the images, changing the src depending on the index of the array that I'm updating depending on the scroll direction (see wheelDelta)
The images will cycle through, and when they are all done the view
will proceed to the bottom section. A problem with what I have right
now is that, when I scroll, the view doesn't stay on the image, but
moves on to the rest of the page--so even if the image changes, the
image is no longer in the viewport.
To prevent the normal scroll I used the DOMMouseScroll and mousewheel events, then preventDefault and stopPropagation and I only fire this logic if the img-container is hover.
fadeIn when it goes to the next image (or use another animation).
I just first fadeOut, the change src and finally fadeIn
When scrolling up, it goes back up the image sequence.
Solved with the array of images.
In adition, I add some z-index, because of the behavior of the jQuerys fadeIn/Out and a scrollTop to fix the view on the image when is changing
UPDATE: If you want to change the image in a certain numbers of 'cycles' you can add a var to control it (here is n_cycles, change his value to change the number of cycles you want wait until image changes, I set it to 5 as you say in comments).

what is the best way to show the pop-up on click of an image?

Here I have a jsFiddle
you can See there are 3 images of Players now What I want is Whenever I click on the image it should show the pop-up below the players.
Player can be In any position it will not be in a grid
so My question is What is the best way perform this.
I have something in my probably the wast it is like..
-- whether onclick of an Image I should change the position of the position of the popup image as well as span tag's text.
-- I should provide a popup to the every Player and just hide and show them
or something else you can suggest.It will help me a lot.
#player-back{
height:250px;
background:#0F0;
}
#p1{
margin-top:50px;
margin-left:80px;
}
#p2{
margin-left:150px;
}
#p3{
margin-left:200px;
}
#player-popup{
background:orange;
height:27px;
width:85px;
border-radius:10px;
text-align:center;
margin-left:50px;
}
<div id='player-back'>
<img src='http://s6.postimg.org/su0e7812l/player1.png' id='p1'/>
<img src='http://s6.postimg.org/afpv38orx/player2.png' id='p2'/>
<img src='http://s6.postimg.org/h7ga63drh/player3.png' id='p3'/>
<div id='player-popup'>
<span>Player1</span>
</div>
</div>
Thank you for spending time for me in advance Thank you.

<div id='player-back'>
<img src='http://s6.postimg.org/su0e7812l/player1.png' data-playerid="1" id='p1'/>
<img src='http://s6.postimg.org/afpv38orx/player2.png' data-playerid="2" id='p2'/>
<img src='http://s6.postimg.org/h7ga63drh/player3.png' data-playerid="3" id='p3'/>
<div id='player-popup' style="display:none">
<span>Player1</span>
</div>
</div>
Script:
$("img").click(function(){
var top = $(this).offset().top + $(this).width() + 2;
var left = $(this).offset().left - $(this).height() / 2;
$("#player-popup span").text("Player "+$(this).data("playerid"));
$("#player-popup").css({ top: top, left: left }).show();
});
css:
#player-back{
height:250px;
background:#0F0;
}
#p1{
margin-top:50px;
margin-left:80px;
}
#p2{
margin-left:150px;
}
#p3{
margin-left:200px;
}
#player-popup{
background:orange;
height:27px;
width:85px;
border-radius:10px;
text-align:center;
position:absolute;
}
Demo: https://jsfiddle.net/astm1o3p/21/
Here make chqnges in the css for popup set
position:absolute;

It won't hover or let me click on images in my gallery

Since I've added this cropping effect (http://jsfiddle.net/BPEhD/2/) to the images in my gallery, there is no hover state on the images and it won't let click on them either. The pointer cursor appears when I hover over them, but it won't bring up the panel when I click on it. How can I solve this?
HTML:
<div id="thumbsWrapper">
<div id="content">
<p class="crop">
<img src="image1.jpg" alt="image1.jpg"/></p>
<p class="crop">
<img src="image2.jpg" alt="image2.jpg"/></p>
<p class="crop">
<img src="image1.jpg" alt="image1.jpg"/></p>
<div class="placeholder"></div>
</div>
</div>
<div id="panel">
<div id="wrapper">
<a id="prev"></a>
<a id="next"></a>
</div>
</div>
CSS:
#thumbsWrapper{
position:relative;
height:100%;
width:100%;
left:0px;
right:0px;
}
#content{
position:relative;
height:100%;
width:100%;
left:0px;
display:none;
}
.crop{
float:left;
margin:.5em 10px .5em 0;
overflow:hidden; /* this is important */
position:relative; /* this is important too */
border:1px solid #ccc;
width:200px;
height:200px;
}
.crop img{
position:absolute;
top:-50px;
left:-50px;
}
#content img{
float:left;
margin:5px 0px 5px 5px;
cursor:pointer;
opacity:0.4;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
}
#panel{
background-color:#ddd;
width:100%;
position:fixed;
bottom:0px;
left:0px;
right:0px;
height:0px;
text-align:center;
z-index:999;
}
#panel img{
cursor:pointer;
position:relative;
border:1px solid #000;
-moz-box-shadow:0px 0px 10px #111;
-webkit-box-shadow:0px 0px 10px #111;
box-shadow:0px 0px 10px #111;
display:none;
}
Relevant JS:
$(function() {
/* this is the index of the last clicked picture */
var current = -1;
/* number of pictures */
var totalpictures = $('#content img').size();
/* speed to animate the panel and the thumbs wrapper */
var speed = 500;
/* show the content */
$('#content').show();
/*
when the user resizes the browser window,
the size of the picture being viewed is recalculated;
*/
$(window).bind('resize', function() {
var $picture = $('#wrapper').find('img');
resize($picture);
});
/*
when hovering a thumb, animate it's opacity
for a cool effect;
when clicking on it, we load the corresponding large image;
the source of the large image is stored as
the "alt" attribute of the thumb image
*/
$('#content > img').hover(function () {
var $this = $(this);
$this.stop().animate({'opacity':'1.0'},200);
},function () {
var $this = $(this);
$this.stop().animate({'opacity':'0.4'},200);
}).bind('click',function(){
var $this = $(this);
/* shows the loading icon */
$('#loading').show();
$('<img alt="">').load(function(){
$('#loading').hide();
if($('#wrapper').find('img').length) return;
current = $this.index();
var $theImage = $(this);
/*
After it's loaded we hide the loading icon
and resize the image, given the window size;
then we append the image to the wrapper
*/
resize($theImage);
$('#wrapper').append($theImage);
/* make its opacity animate */
$theImage.fadeIn(800);
/* and finally slide up the panel */
$('#panel').animate({'height':'100%'},speed,function(){
/*

I think the problem is with the selector you're using to match your image tags. You're using the child selector which only selects direct children of the selected element (see documentation). Since (I'm guessing) you've added p tags around your images to apply the cropping effect, the selector is no longer returning the images.
Try updating your code as follows:
$('#content img').hover(function () {
var $this = $(this);
$this.stop().animate({'opacity':'1.0'},200);
}
Note that this will select all elements that are descendants of the content div (see documentation) so, depending on what you're doing, you may want to consider a more specific selector.
Just a friendly hint, but a fully functioning fiddle demonstrating the issue would make it easier to help.

Dynamically changing height of div element based on content

I'm working on a Facebook-like toolbar for my website.
There's a part of the toolbar where a user can click to see which favorite members of theirs are online.
I'm trying to figure out how to get the div element that pops up to grow based on the content that the AJAX call puts in there.
For example, when the user clicks "Favorites Online (4)", I show the pop up div element with a fixed height and "Loading...". Once the content loads, I'd like to size the height of the div element based on what content was returned.
I can do it by calculating the height of each element * the number of elements but that's not very elegant at all.
Is there a way to do this with JavaScript or CSS? (note: using JQuery as well).
Thanks.
JavaScript:
function favoritesOnlineClick()
{
$('#favoritesOnlinePopUp').toggle();
$('#onlineStatusPopUp').hide();
if ($('#favoritesOnlinePopUp').css('display') == 'block') { loadFavoritesOnlineListing(); }
}
CSS and HTML:
#toolbar
{
background:url('/_assets/img/toolbar.gif') repeat-x;
height:25px;
position:fixed;
bottom:0px;
width:100%;
left:0px;
z-index:100;
font-size:0.8em;
}
#toolbar #popUpTitleBar
{
background:#606060;
height:18px;
border-bottom:1px solid #000000;
}
#toolbar #popUpTitle
{
float:left;
padding-left:4px;
}
#toolbar #popUpAction
{
float:right;
padding-right:4px;
}
#toolbar #popUpAction a
{
color:#f0f0f0;
font-weight:bold;
text-decoration:none;
}
#toolbar #popUpLoading
{
padding-top:6px;
}
#toolbar #favoritesOnline
{
float:left;
height:21px;
width:160px;
padding-top:4px;
border-right:1px solid #606060;
text-align:center;
}
#toolbar #favoritesOnline .favoritesOnlineIcon
{
padding-right:5px;
}
#toolbar #favoritesOnlinePopUp
{
display:block;
border:1px solid #000000;
width:191px;
background:#2b2b2b;
float:left;
position:absolute;
left:-1px;
top:-501px; /*auto;*/
height:500px;/*auto;*/
overflow:auto;
}
#toolbar #favoritesOnlineListing
{
font-size:12px;
}
<div id="toolbar">
<div id="favoritesOnline" style=" <?php if ($onlinestatus == -1) { echo "display:none;"; } ?> ">
<img class="favoritesOnlineIcon" src="/_assets/img/icons/favorite-small.gif" />Favorites Online (<span id="favoritesOnlineCount"><?php echo $favonlinecount; ?></span>)
<div id="favoritesOnlinePopUp">
<div id="popUpTitleBar">
<div id="popUpTitle">Favorites Online</div>
<div id="popUpAction">x</div>
</div>
<div id="favoritesOnlineListing">
<!-- Favorites online content goes here -->
</div>
</div>
</div>
</div>

Maybe you could remove the height property (make sure it's not set in the CSS) and let the DIV expand in height by itself.

Make it a float element and don't use a clearing element after it.

You should take out the CSS height:25px property in the toolbar, the contents will expand the container. Also, ID selector tags are unique and you can specify directly to them without having to reference the ancestor:
INCORRECT:
#toolbar #popUpAction { /*some css */ }
#toolbar #popUpAction a { /*some css */ }
CORRECT:
#popUpAction { /*some css */ }
#popUpAction a { /*some css */ }