Develop Reference

Making a link from an animation (on hover) run by javascript in a tabular layout

I have the following code, a simple three column layout with an animation running on hover in each.
The animation works fine, but I cannot make the animation button a link. It has the image as the link, and if I change the href, it fails (which makes sense) but I cannot figure out where to add the link in.
<table style="width: 100%;" border="0">
<tbody>
<tr>
<td>
<a href="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-children-anim.gif" target="_blank">
<img src="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-children.gif"
data-orig="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-children.gif" width="323" height="323"></a>
</td>
<td>
<a href="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-teenagers-anim.gif" target="_blank"><img src="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-teenagers.gif"
data-orig="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-teenagers.gif" width="323" height="323"></a>
</td>
<td>
<a href="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-parents-anim.gif" target="_blank"><img src="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-parents.gif"
data-orig="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-parents.gif" width="323" height="323"></a>
</td>
</tr>
</tbody>
</table>
Run by the following javascript.
<script type="text/javascript">
$(function(){
$('table a img').hover(function(){
// on mouse enter
var customdata = $(this).parent().attr('href');
$(this).attr('src',customdata);
}, function(){
// on mouse leave
$(this).attr('src',$(this).attr('data-orig'));
});
});
</script>
Is on page here Link to homepage of site.

Your question is confusing.. I'm not sure what link you actually want or why your current implementation is wrong. I'm going to assume that you don't want a link to an image as the actual link. If that assumption is right, here's your answer...
<table style="width: 100%;" border="0">
<tbody>
<tr>
<td>
<a href="[Your Link Goes Here]" target="_blank">
<img
src="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-children.gif"
data-img="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-children.gif"
data-animation="http://www.gloshospitals.nhs.uk/templates/standard/images/paeds/for-children-anim.gif"
width="323" height="323"></a>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(function(){
$('table a img').hover(function(){
var element = $(this);
var animateUrl = element.data('animation');
element.attr('src', animateUrl);
}, function(){
var element = $(this);
var staticImage = element.data('img');
element.attr('src', staticImage);
});
});
</script>

On Click Event is not working in Chrome and FireFox, but works fine in the IE browers

I want the user to click on a td in a table to call a javascript function, but its working fine in the IE, but not in the chrome and firefox browser.
<td id="tdMon" class="space15" style="cursor: pointer;" onclick="HandleClick1(this);">
<div id="dvDay1" runat="server">
<div class="booking-day">
<asp:Label ID="lblDay1" runat="server" Text=""></asp:Label>
<asp:LinkButton ID="lnk1" runat="server" Text="" OnClick="lnk1_Click" CommandName="click"
CommandArgument=""></asp:LinkButton>
|&nbsp
<asp:Label ID="lblhr1" runat="server" Text="-- hr(s)" ForeColor="red"></asp:Label>
</div>
</div>
</td>
-- bottow of the page --
<script language='javascript' type='text/javascript'>
function HandleClick1(objTD) {
var lnk = objTD.getElementsByTagName("a");
if (lnk[0].disabled == false)
document.getElementById('<%=btn1.ClientID %>').click();
else
return false;
}
</script>

It's a bad idea to have inline functions/styles. Taking into account you already have an ID for your td:
function init(){
document.getElementById('tdTue').onclick=function(){};
}
window.onload=init;

If you want to go for something like jquery, this is probably a better model. I'm sure the function was just an example. This only triggers a click on TDs that have a data-link-rel attribute and it searches for the equivalent link.
$(function () {
$("table").on("click", "td[data-link-rel]", function () {
var linkRel = $(this).data("link-rel"),
selector = "a[data-link=" + linkRel + "]";
$(selector).trigger('click');
});
$("a").on("click", function () {
$("<li> I clicked on " + $(this).text() + "</li>").appendTo('ul');
});
});
JSFiddle with markup:
http://jsfiddle.net/D8yg9/

Showing/hiding div control according to RadioButtonList selected values using javascript

