On my site i have a list of tables that set a bunch of training for athletes on specific dates.
I want to add the ability to input how they did. I would like it to work in a way so that when you hover or click on the training a div would scroll down showing what was achieved.
I currently have the following code in the while loop:
$sessTable .= '<table border = "1px solid black" style="width:100%; border-collapse: collapse">
<tr>
<td colspan="2" style="background-color:#E8E8E8 ">' .$newDate. '' .$attendBtn. '</td>
</tr>
<tr>
<td><div style=" float:left" >' .$session. '</div>' .$editBtns. '</td>
</tr>
</table>
<div class="diary">
testing the div theory.<br/>
to see if it<br/>
will slide up and down
</div>';
The CSS
.diary {
width: 100%;
height: 10px;
background: #FFF;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: height 2s;
font-size:0px;
}
.diary:hover {
height: 300px;
font-size:12px;
background:#CCC
}
It seemed to work fine when i tried it on a single div but when i put it in the while loop the hover works fine but seems to ignore the initial .diary state and also just jumps straight to the hover state with no transition.
My question is is this possible for multiple divs or is there a better way to achieve what i need.
Because you set transition only for height
.diary {
width: 100%;
height: 10px;
background: #FFF;
-webkit-transition: height 2s,background 2s;;
/* For Safari 3.1 to 6.0 */
transition: height 2s,background 2s;;
font-size: 0px;overflow:hidden
}
.diary:hover {
height: 300px;
font-size: 12px;
background: #CCC
}
<div class="diary">
testing the div theory.
<br/>to see if it
<br/>will slide up and down
</div>
Related
I am using PHP to call data from a Microsoft SQL Database. That functionality is working, however when PHP updates the table's data it is overriding some of the formatting. One big specification I wanted was to have a max-height of 400px and once it crosses that the table becomes scroll-able.
Some context: I am running this on a local PHP server.
I have tried adding !important tags but that did not work.
<table id = 'tbl' class='table'>
<thead id = 'heading'>
<tr>
<td scope="col" >Applicant ▼</td>
<td scope="col">Grantee EIN</td>
<td scope="col">State</td>
<td scope="col">FAC Accepted Date</td>
<td scope="col">Expenditures</td>
<td scope="col">Prior Finding</td>
<td scope="col">Audit</td>
</tr>
</thead>
<div id = 'scrollbody'>
<tbody>
<?php
$result = array();
do {
while ($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)){
echo '
<tr>
<td>'.$row["AUDITEENAME"].'</td>
<td>'.$row["EIN"].'</td>
<td>'.$row["STATE"].'</td>
<td>'.$row["FACACCEPTEDDATE"].'</td>
<td>'.$row["TOTFEDEXPEND"].'</td>
<td>'.$row["PYSCHEDULE"].'</td>
<td><input type="checkbox" oninput=""></td>
</tr>
';
}
} while (sqlsrv_next_result($stmt));
// sqlsrv_free_stmt($stmt);
// sqlsrv_close($conn); //Close the connnectiokn first
// echo json_encode($result); //You will get the encoded array variable
?>
</tbody>
</div>
</table>
#tbl {
margin: auto;
top: 0px;
height: 100%;
max-height: 400px;
position: relative;
font-family: 'Segoe UI';
box-shadow: 0px 0px 5px 2px rgb(240, 240, 240);
perspective: 1px;
border-radius: 0px 0px 20px 20px;
white-space: nowrap;
width: 100%;
z-index: 1;
}
What I want to see is a table of 400px height, but instead a table of much longer height is being displayed.
So, there are 2 options:
Wrap the table in with a wrapper and give the max-height to that element.
<div id="table-wrapper">
<table>
{Your stuff...}
</table>
</div>
Give the thead, tbody a display: block property. With which again your CSS styles will come into use.
First you need to know how a browser works.
The browser will not show anything until this steps are made:
Your browser request a file like html or php first.
Then it will check the styling (CSS/SCSS).
Checking for JavaScript.
checking for source like an image or other media.
Only then it will display the page.
So if you want to style after this process, you will need JavaScript.
JavaScript is invented to manipulate or modify the DOM (document object Model).
That means, you can point to an element and style it, remove it, add a new element etc.
For a better format I prefer jQuery.
jQuery is another way to code JavaScript. (jQuery = JavaScript, just in another form) jQuery calls the JS library.
you can't set header of a table, a table height is based on his content, if you need a table with a specific height you need to change the display type and add overflow rule:
#tbl {
margin: auto;
top: 0px;
height: 100px;
max-height: 400px;
position: relative;
font-family: 'Segoe UI';
box-shadow: 0px 0px 5px 2px rgb(240, 240, 240);
perspective: 1px;
border-radius: 0px 0px 20px 20px;
white-space: nowrap;
width: 100%;
z-index: 1;
display:block;
overflow:auto;
}
Here a live fiddle https://jsfiddle.net/g7fuLhyp/
The display: inline-block technique to make div elements appear next to each other does not work with my dynamically-generated content cards.
My content cards are a modified version of a tutorial found on the w3schools website, which can be found here:
https://www.w3schools.com/howto/howto_css_cards.asp
Goal
I'm in the process of creating a relatively simple search engine for my website based on a query that checks a MySQL database for any potential matches. The results are returned in the form of a content card. If the system finds 3 matches, 3 content cards will be generated in the results. The code is being controlled by a for-loop (PHP) that generates a content card for each match found.
Problem
The corresponding content cards are generated for each match, however, they appear on separate lines below each other (vertically). I attempted to use the display: inline-block technique to force them next to each other with no results. I suspect the reason why is because the code for each content card must already be there for the effect to take place. If not, CSS & HTML assume that there was only ever one content card and doesn't align them properly.
HTML/CSS/PHP Code for Content Cards
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
width: 30%;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 20%;
font-size: 18px;
}
.card button:hover {
opacity: 0.7;
}
.shrink {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
<!-- Container -->
<div class="container" style="background-color: white; width:89%; padding-top: 400px;">
<!-- Generates 1 Content Card for each Match -->
<?php
for($x = 0; $x < count($title); $x++) {
?>
<!-- Content Card Design & Data -->
<div class="shrink">
<div class="card" style="background-color: white; border-radius: 2%; display: inline-block;">
<a href="#" data-toggle="modal" data-target="#ModalCarousel<?php echo " $x ";?>" style="text-decoration: none; color: black;">
<img src="listingimages/<?php echo "$firstListingImage[$x]";?>" style="width:100%; border-top-left-radius: 2%; border-top-right-radius: 2%;">
<h4><?php echo "$title[$x]";?></h4>
<hr>
<p><span class = "glyphicon glyphicon-cutlery"></span> <?php echo "$foodType[$x]";?></p>
<hr>
<p><span class = "glyphicon glyphicon-map-marker"></span> <?php echo "$city[$x]";?>, <?php echo "$state[$x]";?></p>
<hr>
<p style="font-size: 30px;"><b>$<?php echo "$price[$x]";?></b><span style="font-size: 15px;"> USD</span></p>
</a>
</div>
</div>
<?php } ?>
</div>
It is very easy just you need to add in the class .card {float:left} then it will work as you want
With inline-block for it to work you must also set a fixed width on .shrink, which is the repeated holder, and maybe vertical-align
The preferred way nowadays is by setting display:flex; flex-wrap:wrap on the container which is made just for this kind of box display. Also set width on .shrink with this solution.
Your .cards are nicely displayed as inline-blocks, but they're each wrapped inside a .shrink which are full blocks. That's why they're not lining up as you'd expect.
I'm making a Wordpress module to reserve a room.
Now I use mPDF to create the contracts of the reservations automatically.
mPDF has problems with creating tables with on every row a border line.
When I create the table and view it in html everything looks fine. But when I create a PDF with mPDF the does not show me the row bottom border.
This is the html code that I use to generate the pdf:
.logo
{
display: inline-block;
width: 130;
height: 146;
align: left;
hspace: 12;
}
.headerText
{
display:inline-block;
text-align: right;
float:right;
}
.header{
padding-bottom: 20px;
}
.table{
border-left: thin solid;
border-right: thin solid;
border-bottom: thin solid #000000;
border-top: thin solid;
}
.table{
margin-top: 10px;
margin-bottom: 10px;
border-collapse: collapse;
}
table tr {
border-bottom: 1px solid black;
}
table tr:last-child {
border-bottom: none;
}
.Cell
{
width: 300px;
}
.firstCell
{
border-left: thin;
border-right: thin solid;
border-bottom: thin;
border-top: thin;
}
.smallCell
{
width:150px;
}
.largeCell
{
width: 450px;
}
.row
{
display: block;
}
.koninklijkeLogo
{
width: 30px;
}
.maxSize
{
width: 600px;
}
<table class="table">
<tr class="row">
<td class="smallCell firstCell">Naam:</td>
<td class="largeCell">{%name%}</td>
</tr>
<tr class="row">
<td class="smallCell firstCell">Adres:</td>
<td class="largeCell">{%adres%}</td>
</tr>
<tr class="row">
<td class="smallCell firstCell">Telefoonnummer:</td>
<td class="largeCell">{%phone%}</td>
</tr>
<tr class="row">
<td class="smallCell firstCell">E-mailadres:</td>
<td class="largeCell">{%mail%}</td>
</tr>
</table>
Can I resolve the problem by changing some of my code or is this a bug in mPDF?
From this document, it appears that borders for tr elements are supported by the latest version of mPDF (version 6).
Are you using the latest version?
Maybe you can try to apply a bottom border to the cells only, and not the rows? (Just make sure there are no table cellspacing or td cell margins, or you will see gaps in the borders).
I'm doing a grid with several elements in the sidebar of a WordPress site.
Each element of the grid is an image with a label below.
My goal is to have an image change:
the normal state of the image is to be green (#66be2c), then to the passage of mouse cursor will change it in the original image.
I tried using two physical images for the two states and overlaying them when needed. But this solution is very wasteful... load two different image files is not a good thing.
There's a way to achieve the same effect in a more efficient manner?
This is a part of my page code:
<td style="width: 150px; text-align: center;">
<p style="color: #66be2c;">
<img src="mydomain.com/aaa/wp-content/uploads/2015/08/GreenImage.png" style="width:50px; height:50px" onmouseover="this.src='mydomain.com/aaa/wp-content/uploads/2015/08/OriginalImage.png';" onmouseout="this.src='mydomain.com/aaa/wp-content/uploads/2015/08/GreenImage.png';">
</p
<p style="color: #66be2c;">.NET</p>
</td>
SOLUTION:
The correct way to do this is creating a Vector Image.
What you need is an image editor (such as Adobe Illustrator or others) and a C compiler (in particular two libraries for xslt)
These are two links that may be useful: SVG-Stacking_Guide and GitHub-SVG-Stacking-Download
I hope this can be of help to others who have the same problem.
It's a bad approach,
I'm not an expert in CSS or design but i think you should do :
<div class='overlay'></div>
<img src="mydomain.com/aaa/wp-content/uploads/2015/08/OriginalImage.png" style="width:50px; height:50px">
</div>
And put a class in CSS like this :
.overlay { background-color: your_color; }
.overlay:hover { background-color: transparent; }
You can overlay a DIV with a lesser opacity on to the image, and then register the hover such that the covering div fades away and the real image appears.
<div class='cover'></div>
<img id='your-image' />
The CSS for the image would be as such:
.cover{
position: absolute;
top: 0;
left: 0;
opacity: .7;
background: green;
/* additional transition effects */
-webkit-transitions: all .3s;
-moz-transitions: all .3s;
transitions: all .3s;
}
.cover:hover{
opacity: 0;
}
Note that the covering div and the image should be in the same containing div relative to each other.
You could use the ::before selector to achieve this. This would mean not using any extra markup, and no javascript either. You'd really benefit from not using that inline css either. Take a look at CSS :: Before
HTML:
<table>
<tr>
<td>
<p>
<img src="mydomain.com/aaa/wp-content/uploads/2015/08/GreenImage.png" class="image">
</p
<p>.NET</p>
</td>
</tr>
</table>
CSS:
td {
width: 150px;
text-align: center;
}
td p {
color: #66be2c;
}
.image {
width:50px;
height:50px;
position: relative;
}
.image::before {
content: "";
position: absolute;
height: 50px;
width: 50px;
top: 0;
left: 0;
background: green;
}
.image:hover::before{
display: none;
}
Basically, this targets your image with a class of .image and puts a 50 x 50px box on top of it with a green background. When you then move your mouse over it, it gets rid of the box.
You can see this working in this fiddle
That's how the page looks like currently: http://i.imgur.com/nEHLFUX.png[1] and there are couple of bugs that I would love you to help me with. 2 main ones I want the spell names to be aligned to the right next to little icons of spells and second of all there is a background picture and when I zoom the site out it moves downwards and to the left and I want it to always stay at the same place.
Now code:
class spell {
function do_spell($spellicon, $spellname, $spelltext, $changeinpower) {
echo '
<div class="spellrow">
<table class="spelltable" cellpadding="0" cellspacing="0">
<tr>
<td ><img class="spellimage" src="/abilities/'.$spellicon.'"></td>
<td class="spellname">'.$spellname.' - </td>
<td class="spelldesc">'.$spelltext.'</td>
<td class="changeinpower"><img src="/icons/'.$changeinpower.'"></td>
</tr>
</table>
</div>
';
}
}
patch.php part
$karthus = new splash;
$laywaste1 = new spell;
$laywaste2 = new spell;
$karthus->do_splash('Karthus','cropkarthus','Karthus_0.jpg');
$laywaste1->do_spell('64px-Lay_Waste.jpg','Lay Waste (Q)','Added a new indicator that shows the full area of effect','new.png');
$laywaste2->do_spell('64px-Lay_Waste.jpg','Lay Waste (Q)','Added crit-style combat text and a unique sound effect for double-damage Qs','new.png');
Some css:
.spellrow {
width: 900px;
padding: 0;
margin-bottom: 3px;
background-color: #ffffff;
box-shadow: 1px 1px #cccccc; }
.spelltable {
width: 100%;}
.spellimage {
width: 32px;
height: 32px;
padding-left: 5px;}
.spellname {
white-space: nowrap;
padding: 0 5px;
width: 10px;}
.spelldesc {
font-size: 15px;
line-height: 1.05em;}
.changeinpower {
width: 60px;}
/* And now the img in the background part */
.season2014
{
background-color:#f1f1f1;
background-image: url('/season_graphic/SEASON2014_2.png');
background-repeat: no-repeat;
background-position: 20% 50%;
background-origin: content-box;
background-position: fixed; }
<body class="season2014";>
PS. any kind of mistakes in code I would love you to point out I'm really new to the web-designing thingy
The problem with the background moving is from the background-position: fixed. This fixed value is not valid CSS. Try playing with the values available for the property to get the desired effect. More info on the Mozilla Dev Network for CSS with the background-size property.
About the name, I haven't seen any text-align: left in your CSS, that's maybe what you're looking for in your .spellname property. But more than that, the alignment problem comes from the width which is just width: 10px; in the .spellname property.
Because you fixed the total row width to 900px, why not use pixels all the way to define all the widths ? Like so:
.spellrow {
width: 900px;
padding: 0;
margin-bottom: 3px;
background-color: #ffffff;
box-shadow: 1px 1px #cccccc;
}
.spelltable {
width: 100%;
}
.spellimage {
width: 32px;
height: 32px;
padding-left: 5px;
}
.spellname {
white-space: nowrap;
padding: 0 5px;
text-align: left;
width: 150px; /* Adapt to your needs */
}
.spelldesc {
font-size: 15px;
line-height: 1.05em;
text-align: left;
width: 658px; /* Adapt to your needs */
}
.changeinpower {
width: 60px;
}
And the corresponding HTML code
<div class="spellrow">
<table class="spelltable" cellpadding="0" cellspacing="0">
<tr>
<td class="spellimage">IMG</td>
<td class="spellname">Name</td>
<td class="spelldesc">Text with plenty of info here</td>
<td class="changeinpower">IMG</td>
</tr>
</table>
</div>
On a side note, doing one table per item is loosing the whole purpose of tables: one item is one row of the table. You should have one table per category and each spell being a row in the according table.