We Keep Coding

How do I detect hover to elements inside of each() in jQuery?

Thanks for taking a look at my question.
I'm trying to be able to hover over portfolio items but I need to loop through them using each() because I need some way of identifying each item.
I'm trying to hover over .recent-work-item to show .recent-work-item__overlay the .show-none class does display:none;
Neither the hover nor the on.("mouseenter", function(){}) is working.
Here is the HMTL:
<section class="recent-work-item" data-portfolio-id="rwi-<?php echo $i;?>">
<div class="recent-work-item__overlay show-none">
<h3 class="color-white bolder-font"><?php the_title(); ?></h3>
VIEW CASE
</div>
<div class="recent-work-img">
<img src="<?php echo get_template_directory_uri();?>/assets/img/work1.jpg" class="portrait">
</div>
Here is the jQuery:
$.each($('.recent-work-item'), function(){
var thisid = $(this).attr("data-portfolio-id");
console.log(thisid);
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseenter', function(){
$(thisid).find('.recent-work-item__overlay').removeClass('show-none');
});
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseleave',function(){
$(thisid).find('.recent-work-item__overlay').addClass('show-none');
});
});
This is not working, I can't get the hover to work and all I want to do is add or remove a class, can I not do this in each().
I've researched thoroughly in StackOverflow but can't find an answer. I would REALLY appreciate any help I can get on this.

I have test your code in my codepen, and the problem you should use $(this) than use $(thisid)
$.each($('.recent-work-item'), function(){
var thisid = $(this).attr("data-portfolio-id");
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseenter', function(){
$(this).find('.recent-work-item__overlay').removeClass('show-none');
});
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseleave',function(){
$(this).find('.recent-work-item__overlay').addClass('show-none');
});
});
Here look at my codepen

Here I have added an example that shows how you could use CSS to show/hide elements. It might not give you exact answer to your problem, but it will help you change your stylesheets as per your requirement.
Essentially, as per the discussion in comments, I don't think you need javascript to design the page the way you need it.
.container {
padding: 10px;
border: 1px solid gray;
}
.container > .hideOnHover {
display: block;
}
.container > .showOnHover {
display: none;
}
.container:hover > .hideOnHover {
display: none;
}
.container:hover > .showOnHover {
display: block;
}
<div class="container">
<div class="hideOnHover">
This text will be hidden on hover.
</div>
<div class="showOnHover">
This text will be shown on hover.
</div>
</div>

jQuery :has selector filter trouble

I have some containers with ids="container1", "container2", "container3"...
They can have one of two types of tags inside: tables or canvas.
I want to hide one of them depending on the device orientation.
I have tried with this
$('[id^=container]:has(canvas)').hide();
or
$('[id^=container]:has(table)').hide();
but both hide all the containers, don't filtering their inside tags.

You can do
var x = $('[id^=container]').find("table").length;
// Will be 0 if no table inside it
if(x==0) { .. }
else { .. }

You can use classes on your containers instead of ids. Here's a JSFiddle demo.
For better performance in modern browsers, use $( "your-pure-css-selector" ).has( selector/DOMElement ) instead.
Source: https://api.jquery.com/has-selector/
Basically I made a 3 containers. One with a table, one with a canvas and one with nothing.
<div class="container green">
<table></table>
</div>
<div class="container blue">
<canvas></canvas>
</div>
<div class="container red"></div>
And a quick CSS to have the divs visible.
div.container{
display: inline-block;
height: 50px;
margin: 10px;
width: 50px;
}
div.green{
background-color: green;
}
div.blue{
background-color: blue;
}
div.red{
background-color: red;
}
And to complete it, a jQuery that executes when the document is ready.
$(document).ready(function(){
$('div.container').has('canvas').hide();
});

If you know the element by which you want to grab the container is not nested within additional tags, you can use the parentNode property of an HTML element to climb up the DOM tree and hide the parent.
document.querySelector("[id^=container] > table").parentNode.style.display= "none";
Example that demos the concept:
document.getElementById("input").addEventListener("change", function() {
document.getElementById("container1").style.display = "block";
document.getElementById("container2").style.display = "block";
document.querySelector("[id^=container] > " + this.value).parentNode.style.display = "none";
});
#container1 {
border: 1px solid red;
}
#container2 {
border: 1px solid blue;
}
<select id="input">
<options>
<option value="table">Hide the table</option>
<option value="canvas">Hide the canvas</option>
</options>
</select>
<div id="container1">Table
<table></table>
</div>
<div id="container2">Canvas
<canvas></canvas>
</div>

I didn't realized I had a global container with id= "container*".
What a silly mistake. Sorry for stealing your time, and thank you everyone!

Qualtrics JavaScript: Append an image over matrix text boxes

In Qualtrics, I am trying to create something like this:
https://dl.dropboxusercontent.com/u/8114735/Screen%20Shot%202015-05-12%20at%2017.49.17.png
The only way to have text boxes both next to and on top of each other is by using a matrix table with text entry. However, this only gives you the text boxes, without a space above the text entry box to insert an image. So I'm now trying to append these images using javascript. The ID of the text boxes is in the format of QR~QID17~3~2~TEXT (for the box on row 3, column 2).
Here is a sample I made of the text boxes in a 3x3 matrix.
https://eu.qualtrics.com/WRQualtricsSurveyEngine/?SID=SV_b30tGcjTmJWTlYN&SVID=&Preview=Block&ID=BL_enEP0YjUHaK5yPX&Q_DONT_SAVE=1
Does anyone know how you can append an image on top of these boxes? Thanks.

