Setting scroll height of a DIV using javascript and css - javascript

I have this div which pops up when an action is triggered. When I scroll down the page, it still remains on top of page. I want to set the scroll height so it moves in relative position to the page scroll. Simply making the position : relative does not work. How can I use javascript get this? Help.
<form name="" action="" method="POST">
<div id='divSearchAndReplace'>
<table id='divSearchAndReplace_Header' width='100%'>
<tr>
<td>
<table>
<tr>
<td align='left'></td>
</tr>
</table>
</td>
</tr>
</table>
<table width='100%' border='0' cellspacing="4" cellpadding="2">
<tr><td colspan='2' nowrap height='10px'></td></tr>
<tr valign="top">
</tr>
<tr><td colspan='2' align='right' style='padding-right:12px;'><input class='form_button' type='submit' name='btnSubmit' value='Replace' onclick='return checkSearchAndReplace();'/></td></tr>
</table>
</div>
</form>
this is the css
#divSearchAndReplace { width:450px; height:240px; border:1px solid #336699; background-color:#ffffff; position:absolute; left:200px; top:75px; display:none; }
#divSearchAndReplace table { width:450px; border:0px; align:center; }

Are you maybe looking for position: fixed in CSS?

Related

Float <div> element on top of table?

When the <div> is expanded, the table gets expanded too. I intend to expand only the <div>, floating it over the table. How can I do this?
$(document).ready(function() {
$("div").click(function() {
$("div").css({
"height": "100px"
});
});
});
div {
background-color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
<tr>
<td>
<div>click</div>
</td>
</tr>
</table>
All you need is to set position:absolute for your div.
See CSS Layout - The position Property reference.
$(document).ready(function(){
$("div").click(function(){
$("div").css({"height":"100px"});
});
});
div{
background-color:grey;
}
table tr td{
height:20px;
width:20px;
}
div{
position:absolute;
top:15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
<tr><td>
<div>click</div>
</td>
<td>
2
</td>
</tr>
<tr>
<td>click</td>
<td>
2
</td>
</tr>
<tr>
<td>click</td>
<td>
2
</td>
</tr>
<tr><td>
click
</td>
<td>
2
</td>
</tr>
</table>

Table style messed up when printing

I'm trying to print a simple table, yet the layout seems to mess up. Does anybody know why?
Table to print
Print Preview
Here is the HTML and JS I have used to create the Table.
function printData() {
var divToPrint = document.getElementById("printtable");
newWin = window.open("");
newWin.document.write(divToPrint.outerHTML);
newWin.print();
newWin.close();
}
$('button').on('click', function() {
printData();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="printtable" style="border: 1px solid black; width: 90mm; height: 29mm;">
<div style="float: left; font-size: 10px; position: relative; top: 50%; transform: translateY(-50%); margin-left: 2mm;">
<p>
<img src="/" alt="" height="30">
</p>
<table>
<tbody>
<tr>
<td><u>Row 1</u> :</td>
<td> Row 1</td>
</tr>
<tr>
<td><u>Longer Row 2</u> :</td>
<td> Row 2</td>
</tr>
<tr>
<td><u>R3</u> :</td>
<td> Row 3</td>
</tr>
</tbody>
</table>
</div>
</div>
<br />
<br />
<button>Print me</button>
You need to specify style related to print .
You can use #media print to specify styles for print
In the end, I used the solution proposed here is such alignment achievable without <table>?
By aligning my text without using the table tag, the text prints just fine.

How adjust scale of a table in a container on Html?

I have a problem to automatically adjust a table in a div if the user adds collones or lines in the matrix. Even if its size exceeds, I wish he still full in my "container div" by setting a smaller scale. Is it possible to resize only my table keeping the size of my container ? Always keeping my table in the center ?
Here is my css used:
CSS
.container{
background-image: url(image/block_surveillance_content.gif);
background-position: bottom right;
padding-bottom: 10px;
width: 320px;
height:400px;
}
.matrice{
height:100%;
width:100%;
}
HTML
<div id="block" class="container">
<table id="dataArray" class="matrice">
<tr>
<td></td>
<td>
<asp:Table runat="server" ID="matrixColumnLabel" ></asp:Table>
</td>
</tr>
<tr>
<td>
<asp:Table runat="server" ID="matrixLineLabel" style="position:relative;margin:6px"></asp:Table>
</td>
<td>
<asp:Table runat="server" ID="tableMatrice" CellPadding="0" CellSpacing="0" style="margin:6px"></asp:Table>
</td>
</tr>
</table>
</div>
Thanks a lot

Draw a simple table with some cells without a border

I want to draw a table
P
Q [A B]
[C D]
where A, B, C, D are drawn with a border. Q and P are labels for the table and should not be drawn with a border. Q and P should be aligned with A.
How to achieve this? I can control which row to draw a border, but it won't help because I can't draw a border for the whole row.
td {
border: 1px solid #999;
padding: 10px;
}
td.no-border {
border: 0;
}
tr.no-border td {
border: 0;
}
<table>
<tr class="no-border">
<td></td>
<td colspan="2">p</td>
</tr>
<tr>
<td class="no-border">q</td>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td class="no-border"></td>
<td>c</td>
<td>d</td>
</tr>
</table>
I've created an ad hoc css class helper no-border, and applied it only to the cells I want to be borderless.
Do something like:
<table border="0" cellspacing="0">
<tr>
<th> </th>
<th>P</th>
<th> </th>
</tr>
<tr>
<th>Q</th>
<td class="border">A</td>
<td class="border">B</td>
</tr>
<tr>
<th> </th>
<td class="border">C</td>
<td class="border">D</td>
</tr>
</table>
Then use CSS:
td.border { border: 1px solid #000 }
This one is non table solution.
<div id="container">
<div class="row">
<div id="top">P</div>
</div>
<div class="row">
<div id="left">Q</div>
<div id="table">
<div class="row">
<div class="cell">A</div>
<div class="cell">B</div>
</div>
<div class="row">
<div class="cell">C</div>
<div class="cell">D</div>
</div>
<div class="row"></div>
</div>
</div>
</div>
CSS
.cell{
float:left;
width:50px;
border:1px solid #c0c0c0;
}
.row{
display:block;
overflow:auto;
}
#container{
display:block;
overflow:auto;
}
#top{
display:block;
overflow:auto;
margin-left:20px;
}
#left{
float:left;
overflow:auto;
}
#table{
float:left;
overflow:auto;
margin:5px;
margin-top:0px;
}
JSFiddle: http://jsfiddle.net/harendra/EUZru/
Does this solution (pure HTML) works for you ?
<table>
<tr>
<td></td>
<td colspan="2">P</td>
</tr>
<tr>
<td>Q</td>
<td rowspan="2">
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
</table>
example in jsfiddle

How can I make an HTML TD that's set to overflow:hidden scroll smoothly with the click of a button through Javascript?

I have an HTML TD with overflow set to hidden. It's width is 850px and height is 567px. The content inside should measure 567px high and 1700px wide. I want the user to be able to click a JavaScript button that scrolls the next table that's inside the TD into view. How can I do this? I've tried document.getElementById("tilesDisplay").scrollBy(10,0) but that didn't work.
<tr>
<td style="margin:0px; padding:0px; width:100%;" cellpadding="0px" cellspacing="0px">
<table style="margin:0px; padding:0px; width:100%; table-layout:fixed; overflow:hidden; white-space: nowrap;" cellpadding="0px" cellspacing="0px">
<tr>
<td style="background-color:#000000; vertical-align:middle; text-align:left;" onmouseover="arrow(this,1,'left');" onmouseout="arrow(this,2,'left');" onclick="ChangePortfolioImage('left');"> <img src="../images/general/arrow-left.png" style="width:25px; cursor:pointer;" /></td>
<td id="tilesDisplay" style="background-color:#000000; width:850px; height:567px; overflow:hidden; border:solid 1px #758264;">
<table>
<tr>
<td style="width:850px; height:567px;">
<table style="width:850px; height:567px;">
<tr>
<%
rowCount=0
for i=1 to (ubound(theseImagesSplit)-1)
if rowCount=3 or rowCount=6 then
rowCount=rowCount+1
response.Write("</tr><tr>")
else
if rowCount=9 then
rowCount=1
response.Write("</tr></table></td><td style=""width:850px; height:567px;""><table style=""width:850px; height:567px;""><tr>")
else
rowCount=rowCount+1
end if
end if
RS.Open "Select * FROM Portfolio WHERE ID=" & theseImagesSplit(i),conn
tiID=RS("ID")
tiImageURL=RS("imageURL")
tiCaption=RS("caption")
tiFrontPic=RS("frontPic")
tiCollection=RS("collection")
RS.Close
if cInt(tiID)=cInt(firstImage) then
tiSummary="true"
tiBorder="#3c4534"
else
tiSummary="false"
tiBorder="#bdc49f"
end if
%>
<td style="height:150px;"><center>
<table id="thumbnail<%=i %>" class="thumbnail" style="height:132px; width:198px; cursor:pointer; border:solid 1px <%=tiBorder %>;" summary="<%=tiSummary %>" onmouseover="this.style.border='solid 1px #3c4534';" onmouseout="thumbnailOut(this);" onclick="ChangePortfolioImage('<%=tiID %>'); updateThumbnailBorders(<%=(ubound(theseImagesSplit)-1) %>,<%=i %>);">
<tr>
<td style="border:solid 3px #000000;"><img src="<%=tiImageURL %>" style="height:130px;" /></td>
</tr>
</table>
</center></td>
<%
next
%>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td style="background-color:#000000; vertical-align:middle; text-align:right;" onmouseover="arrow(this,1,'right');" onmouseout="arrow(this,2,'right');" onclick="ChangePortfolioImage('right');"><img src="../images/general/arrow-right.png" style="width:25px; cursor:pointer;" /> </td>
</tr>
</table>
</td>
</tr>
I think the easiest way would be to use a container div positioned relatively and offset the position of the container div on the button click event.
<table>
<tr> <td>
<div id="table-container"> <table class="subtable"> .... </table></div>
</td> </tr>
</table>
cont = document.getElementById('table-container');
offset = 850; // Or whatever the width of the subtable
<input onClick = "cont.style.left = cont.style.left - offset;">

Categories