Develop Reference

Javascript: Combine hover and click events

I have VERY recently started coding and been asked to code our company website from scratch.
I have coded a team page on the website with a PNG of each member of the team. At the moment when the user hovers over any of the PNGs they turn into a little animated GIF of them waving/doing something.
This is the javascript:
$(document).ready(function()
{
$("#imgAnimateBeth").hover(
function(){
this.src = "images/Team/Videos/Beth.gif";
},
function(){
this.src = "images/Team/Static-shots/Beth.png";
}
);
});
The issue I am having is that I also want to introduce a click state that would bring up a popup with a video of that person and their job description but I can't get it to work.
I have tried creating a CSS overlay but it refuses to work alongside the hover effect (JavaScript) so my assumption is that they don't play well together (??).
Below is the HTML for the section above. Can anyone enlighten me as to how this could be done? Simple language please!
<div class="teamsection">
<img src="images/Team/Static-shots/Beth.png" id="imgAnimateBeth">
<img src="images/Team/Static-shots/Kiemia.png" id="imgAnimateKiemia">
<img src="images/Team/Static-shots/Emma-B.png" id="imgAnimateEmmaB">
<img src="images/Team/Static-shots/Mathew.png" id="imgAnimateMathew">
<img src="images/Team/Static-shots/Sydney.png" id="imgAnimateSydney">
<img src="images/Team/Static-shots/Liz.png" id="imgAnimateLiz">
<img src="images/Team/Static-shots/Russ.png" id="imgAnimateRuss">
<img src="images/Team/Static-shots/Jill.png" id="imgAnimateJill">
<img src="images/Team/Static-shots/Merry.png" id="imgAnimateMerry">
<img src="images/Team/Static-shots/Caroline.png" id="imgAnimateCaroline">
<img src="images/Team/Static-shots/Charlotte.png" id="imgAnimateCharlotte">
<img src="images/Team/Static-shots/Lucien.png" id="imgAnimateLucien">
<img src="images/Team/Static-shots/Sarah.png" id="imgAnimateSarah">
<img src="images/Team/Static-shots/Emma-S.png" id="imgAnimateEmmaS">
<img src="images/Team/Static-shots/David.png" id="imgAnimateDavid">
<img src="images/Team/Static-shots/Kathryn.png" id="imgAnimateKathryn">
</div>
Also, if you need me to upload anything else, just shout.
The CSS overlay was like this:
The CSS code overlay was like this:
.popup {
display: none;
position: fixed;
padding: 30px 70px;
width: 700px;
height: 100%;
z-index: 20;
left: 50px;
top: 20px;
background: rgba(0, 0, 0, 0.9);
overflow: scroll;
}
With a little bit of Javascript:
$ = function(id) {
return document.getElementById(id);
}
var show = function(id) {
$(id).style.display ='block';
}
var hide = function(id) {
$(id).style.display ='none';
}
And I basically did this to the HTML:
<div>
<a href="javascript:void(0)" onclick="show('beth')">
<img src="images/Team/Static-shots/Beth.png" id="imgAnimateBeth">
</a>
</div>
<div class="popup" id="beth">
<div class="close-button">
<i class="fa fa-times" aria-hidden="true"></i> Close
</div>
<h4>CONTENT HERE</h4>
</div>

Maybe this will give you some ideas:
var members = document.querySelectorAll('.team-member');
members.forEach(function(member) {
member.addEventListener('mouseenter', memberShowGIF);
member.addEventListener('mouseleave', memberShowPNG);
member.addEventListener('click', memberVideo);
});
function memberShowGIF(event) {
this.src = this.dataset.gif;
}
function memberShowPNG(event) {
this.src = this.dataset.png;
}
function memberVideo(event) {
console.log('The video thing for: ' + this.id);
}
<div class="teamsection">
<img id="Beth" class="team-member"
src="https://via.placeholder.com/200?text=Beth.png"
data-png="https://via.placeholder.com/200?text=Beth.png"
data-gif="https://via.placeholder.com/200?text=Beth.gif">
<img id="Kiemia" class="team-member"
src="https://via.placeholder.com/200?text=Kiemia.png"
data-png="https://via.placeholder.com/200?text=Kiemia.png"
data-gif="https://via.placeholder.com/200?text=Kiemia.gif">
</div>
The most important learnings here are:
querySelectorAll (as a vanilla alternative to jQuery for selecting nodes)
addEventListener
Data attributes

