We Keep Coding

Click event not firing on GWT site

I am attempting to automate testing on the client side of a GWT built site.
I have been able to run through all the DOM elements and find the span element which is clickable I tried the click() method but it never fires.
This can only be done on the client-side. I cannot adjust the source code to contain any ID's or names.
Here is my HTML code from the scratch pad. This does find the div that contains the table and get the span tag which is inside the first td.
<div tabindex="1779" id="isc_8C" style="left: 0px; top: 62px; width: 1566px; height: 165px; overflow: hidden; display: inline-block; position: absolute; z-index: 201998; cursor: default; background-color: white;" onfocus="isc.EH.focusInCanvas(ResultsGrid_1_body,true);"
onblur="if(window.isc)isc.EH.blurFocusCanvas(ResultsGrid_1_body,true);" onscroll="return ResultsGrid_1_body.$lh()" eventproxy="ResultsGrid_1_body">
<div id="isc_8B" style="width: 1566px; position: relative; z-index: 1000;">
<form onsubmit="return false;" action="javascript:void(0)">
<div id="ResultsGrid_1_body$28s" style="width: 1px; height: 0px; overflow: hidden; display: none;"><span style='width: 1px; height: 0px; vertical-align: text-top; display: inline-block;'></span>
</div>
<table width="1550" class="listTable" id="isc_8Ctable" role="presentation" style="overflow: hidden; table-layout: fixed;" border="0" cellspacing="0" cellpadding="2">
<tbody>
<tr role="listitem" aria-selected="true" aria-posinset="1" aria-setsize="1">
<td width="396" align="left" class="tallCellSelectedOver" style="height: 16px; overflow: hidden;">
<span class="clickable">748754434564</span>
</td>
<td width="180" align="left" class="tallCellSelectedOver" style="height: 16px; overflow: hidden;">Jon, smith</td>
</tbody>
</table>
<div id="ResultsGrid_1_body$284" style="width: 1px; height: 0px; overflow: hidden; display: none;"><span style='width: 1px; height: 0px; vertical-align: text-top; display: inline-block;'></span>
</div>
</form>
</div>
</div>
And the script code is
$('div [eventproxy=ResultsGrid_1_body] table td span').click();
How can I perform a click on the span tag?

try to associate id with the span , then add the function just before the end of body tag or if including a js file, then call it just above the body tag, not at the starting.
<span id="sp"> </span>
working example can be seen here
https://jsfiddle.net/2b645Lup/5/

Element OverLap: DropDown Menu not overlapping the contents, instead pushes them down