I am trying to make div control visible/invisible according to RadioButtonList selected values using javascript.
The div is embodied in FormView:
<asp:FormView ID="fv" runat="server" DataKeyNames="RootId"
DataSourceID="SomeDataSource" DefaultMode="Edit">
<EditItemTemplate>
<div class="SubTitle">
Fees
</div>
<table cellpadding="0" cellspacing="0" border="0" class="FormTable">
<tr>
<td class="FirstColumn">
<table cellpadding="0" cellspacing="0" border="0" class="FormTable">
<tr>
<td>
<asp:RadioButtonList ID="ftCtrl" runat="server" DataSource='<%# Eval("ftList") %>'
DataValueField="Key" DataTextField="Value" SelectedValue='<%# Bind("ft") %>'/>
</td>
</tr>
<tr>
<div runat="server" id="BreakdownDiv" style="display:none" >
...
And here is the script:
<script type="text/javascript">
$('#<%= fv.FindControl("ftCtrl").ClientID %>').find('input:radio').click(function() {
var Br = $('#<%= fv.FindControl("BreakdownDiv").ClientID %>');
if ($(this).next().html() == 'New') {
Br.show('slow');
}
else {
Br.hide('slow');
}
});
Here is the generated HTML:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$('#ctl00_ContentAreaMain_fv_Inv1_fv_BreakdownDiv').find('input:radio').click(function() {
var Br = $('#ctl00_ContentAreaMain_fv_Inv1_fv_BreakdownDiv');
if ($(this).next().html() == 'New') {
Br.show('slow');
}
else {
Br.hide('slow');
}
});
</script>
<table cellspacing="0" clientIDMode="static" border="0" id="ctl00_ContentAreaMain_fv_Inv1_fv" style="border- collapse:collapse;">
.
.
.
<div id="ctl00_ContentAreaMain_fv_Inv1_fv_BreakdownDiv" style="display:none">
Debugging the script I can see that the div control is being found but nothing happens - it's not being hide or shown when different radiobuttons are checked.
Does anyone have an idea what I am doing wrong?
Finally found what was the issue.
The Div I was trying to hide/show contained table and from some reason the table content wasn't hiden/shown. I've did some restructuring, removed the div and made the show/hide on the table itself.
Thanks everybody for your comments. Hope this help someone in the future.

Here is the sample code for hiding and showing divs based on selction of values.
OWNER is used as a constant here having the value "Owner".
$(":radio[id*=rbl_saleby]").change(function () {
var fetcheddata = $(".mainContainer").find("#saleby").find(":radio[id*=rbl_saleby]:checked").val();
if (fetcheddata == OWNER)
{
$("#saleby").show();
$("#salebyowner").show();
$("#salebyALA").hide();
}
});

In your CSS code make sure the div block is set to div{display:none}

only a function with 2 radio and a div
http://jsfiddle.net/forX/WGLQx/
$("input[type=radio][name=radio1]").change(function () {
if($(this).val()=='New')
{
$("div[id$=BreakdownDiv]").show('slow');
}
else
{
$("div[id$=BreakdownDiv]").hide('slow');
}
});
I'm not sure you can get the text of input radio. I used value instead.

Cannot access Preview button in Report View from button in DIV on same ASPX page

<div id='popup'>
<input id='btnConfirm'/>
</div>
$("#btnConfirm").click(function () {
var frame = $('#[id$=ReportViewer1ParameterArea]'); //get the frame
//s57 is a table element in the viewer
frame.contents().find("#Preview")
.click(
function () {
alert('hover!');
}
);
});
Below is part of the HTML rendered by Telerik Report Viewer
<iframe id="ctl00_ctl00_MainContent_MainContent_ReportViewer1ParametersArea" scrolling="auto" width="100%" height="0px" frameborder="0" align="left" src="/Telerik.ReportViewer.axd?instanceID=0001be3494c046c69b091014203c2914&culture=en-US&uiculture=en-US&optype=Parameters" style="height: 26px;">
<table id="parametersTable" cellspacing="0" cellpadding="0" border="0" style="width:100%;border-collapse:collapse;">
<tr id="parametersRow">
<td valign="middle" align="center" rowspan="2">
<input id="Preview" type="submit" onclick="return ParametersPage.Validate();" value="Preview" name="Preview">
</td>
</tr>
Question :
I need to access the Preview button ID="Preview" in the Report Viewer from a DIV that contains button with ID= btnConfirm on the ASPX page as given above in the JQuery script. The ASPX page contains the Telerik Report Viewer. I put code in the
$("#btnConfirm").click(function () event but that does not work. Can you give me ideas please?

Try using this selector:
var frame = $('[id$="ReportViewer1ParameterArea]"');
Removing the # and adding quotes " around the value.

The below code is what I developed to make my code work:
var reportFrame = document.getElementById('ctl00_ctl00_MainContent_MainContent_ReportViewer1ParametersArea');
var reportDocument = reportFrame.contentWindow.document;
var body = reportDocument.getElementsByTagName("body")[0];
$(body).contents().find("#Preview").click();

Can't make JavaScript work, is it an ID issue?

I'm trying to get a message to appear when a user clicks the image that's in a the "lifeCalculatorButton" ID, but I can't figure out how to make it work. I know that the html doc is referencing the js doc fine, so that's not the issue. Any ideas?
<html>
<head>
<link rel="Stylesheet" type="text/css" href="apps.css" />
<script type="text/javascript" src="apps.js"></script>
<title>my apps</title>
</head>
<body>
<div id="breaks">
<a href="http://info" > <img src="homeicon.png" /> </a>
<br>
<br>
<br>
<br>
<br>
<div id="appTable" style="float: left">
<table border="0" id="appTable">
<tr>
<td>life calculator</td>
</tr>
<tr>
<td>punny!</td>
</tr>
<tr>
<td>drink roulette (on its way!)</td>
</tr>
</table>
</div>
<div id="arrowTable" style="float: left">
<table border="0">
<tr>
<td id="lifeCalculatorButton"><img src="arrow1.png" width="45"</td>
</tr>
<tr>
<td id="punnyButton"><img src="arrow1.png" width="45"/></td>
</tr>
<tr>
<td id="drinkRouletteButton"><img src="arrow1.png" width="45"/></td>
</tr>
</table>
</div style="clear: both">
<div id="content">
my apps :)
</div>
And here's the JavaScript:
var foo = document.getElementById('lifeCalculatorButton');
foo.onClick = function (){
document.getElementById('content').innerHTML = 'foo';
};

