I have a responsive table whose first column I wish to freeze. I took reference from Stack Overflow and tried the code on my table.
CSS code:
.table-responsive>.fixed-column {
position: absolute;
display: inline-block;
width: auto;
border-right: 1px solid #ddd;
}
jQuery code:
$(function(){
var $table = $('.table');
//Make a clone of our table
var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
//Remove everything except for first column
$fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();
//Match the height of the rows to that of the original table's
$fixedColumn.find('tr').each(function (i, elem) {
$(this).height($table.find('tr:eq(' + i + ')').height());
});
});
However this code is not working, can anyone tell how to make this thing work, complete code at JSFIDDLE
Related
I am trying to create a data-grid where I am not displaying all the records in the beginning and want to render them when scrolled. Is there a way I can set a scroll size based on the amount of data that I have and change the data in the dev when user scrolls.
I know there are grid's out there but I do not want to use them and want to know what are the different ways to do it.
I have tried looking into the scroll event and I did not find anything about the scroll direction or the current offset. Is there any documentation I can find. or even a technical name to search for would help me.
You can search for a "infinity scroll" with javascript and html.
EXAMPLE HTML: `<ul id='infinite-list'></ul>`
EXAMPLE CSS: `#infinite-list {
/* We need to limit the height and show a scrollbar */
width: 200px;
height: 300px;
overflow: auto;
/* Optional, only to check that it works with margin/padding */
margin: 30px;
padding: 20px;
border: 10px solid black;
}
/* Optional eye candy below: */
li {
padding: 10px;
list-style-type: none;
}
li:hover {
background: #ccc;
}`
EXAMPLE JAVASCRIPT: `var listElm = document.querySelector('#infinite-list');
// Add 20 items.
var nextItem = 1;
var loadMore = function() {
for (var i = 0; i < 20; i++) {
var item = document.createElement('li');
item.innerText = 'Item ' + nextItem++;
listElm.appendChild(item);
}
}
// Detect when scrolled to bottom.
listElm.addEventListener('scroll', function() {
if (listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
loadMore();
}
});
// Initially load some items.
loadMore();
`
I am creating a list of profiles which will be displayed based on a given category. The setup makes it inconvenient to use a container element to wrap the list items, so I'm using display:inline-flex on each item instead of a flex container with the usual justify-this and align-that.
The issue is that the first element in the row appears to have a space to the right of it, and I'm not sure why.
I'd like to display all the elements evenly, in this case 4 to a row with identical spacing, without nesting them in a parent container if possible.
// simple function to repeat html elements
$(document).ready(function() {
let a = $('.a')[0];
const repeats = 11;
let count = 0;
while (count < repeats) {
$('body').append($(a).clone())
count++;
}
//$( 'body' ).append( html );
});
.a {
background-color: red;
box-sizing: border-box;
border: 1px solid green;
display: inline-flex;
height: 25px;
width: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div class="a"></div>
</body>
</html>
Actually now the first element (with space to the right) is one you declared in your html. Remove it from there and use instead:
// simple function to repeat html elements
$(document).ready(function() {
let a = $('<div class="a"></div>');
const repeats = 12;
let count = 0;
while (count < repeats) {
$('body').append($(a).clone())
count++;
}
//$( 'body' ).append( html );
});
.a {
background-color: red;
box-sizing: border-box;
border: 1px solid green;
display: inline-flex;
height: 25px;
width: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
</body>
</html>
A look at the dev tools inspector reveals a bit of invisible code between the first and second items:
When I delete those lines in the inspector, the gap is removed and all boxes line up as intended.
So it's an issue with your script appending elements. I'm not sure how you want to handle that (e.g., is the script only for this demo? is the problem only in this IDE? is removing the first element an option?), so I won't get into solutions.
I have a huge table containing data in vertical and horizontal directions...
Like this: jsfiddle
I am hoping to make the far left column and the top row fixed in a way that when I am scrolling in both directions, I am able to keep the these two (column and row) in place. But only move the content.
How to achieve this with JS/CSS?
I am guessing a pure css solution won't do it, since there is a two-way scroll.
someclass { position: fixed }
The entire code required to answer your question is too large to include here. Instead, I'll link you to the JSBin which holds the answer, and just include the styling and javascript.
The caveats are:
If you are dead set on using tables instead of divs to display your data, then you're going to have a bad time formatting the answer I gave you, especially if the data in the cells are varying widths and heights.
In order to accomplish this, you must go through each row and column header, then set their respective widths and heights to the max between their widths/heights and the widths/height of the rows in the table. The reason why their widths and heights aren't automatically set respective to the rest of the cells in the table is because upon setting their position: fixed style attribute, you basically break them out of the table.
So, if you have the power, consider using divs instead and breaking the row headers out into a separate div you can position: fixed and emulate the current behavior of the column headers.
Another bonus is that you will have a performance increase because jQuery will not be iterating through every row to adjust the row headers every time you scroll.
You must use jQuery UI.
HTML:
<!-- Notice I removed background and border color from table tag -->
<table border="0" width="100%" cellpadding="3" cellspacing="1">
<tr>
<td>Dead Cell</td><!-- this cell is not shown -->
...
CSS:
/* Make white space above table since we broke the column headers out of the table */
table {
margin-top: 51px;
position: relative;
}
table td {
border: 1px solid #FFCC00;
height: 44px;
background-color: #FFFFCC;
}
/* styling for column headers */
table tr:first-child {
position: fixed;
top: 0;
left: 57px;
z-index: 100;
}
/* remove first cell in top left position */
table tr:first-child td:first-child {
display: none;
}
table tr:first-child td,
table tr {
position: relative;
}
table tr:first-child td {
background: orange;
}
table tr td:first-child {
background: orange;
position: fixed;
width: 39px
}
/* Make white space to the left of table since we broke the row headers out of the table */
table tr:nth-child(n+2) td:nth-child(2) {
margin-left: 48px;
display: block;
}
JS:
$(function(){ // When document is loaded and ready
$(window).scroll(function() { // When we scroll in the window
// Move column headers into place
$('table tr:first-child td').css('left', - $(this).scrollLeft());
// Move row headers into place
$('table tr td:first-child').each(function() {
$(this).position({ // jQuery UI overloaded function
my: "left top",
at: "left top",
of: $(this).parent(),
using: function(pos) {
$(this).css('top', pos.top);
}
});
});
});
});
Again, here is the link to the JSBin.
I am trying to create a web page where on click of a button I can add div tags. What I thought to do was that I'll create two div tags within a single div so that over all presentation will be uniform and similar to a table having two columns and multiple rows and the first column contains only label's and second column will contain textbox.
Here is the JS file:
var counter = 0;
function create_div(type){
var dynDiv = document.createElement("div");
dynDiv.id = "divid_"+counter;
dynDiv.class="main";
document.body.appendChild(dynDiv);
question();
if(type == 'ADDTEXTBOX'){
ADDTEXTBOX();
}
counter=counter+1;
}
function question(){
var question_div = document.createElement("div");
question_div.class="question";
question_div.id = "question_div_"+counter;
var Question = prompt("Enter The Question here:", "");
var node=document.createTextNode(Question);
question_div.appendChild(node);
var element=document.getElementById("divid_"+counter);
element.appendChild(question_div);
}
function ADDTEXTBOX(){
var answer_div = document.createElement("div");
answer_div.class="answer";
answer_div.id = "answer_div_"+counter;
var answer_tag = document.createElement("input");
answer_tag.id = "answer_tag_"+counter;
answer_tag.setAttribute("type", "text");
answer_tag.setAttribute("name", "textbox");
answer_div.appendChild(answer_tag);
var element=document.getElementById("divid_"+counter);
element.appendChild(answer_div);
}
Here is the css file:
.question
{
width: 40%;
height: auto;
float: left;
display: inline-block;
text-align: justify;
word-wrap:break-word;
}
.answer
{
padding-left:10%;
width: 40%;
height: auto;
float: left;
overflow: auto;
word-wrap:break-word;
}
.main
{
width: auto;
background-color:gray;
height: auto;
overflow: auto;
word-wrap:break-word;
}
My problem is that the code is working properly but both the divisions are not coming in a straight line. after the first div prints on the screen the second divisions comes in another line. How can I make both the div's come in the same line?
PS: should I stick with the current idea of using div or should I try some other approach? like tables?
The reason its in diffrent lines lies in your JS code, try setting your class like following:
//question_div.class="question";
question_div.setAttribute("class", "question") ;
and
//answer_div.class="answer";
answer_div.setAttribute("class", "answer");
and also this:
//dynDiv.class="main";
dynDiv.setAttribute("class", "main");
Your divs have not class attribute set properly. I recommend chrome in-built tools for developers or FireBug add-on if you use Firefox to check whether elements you built are like you design them to be.
You may check code here: http://jsfiddle.net/Nnwbs/2/
var counter = 0;
function create_div(type){
var dynDiv = document.createElement("div");
dynDiv.id = "divid_"+counter;
//dynDiv.class="main";
dynDiv.setAttribute("class", "main");
document.body.appendChild(dynDiv);
question();
if(type == 'ADDTEXTBOX'){
ADDTEXTBOX();
}
counter=counter+1;
}
function question(){
var question_div = document.createElement("div");
//question_div.class="question";
question_div.setAttribute("class", "question") ;
question_div.id = "question_div_"+counter;
var Question = prompt("Enter The Question here:", "");
var node=document.createTextNode(Question);
question_div.appendChild(node);
var element=document.getElementById("divid_"+counter);
element.appendChild(question_div);
}
function ADDTEXTBOX(){
var answer_div = document.createElement("div");
//answer_div.class="answer";
answer_div.setAttribute("class", "answer");
answer_div.id = "answer_div_"+counter;
var answer_tag = document.createElement("input");
answer_tag.id = "answer_tag_"+counter;
answer_tag.setAttribute("type", "text");
answer_tag.setAttribute("name", "textbox");
answer_div.appendChild(answer_tag);
var element=document.getElementById("divid_"+counter);
element.appendChild(answer_div);
}
create_div("ADDTEXTBOX");
And about that aproach I mean div or tables, you are correct to use div, its generaly recommended to do so.
Also after you correct your JS code fix also a bit your css styles as you like.
If you are using chrome using inspect element and find the corresponding 'div' tag and try to adjust the style(position)
Try to position both Divs with absolute inside a main div that could be relative. something like
#mainDiv {
position:absolute; /* or relative depends how you have it*/
width:80%;
height:100%;
left:10%;
}
#div1 {
position:absolute;
width: 40%;
height:100%;
left:0px;
top:0px;
}
#div2 {
position:absolute;
width: 40%;
height:100%;
right:0px;
top:0px;
}
It's simple. To line up both div's, give the position of of the two div's as display:inline-block;
display:inline-block;
Note: BOTH div's have to have this property for them to appear in a line.
This is my HTML code
<div class="container">
<div class="menu-vertical">menu-vertical</div>
<div class="mainContent">mainContent</div>
</div>
This is my CSS
.container {
border: 3px solid #666;
overflow: hidden
}
.menu-vertical {
width: 230px;
float: left;
padding: 10px;
border: 2px solid #f0f
}
.mainContent {
overflow: hidden;
padding: 30px;
border: 2px solid #00f
}
Now i want to make few div inside mainContent of fixed size lets say 150px however if the mainContent width became, lets say 650px then i'll be having 4 div in a row then again 4 in a row. So 4 div means it will be of 600px, hence i'll be having an extra 50px of space.
Now finally what exactly i want to do is to detect this empty space and making the mainContent max-width to 600px`. Any trick which can do this. Javascript or something.
Here is the solution using jquery:
$(function(){
var outerdiv = $('.mainContent');
var innerdivs = $('.mainContent > div');
var sum =0;
innerdivs.each(function(index){
sum += $(this).width(); //calculate and add the widths of every div
});
//outerdiv.width(sum); //set new width for .maincontent
outerdiv.css("max-width", sum); //you can also set max-width like this.
});
You can check out the jsfiddle for this here: http://jsfiddle.net/jqYK6/
Regards,
Saurabh
https://stackoverflow.com/a/10011466/1182021
Here is the link for the answer... after waiting for long i come up to this.