I'm trying to make a greasemonkey userscript where I add a div through an ajax request to a table. The table repeats this pattern around 700 times:
<table id="table01" >
<tr class = "row0">
<td rowspan = "2" >
<img src = "url" >
</td>
<td> text1 </td>
<td style = "text-align: right;" > text2 </td>
</tr>
<tr class = "row1">
<td> text3 </td>
<td style = "text-align: right;" > text4 </td>
</tr>
...
...
...
</table>
I can't manage to insert the div and and set the css alignment to make it look like in the image:
http://s24.postimg.org/wastsl5it/Sin_t_tulo.png
How can I do it using javascript or jquery?
thanks in advance
See the output here:
jsFiddle
My solution is to work with percentages. The width of the page is 100% percent. When the elements reach 100% percent, it will force the next element wrap around into a position below. And use float, not text-align: right. I set everything to float:left, and set the width so that elements will wrap around to the next line.
<table id="table01" >
<tr class = "row0">
<div style="width:20%; float:left; border: solid thin purple">
<img src = "url" >
</div>
<div style="width:79%; float:left">
<div style="width:49%; float:left; border: solid thin"> text1 </div>
<div style = "width: 49%; float:left; border: solid thin red"> text2 </div>
<div style="width: 98%; float:left; border: solid thin blue">Center</div>
<div style = "width: 48%; float:left; border: solid thin green"> text3 </div>
<div style = "width: 48%; float:left; border: solid thin orange"> text4 </div>
</div>
</tr>
<tr class = "row0">
<div style="width:20%; float:left">
<img src = "url" >
</div>
<div style="width:80%; float:left">
<div style="width:50%; float:left"> text1 </div>
<div style = "width: 50%; float:left" > text2 </div>
<div style="width: 100%">Center</div>
<div style = "width: 50%; float:left"> text3 </div>
<div style = "width: 50%; float:left"> text4 </div>
</div>
</tr>
</table>
Note that the <div> you were having trouble with, is set to a width of 100% percent. So it will take up all of it's section. Also, realize that the <div> set to 100% percent does NOT take up 100% percent of the page. It takes up 100% percent of the <div> that it is inside of. That is the other thing you need to know. The widths are relative to the element that they are inside of.
With borders added, so you can actually see how everything lays out, the widths need to be smaller, because the borders take up space. So, 100% width with a border added is more than 100% percent. So you have to change the width to something smaller, 99% percent maybe.
Related
I have php generating several DIV tags populated with information for a database.
A DIV height of 400px will display all information. However, I render the DIVs to height=50PX on the page with CSS.
example:
<div style="height: 50px">Info</div>
<div style="height: 50px">Info</div>
<div style="height: 50px">Info</div>
<div style="height: 50px">Info</div>
etc
I need some help with javascript method and functions, that will run when I click on the DIV element, the function should change the style.property.height to 400px and simultaneously reduce any other div that was expanded to 400px back to 50px. When the DIV is action i.e. it's at 400px, it should NOT change no matter how many time it's clicked on, but once click out of the DIV or another div it should revert to 50px
You can give all the divs the same class to select them by (with document.querySelectorAll) to change their styles. You can loop through all of the divs with Array.prototype.forEach to change their heights back to 50px. JSFiddle: http://jsfiddle.net/s5dLpjkg/embedded/result
var divs = document.querySelectorAll(".myClass");
var input = document.getElementById("num");
document.getElementById("transitionBtn").addEventListener("click", function(e){
var num = input.value;
var div = divs[num-1];
[].slice.call(divs).forEach(function(el){
if(el.style.height!=="50px"&&el!==div){
el.style.height = "50px";
}
});
div.style.height="200px";
});
.myClass{
background-color: dodgerblue;
border: 1px solid black;
transition: height 2s;
}
<div style="height: 50px" class="myClass">Info #1</div>
<div style="height: 50px" class="myClass">Info #2</div>
<div style="height: 50px" class="myClass">Info #3</div>
<div style="height: 50px" class="myClass">Info #4</div>
<input type="number" id="num" placeholder="Div number" min="1" max="4" style="width: 30%" value="1">
<p/>
<button id="transitionBtn">Run Transition</button>
I want to show multiple tables in a web page with header and the image displayed inside the table cell.
To achieve that i have created one table and used <div> tag to assign the width and height of the <td>.
Please find the code below
<table width="100%" height="100%"><tr><td>
<div style="position:absolute;border: 1px solid black;width:200px;height:200px";>
<section>
<header style="background: gray;width:198.5px;text-align: center">Header1</header>
</section>
<img style="display:block;" width="100%" height="100%" src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="tableDemo2" />
</div></td>
<td>
<div style="position:absolute;border: 1px solid black;width:200px;height:200px";>
<section>
<header style="background: gray;width:198.5px;text-align: center">Header2</header>
</section><br><br>
<br><br> <img style="display:block;" width="100%" height="100%" src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="" />
</div></td>
</tr></table>
I want to display that image in the whole cell of <td>. The header section should be displayed follwed by the image in the whole space. Please suggest what code do i need to add to make it work. Currently i could not able to set properly the image inside the border of the <td>. Or is there any good approach to achieve this.
jsfiddle:http://jsfiddle.net/4S6gR/103/
I want to achieve this using html/css.
After looking at you fiddle I think you meant you want the image to cover rest of the area in the cell other than header.
If so:
Check this Fiddle
Added a new div to cover the div, gave a height to the header 18px, as was rendered by browser and then gave height of 182px to the div containing image.
I want to display that image in the whole cell of td.
Forget img tags, there is a way easier way.
<td style="background-image:url('asd.jpg');">
you should use th instead of formatting inside td with div to create header, also you'll need to remove the height width from header
.mytable{
width:100%;
height:100%;
}
.mytable header{
background: gray;
text-align: center;
}
.mytable img, header{
width:200px;
}
.mytable td img{
display:block;
}
<table class="mytable">
<tr>
<th>
<section>
<header>Header1</header>
</section>
</th>
<th>
<section>
<header>Header2</header>
</section>
</th>
</tr>
<tr>
<td>
<img src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="" />
</td>
<td>
<img src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="" />
</td>
</tr>
</table>
If I have a button and an input field contained within a div with a bootstrap class of input-group, they fill the full width of the containing element. If I then hide the button, the input field now shrinks to some default length rather than taking up the full width. It looks a bit like this:
The code for this can be seen here http://jsfiddle.net/1gu6qnhk/1/.
Essentially this problem can be reduced to the following code:
<head>
<style>
.group {
display: table;
}
.input {
width: 100%;
}
.item {
display: table-cell;
width: 1%;
}
</style>
</head>
<body>
<div class="group">
<input class="input" />
<span class="item"></span>
</div>
<div class="group">
<input class="input" />
<span class="item">text</span>
</div>
</body>
Why does the first div take up the full width available whilst the second only takes up a portion of the width, when the only difference is that the span in the second div contains text.
Fiddle here http://jsfiddle.net/Lbyjo79e/1/
you can try this form: http://jsfiddle.net/07r866vp/
<div class="form-group">
<input class="form-control" value="The span after this has text" />
<span class="item">
text
</span>
</div>
<div class="form-group">
<input class="form-control" value="The span after this is empty" />
<span class="item">
</span>
</div>
Setting the width of the parent element to 100% resolves this. (http://jsfiddle.net/Lbyjo79e/2/)
.group {
display: table;
width: 100%;
}
.input {
width: 100%;
}
.item {
display: table-cell;
width: 1%;
}
The issue is in fact the same with just table elements. So if you have:
td {
width:100%;
border: 1px black solid;
}
<table>
<td>two cells</td>
<td></td>
</table>
<table>
<td>one cell</td>
</table>
Then the first table takes up maximum width, but the second table only takes up a fraction. Setting the width of the table to 100% resolve this. Fiddle at http://jsfiddle.net/bkngop0f/.
I have tabs one says 'Search' and the other says 'Tags'
Search is the default tab so it has a grey rounded edge table background while 'Tags' has a white rounded edge background.
I want to be able to put the mouse over 'Tags' and the background to change from white to grey. How is this done?
Here is the HTML code:
<div class="roundedcornr_box_407494">
<div class="roundedcornr_top_407494"><div></div></div>
<div class="roundedcornr_content_407494">
<font color="#ffffff" size="2" face="helvetica">
Search
</font>
</div>
<div class="roundedcornr_bottom_407494"><div></div></div>
</div>
</td>
</tr>
</table>
</td>
<td>
<div style="margin-left:10px;" />
<center>
<table height="20" width="30" cellpadding="0" cellspacing="0">
<tr>
<td>
<center>
<div class="roundedcornr_box_235759">
<div class="roundedcornr_top_235759"><div></div></div>
<div class="roundedcornr_content_235759">
<font color="#585858" size="2" face="helvetica">
Tags
</font> </div>
<div class="roundedcornr_bottom_235759"><div></div></div>
</div>
</center>
</td>
</tr>
</table>
And CSS:
.roundedcornr_box_407494 {
background: #bdbdbd;
}
.roundedcornr_top_407494 div {
background: url(roundedcornr_407494_tl.png) no-repeat top left;
}
.roundedcornr_top_407494 {
background: url(roundedcornr_407494_tr.png) no-repeat top right;
}
.roundedcornr_bottom_407494 div {
background: url(roundedcornr_407494_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_407494 {
background: url(roundedcornr_407494_br.png) no-repeat bottom right;
}
.roundedcornr_top_407494 div, .roundedcornr_top_407494,
.roundedcornr_bottom_407494 div, .roundedcornr_bottom_407494 {
width: 100%;
height: 5px;
font-size: 1px;
}
.roundedcornr_content_407494 { margin: 0 5px; }
Thanks!
James
With :hover.
Sample:
http://jsfiddle.net/stKn3/
With Css
table:hover
{
background-color:gray;
}
or
table tr:hover
{
background-color:gray;
}
I think its better to have a single images as background(with corners #as you trying to do) of the tabs And changing the background image on mouseover event. Instead of splitting them and merging the pieces together again by div tags.
Follow these examples :
http://www.codefoot.com/javascript/script_image_textarea_mouseover.html
http://www.codebelly.com/javascript/backimagechange.html
Try this
<TR onMouseover="this.bgColor='#EEEEEE'"onMouseout="this.bgColor='#FFFFFF'">
<td>Some data</td>
</TR>
OR
<table onMouseover="this.bgColor='#EEEEEE'" onMouseout="this.bgColor='#FFFFFF'">
</table>
EDIT:
Try this complete HTML.
<html>
<body>
<table >
<tr onMouseover="this.bgColor='#EEEE00'" onMouseout="this.bgColor='#FFFFFF'">
<td>
Some Data on table's first row
</td>
</tr>
</table>
</body>
</html>
It needs some modifications to use on your code. Try it on your own.
How can I make a div display over the top of a table tr, so the table row does not expand.
Wwhen I click on any of the ".property_menu_link" anchor tags to expand the menu the whole row expands. I want the menu to overlay over the top of the TR's, not expand the table, but I'm struggling on getting this to happen.
What am I doing wrong?
HTML:
<table>
<tr>
<td valign="top" align="left">
<div class="property_menu_container">
<div style="display: none;" class="property_links_box ui-corner-all">
<ul class="basic">
<li>
<a onclick="open_me()" >Property Details</a>
</li>
<li>
<a onclick="open_me()" >Units, Leases & Occupants</a>
</li>
</ul>
</div>
<div class="property_menu_link">
<a>
<img src="images/maximize.png" id="68_p_img_folder">
</a>
</div>
</div>
<span class="page_name property_name_span">Property Name 1 Here</span>
</td>
</tr>
<tr>
<td valign="top" align="left">
<div class="property_menu_container">
<div style="display: none;" class="property_links_box ui-corner-all">
<ul class="basic">
<li>
<a onclick="open_me()" >Property Details</a>
</li>
<li>
<a onclick="open_me()" >Units, Leases & Occupants</a>
</li>
</ul>
</div>
<div class="property_menu_link">
<a>
<img src="images/maximize.png" id="68_p_img_folder">
</a>
</div>
</div>
<span class="page_name property_name_span">Property Name 2 Here</span>
</td>
</tr>
</table>
CSS:
/******************************
Property Menu dropdown
******************************/
.property_menu_container {
width: 200px;
/*height: 300px; --> this causes the row height for properties to be 300px before it's expanded*/
position: relative;
}
.property_name_span{position: absolute; left:40px;}
.property_links_box {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 15px;
padding:10px;
border: 3px solid #000000;
background-color: #FFFFFF;
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
}
.property_menu_link {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.property_links_box{
z-index: 10;
}
/******************************
END Property Menu dropdown
******************************/
Javascript:
$(document).ready(function(){
$("div.property_menu_link a").toggle(function(){
//1st Click
$(this).parent().siblings(\'.property_links_box\').show();
$(this).parent().parent(\'.property_menu_container\').css("height", "300px");
}, function() {
//2nd click
$(this).parent().siblings(\'.property_links_box\').hide();
$(this).parent().parent(\'.property_menu_container\').css("height", "1px")
});
});
You need to learn about styling tables using css. You can't do what you want to do with divs and tables.
You are going to have to replace the contents of the row rather than overlay the row
You will probably need to use spans (rowspan, colspan etc...)
See here for more details http://www.w3.org/TR/html4/struct/tables.html and here http://www.w3schools.com/html/html_tables.asp
On that second link you can use the try it here link and paste in the source code from your browser which is great and easier than using firebug.
Plus see the comment about slashes on you question from #TomalakGeret'kal