To understand the effect of .insertAfter, I designed a small table test that has 2 rows and 2 columns.
<table id="myTable" width="560" border="1" cellspacing="2" cellpadding="2">
<tr>
<td title="row 1*1" class="styletest">1*1</td>
<td title="row 1*2" class="styletest">1*2</td>
</tr>
<tr>
<td title="row 2*1" class="styletest">2*1</td>
<td title="row 2*2" class="styletest">2*2</td>
</tr>
</table>
The jquery code is:
var $tooltip = $('<div id="tooltip"></div>');
$tooltip.insertAfter('#myTable').hide();//I want to know the code after inserting this element.
function showTooltip(cell) {
$tooltip.show().text(cell.attr("title"));
}
$('.styletest').hover(function() {
showTooltip($(this));
}, function() {
$tooltip.hide();
});
The test includes hovering different cells and display tooltips.
The demo is at jsfiddle.
I want to know the source code when I hover different cells.
For example, when I hover row 1, column 1, the snapshot likes:
When I hover row 2, column 2, the snapshot likes:
Questions:
When mouse hovers row 1 column1 and row 2 column 2;
Do they have the same rendered source code?(Using F12 can't get the rendered code when hovering)
Why the tooltips are displayed in the same position that seems in the middle?
It's the same element, you are just changing it's content and visibilty. It's not going to move, and other than the content you are setting with text() the markup is not going to change either.
You don't need to inspect anything, the source code is right there in your script, and what you insert is what you get, so to speak!
You can inspect styles on elements that only apply on hover in firebug:
Inspect the element that has a hover style, click on the DOM node so it's selected and highlighted in blue. Then go to the style tab on the right and click the little arrow, and choose :hover now Firefox will hold the hover styles and you can insect the div at the bottom.
In your case, either you have CSS for #tooltip or styles for divs to have text centered.
Related
I have the following html table setup
<div>
<table>
<tr>
<td class='plot1'>Some data 1</td>
<td class='plot2'>Some data 2</td>
</tr>
<tr>
<td class='plot3'>Some data 3</td>
<td class='plot4'>Some data 4</td>
</tr>
</table>
</div>
with the following CSS
.plot1,.plot2,.plot3,.plot4{
width: 50%;
height: 50%;
border: 1px solid red;
}
On a double click in any of the 4 table cells (these will contain chart objects) I would like to expand that cell to fill up the parent div and hiding the other 3 cells. On a subsequent double click I would like the table to have its original setup.
Here is the jQuery for just a double click on plot 1.
$('td.plot1').dblclick(function(e) {
if (e.ctrlKey) {
if ($(this).closest('table').children('tbody').children('tr').children('td.plot2,td.plot3,td.plot4').is(":visible")) {
$(this).closest('table').children('tbody').children('tr').children('td.plot1').height('100%');
} else {
$(this).closest('table').children('tbody').children('tr').children('td.plot1').height('50%');
}
$(this).closest('table')
.children('tbody')
.children('tr')
.children('td.plot2,td.plot3,td.plot4')
.toggle();
}
});
A working example of the above can be found here.
I am having trouble with a couple of things. I'd obviously like to be able to have one jQuery for a double click on any table cell instead of 1 for each cell. This behavior works fine until I introduce a highcharts object into each table cell then the height of the clicked plot does not change when trying to "minimize" back to its original size.
Any help,or different approaches would be appreciated as I seem to be stuck on this silly issue!
High charts api has something like redraw, this will help you to redraw charts when the container size changes. There is an excellent demo which help you to achieve it, Chart resize fiddle.
You can also go through the official documentation Here
FIXED HEADER TABLE ____When Clicking on scrollbar icon in ie11 flickers when using positioning as i cannot change the structure as it is dynamically coming from different sources and gets in table body structure
<tbody><tr></tr><tr></tr></tbody>
here is the fiddle attached works fine in chrome but when i check in ie it flickers horriblly when clicking on div vertical scrollbar below or above icon
Any Css or html solution is also acceptable until if there is no change in html structure
DEMOJs Fiddle Demo
JQUERY
$(document).ready(function() {
$('#theDiv').on('scroll', function () {
$('#headerRow td,#headerRow th').css({'position':'relative','background':'red','top':$('#theDiv').scrollTop()-1});
});
});
First we wrap #theDiv in a #theDivWrap (using jQuery) and use the css to style it...
The idea is to duplicate header row into a new div appended to #theDivWrap via JS
Now loop through table heading elements and create a div based similar styled heading which will come over table and is prepended to #theDivWrap and stays there forever even on scroll because wrap is not overflow auto...
https://jsfiddle.net/5dqnumh6/39/
Adjust negative margin bottom of .headerRow to suit your needs ;)
As Ie doesn't support overflow property for table group elements. So we can add a workaround to support the required behaviour. Add this css to your fiddle and try it will work.
tbody{display:block;height:auto;}
This will make your flicker go away in ie older versions. Although its a hack to make it work but there is no other pure css way. For more details and explanation you may want to read this link.
Updated fiddle is here.
But as you told me flickering not goes away.A workaround exists but it requires changing in ie settings. Go to internet options, navigate to advanced and scroll down until you see browsing section and uncheck "enable smooth scrolling". But I don't know whether it suits your requirement or not
This has been noted to be an IE11 bug, and according to this other SO question from 2014, shows up under the following conditions:
Three things can cause IE 11 flickering/choppy/delay for fixed
position element while scrolling:
If you have an "overflow: auto;" on the parent container element,
remove it.
Remove background-attachment:fixed; from the fixed position
element.
Remove border-radius from the fixed position element (mobile
IE only).
(Accepted answer by #Adamy)
Well, removing auto-overflow from your code takes away the whole purpose, so it's not the best solution here, and the others don't apply. What seems to work however (according to this MS Connect bug) is some HTML changes, separating the header row, and adding a custom scroll function to the actual table body. This JsFiddle page (kindly provided by folks that responded to the MS bug) has a working example:
https://jsfiddle.net/84y0vtyx/
(Including only part of the example with relevant comment. Full explanation requires reviewing the JsFiddle example.)
/* Only WinIE will fire this function. All other browsers scroll the TBODY element and not the DIV */
/* This is to hide the SELECT elements from scrolling over the fixed Header. WinIE only. */
/* toggleSelectBoxes added on 2005-01-28 */
/* Terence Ordona, portal[AT]imaputz[DOT]com */
window.onload = function() { addIEonScroll(); }
Hi here is my update based on your comment.
I copied the HTML part from your js Fiddle and just added this style tag to the above the table div and it works perfectly in microsoft edge and other browsers with no Jquery needed:
<style>
#headerRow
{
position: fixed !important;
top:0px;
background:Red;
}
</style>
////OLD
I apologies as you have mentioned that you cannot change the html table structure that comes down however see my old answer below which i wrote without this consideration. Can you consider using css to traverse the fixed table that comes down and apply a fixed position to the top header row? I have read that you can give a fixed position and a background color to a table row so that it remains fixed and the background prevents the text from overlapping How to make table row fixed at the top
You can use css to select the top row of the table:
Css:
table tr:first-child
{
position: fixed;
top:0px;
background:#FFF;
}
/// old answer:
Please may i suggest that you forget about using a document scroll event and just create a header with an absolute position if it is a div with an overflow scroll or a fixed position if it is just to remain fixed as the window scrolls. you can specify widths for your colums so that the fixed header lines up. so something along these lines (im just typing on my phone):
<table style="position:fixed; width:100% ">
<tr>
<th width="50%">
Test1
</th>
<th width="50%">
Test2
</th>
</tr>
</table>
<table style="margin-top:25px; width:100% ">
<tr>
<td width="50%">
a
</td>
<td width="50%">
b
</td>
</tr>
<tr>
<td width="50%">
c
</td>
<td width="50%">
d
</td>
</tr>
</table>
Especialy if we are talking cross browser compatibilty here- the simpler and most basic html/ css implementation the better. Css has provided us with a fixed class. There is no need to use jquery to watch your documents scroll.
I use this one my site:
https://raw.githubusercontent.com/jmosbech/StickyTableHeaders/master/js/jquery.stickytableheaders.min.js
Simply load it in your <head></head> section of the page and it will float the header of any table loaded on that page. It's cross-browser and gets the job done with no additional tricks, just plug & play.
I have a GridView that I bind in PageLoad() and I use the same data to dynamically create a timeline image that displays below the GridView. If I get 15 rows of data (pretty typical) each row in the GridView from top to bottom will have a corresponding vertical line drawn in the timeline jpg from left to right. The graph just shows how close or far apart each event is from its neighbors.
I do draw an id below each line in the image to help identify the corresponding row in the GridView but it's tedious to locate. It would be awesome if I could just move the mouse across the timeline image and have the corresponding rows in the GridView get highlighted as I go. I know the x-coordinates of each line because I generate the image from the same data using Bitmap, Graphics, DrawLine, etc. to make and save the jpg.
Any help greatly appreciated.
asp.net 2.0, vs2010, c#.
*** Edited to include a screen shot of the grid and the generated timeline with the mouse hovering over the 5th element. Data is top-to-bottom in the grid. Same data is left-to-right in the timeline.
click to see screen shot
To highlight a grid vertically, you need to get index of which column you are holding your mouse on. And implement the style you want on each of the rows corresponding columns.
Is this what you were looking for?
$(function(){
$('td').hover(function(){
var indexofelement = $(this).index() + 1;
$(this).closest('table').find('tr').each(function(){
$(this).find('td:nth-child(' + indexofelement + ')').css('background','grey');
});
},function(){
var indexofelement = $(this).index() + 1;
$(this).closest('table').find('tr').each(function(){
$(this).find('td:nth-child(' + indexofelement + ')').css('background','transparent');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td><img height="20" src="http://www.clipartbest.com/cliparts/yik/E5x/yikE5xeiE.png"/></td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td><img height="20" src="http://www.clipartbest.com/cliparts/yik/E5x/yikE5xeiE.png"/></td>
</tr>
</table>
Edit:
If you want to highlight corresponding row;
$(function(){
$('img').hover(function(){
$(this).closest('tr').css('background','grey');
},function(){
$(this).closest('tr').css('background','transparent');
});
});
I'm trying to change the day background colour on mouse hover.
The hover event needs to be captured on .fc-bg .fc-day and .fc-content-skeleton .fc-day-number for this purpose. This works ok until I use background render events as allDay events, because then there is a third layer with class .fc-bg-event-skeleton which is lying on top of the other two layers. The events of the underlying elements are not fired anymore and because cells are rendered using a colspan I cannot highlight just one day if there are background render events in a row.
Is there any possibility to highlight days on mouseover in fullcalendar? I'm using the month view.
<div class="fc-bg">...</div>
<div class="fc-content-skeleton">...</div>
<div class="fc-bgevent-skeleton">
<table><tbody>
<tr>
<td class="fc-week-number" style="width:21px"></td>
<td colspan="3"></td>
<td colspan="1" class="fc-bgevent available"></td>
<td colspan="3"></td>
</tr>
</tbody></table>
</div>
Your best bet is to use pointer-events:none to allow the hover to pass through certain container elements and pointer-events:auto to re-enable it on child elements that still need pointer events.
.fc-day:hover{
background:lightblue;
}
/*Allow pointer-events through*/
.fc-slats, /*horizontals*/
.fc-content-skeleton, /*day numbers*/
.fc-bgevent-skeleton /*events container*/{
pointer-events:none
}
/*Turn pointer events back on*/
.fc-bgevent,
.fc-event-container{
pointer-events:auto; /*events*/
}
JSFiddle
Unless this causes a specific unsolvable problem for you, this is the best way. You could mess with z-index, transparent-overlays or a lot of JS but this solution causes the least headaches by far.
This is again one of these old issues: I would like to make the four first columns of my HTML-Table sticky (only horizontally).
There are several solutions out there which work properly if it's a smaller table. Unfortunately mine has a big size and I would like it to spread it over the whole screen. Therefore most solutions which pack the table in a scrollable div are no use because they put the scrollbar at the very end of the div - which is quite a distance to go down.
Also there is some small content over the table so it's yet not 100% of the screen...
There were some ideas around the Internet to give the frozen tds the position: absolute; attribute which didn't work for me.
http://www.fixedheadertable.com/ seems kinda fine - unfortunately till now it just messes up my table...
EDIT 1:
It's a pretty huge table which displays a database and does some calculation with its values.
That's one of my problems: It always has the same amount of columns (about 50) but the number of rows vary.
But in general the table is kinda straight-forward with no surprises:
<table id="calctbl">
<thead class="fixed">
<tr id="table-head">
<th class="several classes">Number<br>
<br>Pos. Nr.</th>
<th class="several classes">Info 1</th>
<th class="several classes"><div>More infos</div></th>
<th class="several classes">Here<br>are some more<br>infos</th>
<th>... and it goes on ...</th>
</tr>
</thead><tbody>
<tr>
<td class="several other classes">vals...</td>
<td class="several other classes">more vals</td>
<td class="several classes"><div>and some more</div></td>
<td class="several other classes">...</td>
<td>... and it goes on ...</td>
</tr>
<tr>
<!-- No big surprises, it just goes on -->
</tr>
</tbody>
</table>
Also I use this for the first header line: HTML table with fixed headers?
EDIT 2:
http://www.fixedheadertable.com/ - there is not really an explanation and for some reason it just messes everything up
http://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/
Has the mentioned problem: It requires a limiting div around it
how do I create an HTML table with fixed/frozen left column and scrollable body?
Answer #1: Same problem with the div
position: fixed - doesn't work at all for me
How can I make the first and second column of a table sticky Answer #1 - dosen't work either
http://massless.org/_tests/grid1/ - seems to be quite old and requires a div
http://learndevelopingmyway.blogspot.co.at/2012/03/sticky-columnsheaders-freeze-pane-in.html is this even a table?
According to my experience, fixedheadertable works just fine. Try to play with your css, especially container div's max-height and other height-related properties to limit it's size for big tables. It would be easier if you could show your table, but if I understood correctly, this css could help:
.fht-tbody{
max-height: 300px;
}
You can test this easily if using some inspector in your browser (i.e. firebug) on the original page (http://www.fixedheadertable.com/) by targeting the .fht-tbody and setting the above value.