I will start with a working example:
Working Example
This uses numbers, in place of images, but is still a valid example.
First, you will select the "Position text above" option, and in the rows of text you will place the following code:
<td class="c4">1</td><td class="c5">2</td><td class="c6 last">3</td>
replacing 1,2,and 3 with the images for that row(you will have to use an image tag to get this to work in a friendly way).
Once you have setup all three of your rows, add the following to the question javascript:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place Your Javascript Below This Line*/
$$('.c1').each(
function (e) {
e.remove();
}
);
});
This hides a placeholder inserted by qualtrics and allows your rows to line up nicely!
Enjoy! Note though that this will likely require the images to be sized properly(I havent tested images)

How about using DIV container?
HTML
<div class="container">
<div class="box">
<div class="box-image">
<img src="http://lorempixel.com/output/city-h-c-150-230-4.jpg" />
</div>
<div class="box-input">
<input type="text" />
</div>
</div>
</div>
CSS
.box {
float: left;
width: 200px;
margin: 5px;
}
.container {
max-width:420px;
background:#CCCCCC;
overflow: hidden;
}
.box-image, .box-input {
text-align: center;
width: 100%;
}
.box-image {
background: #FFFFFF;
}
.box-input input{
margin-top: 2px;
width: 200px;
border: 1px solid #AAAAAA;
}
FIDDLE

Remove respective image onclick of close button

I have a one list page with edit column. When he click on edit it will open one edit page with all data which have list of image in thumbnail format.
Now I put close icon to all images.each image have its unique id.
1) When I click on close icon it will hide remove respective image.
2) onclick of submit I want available image ids.
PHP Code:-
<div id="<?=$rw['id'];?>" style="height:68px; width:86px; margin-right:10px; float:left;">
<img src="img/icons/close.png" style="float:right; vertical-align:top; height:18px; width:18px; z-index:9999;" >
<div style="height:50px; width:70px; border:1px solid #999; float:left; margin: 0 10px 0 0; box-shadow: 0 0 1px 1px #888888;">
<a class="group<?=$i;?>" href="<?=$img_gpath;?><?=$rw['upload_url'];?>" title="">
<img src="<?=$img_gpath.$rw['upload_url'];?>" style="height:50px; width:70px; z-index:999;" id="<?=$i;?>">
</a>
</div>
</div>
Please if you have any solution then share it with me.

add common class for div and dynamic id also
now you have only dynamic id;
if you use common class we can write jQuery like this
HTML
<div id="<?=$rw['id'];?>" class="common">
----elements
</div>
jQuery
jQuery('.common').on('click',function(){
var element_id=jQuery(this).attr('id'));// u will get dynamic id of div; after that u can do anything by using this id
});

An example fiddle is created. Please check.
Please give a class of remove-img to the remove buttons.
<img class="remove-img" src="url" />
Then you need to remove the parent division on click of the remove image like:
$('.remove-img').click(function(e) {
$( this ).parent().remove();
});

document.getElementById returns null for my drop-down select menu

I am trying to create a drop-down select menu with custom css (similar to the drop-down selection of language at http://translate.google.com/#).
I have current html code:
<ul id="Select">
<li>
<select id="myId"
onmouseover="mopen('options')"
onmouseout="mclosetime()">
<div id="options"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<option value="1" selected="selected">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</div>
</select>
</li>
</ul>
and the Javascript:
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
But document.getElementById returns null.
Though if I use the code with a div element that does not contain a select list the document.getElementById(id) returns proper div value.
How do I fix this? or is there a better way to create drop-down select menu like http://translate.google.com ?

You've got your div placed inside of the select tag. I'm not sure this is valid, try moving the div outside of the select tag. As far as a better way, the dropdown at the link you've provided isn't using a select tag at all. It is simply styled to look like a dropdown menu, and is using a hidden div with all of the links inside of it. I hope this helps! --> here's some free code to get you started. The CSS triangle trick comes at no extra charge ;)
<div id='fakeDropdown'>
<div class='triangle'> </div>
<div id='menu'>
<a href='#'> link </a>
<a href='#'> link </a>
<a href='#'> link </a>
<a href='#'> link </a>
</div>
</div>
CSS
#fakeDropdown{
background-color: #888;
height: 30px;
width: 150px;
cursor: pointer;
}
#menu{
display: none;
background-color: #888;
height: 200px;
width: 800px;
position: relative;
top: 30px;
}
.triangle{
font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid #000;
border-left: 10px solid #888;
border-right: 10px solid #888;
float: right;
margin-top: 5px;
}
JAVASCRIPT(assuming you're using jQuery)
$(document).ready(function(){
$('#fakeDropdown').hover(function(){
$(this).find('#menu').show('fast');
});
$('#fakeDropdown').mouseleave(function(){
$(this).find('#menu').hide('fast');
});
});
JSfiddle example

If you want a dropdown like Google Translate's, just look through the source code! There is no <select> element. It's almost entirely CSS.
http://jsfiddle.net/mattball/BA4v3/1/

That's because you can't nest a div tag within a select tag.
Google's fancy drop down is not a select tag at all, it's a set of div elements with the appropriate Javascript to accomplish something similar to a classic select element.
You'll need to change up your markup a bit for this to work out.

Here's a bunch of links to jQuery plugins/tutorials for creating custom drop-down menus.
http://vandelaydesign.com/blog/web-development/jquery-drop-down-menus/
http://www.hv-designs.co.uk/tutorials/sliding_menu/sliding_menu.html
http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

check the value of alert(id):
alert(id);
ddmenuitem = document.getElementById(id);