I have a drop Down Menu, which when clicked upon, pushes the content below it to make space for its items.
However I would like for the drop down to overlap the contents below without pushing it down.
I tried a couple of things but they didnt work including z-index:1; on the drop down list.
<td valign="top" class="navigationLink" style="width: 20%" >
<div class="reportDiv">
<h:outputLabel value="Report" rendered="#{welcomeBean.report}" class="reportMenu"/>
<ul class="reportUL" >
<li><h:link value="Project Wise Report" outcome="/webpages/ProjectWiseReport.xhtml" rendered="true" class="reportItems"/></li>
<li><h:link value="Employee Wise Report" outcome="/webpages/EmployeeWiseReport.xhtml" rendered="true" class="reportItems"/></li>
</ul>
</div>
</td>
This is the drop down. This forms one row of the table in which i have placed the contents of the webpage.
When i click on My Account label, the ul drops down and the height of the table's row increases and pushes the row below it down.
I would like for the drop down to overlap the next row contents. How should i do that?
Some more code below and above it
<div class="container">
<!-- this is where the webpages starts from. The below table is where the main contents are -->
<table border="0" cellpadding="2" style="width: 100%; ">
<tr style="background-color: #95D0CA;">
<!-- contains header of page -->
<td colspan="2">
</td>
</tr>
<tr style=" position: relative; z-index:1;">
<td colspan="2" valign="top">
<!-- THIS IS WHERE I HAVE ADDED A NEW TABLE TO CONTAIN THE MENU ITEMS. THE DROP DOWN IS A (td) OF THIS TABLE -->
<table border="0" cellspacing="2" cellpadding="2" class="templateBody" style="width: 100%;">
<tr >
<td>
<!-- other menu items -->
</td>
<!-- DROP DOWN -->
<td valign="top" class="navigationLink" style="width: 20%" >
<div class="reportDiv">
<h:outputLabel value="Report" rendered="#{welcomeBean.report}" class="reportMenu"/>
<ul class="reportUL" >
<li><h:link value="Project Wise Report" outcome="/webpages/ProjectWiseReport.xhtml" rendered="true" class="reportItems"/></li>
<li><h:link value="Employee Wise Report" outcome="/webpages/EmployeeWiseReport.xhtml" rendered="true" class="reportItems"/></li>
</ul>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- NOW the Row which gets pushed down appears -->
<tr>
<td colspan="2" valign="top" style="width: 100%">
<div class="contentBody">
</div>
</td>
</tr>
</table>
</div>
I will show some snaps of how it looks. This might guide you guys to understand my problem.
Below an image of before drop down expands:
!(http://imgur.com/QauRGVc)
image after drop down expands:
!(http://imgur.com/VMlcCbp)
I have tried using jsFiddle as many of you suggested, but it wasnt showing my code as it is. So that was not serving the purpose. I hope this edit helps.
Please Help me. And do let me know if you need additional codes.
** Thank You in Advance :)**
**Edit**
Adding CSS and JAVA SCRIPT CODES
CSS CODE for the code i have provided
.navigationLink a
{
background-color: #95D0CA;
margin-top: 5px;
margin-bottom: 5px;
}
.navigationLink label
{
background-color: #95D0CA;
margin-top: 5px;
margin-bottom: 5px;
}
.reportMenu
{
text-decoration: none;
color: #216961;
font-weight: bold;
font-size: 15px;
display: block;
padding: 10px 5px 10px 5px;
text-align: center;
cursor: pointer;
}
.reportItems
{
color: white;
text-decoration: none;
font-weight: 400;
font-size: 15px;
padding: 10px;
background-color: #95D0CA;
text-align: center;
}
.container
{
width: 1000px;
background-color: whitesmoke;
padding: 10px;
margin: 50px auto;
position: relative;
}
.templateBody
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width: auto;
}
.templateBody td
{
text-align:center;
}
.contentBody
{
background-color: whitesmoke;
margin: 10px 0px 10px 0px;
width: 100%;
position: relative;
clear: both;
}
.reportUL
{
list-style-type: none;
position: absolute;
z-index: 1;
padding: 0;
margin: 0;
text-align: left;
}
.reportUL li
{
background-color: #95D0CA;
}
JQUERY CODE
$(document).ready(function()
{
$(".img, #img").show();
$("#loginWindow").hide();
$("#loginSlide").show();
$(".reportItems").hide();
$(".reportItems1").hide();
$("#loginSlide").click(function()
{
$("#loginWindow").slideToggle(200);
});
$(".toDate").datepicker();
$(".fromDate").datepicker();
$( "#accordion" ).accordion({
collapsible: true
});
$(".reportDiv").hover(function()
{
$(".reportItems").slideToggle(150);
});
$(".accountDiv").hover(function()
{
$(".reportItems1").slideToggle(150);
});
$(".mainLinks, .reportMenu, .reportItems, .reportMenu1, .reportItems1 ").hover(function()
{
$(this).css({"text-shadow":"0px 0px 5px #FFFFFF"});
}, function(){
$(this).css("text-shadow","none");
});
});

Take a look at following fiddles.
These are some nice drop down menu's you can build
Fidde 1
Fiddle 2

I just need to add the following CSS properties to the class reportUL of the the
un-ordered list (ul) i used to add the drop down menu:
the property required to overlap the drop down on the contents below is:
position: absolute;
and to make it show above / on top of the below content i used:
z-index: 1;
the complete and correct CSS for the class is:
.reportUL
{
list-style-type: none;
position: absolute;
z-index: 1;
padding: 0;
margin: 0;
text-align: left;
}

How to open popup window from each of dynamically generate tr

