Goal:
When I have the cursor inside of a td row, some icon should appear, and you should enable to click them. The icons contain link.
When you have the cursor in a new td row, the previous td row should be default and the new td row should have the new icon.
Pleae take a look at the picture.
Problem:
I don't know how to create it.
Information:
I'm using bootstrap, jquery and Visual Studio.
You can place all the icons when you are creating the rows. just give the style
style='display:none;'
then loop thorugh the rows via jquery
$(table tr).each(function () {
if ($(this).is(':hover'))
$('icondiv').show();
else
$(this).hide();
});
Then if you want to perform some action based on the click on those icons, then you can place an data-* attribute along with those icons and track that particular row.
From jquery you can fetch the data attributes using data() function like
$('icondiv').data('id');
First way just use css
in html add class to div which include icons
<div class="IconsDiv">
<!-- Icons here -->
</div>
and in css
.IconsDiv{
display: none;
}
tr:hover .IconsDiv{
display: block;
}
another way : if you want to use jquery for that
$(document).ready(function(){
$('table tr').hover(function(){
$(this).find('.IconsDiv').show();
},function(){
$(this).find('.IconsDiv').hide();
});
});
Related
I have an issue with a jquery mobile 1.4.2 webapp. I have a page with 2 tables that both use the column toggle button. I want to move each of these buttons to their own placeholder to allow for horizontal scrolling.
I have this working when there is one table, but I can't figure out how to specify the table id for the column toggle button, to move the button for the correct table.
<div id="colUnit"></div>
$(document).on("pageinit", "#contractDetails", function () {
$(".ui-table-columntoggle-btn").appendTo("#colUnit");
});
Is there a way to specify the table id within the jquery so that the correct button is moved to <div id="colUnit"></div>
It currently places BOTH buttons (one from each table), into <div id="colUnit"></div>
column-toggle buttons are siblings of tables and placed before them. Use .prev() to move to another place.
$("#mytable1, #mytable2")
.prev(".ui-table-columntoggle-btn")
.appendTo("#colUnit");
Update
You can also append them into a controlgroup and change their text.
<div id="colUnit" data-role="controlgroup" data-type="horizontal"></div>
Move buttons to controlgroup.
$("#mytable1, #mytable2")
.prev(".ui-table-columntoggle-btn")
.each(function () {
var text = $.mobile.path.parseUrl($(this)
.prop("href"))
.hash.substring(1);
$(this)
.text(text.split("-")[0])
.appendTo($("#colUnit")
.controlgroup("container"));
});
$("#colUnit").controlgroup("refresh");
Demo
Is there a way to add links or buttons when you hover over a row on a kendo grid? I looked in the documentation and googled for a bit, but I could not find anything. I wasn't sure if I just needed to have my row template be able to show/hide my button/links based on hover over or if kendo grids had something out of the box that would make this easier. Any thoughts? Thanks in advance.
There is nothing out-of-the-box but you can do almost everything.
Lets assume that you want to show a standard button (ex: edit or destroy). Then your column definition is something like this:
columns : [
{ command: [ "edit", "destroy" ] },
// Other column definition
...
]
Next is hiding every button inside this grid identified by grid.
#grid .k-button {
visibility: hidden;
}
And then add a new style for making it visible when the mouse is over it:
#grid .k-button.showme {
visibility: visible;
}
Finally we have to add some handling code for controlling when the mouse is over the row. This is the tricky part:
It cannot be done via CSS (i.e. using :hover) because we want to control when the mouse is over the row but we want to change (add a CSS class) to the button.
Since the grid might be redraw (when you sort, paginate,...) we need to use live event handlers.
So what we do is when the mouse enters a row, we add showme class (make button visible).
$(grid.tbody).on("mouseenter", "tr", function (e) {
$(".k-button", e.currentTarget).addClass("showme");
});
When the mouse exits the row, we remove showme class.
$(grid.tbody).on("mouseleave", "tr", function (e) {
console.log("exit");
$(".k-button", e.currentTarget).removeClass("showme");
});
And here (http://jsfiddle.net/OnaBai/BjuVr/) a running example.
Let's say I have a grid with fluid layout. It has one component, a table, in a span12 div - using the entire screen.
When a row in this table is clicked, I want to change the layout. I want to change the table's div to span4 and create a new span8 column on the right to display details of the selected item.
How can I do this programmatically? Something as simple as:
$("#mydiv").removeClass("span12").addClass("span4")
... doesn't seem to work, I believe I need to somehow tell Bootstrap to re-process the entire layout. Is it possible at all?
What about this solution:
var $table = $('.table-container'), // table inside
$side = $('.side-container'); // hidden by default
$table.on('click', 'tr', function() {
$table.removeClass('span8').addClass('span4');
$side.show();
});
http://jsfiddle.net/meV43/
I used total width of span8 in this demo
With toggle column functionality http://jsfiddle.net/meV43/1/
I have a table in which any time a user clicks on one of the rows it highlights the row. However as of if I have multiple rows highlighted i have to click each individual highlighted row to get rid of the highlight. I want to make it so when an individual is not clicking on the table it will get rid of the highlight on all the rows. This is the code that I am using.
//this highlights the table that has been clicked on
$('.tr_highlight').live('click',(function () {
$(this).parent().toggleClass("tr_highlight_ed");
}));
How do I get it to unhighlight(if thats a word) when clicking anywhere but the table?
You really need to post an example of the rendered markup. You don't want to do a toggleClass, you would do a removeClass selecting the parent nodes...
Assuming the following markup...
<body>
...
<table id="myTable">...</table>
...
</body>
You could bind the following..
$('body').click(function(evt){
//evt.target is what was clicked on, which bubbles up to body
//if it's anything inside #myTable, you will get the #myTable
var el = $(evt.target).closest('#myTable');
//if you didn't get #myTable, you clicked outside the table
//remove the given class from all the tr's
if (!el.length) $('#myTable .tr_highlight_ed').removeClass('tr_highlight_ed');
});
$(document).bind('click.table', function (e) {
if ( $("#my-table").has(e.target).length === 0 ) {
$("#my-table").find("tr").removeClass('tr_highlight_ed');
}
});
Everytime a user clicks anywhere on the page, it will check if the element that was clicked is inside the table; if not, we unhighlight all the rows.
I want to create a simple tool so that user can fill colors inside html table fields or whatever the alternative you can suggest.
Take a look at this page:
http://www.olmares.com/Price%20and%20Availability.htm
I am looking for some tool, interface, Javascript or any other way so that my client fill in the table boxes with colors easily. How can I achieve this?
I have added an extra, so when you click on highlighted td, it will remove it.
Working link : http://jsfiddle.net/dEy2H/
CSS
.HighLight {background-color:#ff0000 !important;}
jQuery
$(function() {
$('td').click(function() {
if ($(this).hasClass('HighLight'))
$(this).removeClass('HighLight');
else
$(this).addClass('HighLight');
});
});
you can set csscalass for your table td by javascript.
<Table><tr>
<td cssclass="a"></td><td cssclass="b"></td>
</tr></table>
and your css:
.a{backgroundcolor:red}
.b{backgroundcolor:green}
you need to set up a click handler for your table cells that react by changing the color of the cell clicked in .. in jQuery it'd be something like
var current_color = 'red';
$('td').click(function() {
$(this).css('background-color', current_color);
});
thus whatever the current_color is (changed perhaps via other user interaction) gets applied to subsequently clicked cells.