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/
Related
Below you will see that I am trying to add a 40% width to my image if not a mobile device. However, the image is still showing with 100% width even on Desktop Devices. You can view this page here: https://www.tattiniboots.com/product/terranova/
This is the code that I am using
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;
// Any mobile device (phones or tablets).
if (!$detect->isMobile()) {
add_action('woocommerce_after_single_product_summary', 'bbloomer_add_below_prod_gallery', 5);
function bbloomer_add_below_prod_gallery()
{
global $product;
$id = $product->id;
if ($id == 5735) {
echo '<div class="woocommerce-product-gallery" style="padding: 1em 2em; clear:left;">';
echo '<center><h2>MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png">';
echo '</div>';
}
}
} else {
add_action('woocommerce_after_single_product_summary', 'bbloomer_add_below_prod_gallery', 5);
function bbloomer_add_below_prod_gallery()
{
global $product;
$id = $product->id;
if ($id == 5735) {
echo '<div class="woocommerce-product-gallery" style="padding: 1em 2em; clear:left;">';
echo '<center><h2>NOT MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png" width="40%">';
echo '</div>';
}
}
}
Echoing html inside a php file is a bad idea, both for readability, and debugging. Having inline css is also not a good thing. I would honestly recommend using media queries instead of using mobile detect, because it's not 100% accurate (it doesn't recognize some phones, and you have to keep it up to date).
With all that said, are you trying to "increase" 40% width to a 100% width image? It's not possible to have more than 100% width. You can try to increase the width of the surrounding div with the "woocommerce-product-gallery" class.
I also notice an inconsistency here:
if ( !$detect->isMobile() ) {
...
echo '<center><h2>MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png">';
}
It looks like it's checking if it's not mobile, and adding the mobile img, and the reverse for the else.
I think you've choosen a bad way to solve this problem.the best way is using css (media query).
you can't use "%" in html tag width.
width as an attribute inside the img tag always has a value in pixels (it's written without the pixels, just as the number), so the way you wrote it won't work.
If you want a percentage value for width as an inline attribute for the img tag, you should use the style attribute. So your img tag should look like this:
<img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png" style="width:40%;">
Yes this solution was resolved by simple declaring the sizing options within CSS. Remember that it is also possible to add a class within php to the image you have added to further facilitate this CSS declaration
I am showing 5 results on a html page using divs and absolute position. I have used display:table-cell; and display:flex; for center positioning of image and text.
What i have problem is with for some reason after creating a parent div for each result, giving it a border, for some reason eben though i use absolute position there seems to be some uniform space between results. I see the borders in the right place, but the result contents are shown out of place.
See here:
https://www.dropbox.com/s/deeycdr32ejcftd/proferror.jpg?dl=0
Something is spacing out the results wringly. When I take out the parent container labelled profile[1 to 6] then it does work.
heres the php which is echoing the HTML:
echo "<div id='results' style='position:absolute;left:0px;top:0px;'>"
(while loop)
echo "<div id='profile".$profileid."' style='border-style: solid;position:absolute;left:0px;top:".$yy."px;width:320px;height:50px;'>";
echo "<div id='pic".$profileid."' style='display:table-cell; vertical-align:middle; text-align:center;background-color: #434345;position:absolute;left:0px;top:".$yy."px;width:50px;height:50px;overflow: hidden;'>";
echo "<a href='http://rafnet.co.uk/click/php/requests.php?from=".$username."&to=".$row["username"]."'><img style='max-height: 100%;' src='http://rafnet.co.uk/click/images/".$row["image"]."' /></a></div>";
echo "<div style='color:#0d00ff;display:flex; align-items: center; justify-content: center;position:absolute;left:50px;top:".$yy."px;width:270px;height:30px;overflow: hidden;'>".$name."</div>";
echo "<div style='display:table-cell; vertical-align:middle; text-align:center;position:absolute;left:50px;top:".($yy+30)."px;width:270px;height:20px;overflow: hidden;'>".$info."</div></div>";
$yy+=60;$profileid+=1;
(end of while loop)
echo "</div>"
echo "<div style='display:table-cell; vertical-align:middle; text-align:center;position:absolute;left:50px;top:".($yy+30)."px;width:270px;height:20px;overflow: hidden;'>".$info."</div></div>";
Try taking away the second </div> at the end of this line
I managed to fix this issue. What I realised after some work was that all the divs inside the parent div "profile" were being positioned relative to its position.
so for those divs i changed
top:".$yy."px;
to
top:0px;
ref to css are you saying i shoudlnt use the style attribute to define things? Are you saying i should place the css in the head section and assign them using the id or class? I just using the style attribute as i can see without referencing to what element it applies to
im having a problem and i can't seem to put an image icon on my delete and edit button i've put a div class and styled it in my css but still the image doesn't show.what might be wrong here?
HTML
<?php
$this->table->set_heading("Name","Nationality","Contact Number","Number of Guest","Date of Arrival","Time","Pickup Location","Package","Other Request","Delete Record","Edit Record");
$qry = $this->db->like('name',$search_key)->order_by('date')->get('booking');
if ($qry->num_rows > 0) {
foreach ($qry->result() as $row) {
$this->table->add_row(anchor('site/print_records/'.$row->id, $row->name, 'target="_blank"'),$row->nationality,$row->contactnum,$row->number_of_guest,$row->date,$row->time,$row->pickup,$row->package,$row->request,anchor('site/delete/'.$row->id, "<div class='deleteico'></div>),anchor('site/update/'.$row->id, "<div class='editico'></div>));
}
}
else{
echo "No records found!";
}
echo $this->table->generate();
?>
CSS
#deleteico{
background-image: url('../pictures/delete_icon.png');
}
#editico{
background-image: url('../pictures/edit_icon.png');
}
You are using class in your code and are applying the css to an id selector.
If you want to use classes, change your css to the following:
.deleteico{
background-image: url('../pictures/delete_icon.png');
}
.editico{
background-image: url('../pictures/edit_icon.png');
}
# is used to select IDs, and . is used for classes.
Note: and as #skip405 has mentioned as well, you will need to set a width and height in your css or the div will be 0x0 big and thus not show anything.
Try adding a space inside your brakets:
you need to add width and height of the background-image to the #deleteico and #editico ids. Then add to them and change it to id from class in your code.
For instance,
<div id='deleteico'> </div>
<div id='editico'> </div>
Hope this helps.
So I've looked around quite a bit for an example to this but I couldn't find anything for what exactly I am trying to do.
I'm building a blog with the front page having a bunch of posts in order like this -
http://prntscr.com/1vjoun
The blogs vary in size based on how much text is in them -
http://prntscr.com/1vjozq
When you hover over a blog I am trying to make a small bar appear inside of the blog that overlaps the text at the bottom so that I can have some options appear, such as 'Like' 'Favorite' 'Feature' or w/e and this is where my problem comes in.
echo "<div class='blogpost' id='" . $row['blogid'] . "'>";
echo "<h3 class='blogheader'>" . $row['blogheader'] . "</h3>";
echo "<p class='blogbody'>" . $row['blogbody'] . "</p>";
echo "<div class='blogextras'></div>";
echo "</div>";
I create the 'blogextras' div that will hold the options mentioned above.
.blogextras {
position:relative;
height:35px;
width:100%;
background:#333;
}
I give it some style.
$(".blogpost").hover(function(){
$(".blogpost").css("overflow", "auto");
$(".blogextras").show();
$(".blogextras").css("position", "absolute");
});
$(".blogpost").mouseleave(function(){
$(".blogpost").css("overflow", "hidden");
$(".blogextras").hide();
$(".blogextras").css("position", "relative");
});
Add some jQuery.
But my final result makes the 'blogextras' div appear below where I want it to be (about 35 pixels) -
http://prntscr.com/1vjppq
I also tried not changing it's position from relative to absolute and this does give a kind of desired result except it makes the boxes re-size which I don't want it to do.
I want the 'blogextras' div to appear at the bottom of the visible text area every time no matter the size of the 'blogpost' div.
Sorry if I haven't been discriptive enough or haven't given enough code just post a comment if you want to see more.
Your .blogpost container needs a relative position so that you can position your .blogextras bar exactly within that container. You also need to give the .blogextras bar a higher z-index so that it overlaps the .blogpost content:
.blogpost {
position:relative;
overflow:hidden;
/* Other CSS */
}
.blogextras {
position:absolute;
z-index:10;
bottom:0;
left:0;
display:none;
height:35px;
width:100%;
background:#333;
}
$(".blogpost").hover(function(){
$(".blogextras").fadeIn();
});
$(".blogpost").mouseleave(function(){
$(".blogextras").fadeOut();
});
Untested, but that should give you ~ what you need.
I have an array of strings.
$x=array('blabla1', 'blabla2', ...);
I want to fill a div block with strings from $x until my div is full. The height of my div is fixed to $h.
For instance, I want to put in my div something like that
<div>
<ul>
<li> 'blabla1' </li>
<li> 'blabla2' </li>
<li> 'blabla3' </li>
...
</ul>
</div>
until it is full.
Any guess how to do so ?
Javascript or php ?
Thank you :)
Why I want to do this : I have a side div on my webpage with suggested links. I want to put as many suggested links as possible in this side div.
Colas
PS : Feel free to edit my post (eg, add tags).
Its going to be problematic to do this by just using php.
My suggestion is to do it using overflow hidden css property in combination with a jquery plugin like:
dotdotdot
You must determine the height of your div in any fixed measurable unit such as px. Then adjust the height of each list item. By dividing the height of div/ the height of list item, you will know the number of list items required say n so inside your div do the following:
<div class="define-height">
<ul>
<?php
for ($i = 0; $i < $n; $i++){
?>
<li><?php echo $x[$i];?></li>
<?php } ?>
<ul>
</div>
Because you already know the fixed height value of your div. You can also add a fixed height value to the li elements and then from php do the following:
I am assuming that you already set the fixed height values for the div and ul in your css.
$div_height = 500px;
$li_height = 21px;
echo '<div id="mydiv"><ul id="myul">';
for($i=0;$i<=$div_height;$i+=$li_height){
echo "<li>"."your content here"."</li>";
}
echo '</ul></div>';
Using jQuery client side:
while( $("#divId").height() > $("#ulId").height() ) {
$("#ulId").append("<li>blabla1</li>");
}
From the comments :
any reason you can't just use overflow: hidden? – Marc B
Then you have to doit through javascript. From javascript is the only way you can have the height of a dom element after created. Maybe this div has to be dynamically populated through an ajax call to php that returns only one li element. And after that in javascript calculate if there is enough space to anoter li element in that case do the next call until there is no more available space. You can also set overflow:hidden in your div but this will only hide the content that is out of the div. – slash28cu