I add a mouse event to the HTML TR when user mouse-over/out the TR to change some CSS color. But in IE9 seems to have an issue that the table's height will keep increasing each time the CSS changed.
Note: the issue only occurs when the horizontal scrollbar appears.
Here is the HTML.
<div style="width:100%;height:100%;">
<div class="grid">
<div class="grid-body">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="table-layout:fixed;">
<tbody>
<tr>
<td style="width:3040px;" class="item">
<div>
Please mouse-over me and out
</div>
</td>
<td class="item">
<div>
Please mouse-over me and out
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Here is the Javascript
$(document).ready(function (){
$('.item').mouseover(function () {
$(this).parent().addClass("item-over");
}).mouseout(function() {
$(this).parent().removeClass("item-over");
});
}
);
Here is the CSS setting
html, body {height:100%}
body {
margin: 0; padding: 0 5px;
}
div.grid {
background: #DAE7F6; border: 1px solid #86A4BE; overflow: hidden; zoom: 1;
}
div.grid-body {
background: red; border: 0; overflow: auto; width: 100%; position: relative;
}
tr.item-over {
color: #6eadff;
}
You can run the full example here.
Here's another possible fix that also seems to work in my case.
Setting ANY margin (top, right, bottom, left, or any combination) to 'auto' seems to solve it.
div.grid-body {
margin: 0px auto;
}
Or:
div.grid-body {
margin-top: auto;
}
Etc.
Another possible fix suggested in the blog post IE9 Hover Bug Workaround:
div.grid-body {
min-height: 0%;
}
In case anyone came here looking for a fix for datatables jquery plugin, the proper class to add this fix to is:
.dataTables_scrollBody
{
margin-top:auto;
}
Took a bit of digging to find the proper div, so I figured I would try to save someone time.
I might have just solved it.
Try:
width: 100%;
display: inline-block;
on the containing element ("div.grid-body" in this case).
Open Developer tools and remove the table-layout:fixed rule from the table that is the child of grid-body. it should work may be.
It stops doing it and yet does the mouse hover effect by setting:
div.grid-body {
background: red; border: 0; overflow: hidden; width: 100%; position: relative;
}
instead of overflow:auto. Mabe you'd prefer to use overflow:scroll or visible. And make it trigger this as an extra property only for the IE9 case.
remove with form the first 'TD' element <td style="width:3040px;". It will help.
Do you need so huge "td" there ?
just to see
div.grid {
background: #DAE7F6; border: 1px solid #86A4BE; overflow: hidden;
zoom: 1;
width:100%;
}
what about this:
width:100% !important;
if you can change the overflow try this
div.grid-body {
background: red; border: 0; overflow: hidden; width: 100%; position: relative;
}
else
change your script to this (the problem is in the add/remove class)
$(document).ready(function (){
$('.item').mouseover(function () {
$(this).parent("tr").css("color", "#6eadff");
}).mouseout(function() {
$(this).parent("tr").css("color","#000");
});
});
why do you do it with JS and not with the css?
i.e:
.grid-body table tr:hover {background:red}
Maybe you should just "memorize" the height of the element in a variable when the mouseover event is fired, and then set it back to that value again when the mouseout event is fired.
$(document).ready(function (){
$('.item').mouseover(function () {
// store the height in a variabile (keep also in mind margins and paddings)
$(this).parent().addClass("item-over");
}).mouseout(function() {
$(this).parent().removeClass("item-over");
// now set back the original height
});
}
);
should work to just add a fixed height to the table row
so the containing table row reads:
<tr height="50px">
you can see it working here http://jsfiddle.net/f3TDb/
I'm assuming that you're not doing it wisth divs and css:hover for a specific reason?
i realize i'm months behind on this, but this stumped me yesterday and found this thread. hopefully my answer helps:
it's the overflow: auto in div.grid-body that's messing things up. you'll have to change this to scroll, possibly:
div.grid-body {
overflow-x: scroll;
}
if you don't want the vertical scrollbars.
note that you'll have to code your js to determine if you need a scrollbar so you can set overflow-x to visible (the default) if there are no overflows and scroll if there are, simulating auto.
Related
when I click on Id one div is coming. But I want to check if the div is exceeding the window then the div must hide.
Here is the sample code I have tried.
const User= () =>{
const openRequestDetails=(event,reqId)=>{
var clkPosTop= Math.floor(event.target.getBoundingClientRect().top());
var popup= document.getElementById('rId');
var popupHt= popup.offsetHeight;
if(clkPosTop > popupHt){
popup.style.top=clkPosTop+"px";
document.getElementById('rId').style.display="block";
}
}
return (
<>
<Header />
<table>
<tr>
<td>Id</td>
<td>First name</td>
<td>Last Name</td>
</tr>
{
user.map((key, i)=>(
<tr>
<td onClick={(e) => openRequestDetails(e,i)}>{i}</td>
<td>{key.first_name}</td>
<td>{key.last_name}</td>
<td>{key.email}</td>
<td>{key.gender}</td>
</tr>
))
}
</table>
<div id="rId" />
</>
)
}
export default User;
I am displaying the div is exact same row where I click. But when I click on the last IDs the div is exceeding the size of the window. So I want to check if the div is exceeding the windows then the display should hide.
I just want to check when I click on id's if the div is exceeding the windows then I should not display that div otherwise it should display.
[![enter image description here][1]][1]
Here is the sample CSS file.
div#rId{
background-color: cyan;
height: 34px;
width: 35%;
position:fixed;
left:28px;
}
table{
border-collapse: collapse;
}
td{
border: 1px solid red;
}
Can anyone know how to solve this problem.
We can write simple javascript code inside the function. can anyone help me to solve this problem?
Let's look at how it's decided whether to show the pop up or not:
Here's the code where the test is made:
const openRequestDetails=(event,reqId)=>{
var clkPosTop= Math.floor(event.target.getBoundingClientRect().top());
var popup= document.getElementById('rId');
var popupHt= popup.offsetHeight;
if(clkPosTop > popupHt){ //This is almost always true as popupHt is small
popup.style.top=clkPosTop+"px";
document.getElementById('rId').style.display="block";
}
What you need to do is test whether the popup when placed with its top the same as the td's top will have its bottom below the bottom of the viewport.
The bottom of the popup will be at: clkPosTop + popupHt
The bottom of the viewport is at window.innerHeight
So the test should be
if ( (clkPosTop + popupHt) < window.innerHTML)
Ok, I think your problem can resolve use only css.
But, this can change depending on what you want to do.
If your problem is only window... use #media, then, ok, go to css.
table {
width: 100%;
border-collapse: collapse;
#media (min-width:1024px) {
max-width: 1024px;
}
}
Ok, we delimit width of our div, but many things to happen now, then
rId maybe disturb our configuration, then, we need make this element responsive too.
td {
display: inline-flex; // or display: inline-grid;
border: 1px solid red;
}
div#rId {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-color: cyan;
height: 34px;
width: 35%;
position:fixed;
left:28px;
}
ok, I think this resolve this issue.
But, this javascript code... I don't believe i need position css with javascrip to open modal, comment if this helpfull. ;D
I am working on a piece of legacy code for a table. In certain cells, I'm adding a notice icon. When you hover over the icon a <span> is made visible displaying some information. I would like to be able to make this <span> smart about its positioning but can't figure out a good method. I can statically position it but depending on which cell in the table it is in it gets lost against the edge of the page. I have done a JsFiddle here demonstrating the issue. Unfortunately, I am not allowed to use anything but HTML, CSS and vanilla JS.
The title attribute to most tags is pretty smart about its position. I have added a title to one of the cells in the table in the jsFiddle (cell containing "Hello"). Is there any way to make my span exhibit the same smart behaviour?
A pop-up can be added before any element by putting the popup html code inside a 'div' with 'position:absolute; overflow:visible; width:0; height:0'.
When these events: 'onmouseenter', 'onmouseleave' are fired on the element, just toggle the popup css attribute 'display' between 'none' and 'block' of the element.
Example on jsfiddle:
https://jsfiddle.net/johnlowvale/mfLhw266/
HTML and JS:
<div class="popup-holder">
<div class="popup" id="popup-box">Some content</div>
</div>
Some link
<script>
function show_popup() {
var e = $("#popup-box");
e.css("display", "block");
}
function hide_popup() {
var e = $("#popup-box");
e.css("display", "none");
}
</script>
CSS:
.popup-holder {
position: absolute;
overflow: visible;
width: 0;
height: 0;
}
.popup {
background-color: white;
border: 1px solid black;
padding: 10px;
border-radius: 10px;
position: relative;
top: 20px;
width: 300px;
display: none;
}
I'm pretty new to javascript and I'm trying to create a horizontal scrolling div :-
JSfiddle
As you can see the menu links go to each colour but I would like to put this inside a container which is 250x250px so only 1 colour is visible, then you click on whichever link and it scrolls to that colour.
Hope someone can help me with a few pointers.
Thanks!
jQuery(document).ready(function ($) {
$(".scroll").click(function (event) {
event.preventDefault();
$('html,body').animate({
scrollLeft: $(this.hash).offset().left
}, 200);
});
});
.container {
white-space: nowrap;
}
.child-element {
min-width: 250px;
display: inline-block;
height: 250px;
}
.child1 {
background-color: purple;
}
.child2 {
background-color: orange;
}
.child3 {
background-color: black;
}
.child4 {
background-color: green;
}
.child5 {
background-color: blue;
}
.child6 {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
PURPLE
ORANGE
BLACK
GREEN
BLUE
RED
<div class="container">
<div id="purple" class="child-element child1"></div>
<div id="orange" class="child-element child2"></div>
<div id="black" class="child-element child3"></div>
<div id="green" class="child-element child4"></div>
<div id="blue" class="child-element child5"></div>
<div id="red" class="child-element child6"></div>
</div>
As #Script47 mentioned, you'll want to apply overflow-x as a CSS property to your element, in addition the width (to act as a viewport). Here's what your final CSS might look like:
.container {
white-space: nowrap;
overflow-x: scroll;
width: 250px;
position: relative;
}
After that, you'll need to modify your JS slightly. You'll still want to scroll to the offset of the element, but you'll also need to take into account your current scroll position.
(To clarify, if you clicked orange - which has an offset initially of 250px, post-animation, the offset for orange would be0px, and black would be250px. If you then click black, it will attempt to scroll to 250px, which is the orange element.)
Here's what the updated JS might look like:
jQuery(document).ready(function ($) {
$(".scroll").click(function (event) {
var current = $('.container').scrollLeft();
var left = $(this.hash).position().left;
event.preventDefault();
$('.container').animate({
scrollLeft: current + left
}, 200);
});
});
A fiddle to demonstrate: https://jsfiddle.net/bpxkdb86/4/
For the fiddle, I removed physical white-space in the HTML (to prevent the divs from having space between them) using <!-- comments -->, and also added position: relative to the containing element (to use position)
A CSS solution, try adding this to you element in CSS,
overflow-x: scroll;
This, should do it for you.
You need two changes for this to work.
First, add height and width for the container and then set overflow in css.
width:250px;
height:250px;
overflow: auto;
Second update jquery to animate the container, now it is animating the body.
$('.single-box').animate({
JSFiddle is avaialble in the following link
https://jsfiddle.net/jym7q0Lu/
just use a css if you want your div to be scrollable..
.container {
white-space: nowrap;
overflow-x: scroll;
width: 250px;
position: relative;
}
I'm trying to achieve the effect of a sliding div using the jquery animate option. I'm able to "slide" the parent div up but I'm having issues with showing the div behind the slider.
I've created this jsfiddle to show my issue.
Try uncommenting the photoOptions div. I'm trying to hide this div so it's only revealed when the parent div is slid up.
<div class="photoWrapper">
<!-- <div class="photoOptions"> This is your data. </div>-->
<div class="photoHolder">
Image Here
</div>
<div class="photoMeta">More data here</div>
<div class="photoCredits">
Trigger
</div>
</div>
Code
jQuery.fn.blindToggle = function(speed, easing, callback) {
var h = this.height() + parseInt(this.css('paddingTop')) + parseInt(this.css('paddingBottom'));
return this.animate({
marginTop: parseInt(this.css('marginTop')) < 0 ? 0 : -h
}, speed, easing, callback);
};
$(document).ready(function(){
$(".trigger").click(function(){
$('.photoHolder').blindToggle('slow');
});
});
Current CSS:
.photoWrapper {
width:200px;
border: solid 1px #ddd;
}
.photoHolder {
border: solid 1px #eee;
width:200px;
height:266px;
}
.photoOptions {
padding-top: 50px;
height: 266px;
width: 200px;
background: #eee;
position:absolute;
}
Any thoughts on how I can achieve this?
The browser renders elements based on there place in the DOM, if an element preceeds another element in the dom, it is rendered under it.
To change this default behaviour, you should use the CSS rule z-index, by defining a lower z-index on your .photoOptions div, it will be rendered below it.
as seen in this fiddle
Also be aware that z-index values may be handled differently for elements that are positioned absolute, due to the fact that they are not rendered in the normal flow.
Using the callback on .blindToggle() can achieve that effect but you're going to have to edit your CSS so that .photoCredits is visible and just start off with .photoOptions hidden:
$(document).ready(function () {
$(".trigger").click(function () {
$('.photoHolder').blindToggle('slow', function () {
$(".photoOptions").show();
});
});
});
.photoOptions {
padding-top: 50px;
height: 266px;
width: 200px;
background: #eee;
position:absolute;
display:hidden;
}
I know it seems trivial, but I'm having some trouble wrapping my head around this.
<div id="divA" style="width: 400px; height: 400px; background-color: #FF0000;">
<div id="divB" style="float: left; width: 200px; height: 200px; background-color: #FFFF00;">
<div id="divC" style="float: left; width: 100px; height: 100px; background-color: #FF00FF;">
</div>
</div>
</div>
What I need is a rule that applies to all divs, like div:hover { background-color: #000000 !important; }, that only affects the first parent div of the event (when I hover divC, I want the background color of divC to change to black, but not the background colors of divB or divA)... like the inspector does in Google Chrome.
Any ideas?
I don’t believe it is possible to do this with just CSS, but you can with JavaScript.
The key is to use event.stopPropagation() on the mouseover event.
Here is an example using jQuery: http://jsfiddle.net/K96DS/2/
$('div').on('mouseover', function(){
$(this).addClass('hovered')
// this is the key, this stops te mouover event
// from bubbling up to the parent elements
event.stopPropagation();
}).on('mouseout', function(){
$(this).removeClass('hovered')
})
Are you thinking using something like .this because of an odd behavior in :hover?
.mouseover(function(){
$(this).addClass('selected');
});
Are you looking for something like this ?
jQuery Solution:
$('div').each(function(){
$(this).on({
mouseover:function(){
$(this).css('background-color','black');
},
mouseout:function(){
$(this).css('background-color','');
}
});
});
http://jsfiddle.net/j8ebE/2/
#divC:hover #divA { background-color: #FF0000 !important; }
#divC:hover #divB { background-color: #FFFF00 !important; }
Maybe hacks... :)