I have done some research to find a way to use a link to expand/collapse some content. I can't see any problems with my code, but the link does nothing.
HTML code ;
echo "<div>";
echo "[Results]";
echo "[Results]";
echo "<table class=\"results\">";
Followed by php to populate table, then close the table and div.
CSS
.results, .show {display:none}
.hide:focus + .show{display:inline}
.hide:focus {display:none}
.hide:focus ~ .results {display:block ;
width: 20em;
margin-left: auto ;
margin-right:auto}
Related
I want to get rid off small dots that appear when I use max-width (see // for details).
Here's my php that shows a messeage saved in session:
<?php
echo "<table id='delpos'>";
echo "<td id='del'>" . $_SESSION["del"] ."</td> ";
echo "</table>";
?>
And css that doesn't show background-color (until session exists) by using max-width + max-height :
<style>
#del {
background-color:red ;
color:white;
max-width:20px;
max-height:6px;
overflow:hidden; // tried using this to hide the small "red" dots...
}
#delpos {
margin-top:60px;
margin-left:30px;
position:absolute;
}
</style>
Please help:)
I want to get rid off small dots that appear when I use max-width (see // for details).
Here's my php that shows a messeage saved in session:
<?php
echo "<table id='delpos'>";
echo "<td id='del'>" . $_SESSION["del"] ."</td> ";
echo "</table>";
?>
And css that doesn't show background-color (until session exists) by using max-width + max-height :
<style>
#del {
background-color:red ;
color:white;
max-width:20px;
max-height:6px;
overflow:hidden; // tried using this to hide the small "red" dots...
}
#delpos {
margin-top:60px;
margin-left:30px;
position:absolute;
}
</style>
Please help:)
I scan trough a folder for images by using php,
i put them in a div with the ID of images.
I want that div to scroll on the x-axis and hide everything that overflows on the y-axis.
So here's my code.
HTML and PHP:
<div id="images">
<?php
//Displaying images
$imgID = 0;
foreach($images as $image) {
echo "<img id='img".$imgID."' onClick='displayImg(".$imgID.");' src='".$image."' height='".$imgHeight."' width='".$imgWidth."' />";
$imgID++;
}
echo "<script>var maxImages = ".$imgID.";</script>";
?>
CSS:
#images {
overflow-y:hidden;
overflow-x:scroll;
height:<?php echo $imgHeight; ?>px;
border:solid 1px #c4c4c4;
align-content:flex-start;
}
#images img {
padding:5px;
cursor:pointer;
float:left;
}
I've experimented a bit, But nothing i've tried seems to work.
Your question is slightly out of context but how about something like:
http://jsfiddle.net/bassmanpaul/u9Xx6/
This goes on the assumption that you have the image widths available in php ($imgWidth) which can allow you to create a large inner container.
Failing that you may need to give us a JSFiddle to demonstrate your issue in greater detail...
http://jsfiddle.net/EWH8E/
I have some pages that include hidden content that is revealed when a checkbox is 'ticked' and hidden again when 'unticked'. Everything works perfectly in Chrome and FF, but I either get the content always showing or hidden but the checkbox doesn't work in IE.
I am using Ie8, but have tried in 9 also and the same happens. ANy suggestions as to how to get it to work? I included the following in the HTML head section to counter the use of the article element.
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Now here is the PHP code
echo "<div class=\"resultsContainer\">";
echo "
Recent Results
<article class=\"small\">
<table class=\"results\">";
$query2=$database->query("SELECT team_name, team_score, opposition_score,
opposition_name from results_a ORDER BY updated DESC LIMIT 0, 5");
$i=0;
while ($row2=$query2->fetch(PDO::FETCH_NUM)) {
echo ($i %2 == 0)? "<tr class=\"stripe\">" : "<tr class=\"nostripe\">";
printf ("<td>%s<td class=\"small\">%s<td class=\"small\">%s<td>%s</tr>",
$row2[0],$row2[1], $row2[2], $row2[3]);
$i++;
}
echo "</table>";
echo "</article>";
echo "</div>";
And the CSS
.resultsContainer article {
background:white ;
overflow:hidden ;
height: 0px ;
position: relative ;
z-index:10}
.resultsContainer input:checked ~ article.small {
height:100% ;
width: 100% }
.results {text-align: center ;
table-layout:fixed ;
margin-left: 0 ;
margin-right: 0 ;
padding-top:0.7em ;
width: 65% ;
color:#0431B4 }
The :before selector is not supported in IE versions earlier than 9.
Your best bet for browser support is to use javascript instead.
All you have to do is bind an event listener to the checkbox. So when you click it, you can either directly change the width and the height or just use toggleClass().
$( "YOUR CHECKBOX ID OR CLASS" ).change(function() {
$( "ID OR CLASS OF ITEMS YOU WANT TO DISPLAY" ).toggleClass( "ACTIVE CLASS NAME" );
});
Or if you just set those elements to display: none; then you can do
$( "YOUR CHECKBOX ID OR CLASS" ).change(function() {
$( "ID OR CLASS OF ITEMS YOU WANT TO DISPLAY" ).toggle();
});
Although these answers seem similar, they are very different. Be sure to know the difference.
I have the following css code:
#Layer3
{
position:absolute;
width: 89%;
height: 40%;
left: 10%;
top: 56%;
background-color: #f1ffff;
}
#Layer3 h1
{
font-size: medium;
color: #000033;
text-decoration: none;
text-align: center;
}
.tableheader {
border-width:10px; border-style:solid;
}
.tablecontent {
height: 95%;
overflow:auto;
}
However, when I use this PHP to generate the html
echo '<div id="tableheader" class="tableheader">';
echo "<h1>{$query} Auctions</h1>" . "\n";
echo "</div>";
echo '<div id="tablecontent" class="tablecontent">';
echo "<table border='0' width='100%'><tr>" . "\n";
echo "<td width='15%'>Seller ID</td>" . "\n";
echo "<td width='10%'>Start Date</td>" . "\n";
echo "<td width='75%'>Description</td>" . "\n";
echo "</tr>\n";
// printing table rows
foreach ($rows as $row)
{
$pk = $row['ARTICLE_NO'];
echo '<tr>' . "\n";
table contens generated in here
echo '</tr>' . "\n";
}
echo "</table>";
}
echo "</div>";
which generates this html:
<div id="tableheader" class="tableheader">
<h1>hardy Auctions</h1>
</div>
<div id="tablecontent" class="tablecontent">
<table border='0' width='100%'>
<tr>
<td width='15%'>Seller ID</td>
<td width='10%'>Start Date</td>
<td width='75%'>Description</td>
the rest of table stuff
</div>
The stylesheet is correctly referenced so I am unsure what is causing the error. But there is no border around tableheader at all. Both of these layers are in Layer3 which no longer displays properly on the page.
#tableheader {
border: 10px solid #000;
}
Try giving it a color.
EDIT: since its id is tableheader, try changing the style selector to be an id. You could also try using !important to see if anything is overriding your class selector.
Specificity values:
inline: 1000; id: 100, class: 10, element: 1
!important trumps all other non-important declarations.
Start by browsing the HTML DOM in the rendered page either using Firebug in Firefox or using the IE Developer Toolbar in IE.
That way, you can see what styles are actually associated with the element in the rendered page. It's a lot easier to debug the issue from there.
One possibility is that there's a syntax error somewhere in the CSS file causing the styles not to be applied correctly.
I've just had a quick look at this and it seams fine, I've also created a local copy of these and the styles work out okay as well, I get a nice thick black border around the h1 text.
So from what your explaining something is either overwriting the styles, or the styles aren't being applied to the page.