I am trying to open a popup window from a parent window. I have two tr and each tr has a apply button and as soon as I click on the apply button it will open a popup window.
But somehow, popup window gets opened for first tr only apply button meaning as soon as I click on the Apply Button for the first tr, popup window gets opened.
But for the second tr apply button, popup window doesn't gets opened.
I am not sure why it is not working.
Below is my full code.
<html>
<head>
<style>
* { font-family: Trebuchet MS; }
#containerdiv {width:90%; height: 90%; display: none; position: fixed;margin-top: 5%; margin-left: 5%; background:#FFF; border: 1px solid #666;border: 1px solid #555;box-shadow: 2px 2px 40px #222; z-index: 999999;}
/*#containerdiv iframe {display:none; width: 100%; height: 100%; position: absolute; border: none; }*/
#blockdiv {background: #000; opacity:0.6; position: fixed; width: 100%; height: 100%; top:0; left:0; display:none;}
ul { padding:10px; background: #EEE; position: absolute; height: 200px; overflow: scroll;}
ul li {color: #222; padding: 10px; font-size: 22px; border-bottom: 1px solid #CCC; }
h3 { font-size: 26px; padding:18px; border-bottom: 1px solid #CCC; }
#close { top: 13px;position: absolute;right: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
#close:hover { cursor: pointer; background: #E5E5E5 }
#apply { top: 13px;position: absolute;left: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
#apply:hover { cursor: pointer; background: #E5E5E5 }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
function open(url) {
$('#blockdiv').fadeIn();
$('#iframe').attr('src', url);
$('#containerdiv').fadeIn();
}
function close() {
$('#blockdiv').fadeOut();
$('#containerdiv').fadeOut();
}
$(document).ready(function() {
$('ul').css({width: $('#containerdiv').width(),height: $('#containerdiv').height()})
$('#close').click( function() { close() })
$('#JN_apply').click( function() { open($(this).data('url')); })
});
</script>
</head>
<body bgcolor="#F8F8F8">
<table width="850" border="0" align="left" style="table-layout:fixed; font-family:Arial, Helvetica, sans-serif; font-size:12px;" >
<tr bgcolor = "#C4D3D9" align = "center" height = "10" style="font-size:13px">
<th width = "65%">Description</th>
<th width = "10%">Apply</th>
</tr><tr align="left" style="margin-bottom:10px;">
<td style="word-wrap: break-word; border-top:none" valign="top">
<p><span style="font-size:14px; font-weight:bold">
Field Specialist Program
</span>
<br />
</td>
<td>
<input id= "JN_apply" type=button value="Apply" data-url="http://www.yahoo.com/">
</td>
</tr>
<tr align="left" style="margin-bottom:10px;">
<td style="word-wrap: break-word; border-top:none" valign="top">
<p><span style="font-size:14px; font-weight:bold">
Field Specialist Material
</span>
<br />
</td>
<td>
<input id= "JN_apply" type=button value="Apply" data-url="http://www.google.com/">
</td>
</tr>
</table>
<div id="blockdiv"></div>
<div id="containerdiv">
<iframe id="iframe" style="width:100%; height: 100%; outline: 1px solid red;"></iframe>
<span id="close">Close</span>
</div>
</body>
</html>
This is the jsfiddle that I have created. In that you will see that if you click on first Apply button then the popup will get open, but as soon as you click on the second apply button, the popup won't get open. Can anybody explain me why this is happening? And how to resolve this?

Your html is invalid: the id attribute is supposed to be unique. When you use the selector #JN_apply" it selects just one of the buttons (in most browsers this will be the first, as you have seen).
You should change each one to use a class instead of an id:
<input class="JN_apply" type=button value="Apply" data-url="http://www.yahoo.com/">
...and then change the jQuery selector to match:
$('.JN_apply').click( function() { open($(this).data('url')); })
Updated demo: http://jsfiddle.net/p3wgm/3/
Note also that it's not a good idea to create global functions called open() and close() because there are already built-in functions open() and close() and your functions will overwrite these. Perhaps openPopup() and closePopup() or similar? Or define them inside your document ready handler so that they're not global, which would probably be better regardless of the names. Or if they're only ever called from one place (like in your example) just put that code directly in the click handlers.

Ignore overlay div

I have an overlay with a hole in the middle functioning as a mask for the image underneath it. I want to drag the image around with draggable(). However, I can't find a solid way to ignore the overlay with my mouse(It's some TR's TD's creating a variable mask in the middle with javascript). I came across pointer-events: none though. And that's exactly what i need. I need to get it to work in IE8 too though. So i need a more X-browser friendly solution.
Any help is appreciated.
<div class="workspace">
<!-- <div id="color_overlay"></div> -->
<table border="0" cellpadding="0" cellspacing="0" class="overlay">
<tr>
<td colspan="3"> </td>
</tr>
<tr id="drawbox_tr">
<td class="drawbox_side"></td>
<td id="drawbox"> x</td>
<td class="drawbox_side"></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</table>
<div id="image"></div>
</div>
And CSS:
.container .workspace {
float: left;
width: 75%;
height: 100%;
overflow: hidden;
background: pink;
position: relative;
}
.workspace .overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
margin: 0px;
padding: 0px;
cursor: pointer;
}
.workspace .overlay td, .workspace .overlay tr {
margin: 0px;
padding: 0px;
}
.workspace .overlay td {
opacity: 0.5;
}
.workspace #image {
position: absolute;
z-index: 1;
border: 1px solid #000;
}
edit:
I've made a little demo of the pointer-event(http://www.envyum.nl/pointer/). In Chrome for example it works like a charm by making the pointer-event: none. In IE8 nothing happens. But i still need it for IE8 though. There must be some workaround which makes it ignore the overlay and make the image below it resizable and draggable, right?

