So, I have a small table with some content, which with the click of a button can be expanded to show a container div with extra content.
I'm trying to tie a function to this action, but when I do, the function seems to get fired once per number of table row.
JSFiddle:
https://jsfiddle.net/jtby9c12/
Table:
<button id="toggle-descriptions-button">+</button>
<table>
<tbody>
<tr>
<th class="table-header-1">Download</th>
<th class="table-header-2">Size</th>
<th class="table-header-3">Notes</th>
</tr>
<tr>
<td class="column-1">Item
<div class="div-container" style="display: block;">
<div class="div-gallery">
<img src="#">
<br style="clear: both">
</div>
<div class="div-description">Description Text</div>
</div>
</td>
<td class="column-2">1.2MB</td>
<td class="column-3">Note</td>
</tr>
</tbody>
</table>
*The actual table contains 22 rows and descriptions, this just shows the structure sample.
Jquery:
var descriptions = $(".div-container")
var descButton = $("#toggle-descriptions-button")
descButton.click(function(){
console.log("Button Clicked!")
descriptions.toggle(400, function() {
console.log("I'm a fucntion!")
});
});
As you can see, it calls the function 22 times, and I'm trying to get it to call just once.
I'm looking to get a single call back for the function, it's one state change for all descriptions, I only need one return.
To achieve this you can use the promise() returned from the toggle() calls. Attach a done() event handler to it, which will fire after all the promises have been resolved:
var $descriptions = $(".div-container")
var $descButton = $("#toggle-descriptions-button")
$descButton.click(function() {
console.log("Button Clicked!")
$descriptions.toggle(400).promise().done(function() {
console.log("I'm a function!")
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle-descriptions-button">+</button>
<table>
<tbody>
<tr>
<th class="table-header-1">Download</th>
<th class="table-header-2">Size</th>
<th class="table-header-3">Notes</th>
</tr>
<tr>
<td class="column-1">Item
<div class="div-container" style="display: none;">
<div class="div-gallery">
<img src="#">
<br style="clear: both">
</div>
<div class="div-description">Description Text</div>
</div>
</td>
<td class="column-2">1.2MB</td>
<td class="column-3">Note</td>
</tr>
<tr>
<td class="column-1">Item
<div class="div-container" style="display: none;">
<div class="div-gallery">
<img src="#">
<br style="clear: both">
</div>
<div class="div-description">Description Text</div>
</div>
</td>
<td class="column-2">1.2MB</td>
<td class="column-3">Note</td>
</tr>
<tr>
<td class="column-1">Item
<div class="div-container" style="display: none;">
<div class="div-gallery">
<img src="#">
<br style="clear: both">
</div>
<div class="div-description">Description Text</div>
</div>
</td>
<td class="column-2">1.2MB</td>
<td class="column-3">Note</td>
</tr>
</tbody>
</table>
Related
I want to remove class only selected row because in a laravel foreach loop I have multiple rows like this:
<tr>
<td>
<a class="remove-d-none">Use</a>
<div class="d-none manue">
</div>
</td>
</tr>
<tr>
<td>
<a class="remove-d-none">Use</a>
<div class="d-none manue">
</div>
</td>
</tr>
I wanted it so that if the user clicks on first row only, its class should be removed so I tried this:
$('.remove-d-none').on('click', function(){
$('.menu').removeClass('d-none');
});
But it doesn't seem to work. Does somebody know how to help?
$('.remove-d-none').on('click', function() {
$(this).siblings(".manue").removeClass("d-none");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<td>
<a class="remove-d-none">Use</a>
<div class="d-none manue">
</div>
</td>
</tr>
<tr>
<td>
<a class="remove-d-none">Use</a>
<div class="d-none manue">
</div>
</td>
</tr>
</table>
This is my table, of course with some text in it, and I want on a button click to hide it, and show some images. I also want to reverse the action on the same button click. How can I do that?
<div id="aspect" style="display:yes">
<table style="100%" id="Table">
<tr>
<th id="textul" > </th>
<th id="textul4"> </th>
</tr>
<tr>
<td id="testul2and3" style="vertical-align:top"> </td>
<td style="vertical-align:top" id="textul6">
<p> <iframe></iframe> </p>
</td>
</tr>
</table>
</div>
you can start with jQuery .toggle() method
$("button").click(function(){
$("img").toggle();
});
this will work as you need
Have a look here: http://api.jquery.com/toggle/
Please have a look at this code sample. I have used jQuery 2.1.1
$(function() {
$('#toggler').click(function() {
$('#Table').toggle();
$('#imageblock').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aspect">
<div style="display:none;" id="imageblock">
<img src="http://lorempixel.com/400/200/" />
</div>
<table id="Table">
<tr>
<th id="textul" > </th>
<th id="textul4"> </th>
</tr>
<tr>
<td id="testul2and3" style="vertical-align:top"> </td>
<td style="vertical-align:top" id="textul6">
<p> <iframe></iframe> </p> </td>
</tr>
</table>
</div>
<button id="toggler">Toggle Image/Table</button>
I want to find text inside div parent with table, if i write any text inside my search bar i want to show only the result and the rest of the divs hidde, i have differents td that i want search in the four cells (left to rigth) the last cell is not important
This is my HTML:
<div class="caja-orden-curso" alt="3">
<div class="contenido-curso">
<table id="perrito" border="1" style="width:98%">
<tr>
<td width="220" height="100">
<div id="vehicle_type" class="top-order">
36624
</div>
</td>
<td width="200">
<div id="step_form_1" class="order-steps">
<span id="created">02/02/2016 10:59</span>
</div>
</td>
<td width="300">
<div class="order-details-top" style="height: 14px;">presidente masaryk, 29, , polanco</div>
<div class="order-details-bottom" style="height: 23px;">colima, 323, , roma norte</div>
</td>
<td width="120">
<div class="order-details-top">
alexis
<div>
<div class="order-details-bottom">
saul
</div>
</td>
<td width="120">
565897423
</td>
</tr>
</table>
</div>
<div class="color-lateral-curso">
</div>
<div class="tam-tabla-orden">
</div>
</div>
<div class="caja-orden-curso" id="statu-20" alt="12">
<div class="contenido-curso">
<table id="perrito" border="1" style="width:98%">
<tr>
<td width="220" height="100">
<div id="vehicle_type" class="top-order">
35684
</div>
</td>
<td width="200">
<div id="step_form_1" class="order-steps">
<span id="created">01/02/2016 10:59</span>
</div>
</td>
<td width="300">
<div class="order-details-top" style="height: 14px;">yumnbvfd, 78984,</div>
<div class="order-details-bottom" style="height: 23px;">jhgfre, 483</div>
</td>
<td width="120">
<div class="order-details-top">
rtynbv
<div>
<div class="order-details-bottom">
zsdf
</div>
</td>
<td width="120">
565897423
</td>
</tr>
</table>
</div>
<div class="color-lateral-finalizada-segundo" id="statu-9">
</div>
<div class="tam-tabla-orden">
</div>
</div>
And this is my Script:
$("#buscador").keyup(function() {
var dInput = $(this).val();
if (!this.value) {
$('div.caja-orden-curso').fadeIn();
}
else
{
$("table#perrito").each(function()
{
$(this).find('div.top-order:contains(' + dInput + ')').length > 0 ?
$(this).show() : $(this).parents('div.caja-orden-curso').fadeOut();
});
}
});
My example only work with the first cell with the other three cells i cant.
This is my fiddle
IDs in a page must be unique. So change id="perrito" to class="perrito" and do the following.
$("table.perrito").each(function() {
if ($(this).find('div:contains(' + dInput + ')').length)
$(this).parents('div.caja-orden-curso').fadeIn();
else
$(this).parents('div.caja-orden-curso').fadeOut();
});
DEMO
Here you used find funtion on "top-order" class only.if you want work with all 4 cells then you apply this class on all of three cells also. You may try this
<div class="caja-orden-curso" alt="3">
<div class="contenido-curso">
<table id="perrito" border="1"style="width:98%">
<tr>
<td width="220" height="100">
<div id="vehicle_type" class="top-order">
36624
</div>
</td>
<td width="200">
<div id="step_form_1" class="order-steps top-order">
<span id="created">02/02/2016 10:59</span>
</div>
</td>
<td width="300">
<div class="order-details-top top-order" style="height: 14px;">presidente masaryk, 29, , polanco</div>
<div class="order-details-bottom top-order" style="height: 23px;">colima, 323, , roma norte</div>
</td>
<td width="120">
<div class="order-details-top top-order">
alexis
<div>
<div class="order-details-bottom top-order">
saul
</div>
</td>
<td width="120">
565897423
</td>
</tr>
</table>
</div>
<div class="color-lateral-curso">
</div>
<div class="tam-tabla-orden">
</div>
</div>
<div class="caja-orden-curso" id="statu-20" alt="12">
<div class="contenido-curso">
<table id="perrito" border="1"style="width:98%">
<tr>
<td width="220" height="100">
<div id="vehicle_type" class="top-order">
35684
</div>
</td>
<td width="200">
<div id="step_form_1" class="order-steps top-order">
<span id="created">01/02/2016 10:59</span>
</div>
</td>
<td width="300">
<div class="order-details-top" style="height: 14px;">yumnbvfd, 78984,</div>
<div class="order-details-bottom top-order" style="height: 23px;">jhgfre, 483</div>
</td>
<td width="120">
<div class="order-details-top top-order">
rtynbv
<div>
<div class="order-details-bottom top-order">
zsdf
</div>
</td>
<td width="120">
565897423
</td>
</tr>
</table>
</div>
<div class="color-lateral-finalizada-segundo" id="statu-9">
</div>
<div class="tam-tabla-orden">
</div>
</div>
If you want search or sort or ... on table , you can use DataTables jQuery plugins
Pagination, instant search and multi-column ordering
Supports almostany data source: Easily theme-able: DataTables, jQuery
UI, Bootstrap, Foundation
Ajax auto loading of data
and ...
$('#myTable').DataTable();
DataTables jQuery plugins
I'm actually having the same problem like as in How to prevent jQuery .toggle() to show/hide all within .on 'click' but it didn't help so I'm making my own question.
Is there anyway to prevent toggle to show all but instead show only the neccesary toggle for the user to click? (extra topping -> extra_toppings selected) I did try with my minimum knowledge of using IDs as well this, next(), parents() but with no success.
Here's my code:
JavaScript
$(".extra_topping").click(function() {
$(".extra_toppings").toggle('slow');
});
HTML
(inside a loop over all foods: #foods.each do |food| ...)
<div class="extra_topping">
<a>Click Me!</a>
</div>
<div class="extra_toppings">
<a> Show </a>
</div>
I shortened to original HTML to just this to simplify the problem.
Here are my actual code look like : (without the rails code)
<table class="table">
<thead >
<tr>
<th>Name</th>
<th>Price</th>
<th>Category</th>
<th>Quantity</th>
<th>Actions</th>
<th>Additional Menu</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
<td id="food" style="font-weight:bold;">
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
<div class="extra_topping">
<a>Click me!</a>
</div>
</td>
</tr>
<tr class="extra_toppings">
<td>
</td>
<td colspan="4">
<div class= "mediocre">
<div class= "xaxixo">
<h6>Our Additional Menu</h6>
</div>
<div class="extra_topping">
</div>
<table class="mediocre_table">
<tr>
<td>
<div class="full_mediocre">
<div class="mediocre_collumn">
</div>
</div>
</td>
</tr>
</table>
</div>
</td>
<td>
</td>
</tr>
</tbody>
You could use:
$(".extra_topping").click(function(){
$(this).next('.extra_toppings').toggle('slow');
});
If that was what your markup always looked like, e.g.
<div class="extra_topping">
<a>Click Me!</a>
</div>
<div class="extra_toppings">
<a> Show </a>
</div>
<div class="extra_topping">
<a>Click Me!</a>
</div>
<div class="extra_toppings">
<a> Show </a>
</div>
jsFiddle here.
I'm finally make it work by changing the code from:
$(".extra_topping").click(function(){
$(this).next('.extra_toppings').toggle('slow');
});
into:
$(".extra_topping").click(function(){
$(this).parents('tr').next().toggle('slow')
});
It Works!
SOLUTION 8/9/2012 9:54 EDT
Embarrassing as it is, we were able to track down the issue to the browser settings. Active scripts were disabled. Thanks to everyone who posted. I appreciate your time & effort. ~~~~~~~~~~~~~~~~~~~~~~~~~~
I recently started on a new MVC3 application and we are using jQuery 1.7.2. Currently our code works in Chrome, Firefox and IE7 & 9. Unfortunately it is not working in IE8. It doesn't matter what jQuery function (mouseover, mouseout, hover, click, etc.) we are trying to use.
So far I have tried the following without any luck.
using absolute path reference to jQuery and js files
move js code directly onto _Layout.cshtml
verify type="text/javascript"
reduce code to just Alert("any text"); and verify in an alternate browser
add background-color
remove reference to "Menu.js" to test if the very simple code in Shared.js works
I am trying to get the .hover action to work on the _ActionItems partial view. The jQuery for this is in Menu.js. I figured if I can get that to work, the rest will probably have a similar solution that I can figure out.
If there is anything else you need to see, just let me know. Thanks in advance for the help.
_Layout.cshtml
#using eRecruitBoard.ExtensionMethods
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>#ViewBag.Title</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic' rel='stylesheet' type='text/css'/>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.2.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/Shared.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/Menu.js")" type="text/javascript"></script>
</head>
<body>
<div class="wrapper">
<div class="aboveHeader">
<div class="aboveHeaderLeft">#Html.Partial("_ERBLogo")</div>
<div class="aboveHeaderRight">
<div class="ERBESBButtons">#Html.Partial("_ERBESBButtons")</div>
<div class="welcome">#Html.Partial("_Welcome")</div>
</div>
</div>
<div class="headerBar">
<div class="headerActions">#Html.Partial("_ActionItems")</div>
<div class="headerMenu">#Html.Action("Menu", "Menu")</div>
<div class="headerTitle">#Html.Action("HeaderTitle","Segment")</div>
</div>
<div class="content">
#RenderBody()
</div>
<div class="Push"></div>
</div>
<div class="footerWrapper">
<div class="footer">
<div class="footerLeft"></div>
<div class="footerRight"></div>
<div class="footerRightContent">#Html.ActionLink("Privacy Policy", "PrivacyPolicy", "Home")</div>
<div class="footerLeftContent">© Copyright 2012 - All Rights Reserved</div>
</div>
</div>
</body>
</html>
_ActionItems.cshtml
#if (eRecruitBoard.WebLibrary.CommonFunctions.IsAuthenticated)
{
#Html.ImageActionLink("../../Images/Header/FavoriteIcon.png", "FavoritesIcon", "Add", "Favorites", null, null, new { #class = "over", title="Add to favorites", style="border:0;" })<text> </text>
<img src="../../Images/Header/CalendarIcon.png" title="Schedule this report" alt="CalendarIcon" class="over"/><text> </text>
<img src="../../Images/Header/EmailIcon.png" title="Email this report" alt="EmailIcon" class="over"/><text> </text>
<img src="../../Images/Header/PrintIcon.png" title="Print" alt="PrintIcon" class="over"/>
}
else
{
}
Shared.js
// Hover image
$(document).ready(function () {
$(function () {
$("img.over").each(function () {
var t = $(this);
var src1 = t.attr("src"); // initial src
var newSrc = src1.substring(0, src1.lastIndexOf(".")); // let's get file name without extension
t.hover(function () {
$(this).attr("src", newSrc + "Over." + /[^.]+$/.exec(src1)); //last part is for extension
}, function () {
$(this).attr("src", newSrc + "." + /[^.]+$/.exec(src1)); //removing 'Over' from the name
});
});
});
});
UPDATE - I removed the menu.js code so I could add the browser source. I am focusing on the Shared.js code for now as it's much simple and causes no action even when Menu.js is totally removed.
Sample of browser source - Mind you this is one of the test I was running where I moved the jQuery directly onto the page and I added the alert. Regardless, this doesn't work as well.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>eRecruitBoard</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic' rel='stylesheet' type='text/css'/>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
// Hover image
$(document).ready(function () {
$(function () {
$("#container").hover('',function(){
alert("Out");
});
});
});
$(document).ready(function () {
$(function () {
$("img.over").each(function () {
var t = $(this);
var src1 = t.attr("src"); // initial src
var newSrc = src1.substring(0, src1.lastIndexOf(".")); // let's get file name without extension
t.hover(function () {
$(this).attr("src", newSrc + "Over." + /[^.]+$/.exec(src1)); //last part is for extension
}, function () {
$(this).attr("src", newSrc + "." + /[^.]+$/.exec(src1)); //removing 'Over' from the name
});
});
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="aboveHeader">
<div class="aboveHeaderLeft"><img alt="eRecruitBoard" src="../../Images/eRecruitBoardLogo.png" style="border:0;" /></div>
<div class="aboveHeaderRight">
<div class="ERBESBButtons"><img src="../../Images/Header/ERBOn.png" alt="eRecruitBoard On"/><img src="../../Images/Header/ESBOff.png" alt="eScoreBoard Off"/>
</div>
<div class="welcome">Welcome Firstname Lastname
Admin |
Logout</div>
</div>
</div>
<div class="headerBar">
<div class="headerActions"><img alt="FavoritesIcon" class="over" src="../../Images/Header/FavoriteIcon.png" style="border:0;" title="Add to favorites" />
<img src="../../Images/Header/CalendarIcon.png" title="Schedule this report" alt="CalendarIcon" class="over"/>
<img src="../../Images/Header/EmailIcon.png" title="Email this report" alt="EmailIcon" class="over"/>
<img id="container" src="../../Images/Header/PrintIcon.png" title="Print" alt="PrintIcon" class="over"/>
</div>
<div class="headerMenu"><img src="../../Images/Header/MenuIcon.png" id="MenuIcon" title="Click to open the menu" alt="MenuIcon" class="over"/>
<table class="menuTable" id="menuTableId" cellspacing="0" cellpadding="0">
<thead>
<tr class="scrollUpArrow">
<th>
</th>
</tr>
</thead>
<tfoot>
<tr class="scrollDownArrow">
<td>
</td>
</tr>
</tfoot>
<tbody id="contents" class="tablebody" style="overflow:hidden">
<tr class="trmenuClass" id=favoritestrId>
<td class="cellBackground">
<div class="minusSign" id=favoritesMinusSignId>
<div class=favIcon id=divFavoritesid>
<div class="cellName">
Favorites
</div>
</div>
</div>
</td>
</tr>
<tr class="favtrClass" id="submenufavouritestrId">
<td class="subMenuCell" id="idFavorites">
<div class="subMenuCellName">
1st name
</div>
</td>
</tr>
<tr class="favtrClass" id="submenufavouritestrId">
<td class="subMenuCell" id="idFavorites">
<div class="subMenuCellName">
2nd name
</div>
</td>
</tr>
<tr class="favtrClass" id="submenufavouritestrId">
<td class="subMenuCell" id="idFavorites">
<div class="subMenuCellName">
3rd name
</div>
</td>
</tr>
<tr class="trmenuClass" id=dashboardtrId>
<td class="cellBackground">
<div class="minusSign" id=dashboardMinusSignId>
<div class=dashboardIcon id=divDashBoardid>
<div class="cellName">
Dashboard
</div>
</div>
</div>
</td>
</tr>
<tr class="dashboardtrClass" id="submenudashboardtrId">
<td class="subMenuCell" id="idDashboard">
<div class="subMenuCellName">
Dashboard Item 1
</div>
</td>
</tr>
<tr class="dashboardtrClass" id="submenudashboardtrId">
<td class="subMenuCell" id="idDashboard">
<div class="subMenuCellName">
Dashboard Item 2
</div>
</td>
</tr>
<tr class="dashboardtrClass" id="submenudashboardtrId">
<td class="subMenuCell" id="idDashboard">
<div class="subMenuCellName">
Dashboard Item 3
</div>
</td>
</tr>
<tr class="trmenuClass" id=connecttrId>
<td class="cellBackground">
<div class="minusSign" id=connectMinusSignId>
<div class=connectIcon id=divConnectid>
<div class="cellName">
Connect
</div>
</div>
</div>
</td>
</tr>
<tr class="connecttrClass" id="submenuconnecttrId">
<td class="subMenuCell" id="idConnect">
<div class="subMenuCellName">
Joe Smith
</div>
</td>
</tr>
<tr class="connecttrClass" id="submenuconnecttrId">
<td class="subMenuCell" id="idConnect">
<div class="subMenuCellName">
Erin Jones
</div>
</td>
</tr>
<tr class="connecttrClass" id="submenuconnecttrId">
<td class="subMenuCell" id="idConnect">
<div class="subMenuCellName">
Owen Alexander
</div>
</td>
</tr>
<tr class="trmenuClass" id=hiretrId>
<td class="cellBackground">
<div class="minusSign" id=hireMinusSignId>
<div class=hireIcon id=divHireid>
<div class="cellName">
Hire
</div>
</div>
</div>
</td>
</tr>
<tr class="hiretrClass" id="submenuhiretrId">
<td class="subMenuCell" id="idHire" >
<div class="subMenuCellName">
Clair Brown
</div>
</td>
</tr>
<tr class="trmenuClass" id=retaintrId>
<td class="cellBackground">
<div class="minusSign" id=retainMinusSignId>
<div class=retainIcon id=divRetainid>
<div class="cellName">
Retain
</div>
</div>
</div>
</td>
</tr>
<tr class="retaintrClass" id="submenuretaintrId">
<td class="subMenuCell" id="idRetain">
<div class="subMenuCellName">
some good employee name
</div>
</td>
</tr>
<tr class="trmenuClass" id=activityreportstrId>
<td class="cellBackground">
<div class="minusSign" id=activityreportsMinusSignId>
<div class=activityIcon id=divActivityReportsid>
<div class="cellName">
Activity Reports
</div>
</div>
</div>
</td>
</tr>
<tr class="activityreportstrClass" id="submenuactivityreportstrId">
<td class="subMenuCell" id="idActivityReports">
<div class="subMenuCellName">
Activity report 1
</div>
</td>
</tr>
<tr class="activityreportstrClass" id="submenuactivityreportstrId">
<td class="subMenuCell" id="idActivityReports">
<div class="subMenuCellName">
Activity report 2
</div>
</td>
</tr>
<tr class="activityreportstrClass" id="submenuactivityreportstrId">
<td class="subMenuCell" id="idActivityReports">
<div class="subMenuCellName">
Activity report 3
</div>
</td>
</tr>
<tr class="activityreportstrClass" id="submenuactivityreportstrId">
<td class="subMenuCell" id="idActivityReports">
<div class="subMenuCellName">
Activity report 4
</div>
</td>
</tr>
<tr class="activityreportstrClass" id="submenuactivityreportstrId">
<td class="subMenuCell" id="idActivityReports">
<div class="subMenuCellName">
Activity report 5
</div>
</td>
</tr>
<tr class="activityreportstrClass" id="submenuactivityreportstrId">
<td class="subMenuCell" id="idActivityReports">
<div class="subMenuCellName">
Activity report 6
</div>
</td>
</tr>
<tr class="activityreportstrClass" id="submenuactivityreportstrId">
<td class="subMenuCell" id="idActivityReports">
<div class="subMenuCellName">
Activity report 7
</div>
</td>
</tr>
<tr class="activityreportstrClass" id="submenuactivityreportstrId">
<td class="subMenuCell" id="idActivityReports">
<div class="subMenuCellName">
Activity report 8
</div>
</td>
</tr>
<tr class="activityreportstrClass" id="submenuactivityreportstrId">
<td class="subMenuCell" id="idActivityReports">
<div class="subMenuCellName">
Activity report 9
</div>
</td>
</tr>
<tr class="activityreportstrClass" id="submenuactivityreportstrId">
<td class="subMenuCell" id="idActivityReports">
<div class="subMenuCellName">
Activity report 10
</div>
</td>
</tr>
<tr class="activityreportstrClass" id="submenuactivityreportstrId">
<td class="subMenuCell" id="idActivityReports">
<div class="subMenuCellName">
Activity report 11
</div>
</td>
</tr>
<tr class="activityreportstrClass" id="submenuactivityreportstrId">
<td class="subMenuCell" id="idActivityReports">
<div class="subMenuCellName">
Activity report 12
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="headerTitle"><img src="../../Images/Header/TitleArrow.png" alt="Arrow" style="vertical-align:top;"/>
<ul class="segmentControl">
</ul>
</div>
</div>
<div class="content">
<h2>Homepage</h2> - Link to Dashboard/All
</div>
<div class="Push"></div>
</div>
<div class="footerWrapper">
<div class="footer">
<div class="footerLeft"></div>
<div class="footerRight"></div>
<div class="footerRightContent">Privacy Policy</div>
<div class="footerLeftContent">© Copyright 2012 - All Rights Reserved</div>
</div>
</div>
</body>
</html>
Embarrassing as it is, we were able to track down the issue to the browser settings. Active scripts were disabled.
Tools > Internet Options > Security> Click Custom Level button > Scroll down to Scripting > Active Scripting
Thanks to everyone who posted. I appreciate your time & effort.
One thing to note here is you are doing document.ready twice in these lines
$(document).ready(function () {
$(function () { // this line does the same as $(document).ready(function () {
Try the following:
$(function () {
$("#container").hover('',function(){
alert("Out");
});
$("img.over").each(function () {
var t = $(this),
src1 = t.attr("src"),
newSrc = src1.substring(0, src1.lastIndexOf("."));
t.hover(function () {
$(this).attr("src", newSrc + "Over." + /[^.]+$/.exec(src1));
}, function () {
$(this).attr("src", newSrc + "." + /[^.]+$/.exec(src1));
});
});
});