I need to align the three boxes in a horizontal position. Also I need to add toggle color of the border of the second box. I am pasting my codes here.
My HTML code is
Unordered List
This is a simple list
First Item (bold)
Second Item
Third Item
Last Item (underlined)
<div class="box2">
<h2>Button Jquery Demo</h2>
<p>The background of this box should be set to white on document.ready()</p>
<p>Clicking the button below will alternate the color of the border of this box to red and back to default on on each click.</p>
Toggle Color
</div>
<div class="box3">
<h2>Table Example</h2>
<p>Table rows should include a hover state</p>
<table>
<thead>
<div id="col3">
<table summary="" border="1" cellspacing="0" cellpadding="3">
<tr>
<th>Driver</th>
<th>Hometown</th>
<th>Car</th>
</tr>
</thead>
<tbody>
<tr>
<td>John S.</td>
<td>Lincoln, NE</td>
<td>55</td>
</tr>
<tr>
<td>Jane D.</td>
<td>Omaha, NE</td>
<td>24</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Mike J.</td>
<td>Albany, NY</td>
<td>1</td>
</tr>
</tfoot>
</table>
</div>
My CSS code is
.box1 {
background-color: #4b4244;
width: 300px;
padding: 25px;
margin: 25px;
height: 240px ;
border-radius: 25px;
display:inline-block;
}
.box2 {
margin: auto;
background-color:white;
width: 300px;
padding: 25px;
height: 240px;
border-radius: 25px;
display: inline-block;
}
.box3 {
position: absolute;
right: 0px;
background-color: #4b4244;
width: 300px;
padding: 25px;
margin: 25px;
height: 240px ;
border-radius: 25px;
display: inline-block;
}
Use float:left to align your boxes:
jsFiddle
EDIT:
I suspect the floating boxes are throwing your footer off. In that case, wrap your boxes in a containing tag (e.g. main) and give it this :after content:
main:after{
content:"";
display:block;
clear:both;
}
updated fiddle
try with this below code it may help you and look it into full screen
$(document).ready(function(){
$("a.toggleColor").click(function(){
$(".box2").toggleClass("border");
});
});
div.box1,.box2,.box3{
float : left;
height: 240px ;
width: 300px;
padding: 25px;
background-color: #4b4244;
margin : 25px;
border-radius: 25px;
}
.box2 {
background-color:white !important;
border : 1px #4b4244 solid;
}
.border{
border : 1px red solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box1">
<h2>Unordered List</h2>
<p>This is a simple list</p>
<ul>
<li>First Item (bold)</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Last Item (underlined)</li>
</ul>
</div>
<div class="box2">
<h2>Button Jquery Demo</h2>
<p>The background of this box should be set to white on document.ready()</p>
<p>Clicking the button below will alternate the color of the border of this box to red and back to default on on each click.</p>
Toggle Color
</div>
<div class="box3">
<h2>Table Example</h2>
<p>Table rows should include a hover state</p>
<div id="col3" >
<table summary="" border="1" cellspacing="0" cellpadding="3">
<thead>
<tr>
<th>Driver</th>
<th>Hometown</th>
<th>Car</th>
</tr>
</thead>
<tbody>
<tr>
<td>John S.</td>
<td>Lincoln, NE</td>
<td>55</td>
</tr>
<tr>
<td>Jane D.</td>
<td>Omaha, NE</td>
<td>24</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Mike J.</td>
<td>Albany, NY</td>
<td>1</td>
</tr>
</tfoot>
</table>
</div>
Related
The title is not clear, I know. Let me explain what I mean:
First column has td elements which have varying rowspans. What I want is to keep the td text in first column 'fixed' at the top while scrolling down.
But only as long as the rest of the td elements in the remaining columns are in scope.
Once all the rows (which the first column cell is spanning) is out of table view, the td element should scroll out of the view and the next td should now start fixing.
After Scrolling a bit:
And after All the animal rows are scrolled out, the fixed 'Animal' td would also go up and then 'Cars' would be fixed and then Hats would be fixed like this:
I got it working by setting
vertical-align: top; for the element
and created a div under the td element which contains the actual value for the cell
then applied position: sticky; top:0; z-index: 1; to the div.
Working fiddle: https://jsfiddle.net/ankitkraken/yw0jhzpu/1/
HTML:
<td class="td-class-name" rowspan="3">
<div class="level-1">
"Cars"
</div>
</td>
CSS:
.td-class-names{
vertical-align: top;
}
.level-1{
position: sticky ;
top: 80px;
z-index: -1;
}
I had to use top: 80px;, top:0; was putting the td contents BEHIND the sticky table header.
You can acheive this result with the sticky positioning:
thead tr:first-of-type {
position: sticky;
top: 0px;
z-index: 10;
}
thead tr:first-of-type th {
background: yellow;
}
th {
border: 1px solid;
padding: 6px;
}
td {
border: 1px solid;
padding: 6px;
}
th[rowspan]>.box {
vertical-align: top;
position: sticky;
top: 34px;
}
th[rowspan][data-order='first'] {
background: orange;
}
th[rowspan][data-order='second'] {
background: green;
}
th[rowspan][data-order='third'] {
background: indianred;
}
th[rowspan][data-order='fourth'] {
background: lightblue;
}
.main-container {
position: relative;
}
.table-container {
position: static;
max-height: 180px;
max-width: 350px;
;
overflow-y: scroll;
}
.fake {
width: 100%;
height: 100px;
}
<div class="main-container">
<div class='table-container'>
<table>
<thead>
<tr>
<th>CATEGORY</th>
<th>TYPE</th>
<th>NAME</th>
</tr>
</thead>
<tbody>
<tr>
<th data-order='first' rowspan='5'>
<div class='box'>Animals</div>
</th>
<td>Dog</td>
<td>Bob</td>
</tr>
<tr>
<td>Dog</td>
<td>Flash</td>
</tr>
<tr>
<td>Cat</td>
<td>Mimi</td>
</tr>
<tr>
<td>Dog</td>
<td>Casper</td>
</tr>
<tr>
<td>Horse</td>
<td>Wind Lady</td>
</tr>
<tr>
<th data-order='second' rowspan='5'>
<div class='box'>Cars</div>
</th>
<td>Chrysler</td>
<td>Ann</td>
</tr>
<tr>
<td>Dodge</td>
<td>Christine</td>
</tr>
<tr>
<td>Ford</td>
<td>Foo</td>
</tr>
<tr>
<td>Ferrari</td>
<td>Dandy</td>
</tr>
<tr>
<td>Mercedes</td>
<td>A200</td>
</tr>
<tr>
<th data-order='third' rowspan='5'>
<div class='box'>Food</div>
</th>
<td>Apple</td>
<td>George</td>
</tr>
<tr>
<td>Banana</td>
<td>Rocco</td>
</tr>
<tr>
<td>Strawberry</td>
<td>Liza</td>
</tr>
<tr>
<td>Ananas</td>
<td>Ted</td>
</tr>
<tr>
<td>Avocado</td>
<td>Gary</td>
</tr>
<tr>
<th data-order='fourth' rowspan='5'>
<div class='box'>Phones</div>
</th>
<td>Iphone XXI</td>
<td>ObiWan</td>
</tr>
<tr>
<td>Nokia 8110</td>
<td>Neo</td>
</tr>
<tr>
<td>Ericsson</td>
<td>Dr. Who</td>
</tr>
<tr>
<td>Huawei Mate 40</td>
<td>Dead or Alive</td>
</tr>
<tr>
<td>Xiaomi</td>
<td>Ping</td>
</tr>
</tbody>
</table>
<div class='fake'>
</div>
</div>
</div>
Sticky positioning is not always straightforward, expecially when dealing with overflow properties and display: table. Here are some useful resources about these topics:
Position: stuck; — and a way to fix it
CSS Position Sticky - How It Really Works!
Creating sliding effects using sticky positioning
Position Sticky on <td> with colspan?
Made a table with first column fixed using this fiddle link http://jsfiddle.net/Yw679/6/ need a vertical text to left of fixed column(the text also vertical text also remains fixed like first column).
Difference between fiddle link and my expected output
1. the text 'co1' and 'co2' is vertically aligned
2. the vertical text should be fixed like the first column is.
fiddle code
1.HTML:
<div style="width:400px">
<table class="table1">
<tr>
<thead>
<th> make me fixed</th>
</thead>
</tr>
<tr>
<td>value number 1</td>
</tr>
</table>
<div class="table2">
<table>
<tr>
<thead>
<th>make me scrollable eeeeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeee eeeeeeeeeeeeeeeeee eeeeeeee eeeeeeeeeee eeeeeeeeeeeeee eeeeeeeeee eeeeeeee</th>
</thead>
</tr>
<tr>
<td> value number 2 </td>
</tr>
</table>
</div>
</div>
2.CSS
th,td {
padding: 5px;
border: 1px solid #000;
white-space: nowrap;
}
.table1 {
float: left;
}
.table2 {
width: 200px;
overflow: auto;
}
Here's the expected output
Something like this?
th,td {
padding: 5px;
border: 1px solid #000;
white-space: nowrap;
}
.table1 {
float: left;
}
.table2 {
width: 200px;
overflow: auto;
}
.text-container {
display: inline;
float: left;
width: 1rem;
}
.text {
text-align: center;
width: 0;
font-size: 10px;
word-wrap: break-word;
line-height: .5rem;
padding: 2px;
}
<div class="text-container">
<div class="text">CO1</div>
<div class="text">CO2</div>
</div>
<div style="width:400px">
<table class="table1">
<tr>
<thead>
<th> make me fixed</th>
</thead>
</tr>
<tr>
<td>value number 1</td>
</tr>
</table>
<div class="table2">
<table>
<tr>
<thead>
<th>make me scrollable eeeeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeee eeeeeeeeeeeeeeeeee eeeeeeee eeeeeeeeeee eeeeeeeeeeeeee eeeeeeeeee eeeeeeee</th>
</thead>
</tr>
<tr>
<td> value number 2 </td>
</tr>
</table>
</div>
</div>
I want to show different images on different list's <td> element, whenever mouse is hovered on it. I am using Bootstrap to develop my page. I tried searching here, but no definite answers was found.
Code is here. Any help please:
<section>
<div class="container">
<div class="head-list" id="list">
<h3>OUR PRESTIGIOUS GOLD MEDALISTS</h3>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 black text-center">
<table class="table table-responsive">
<thead class="table" style="background-color:gold; color: black">
<tr>
<th width="70">SR.#</th>
<th width="255">STUDENT'S NAME</th>
<th width="180">POSITION</th>
<th width="120">EXAM</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Text 1 on which I want an img to hover when mouse is pointed here</td>
<td>simple txt 1a</td>
<td>1990</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Text 2 on which I want an img to hover when mouse is pointed here</td>
<td>Simple txt 2a</td>
<td>1995</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Text 3 on which I want an img to hover when mouse is pointed here</td>
<td>Simple txt 3a</td>
<td>1998</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
</section>
<div class="clearfix"> </div>
And relevant css for the above code is:
<style>
.head-list h3{
font-size: 3.2em;
color: #2A72D3;
font-family: 'Lato', sans-serif;
text-align: center;
text-transform: capitalize;
margin-bottom:30px;
letter-spacing:2.2px;
}
tbody {color: white;
font-weight: bold;
font-size: 1.1em;
font-family: 'Montserrat Alternates', sans-serif;
}
table, th, td { /*this is the relavant css styling for the above table in
question*/
text-align: center;
padding: 2px;
border: 1px solid gold;
}
table#t01 { /*This styling is for another table i created but on the same
page*/
text-align: left;
padding: 1px;
background-color: #3B3939;
border: 1px solid black;
}
</style>
I found the solution too. added some more styles in css and then displayed it in lists.
So in css i added these:
.hover_img a {
position: relative;
color: antiquewhite;
}
.hover_img a span {
position:absolute;
left: 80%;
top: 10px;
display:none; z-index: 99;
}
.hover_img a:hover span {
display: block;
width: 200px;
}
And in html portion i added this in every <td> element of my ordered lists:
<td> <div class="hover_img">
<a>My text<span><img src="images/f61.jpg" alt="image" height="100">
</span></a>
</div> </td>
So whenever cursor hover over "My text", an image is displayed. I adjusted image's position according to my layout. It is working fine in responsive view also.
I would appreciate it if you could suggest any optimization in regard of this code, page loading, server response, etc.
Can I prevent the user from highlighting one column in a table?
I have a 2-column table. Users will want to copy the content in the second column, but not the first column.
<table>
<tr>
<td>col1</td>
<td>line1</td>
</tr>
<tr>
<td>col1</td>
<td>line2</td>
</tr>
<tr>
<td>col1</td>
<td>line3</td>
</tr>
</table>
Here's a JSFiddle with an example:
http://jsfiddle.net/vepq0e29/
When the user copies and pastes, I want the output to just be:
line1
line2
line3
...
line7
I don't want col1 to show up or be highlighted when the user selects the table.
How can I make it so that users can only select and copy content from the second column?
Thanks!
You can use pseudo-elements to show the text. Text from pseudo-elements is never copied at the moment (not sure, if it'll be changed sometime).
http://jsfiddle.net/vepq0e29/3/
td:first-child:after {
content: attr(aria-label);
}
<table>
<tr>
<td aria-label="col1"></td>
<td>line1</td>
</tr>
<tr>
<td aria-label="col1"></td>
<td>line2</td>
</tr>
<tr>
<td aria-label="col1"></td>
<td>line3</td>
</tr>
<tr>
<td aria-label="col1"></td>
<td>line4</td>
</tr>
<tr>
<td aria-label="col1"></td>
<td>line5</td>
</tr>
<tr>
<td aria-label="col1"></td>
<td>line6</td>
</tr>
<tr>
<td aria-label="col1"></td>
<td>line7</td>
</tr>
</table>
tr td:first-child {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
}
The user can't select the first column as long as he is not viewing the html source code.
http://jsfiddle.net/vepq0e29/1/
Please checkout this example, try yourself use Run Cde Snippet below and just select all rows in single column and then copy and paste in any editor and see results :)
Hope this will help
div.table {
display: block;
width: 100%;
}
div.td-outer {
width: 48%;
display: inline-block;
border: 1px solid #00aaff;
text-align: center;
vertical-align: middle;
height: 100%;
}
div.tr {
display: block;
text-align: center;
height: 140px;
vertical-align: middle;
}
div.td-inner {
display: inline-block;
border: 1px solid #ccc;
width: 90%;
vertical-align: middle;
height: 95%;
margin: 3px;
}
div.td-inner span {
height: 95%;
vertical-align: middle;
}
<div class="table">
<div class="td-outer">
<div class="tr">
<div class="td-inner"> <span>
col1
</span>
</div>
</div>
<div class="tr">
<div class="td-inner"> <span>
col1
</span>
</div>
</div>
</div>
<div class="td-outer">
<div class="tr">
<div class="td-inner"> <span>
line1
</span>
</div>
</div>
<div class="tr">
<div class="td-inner"> <span>
line2
</span>
</div>
</div>
</div>
</div>
I tried looking around SO, but I can't really figure out anything that works.
As the title says, I need to align two divs to be centered and side by side.
<div id="wrapper">
<div id="dashboard" style="width: 70%;">
<h3 id="dash" style="color:#99FF00; font-family:monospace;">
<table style="color:#99FF00; font-family:monospace;" cellpadding="7">
<tr>
<td>generation</td>
<td>1</td>
</tr>
<tr>
<td>currently living</td>
<td><p id="initial_current"></p></td>
</tr>
<tr>
<td>recently newborn</td>
<td>0</td>
</tr>
<tr>
<td>recently died</td>
<td>0</td>
</tr>
<tr>
<td>recently surviving</td>
<td>n/a</td>
</tr>
</table>
<table style="color:#99FF00; font-family:monospace;" cellpadding="7">
<tr>
<td>total living</td>
<td><p id="initial_total"></p></td>
</tr>
<tr>
<td>total newborns</td>
<td>0</td>
</tr>
<tr>
<td>total deaths</td>
<td>0</td>
</tr>
<tr>
<td>total survived</td>
<td>n/a</td>
</tr>
<tr>
<td>the answer to life</td>
<td>?</td>
</tr>
</table>
</h3>
</div>
<div id="board" style="color:#99FF00; font-size:15pt; font-family:monospace;">
</div>
Basically, the 'wrapper' is the parent div. I want to center 'dashboard' and 'board'. I hava javascript generating the text within 'board'.
I roughly want it looking like this:
Use position absolute and declare the margins as follows and you are good to go
Demo
<style>
.container {
width: 300px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px; /* Half of width */
margin-top: -50px; /* Half of height */
}
.left {
float: left;
width: 150px;
}
.right {
float: right;
width: 150px;
}
</style>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
Note: Don't forget to clear floats using clear: both; else use overflow: hidden; on the container div, currently am using height: 100%; so no issues here
solution without floating: http://jsfiddle.net/GzvJH/
<div class="container">
<div class="child"></div>
<div class="child"></div>
</div>
and css:
.container{
width: 500px;
height: 500px;
line-height: 500px;
text-align:center;
border:1px solid red;
}
.child{
width:100px;
height:100px;
border:1px solid black;
display:inline-block;
}
<style>
.container {
text-align:center;
}
.twocolumns {
width:50%
display:inline-block;
}
</style>
<div class="container">
<div class="twocolumns">
<p>Look at me im in column 1</p>
</div>
<div class="twocolumns">
<p>Look at me im in column 2</p>
</div>
</div>
I hope that helps!