I have read a simulair topic about 'pointer events' on SO before.
Pointer-events is a Mozilla hack and where it has been implemented in Webkit browsers, you can't expect to see it in IE browsers for another million years.
Please check if this is worth trying: css 'pointer-events' property alternative for IE

Trying to get my HTML 5 audio player to play more than one file on the same page

I have coded a simple HTML5 audio player (javascript and css) thats starts when the user clicks play. I have got it to work with one file on the page. I have copied and pasted the code several times so I can have several files on the same page, the player breaks and won't play any of them. Please, any help is appreciated! Below is my HTML:
<div id="audioplayer">
<audio id="audio" src="052011.mp3"></audio>
<span id="playpause" title="Play/Pause">Play</span>
<script type="text/javascript" src="audioplayer-min.js"></script>
Here is the css:
/* globals */
html {
font:62.5%/1 "Droid Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
background: url('background.png');
background-repeat: no-repeat
}
body {
margin: 0 auto;
text-align: center;
}
#audioplayer {
display: block;
overflow: hidden;
width: 30px;
height: 30px;
position: relative;
}
.play,.pause {
background: #fff;
width: 20px;
height: 20px;
border-radius: 10px;
position: absolute;
margin: 5px;
display: block;
overflow: hidden;
text-indent: -1000px;
}
.play:after {
border-color:transparent transparent transparent #000;
border-style:solid;
border-width: 5px 5px 5px 10px;
width:0;
height:0;
position: absolute;
top: 5px;
left: 6px;
content: '';
}
.pause:after {
border-color: #000;
background: #fff;
border-style:solid;
border-width: 0 3px 0 3px;
width:2px;
height:10px;
position: absolute;
top: 5px;
left: 6px;
content: '';
}
And last but not least my Javascript:
var audio=document.getElementById("audio");var canvasWidth=canvasHeight=30;var radius=canvasWidth/2;var audioplayer=document.getElementById("audioplayer");canvas=document.createElement("canvas");canvas.setAttribute("width",canvasWidth);canvas.setAttribute("height",canvasHeight);canvas.setAttribute("id","canvas");audioplayer.appendChild(canvas);function updateUI(){var f=audio.currentTime;var g=audio.duration;var b=document.getElementById("canvas");var e=b.getContext("2d");var a=y=radius=canvasWidth/2;var d=-Math.PI/2;var c=d+((f/g)*Math.PI*2);b.getContext("2d").clearRect(0,0,canvasWidth,canvasHeight);e.fillStyle="#000";e.beginPath();e.moveTo(a,y);e.arc(a,y,radius,d,c,false);e.closePath();e.fill()}audio.addEventListener("play",function(a){document.getElementById("playpause").innerHTML='Pause'},true);audio.addEventListener("pause",function(a){document.getElementById("playpause").innerHTML='Play'},true);audio.addEventListener("ended",function(a){document.getElementById("playpause").innerHTML='Play'},true);document.getElementById("playpause").addEventListener("click",function(){if(audio.paused){audio.play()}else{if(audio.ended){audio.currentTime=0;document.getElementById("playpause").innerHTML='Pause';audio.play()}else{audio.pause()}}},true);audio.ontimeupdate=updateUI;audio.addEventListener("timeupdate",updateUI);
Iframe added to the HTML:
<tbody>
<tr>
<td style="vertical-align: top;">
<div id="audioplayer">
<audio id="audio" src="052011.mp3"></audio>
<span id="playpause" title="Play/Pause">Play</span>
<script type="text/javascript" src="audioplayer-min.js"></script>
</div>
<br>
</td>
<td style="vertical-align: top;">
<div style="text-align: right;">
</div>
<div style="text-align: right;"><big><big><span style="font-weight: bold;"><small><span class="style2"><span class="style6">May 6, 2011 <span style="font-style: italic;">(Right Click and select Save As to download to your iPod or other MP3 player)</span></span></span></small></span></big></big><br>
<big>
</big></div>
</td>
</tr>
<tr>
<td style="vertical-align: top;"> <iframe src=<div id="audioplayer">
<audio id="audio" src="052011.mp3"></audio>
<span id="playpause" title="Play/Pause">Play</span>
<script type="text/javascript" src="audioplayer-min.js"></script>"></iframe> <br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</table>

A couple of months ago I built a jQuery plugin that replaces element with a little of custom HTML code. By adding some CSS you get a whole new player which looks the way you want and has the same functionality as the default player. There is no direct way to style the element. But the HTML5 DOM has methods, properties, and events for the element and thus makes it quite easily manipulable.
try this
http://osvaldas.info/audio-player-responsive-and-touch-friendly

Try to enclosure another player in Iframe or HTML tag