change background image of buttons(each with its indivisual id) using jquery

I have tried to create a voting system similar to that in reddit. Each post have two buttons, and each button associated with specific post have different id. I have set the image of all the buttons as uncolored arrow.
<div class="details">
<li>AAAAA</li></div>
<div id="voting">
<div class="vote-up"><button id="up-e/aaaaa" title="Up" class="up " onclick="vote('e/aaaaa', 1,'swap')" ></button>
</div>
<div id="vote-score">
<div id="score-e/aaaaa"><span>51</span></div>
</div>
<div class="vote-down"><button id="down-e/aaaaa" title="Down" class="down" onclick="vote('e/aaaaa', 0, 'swap')" ></button>
</div></div>
</div>
<div id="content">
<div class="details">
<li>MIT</li></div>
<div id="voting">
<div class="vote-up"><button id="up-e/mit" title="Up" class="up " onclick="vote('e/mit', 1,'swap')" ></button>
</div>
<div id="vote-score">
<div id="score-e/mit"><span>40</span></div>
</div>
<div class="vote-down"><button id="down-e/mit" title="Down" class="down" onclick="vote('e/mit', 0, 'swap')" ></button>
</div></div>
</div>
This is the voting system which is working fine.
with this style
vote-up button{
height: 32px;
width: 32px;
border: 0;
background: url("upvote.png");
}
.vote-down button
{
height: 32px;
width: 32px;
border: 0;
background: url("downvote.png");
}
up to this each post has up and down arrow. when the user clicks the button the image of button should change, for that i have written this function in jquery
function vote(id, vote, userid){
if(!logged)
{
alert("You must be logged in to vote");
}
else {
if(vote==1){
$("#up-"+id).css({'background', 'url("upvoted.png")'});
$("#down-"+id).css('background', 'url("downvote.png")');
$("#up-"+id).attr('disabled', true);
$("#down-"+id).attr('disabled', false);
}
else {$("#down-"+id).css('background', 'url("downvoted.png")');
$("#up-"+id).css('background', 'url("upvote.png")');
$("#down-"+id).attr('disabled', true);
$("#up-"+id).attr('disabled', false);
}}
the "downvoted.png" and "upvoted.png" stores the images which are to be places in place of the former images when user clicks the button.
When i click the buttons the images are not changing.

You are using the .css method incorrectly. You need to have colons not commas between your attribute and the applier. Currently you have:
.css({'background', 'url("upvoted.png")'});
And you need to update it to:
.css({'background':'url("upvoted.png")'});
Or remove the brackets since you are only updating one style:
.css('background', 'url("upvoted.png")');
In addition you might be running into an issue with jQuery finding the Id since it has a slash in it. If you run into this issue use the following as your selector instead:
$("button[id*='down-" +id + "']")
And here is a working codepen:
http://codepen.io/egerrard/pen/EZvYpQ

Detect click inside applet

I have a applet and i want to catch when users do click inside, like a "onclick", this is my code (i´m working in FIREFOX):
<div class="col-sm-6" id="weight-display">
<div class="row the-box btn-info shadow" style="z-index:1;" >
<applet width="440" height="115" id="myApplet" MAYSCRIPT
archive="/applet/CWDisplayApplet-0.0.1-SNAPSHOT.jar"
code="com.dibal.cw.applet.CWDisplayApplet.class" >
<param name="permissions" value="all-permissions" />
</applet>
</div>
I put onclick inside divs but it don´t works.
I make a transparent div over applet but i´m working in FIREFOX, and it doesn't work, this is the transparent div:
<div class="pulsarapplet" style="background: white; position: absolute; top: 90px; left: 518px; width: 450px;height:115px;z-index:500001 " onclick="alert('BARRUAN')">
</div>
when I quit the color and convert this div in transparent... doesn't work.
I need help. Remember I using FIREFOX.

jQuery code working in testing but not on site

So I have the following code.
<script src="http://jamesleist.com/wp-content/uploads/2013/01/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('.me').hide();
$('.clickme').click(function() {
$(this).next('.me').animate({
height: 'toggle'
}, 500);
});
});
</script>
<div class="clickme" style="background-color: #333333; color: #FFFFFF; padding: 10px; width: 200px; cursor:pointer;">
Click here to toggle me in and out =)
</div>
<img class="me" src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png" alt="It's me....ah!!!" title="Allen Liu" width="100" height="77" class="alignnone size-full wp-image-552" style="border: none;" />
<div class="clickme" style="background-color: #333333; color: #FFFFFF; padding: 10px; width: 200px; cursor:pointer;">
Click here to toggle me in and out =)
</div>
<img class="me" src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png" alt="It's me....ah!!!" title="Allen Liu" width="100" height="77" class="alignnone size-full wp-image-552" style="border: none;" />
It works fine when running on its own, however when I implement this into the main site it does not work.
You can see where I have tried to implement it at the following URL.
http://jamesleist.com/portfolio
It is really confusing me :-( I am using Wordpress by the way and jQuery is linked to in the header.php file.
I am assuming this is a problem with Wordpress?
Many thanks in advance for your help.

.me is not the next element, the next element is a paragraph containing the image ?
$(document).ready(function() {
$('.me').hide();
$('.clickme').on('click', function() {
$(this).next('p').find('.me').animate({
height: 'toggle'
}, 500);
});
});

Your img tags have two class attributes defined. I'm not sure if this is 100% the cause, but that should definitely be fixed.
Like this:
<img class="me alignnone size-full wp-image-552" src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png" alt="It's me....ah!!!" title="Allen Liu" width="100" height="77" style="border: none;" />

Your images have 'class' defined twice, you can't do that. You need to include all your classes including the 'me' class inside one class declaration separated by spaces. A simple run through a validator shows the errors pretty clearly.
I would also consider moving your scripts both internal and external to the bottom of your page so that the dom isn't waiting on them to load. Moving all your inline styles into the stylesheet would be a good idea as well so your code is easier to read and debug.

Using this jQuery script for multiple divs

so I am totally new to jQuery and just tinkering at the moment, I am using a test script at the moment (below) what I want to achieve is to have images where when its clicked a div slides down with more info - similar to the new google images effect.
The problem with the script below is that it loads with the div open (I need it to open on click) and also, this will only work on one div, do I need to do the script multiple times for multiple divs?
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$('#clickme').click(function() {
$('#me').animate({
height: 'toggle'
}, 500
);
});
});
</script>
<div id="clickme" style="background-color: #333333; color: #FFFFFF; padding: 10px; width: 200px; cursor:pointer;">
Click here to toggle me in and out =)
</div>
<img id="me" src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png" alt="It's me....ah!!!" title="Allen Liu" width="100" height="77" class="alignnone size-full wp-image-552" style="border: none;" />