Try changing the onclick event to all lowercase.
var foo = document.getElementById('lifeCalculatorButton');
foo.onclick = function (){
document.getElementById('content').innerHTML = 'foo';
};
EDIT
The below code works in both Firefox and IE. I've changed the event from foo.onClick to foo.onclick. Make sure your javascript block is at the end of the page or the call to getElementById will return null. Also, you should close the unclosed <img> tag and remove the style="clear: both" from the second to last closing </div> near the bottom of your page.
<html>
<head>
<link rel="Stylesheet" type="text/css" href="apps.css" />
<title>my apps</title>
</head>
<body>
<div id="breaks">
<img src="homeicon.png" />
<br /><br /><br /><br /><br />
<div id="appTable" style="float: left">
<table border="1" id="appTable">
<tr><td>life calculator</td></tr>
<tr><td>punny!</td></tr>
<tr><td>drink roulette (on its way!)</td></tr>
</table>
</div>
<div id="arrowTable" style="float: left">
<table border="1">
<tr><td id="lifeCalculatorButton"><img src="arrow1.png" width="45"/></td></tr>
<tr><td id="punnyButton"><img src="arrow1.png" width="45"/></td></tr>
<tr><td id="drinkRouletteButton"><img src="arrow1.png" width="45"/></td></tr>
</table>
</div>
<div id="content">
my apps :)
</div>
</body>
</html>
<script type="text/javascript">
var foo = document.getElementById('lifeCalculatorButton')
foo.onclick = function (){
document.getElementById('content').innerHTML = 'foo';
};
</script>
EDIT
If you are using an external javascript file you must use the window.onload event handler to register your handler to ensure the page has completely loaded.
window.onload = function () {
var foo = document.getElementById('lifeCalculatorButton')
foo.onclick = function (){
document.getElementById('content').innerHTML = 'foo';
};
};

First, you seem to have a typo here:
<td id="lifeCalculatorButton"><img src="arrow1.png" width="45"</td>
The <img> tag is not closed properly.
You also have to either move the <script> include at the bottom of your document or attach to the window load event to make sure that your script is executed after the elements in question appear in the DOM:
window.onload = function () {
var foo = document.getElementById("lifeCalculatorButton");
// ...
};

It may be overkill but this could be a good excuse to introduce yourself to jQuery or similar framework. It makes this kind of work trivial to implement. See this fiddle for a working examlpe using jQuery.
If you don't want to use jQuery your javascript looks ok as this fiddle works.
As others have said make sure you are not assigning the event handler until after the DOM is loaded. This is done in the pure javascript fiddle above using the following code
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var foo = document.getElementById('Clickable');
foo.onclick = function (){
alert("See It Works");
};
}//]]>
On a side note following a comment above, the cursor will not change on hover as the browser is still interpreting the element as what ever it is, in this case, a table cell. The only difference is that it now has an event assigned to it. To have the cursor change you will need to do this using CSS.

Does it need to be the td that holds the id? Why not use an a tag to wrap around the image (and as suggested close the img tag correctly with />). Apply the onclick to the a tag and call a function with a return false afterwords to bypass normal behavior... and obviously, in your onclick you can call whatever function u want