Can I somehow make jQuery UI Accordion compatible with a html table? I've tried everything to make columns collapsible.
Right know I've done this
$(".col1, .col2").addClass("hidden");
$(".show-hide-col1").css("cursor", "pointer").click(function() {
$(".col2").addClass("hidden");
$(".col1").removeClass("hidden");
});
$(".show-hide-col2").css("cursor", "pointer").click(function() {
$(".col1").addClass("hidden");
$(".col2").removeClass("hidden");
});
but it's just not as smart as jquery accordion.
HTML
<table width="50%" border="1px solid red">
<tr><td class="col1">Col1</td><td class="col2">Col2</td></tr>
</table>
<button class="show-hide-col1">Hide col1</button>
<button class="show-hide-col2">Hide col2</button>
SCRIPT
$(document).ready(function(){
$(".show-hide-col1").click(function() {
$('.col1').toggle();
});
$(".show-hide-col2").click(function() {
$('.col2').toggle();
});
});
Fiddle http://jsfiddle.net/3qbe4coj/3/
Note: If you use hide, it only hide the element. But if you use toggle instead, it can be use to show and hide in single button
Related
I have a button that when clicked should switch my html from 'Add New User' to 'Update User' elements. Currently it works when the table has not been filtered. After I have done any sort of filtering on the table, the Edit button no longer works.
Add New User Div
<div id="addNewUser" class="newUser" style="border: solid black 2px">
//snip
</div>
Update User Div
<div id="update_User" class="updateUser" style="border: solid black 2px">
//snip
</div>
Edit User Button
<td><button id="#user.UserId" class="updateUser" value="#user.NtUserId">Edit</button></td>
Show add/edit jquery
<script type="text/javascript">
$(document).ready(function () {
$('div.updateUser').hide();
$('button.updateUser').click(function () {debugger;
$('div.updateUser').innerHTML
$('div.updateUser').show();
$('div.newUser').hide();
});
})
</script>
Your table filter might be removing and re-adding elements to the DOM hence try to bind your click event to the document instead of the specific element;
$(document).ready(function () {
$('div.updateUser').hide();
$(document).on('click','button.updateUser',function(){ //document does not require quotes
// $('div.updateUser').innerHTML
$('div.updateUser').show();
$('div.newUser').hide();
});
});
I have an HTML table. In the td tag there is a checkbox. If I click on that checkbox then it gets checked or unchecked as usual. But what I want is that If I click anywhere on that specific td then the checkbox will also get checked or unchecked. Its because if there are a lot of rows and checkboxes there then you might find it hard to exactly put your mouse pointer over the checkbox and press a click (checkboxes are small so finding it difficult is normal). So I want it to be easy for my client, if he press a click outside the checkbox but inside the parent td tag then it will also work.
My JQuery code is working very good. Now if I click outside the checkbox then its click event is triggered. But the problem is now If I click exactly on the checkbox then it is not working. I am giving my code below. Here is also a jsfiddle link of my code.
<div class='modal-inner-content'>
<table style="border: 1px solid black;">
<tr>
<td class='check'><input type='checkbox'/></td>
</tr>
</table>
</div>
My JQuery code:
$('.modal-inner-content').on('click', 'td', function(){
var checked = $(this).find(':checkbox').is(':checked');
$(this).find(':checkbox').prop('checked', !checked);
});
UPDATE
Now the jsfiddle code will work, i forgot to include the library. Now see there, if you click outside the checkbox then its working but if you click exactly on the checkbox then its not working. any help?
Try this:
$('.modal-inner-content td').click(function (event) {
if (!$(event.target).is('input')) {
$('input:checkbox', this).prop('checked', function (i, value) {
return !value;
});
}
});
You can do it by checking the clicked element is checkbox or not like following.
$('.modal-inner-content').on('click', 'td', function (e) {
if (!$(e.target).is(':checkbox')) {
var checked = $(this).find(':checkbox').is(':checked');
$(this).find(':checkbox').prop('checked', !checked);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='modal-inner-content'>
<table style="border: 1px solid black;">
<tr>
<td class='check'>
<input type='checkbox' />
</td>
</tr>
</table>
</div>
in your jsfiddle just add Jquery resource
https://code.jquery.com/jquery-2.2.4.js
$('.modal-inner-content').on('click', 'check', function() {
var checked = $(this).find(':checkbox').is(':checked');
$(this).find(':checkbox').prop('checked', !checked);
});
I am new to programming and am mostly just playing around with HTML and JavaScript right now. I recently learned about jQuery and was trying to use it in a periodic table quiz page I made. I wanted to be able to mouse over certain elements and see a relevant picture and then mouse off and restore it to the element symbol and name that was there before. Here is my code:
The element is in a table coded by HTML, like so:
<table id="ptable" style="text-align:center;">
<tr>
<td>
<div id="einsteinium"><span style="font-size:32px;">Es</span>
<p style="font-size:12px;">Einsteinium</p>
</div>
</td>
<td>hydrogen</td>
<td>helium</td>
</tr>
</table>
And here is the jQuery:
$(document).ready(function () {
var oldhtml = "";
oldhtml = $("#einsteinium").html();
$("#einsteinium").hover(function () {
$("#einsteinium").html("<img src=\"http://images.mentalfloss.com/sites/default/files/styles/insert_main_wide_image/public/einstein1_7.jpg\" height=\"70px\" width=\"70px\">");
},
function () {
$("#einsteinium").html(oldhtml);
});
});
Fiddle
The problem is that the picture of Einstein will get stuck and won't return to the element symbol/name. On the fiddle, if you keep mousing over it, it will start working again, but it doesn't do that on my code. For me, when it gets stuck it doesn't get unstuck (but the fiddle does get stuck too, and I don't want that to happen at all). I have tried changing the z-index of the div and table, but no luck there. I'd really appreciate any help!
The problem is because, you are changing the contents of the hovering div, which is messing up the mouse enter/leave events
You can do it without any javascript, but with css and the :hover selector like
#einsteinium > img {
display: none;
}
#einsteinium:hover > img {
display: inline-block;
}
#einsteinium:hover > div {
display: none;
}
<table id="ptable" style="text-align:center;">
<tr>
<td>
<div id="einsteinium">
<img src="http://images.mentalfloss.com/sites/default/files/styles/insert_main_wide_image/public/einstein1_7.jpg" height="70px" width="70px">
<div>
<span style="font-size:32px;">Es</span>
<p style="font-size:12px;">Einsteinium</p>
</div>
</div>
</td>
<td>hydrogen</td>
<td>helium</td>
</tr>
</table>
I am trying to toggle (increase and decrease height of )a DIV based on click event of a TD tag using jQuery. Please note I am new to jQuery.
<td id="ProductionTargetDEtd" class="collapsibleTdRelease" width="100%" onclick="javascript:toggleHeader();">
<table width="100%">
// Some Html code here
</table>
</td></tr>
<tr><td>
<div id="ProductionTargetDEDiv" class="slidingDiv" style="">
// Some Html code here
</div>
</td>
Now in the JSP script tag I am hiding the DIV by giving height = 0 as below :
<script>
$(document).ready(function(){
$(this).find("div#ProductionTargetDEDiv").each(function() {$(this).css({ overflow: "hidden", height: "0px" })});
</script>
});
Finally on click event of the TD id="ProductionTargetDEtd" we are calling below javascript method toggleHeader():
function toggleHeader(){
$("td#ProductionTargetDEtd").removeAttr("onclick");
$("td#ProductionTargetDEtd").toggle(function(){
$("div#ProductionTargetDEDiv").animate({ height: 135}, 400);
},function(){
$("div#ProductionTargetDEDiv").animate({ height: 0 }, 400);
});
}
Now what all this is supposed to do is, when i click on the TD tag, the DIV should slide down, and next click it should slide up. The above method is working fine, except for 1 anomalies :
1) On 1st click, nothing happens, only on 2nd time clicking and onwards the DIV slides down and up smoothly
Surprizingly, If i don't call the Javascript method toggleHeader() using inline javascript call
onclick="javascript:toggleHeader()"
and instead i put all the jQuery code in the tag of the JSP, then this 1st click problem is solved.
why do u need trigger for ProductionTargetDEDiv click...remove that..
you are calling td#ProductionTargetDEtd click event twice.. one in your html
here
<td id="ProductionTargetDEtd" class="collapsibleTdRelease" width="100%" onclick="javascript:toggleHeader();">
and here
$("td#ProductionTargetDEtd").click( //inside the toggleHeader function
so remove $("td#ProductionTargetDEtd").click( inside the toggleHeader and that should solve your click function
final outcome... replace toggleHeader with this
function toggleHeader(){
$("div#ProductionTargetDEDiv").toggle(function(){
$(this).animate({ height: 135 }, 200);
},function(){
$(this).animate({ height: 0 }, 200);
});
}
and it should work
Can anybody help me letting me know what is wrong with the following code?
$(document).ready(function(){
$("img").attr("alt")=='minimize'.click(function(){
alert("he");
});
});
thanks.
Addition:
Sorry guys, I am trying to add an event to a image inside of a table, so when its clicked it collapse the div under need.
I am facing several problems here.
1.- all tables and div use the same class.
2.- it may be a minimum of two tables and divs.
3.- first table should no be click able, only its images (for show and hide div under)
4.- rest of tables should be click able the whole table to show and hide div under with slidetoggle.
5.- rest of tables also have two images for show with slideDown and slideUp.
What I have it works but not fully.
Once again.
Thanks.
so far this is what I have.
<script type="text/javascript">
$(document).ready(function(){
$(".heading:not(#Container1)").click(function(){
var c = $(this).next(".container");
c.slideToggle("slow");
});
});
$(document).ready(function(){
$("img[alt='min']").click(function(){
var c = $(this).next(".container");
c.slideToggle("slow");
});
$("img[alt='max']").click(function(){
var c = $(this).next(".container");
c.slideToggle("slow");
});
});
</script>
<html>
<head></head>
<body>
<table class="heading" id="container1">
<tr>
<td>heading1</td>
<td><img alt='min'/><img alt='max'/></td>
</tr>
</table>
<div class='container'>Container1</div>
<table class="heading">
<tr>
<td>heading2</td>
<td><img alt='min'/><img alt='max'/></td>
</tr>
</table>
<div class='container'>Container2</div>
<table class="heading">
<tr>
<td>heading3</td>
<td><img alt='min'/><img alt='max'/></td>
</tr>
</table>
<div class='container'>Container3</div>
</body>
</html>
You need to use the attribute selector not get the attribute and compare it.
$(document).ready(function(){
$("img[alt='minimize']").click(function(){
alert("he");
});
});
$(document).ready(function(){
$("img[alt='minimize']").click(function(){
alert("he");
});
});
EDIT
$(function() {
$('img[alt='min'], img[alt='max']').click(function() {
var container = $(this).parent('table').next('div.container');
if ( $(this).attr('alt') == 'min' )
container.slideUp('slow');
if ( $(this).attr('alt') == 'max' )
container.slideDown('slow');
return false;
});
$('table.heading:not(:first)').click(function() {
$(this).next('div.container').slideToggle('slow');
return false;
});
});
The alt attribute is not a way to filter your images. It is designed to put alternative content for when the image cannot be displayed (not found, unwanted by user, no screen, etc.)
You should instead use the class attribute to discriminate your images the way you want.
Your code then becomes:
HTML
<img src="..." class="minimize" alt="A beautiful image">
Javascript
$(document).ready(function(){
$("img.minimize").click(function(){
alert("he");
});
});
It is not syntactically correct. What are you trying to do? Maybe this?
$(document).ready(function(){
$("img[alt=minimize]").click(function(){
alert("he");
});
});