First of all, you cannot use the same ID for multiple elements. Instead, use a class. jQuery will only select the first occurrence of an ID and will ignore the rest.
Secondly, you will need to provide the function some context - i.e., $(this).next()- This is because when you have multiple elements with the clickme class, the browser will know that it will have to select the next occurring element with a class of me, instead of any other .me element.
$(document).ready(function() {
// Hide image onload
$('.me').hide();
// Provide context for each click event
$('.clickme').click(function() {
$(this).next('.me').animate({
height: 'toggle'
}, 500
);
});
});
HTML:
<div class="clickme" style="background-color: #333333; color: #FFFFFF; padding: 10px; width: 200px; cursor:pointer;">
Click here to toggle me in and out =)
</div>
<img class="me" src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png" alt="It's me....ah!!!" title="Allen Liu" width="100" height="77" class="alignnone size-full wp-image-552" style="border: none;" />

To start off with the div hidden, you can set it to display: none, either using inline styles or (preferably) a <style> element or CSS file.
Then you can uses classes and relative positioning to achieve what you're trying to do:
<script>
$(document).ready(function() {
$('img.clickable').click(function() {
$(this).prev('.image-info').first().animate({
height: 'toggle'
}, 500
);
});
});
</script>
<div style="background-color: #333333; color: #FFFFFF;
padding: 10px; width: 200px; cursor:pointer; display:none;"
class="image-info">
Info about the image you clicked
</div>
<img src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png"
alt="It's me....ah!!!" title="Allen Liu" width="100" height="77"
class="alignnone size-full wp-image-552 clickable" style="border: none;" />

Do what the above commenter suggested, and change your image to a class based approach.
Secondly, add this to the beginning of your document.ready block
$('.me').hide();
Fiddle here