$sql = mysql_query('SELECT * FROM mdl_course c');
foreach($sql as $ss)
{
$coursename = $ss->id;
$summary = $ss->summary;
echo '<div style="min-height:300px;">
<div style="min-height:100px,overflow:auto;overflow-y:scroll;">'.$summary.'
</div>
</div>';
}
Since I have more information in summary field from database and that too in html format, The summary displays out of the min-height.
I want the summary to be displayed within that height of div and overflow if it has more summary. Could anyone help me
?
You should use height as opposed to min-height, since if the height is more than 100px, it will just get larger, rather than scroll
So using height ... if the height came to 150px, you'll be able to scroll 50px down (if you see what I mean).
Related
(This has now been resolved - thanks #ChelseaStats)
I have built a web page in PHP. users log in and upload photos and stories, and the page displays the stories and photos immediately.
The problem is that the photos that the MySQL query and PHP return from the database are being displayed all over the place. I have printed them out in an id’d div but the CSS is having no control over their positioning.
Currently the query is like this:
$q1 = "SELECT * from images ORDER BY date ASC";
and they are displayed like this...
row1 = #mysqli_query($dbc, $q1);
echo '<div id = "pictures">';
while ( $fix1 = mysqli_fetch_array($row1) ) {
echo '
<img style = "border: 1px solid black; padding: 10px;" height = "80" width = "80" src = "data:image;base64,'.$fix1['image'].'"><br>'.$fix1['image_id'].'
';}
echo '</div id = "pictures">';
What I would like to do is store all the 'while loop' programming in a variable, then print that variable out elsewhere on the HTML page away from php script so that when the database query is run, I can use the results to fill/initialize the variable (e.g. $displayPics) which will then be printed out on the html page where I want it to appear.
I realise this may be impossible and I am open to suggestions...
...or I might be willing to run a query with a limit of 20 giving results in descending date order and then assigning ‘loop-free’ PHP code to a variable which I can then print out on the page elsewhere.
Code could look something like this:
row1 = #mysqli_query($dbc, $q1);
$fix1 = mysqli_fetch_array($row1);
$displayPics = '
<img style = "border: 1px solid black; padding: 10px;" height = "40" width = "40" src = "data:image;base64,\'.$row1[$fix1[\'image\']].\'"><br>\'.$row1[$fix1[\'image\']].\'
';
(Above code is a shot at how I imagine it will look). (I think the img src code and html has been filtered out by the forum possibly).
But maybe this code will be repeated 20x in the variable with row number changing for each subsequent repetition perhaps?
(I basically want better control over the positioning of the pics coming back from the database).
in a foreach you can assign to a variable like this
$bob = ''; // set it
foreach($row as $image) {
// append to it
$bob .= '<div id=""><img src="" /></div>'.PHP_EOL;
}
print $bob;
similar would work for you.
if you use Bootstrap- you can assign a display class as it is rendered. The following will display each image as follows (4 across on a medium to large viewport, 3 across on a small viewport, and two across on a mobile sized viewport). Also note the use of figcaption to provide the caption on each image.
row1 = #mysqli_query($dbc, $q1);
while ( $fix1 = mysqli_fetch_array($row1) ) {
echo "<div class='col-md-3 col-sm-4 col-xs-6'>
<figure>
<img style = 'border: 1px solid black; padding: 10px;' height = '80' width = '80' src = 'data:image;base64,".$fix1['image']."'/>
<figcaption>".$fix1['image_id']."</figcaption>
</figure>
</div>
";}
Simply write a function that returns all of the rows into an array of assoc arrays and loop through them when you need them elsewhere in the code and use conditional tests on the rows to have better control over where they go!
function getImages(){
$imgs = array();
while(($next = mysqli_fetch_assoc(...)){
array_push($imgs, $next);
}
return $imgs; //array of assoc arrays
}
I've searched through various forum posts on Overflow-x:scroll, which explain how to implement it, and in most cases the same fix has resolved the OP's issue.
However, I have followed these posts and still cannot seem to resolve my issue, please help!
I am creating an image preview pane (Large image, list of thumbnails), and I am trying to place the thumbnails in a scrollable DIV horizontally, but am striking out over and over again.
With my current code I have set the width to 200px, but despite the presence of overflow-x, the div is still showing all of the thumbnails across the screen.
#Thumbview { position:relative; height:100px; width:200px; overflow-x:scroll; overflow-y:hidden; white-space:nowrap; }
My PHP is as follows for this small bit:
<div id="ThumbView">
<?php
// Create a slide-able thumbnail view.
$piclist = explode(", ", $datafiller['PictureList']);
foreach ($piclist as $thumbnail) {
echo "<img src=\"./Images/Inventory/" . $_GET['carid'] . "/thumbnails/" . $thumbnail . "\">";
}
?>
</div>
I have attempted to enclose each IMG in a DIV, with no luck, change display types on both the container and the children to various inline elements. Still no change. Ideas?
Your id names should match (care about the V)
<div id="ThumbView">
#ThumbView
is this what u need?
http://jsfiddle.net/x96hq47c/
Okay so I have this portfolio page where I display a couple of thumbnails, and you can order it by tags, so for example like this:
year 1
And this works fine. However, my thumbnails display at three on a row, so only the first two should have a right margin, the third one no margin.
I used PHP to do this which works fine.
if ($result=$link->query($query)) {
for ($i=1; $i <= $result->num_rows; $i++) {
$row= $result->fetch_assoc();
$id = $row['number'];
$title = $row['title'];
$bgthumbnail = $row['thumbnail'];
if($i%3 == 0){
echo "
<div class=\"thumbnail\">
<a href=\"portfoliodetail.php?id=$id\">
<div class=\"thumbnailOverview noMargin\" style=\"background: url('images/portfolio/thumbnails/$bgthumbnail'); background-position: center center;\">
<div class=\"latestWorkTitle\">$title</div>
</div>
</a>
</div>
";
} else {
echo "
<div class=\"thumbnail\">
<a href=\"portfoliodetail.php?id=$id\">
<div class=\"thumbnailOverview\" style=\"background: url('images/portfolio/thumbnails/$bgthumbnail'); background-position: center center;\">
<div class=\"latestWorkTitle\">$title</div>
</div>
</a>
</div>
";
}
}
$result->close();
}
However, when I click a tag, the margin doesn't update. So when a thumbnail was given no margin in the overview because it was the third one in row, when it displays first because of a chosen tag, it also receives no margin.
Of course this is because nothing "refreshes" or something, but I was wondering if there is an "easy" way to fix this problem? To make the PHP loop run again or something?
You must to set/remove noMargin class name via javascript:
$('.year-clicker').click(function (event) {
event.preventDefault();
var year = $(event.currentTarget).data('year');
$('.thumb').hide().removeClass('noMargin').filter('.year' + year).show();
$('.thumb:visible').each(function (i, e) {
if ((i + 1) % 3 == 0) {
$(e).addClass('noMargin');
}
});
return false;
});
Try out this jsfiddle http://jsfiddle.net/xgE3K/1/
unless your "tags" are recalling the page - so that the php is re-executed - you probably want to look at javascript (or possibly ajax) to do the reformatting of the layout.
Depending on the quantity of thumbnails and the variety of tags, you might use the php to create a div (with a relevant id and a style="" attribute) for each of the different filter tags - containing the layout of the thumbnails for that tag (so you can ensure your layout is fine for each view).
i.e. repeat your code above enclosed by a unique div tag for each view.
Make the default view div visible (style="display: block") and the others hidden (style="dsplay: none").
Then have a javascript function that is executed on any tag click. This will make the relevant div visible and the rest hidden, by changing their style value as above.
Uses a bit more memory, but your switching between views will be quicker than doing a reload.
Despite all this, I think it's cleaner and more scalable to recall the page with the relative filter (depending on the tag) then you will have more control over the layout.
hi i wonder if anyone can help, not entirely sure this is possible but i have a div container called <div class="scroll">
inside div scroll is a sql query that echoes comments posted by users from the database. the div scroll is set to a width of 600px and so the comments will be arranged in this div left to right, theres two comment boxes on each line, each comment box is just under 300px each as to align next to each other.
the comments are listed like so:
<div class="scroll">
comment 1 | comment 2
comment 3 | comment 4
comment 5 | comment 6
</div>
the comments are encased in the div "comment_box"
now what i have done is put a background image to the div "comment_box" this image is a pointer arrow that points to the left and is positioned on the left hand side of the div, but i also want to have a second background image for the comment boxes that align on the right, so in this instance comments 2, 4 and 6 will have a different background image/an arrow that points to the right on the right hand side of the div.
is this possible?
thanks
comment box{
.wall_post_case_branch {
background-image:url(../img/effects/arrow_left.png);
background-repeat:no-repeat;
background-position: center;
height:90px;
width:290px;
position:relative;
border:#ccc 1px solid;
}
mysql:
<?php
if(mysql_num_rows($wallposts_set) > 0) {
while ($posts = mysql_fetch_array($wallposts_set)) {
$age = days_from_date($posts['date_added']);
?>
<div class="comment_box">
<?php echo "{$posts['content']}"; ?>
</div>
You can do it as below.
<?php
$i = 0;
while ($posts = mysql_fetch_array($wallposts_set))
{
$class = ' odd';
if ($i++ % 2 == 0)
{
$class = ' even';
}
echo '<div class="comment_box'.$class.'">';
}
?>
and in css
.odd { background-image:imageone.jpg; }
.even{ background-image:imagesecond.jpg; }
I would right before the while loop make the variable $i = 0;.
It would use that to define what background color it should use.
Then in the while loop I would use this code:
while ($posts = mysql_fetch_array($wallposts_set)) {
$i++;
$age = days_from_date($posts['date_added']);
echo "<div class=\"comment_box_$i\">
$posts['content']}
</div>";
if ($i == 2)
$i = 0;
}
Then the boxes will have 2 difference classes, the one of the left will have the class="comment_box_1" while the right box will have class="comment_box_2".
Then you can create your CSS for the difference boxes.
Enjoy
You can also do this simply with CSS by using:
:nth-child(even)
:nth-child(odd)
The fiddle illustrates with background colors instead of images.
http://jsfiddle.net/ingvi/CFMcA/
hope it helps
I have a small DIV with text-align:center. All it's contents must be centered. In this DIV I have a PHP code that generates a certain number of A HREF links with display:block. I want all these links to stand next to one another (till it's too wide for the div, then the need to jump to the next line) so I use float:left. However, if only two links (blocks) show up, they are aligned left in my DIV, instead of in the middle. So I want my links to show up next to each other, but I also want to center them inside my DIV. How do I do this?
CODE per request:
<div style="margin-left:200px;width:300px;text-align:center;background-color:">Pagina's:<br clear="left">
<?php
$sql = "SELECT COUNT(bedrijfsnaam) FROM profiles where plaats = '".$plaats2."'";
$rs_result = mysql_query($sql);
$row = mysql_fetch_row($rs_result);
$total_records = $row[0];
$total_pages = ceil($total_records / 1);
for ($i=1; $i<=$total_pages; $i++) {
echo "<a style=\"float:left;display:block;color:white;width:22px;text-align:center;text-decoration:none;font-size:20px;background-color:#483435;margin-left:4px\" href='".$plaatsnaam7.".php?page=".$i."'>".$i."</a> ";
};
?>
</div>
parent div must have
text-align: center
everything inside must have display: inline; float: none;