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
Related
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 working on a page with inputs on it that will be printed frequently. When printed, the page requires quite a different layout, with different labels and information presented. To make this simpler, I've got separate CSS for Print and Screen, and labels that correspond to the data from the foreground.
Here's a simplified version of what I'm working with:
<style>
#media screen {
#testback {display: none;}
#txtName
{
padding: 10px;
margin: 10px 20px;
border-radius: 8px;
border: 2px solid #888;
}
}
#media print {
#testfore {display: none;}
#lblName {
position: absolute;
top: 5%;
right: 25%;
}
}
</style>
<div id="testfore">
<input id="txtName" type="text" placeholder="Name..." />
</div>
<div id="testback">
<label id="lblName"></label>
</div>
JSFiddle: http://jsfiddle.net/h1vu13p1/1/
I'm hoping to go for a minimalistic approach, where the stuff in the background is only updated when the user decides to print the page, i.e. when the Print Preview or the Print Dialog is brought up. Are there any JQuery triggers that connect to either of those events?
There are about fifteen inputs on the page. If I can't update them when checking the print stuff, and instead have to do it on change/keyup, is there a way to avoid writing a separate function for each input? I was considering using classes, but then I wouldn't know how to get the info to the right labels on the hidden div.
Can you try this?
window.onbeforeprint = function() {
$('#lblName').text($('#txtName').val());
};
http://jsfiddle.net/7LL2hwwk/
if you want to solve this with js here you can take a look this:
$('input[id^="txt"]').on('change',function(){
var name = $(this).attr('id');
$('#lbl'+name.replace('txt', '')).text($(this).val());
});
http://jsfiddle.net/d5b39w8c/
I need to place a <div> with fixed height (100px) and full width (100% of the parent <td>) within a <td> on the bottom. The <td> could be higher than the browsers viewport height as the content of the other <td>s are probably huge.
I already tried some solutions like this (link), which is actually placing the div at the bottom of the browsers viewport.
Edit:
Here's a snippet of what is NOT working (according to the link above):
td {
position: relative;
}
div {
position: absolute;
bottom: 0;
}
Is there any option to fix a <div> to the total bottom of a <td> using PHP, HTML, CSS or JavaScript (jQuery also)?
Edit 3:
Another problem occuring, when I use the solution as showed above is, that if I assign the div the property "position: absolute;" the "width: 100%;" relates to the viewport width, not the td width.
Edit 4:
The actual code of my page:
html:
<tr>
<td id="content">
</td>
<td class="sidebar">
<div class="internal">Notice</div>
</td>
</tr>
css:
#content{
height: 1000px;
}
.sidebar{
width: 10%;
min-width: 200px;
position: relative;
}
div.internal{
position: absolute;
bottom:0;
width:100%;
height: 100px;
}
jsFiddle: Source
Here's a working example
Use this to place the div at the bottom
td{
position: absolute;
}
div{
position: absolute;
bottom: 0px;
}
UPDATE
This is an example with your code working link
It work's for me in Chrome and IE. The Red section is your div. Is this the layout you want?
UPDATE 2
If you want to use a table layout you can try doing that: table layout
UPDATE 3: working only with tables
If the previous solution didn't work for you I'm guessing your code isn't modular enough. If you want to use tables, you might want to use only tables. Add another table inside the requested cell like this: table inside the cell . As much as I'm against it, I still think it's better than using JS to solve your problem. It will be easier to maintain in the future.
You need using something like:
<table>
<tr>
<td class="sidebar">
<div class="internal">Notice</div>
</td>
</tr>
</table>
CSS:
.sidebar{
width: 10%;
min-width: 200px;
height: 1000px;
background-color: green;
}
div.internal{
position: absolute;
height: 100px;
background-color: yellow;
}
Javascript:
$(document).ready(function () {
var $div = $('div.internal');
var $td = $div.closest('td');
$div.width($td.width() + 2);
$div.css('top', ($td.height() - $div.height() + 12) + 'px');
});
http://jsfiddle.net/Z58ZW/5/
try adding
div.myClass{
position: absolute;
bottom:0;
width:100%;
}
to the div.
Example with the div positioned only on td bottom.
JSFiddle
Some code when I call a showhide method in html is not working correctly. The method shows then hides some html content on this webpage, however, the html or css is not functioning correctly. For example, when the page is loaded in a browser, the space where the div will be shown is just empty space, when there shouldn't be space at all, but when the div is shown it just fills that space. The I think it could be something to do with the css, however I am not to sure. Here is the CSS id I am using to show and hide.
#showAndHide {
text-align: justify;
height: auto;
width: 700px;
margin: auto;
position: relative;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 10px;
visibility: hidden;
}
and here is a small sample of the html that this is being applied to.
<div id="showAndHide">
<div id="physicalAdress">
<div class="h4">
<h4> What is your physical address? </h4>
</div>
<p> Property name (if you have one) </p>
<input type="text" name="propertyName" /><br/>
that html is within the showandhide div, then within a user input div which is:
.userinput {
text-align: justify;
height: auto;
width: 700px;
margin: auto;
position: relative;
border-collapse: collapse;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 10px;
border-right-style: solid;
border-left-style: solid;
}
here is the Javascript method.
function showHideDiv()
{
var divstyle = new String();
divstyle = document.getElementById("showAndHide").style.visibility;
if(document.getElementById("yesPrint").checked == true)
{
document.getElementById("showAndHide").style.visibility = "visible";
}
if(document.getElementById("noPrint").checked == true)
{
document.getElementById("showAndHide").style.visibility = "hidden";
}
}
Basically when I run the page, and show the content the styling is becoming skewed and the positioning of the html that is not with the show and hide content is also becoming skewed.
Any ideas/help would be appreciated.
use display:none instead of visibility: hidden;.
visibility: hidden; reserves space for element
Change visibility:hidden to display:none to prevent the element from taking up space when hidden.
You may need to change your JavaScript slightly, but I can't say for sure as you haven't posted it, but you're going to need something like this:
element.style.display = "block"; //Show the element
function toggle_show(id) {
var el = document.getElementById(id);
if (el && el.style) {
el.style.display = el.style.display == 'none' ? 'block' : 'none';
}
}
http://webdesign.about.com/od/css/f/blfaqhidden.htm
Quoting webdesign:
"visibility: hidden hides the element, but it still takes up space in the layout.
display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code."
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.