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.
Related
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
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/
Hello I am trying to change CSS content on some DIVs depending of their class name.
To explain better, I have a while loop in PHP reading from the database to output DIVs and I have a field named "section" with data such as A,B,C,D,E,F,G.
For the DIVs located in section "A" and "B" I want the class name to be desk_box_hor (for horizontal) ELSE I want it to desk_box_ver(vertical).
Below is what I tried doing only two sections (A,B) that need to be vertical. The others need to be horizontal. If theres a more efficient way of doing this please tell me. I have about 200 of these DIVs being output on screen.
If you have a better title please recommend one, I didn't know what to put lol.
Thanks in advance!
My fiddle of what I want both DIVs to look like
PHP:
while($row = mysqli_fetch_assoc($desk_coord_result)){
//naming X,Y values
$id = $row['coordinate_id'];
$x_pos = $row['x_coord'];
$y_pos = $row['y_coord'];
$sec_name = $row['section_name'];
//draw a DIV box at its X,Y coordinate
//if section A and B do vertical
if($sec_name == 'B' || $sec_name == 'A'){
echo '<div class="desk_box_ver" data="'.$id.'" style="position:absolute;left:'.$x_pos.'px;top:'.$y_pos.'px;">id:'.$id.'</div>';
}
//else do it horizontal
else{
echo '<div class="desk_box_hor" data="'.$id.'" style="position:absolute;left:'.$x_pos.'px;top:'.$y_pos.'px;">id:'.$id.'</div>';
}
} //end while loop for desk_coord_result
CSS:
/* desk boxes*/
.desk_box_ver{
width: 23px;
height: 10px;
border: 4px solid black;
padding:10px;
}
.desk_box_hor{
width: 10px;
height: 23px;
border: 4px solid black;
padding:10px;
}
Also, lets say I want to use these two classes in the same Jquery function, is this the proper way of doing it?
$(".desk_box").add(".desk_box_ver").click(function() {
or
$(".desk_box, .desk_box_ver").click(function() {
In answer to your question "If theres a more efficient way of doing this please tell me." (I'll leave your other questions to someone else) yes, there are more efficient ways to write this PHP code, which then makes debugging and maintenance easier:-
a) Instead of two very long echo strings which are almost exactly the same, introduce a new PHP variable, say, $class. Then write:
$class = 'desk_box_hor';
if($sec_name == 'A' || $sec_name == 'B'){
$class = 'desk_box_ver';
}
echo '<div class="' . $class . '" data="' . $id . '" style="position:absolute;left:' . $x_pos . 'px;top:' . $y_pos.'px;">id:' . $id . '</div>';
Now you only have one long echo string to write, and to debug.
Also my preference is (though this is opinion only) to put a space either side of all those string concatenation dot operators - it makes it easier to decipher whats going on.
b) The next improvement you can make is to swap all the single and double quotes. Then you can write a single string with no concatenation operators at all, as you can put a PHP variable inside double quotes. Again, it makes the string of html clearer and easier to read, and debug. (Browsers can handle single or double quotes in the HTML tags). You end up with:
echo "<div class='$class' data='$id' style='position:absolute;left: $x_pos" . "px;top: $y_pos" . "px;'>id:$id</div>";
c) Next we can make the HTML code being created more readable; at the moment your script is generating a huge block of HTML markup (200 divs?) with no line breaks. Horrendous to debug. Just add \n to the end of your echo string like so:
echo ".....id:$id</div>\n";
and that will split the generated HTML markup into separate lines (but the onscreen text will be unaffected). Much easier then to see if one of the items went wrong (for instance, if the database returns an empty value for one of the records, it will stand out in the HTML like a sore thumb). Note that you can add \n inside a string surrounded by double quotes; if you stay with the original single quoted string you would have to add with a dot operator:
.....id:$id</div>' . "\n";
d) Lastly, you could cut out all those 200 position:absolute strings from the generated HTML markup by putting it into your CSS stylesheet, just retaining the CSS values that vary. Ie:
.desk_box_hor, .desk_box_ver { position: absolute; }
As regards why you are only getting vertical divs, never horizontal, I'll just try an educated guess. Are you really getting back from the database what you think you are?
For instance, you say in your comments the field name is "section", but the PHP is looking for a "section_name" field. Or is the data itself wrong? Have you got PHP error checking on, eg error(reporting(E_ALL)? If not, it would not return an error message, but still blindly go on reading through all rows in the db.
In that case it will always take the else part of your if...else. Supposedly this is the horizontal div path, but because the CSS has the width and height values the wrong way round (see above) it will actually produce vertical boxes all the time.
Okay, so I've been able to define the standard text color according to a database value by using this code:
<?php
echo '<div style="color: ' . $result->properties->fcolor . ';';<br />
echo 'background: ' . $result->properties->bgcolor;<br />
echo '">MY CONTENT</div>'
?>
The color that's set by
$results->properties->fcolor
works nicely, except for a:link, a:hover, a:visited, and a:active. Because it's only defining "color", the browsers default to their own link colors.
My users choose from a selection of background and font colors and Chrome's default blue link color doesn't exactly work with a dark purple background... Is it possible to set up a
<style type=text/css>
inside of my PHP file and have it reference the
$result->properties->fcolor
value that the normal part of the script pulls from my database?
This is my first big site so I'm not positive about anything but I vaguely remember enabling PHP in my external CSS file using .htaccess and it didn't successfully pull in the value of
$result->properties->fcolor
as far as I could tell.
What am I doing wrong?
Thanks in advance - amazing community here! :)
IF I'm you, I would create external css for links just to define rules not color.
for example if your links are inside div, what you can do is just define to use color of div
div a { color: inherit; }
div a:HOVER { color: inherit; }
so when you define your color to div through php logic your links inside div will inherit that color.
If you experience any problems with this add important to property so color of div will be used
div a {color: inherit !important; }
YOu can set you link colors via internal css
<style type="text/css">
a:link { color:#f00;}
a:visited { color : }
a:hover {}
a:active { }
</style>
Note:
1 orders are very important .
2 use hex value instead of color name.
Hi have you tried using " instead of ' and \" instead of "?
echo "<div style=\"color: " . $result->properties->fcolor . ";";
echo "background: " . $result->properties->bgcolor;
echo "\">MY CONTENT</div>";
And, you seem to be missing a semi colon at your 3rd echo.
I'm trying to create an unordered list of <a>text1 text2 text3</a> elements, with a while loop. This list is then styled using #sidebar li a in my CSS.
My problem is that the text1, text2, text3 that is passed into each <a> element in my while loop can take on different lengths and I would like for them to be spaced equally like a table. However, I CANNOT use a table, because to format like a table, requires me to do this....
<li><a><tr><td>text1</td> <td>text2</td> <td>text3</td></tr></a></li>...
and because of that, my CSS "background" image will repeat for EACH <td>, when I only want the background image ONCE for each <tr>...(using different style tags than shown below)
Is there a way to change my while loop to space my text1,text2,text3 evenly like a table (without using a table) and maintain my CSS background image ONCE per each <li>? Any help would be INCREDIBLY appreciated!
My PHP file
while($row = mysql_fetch_assoc($result))
{
echo "<ul id=\"sidebar\">";
echo "<li>" . $row['column1'] . " ". $row['column2']. " ". $row['column 3']."</li></ul>";
}
My CSS file
#sidebar li a {
background: url(../images/sidebar.gif) no-repeat 0px 0px;
}
while($row = mysql_fetch_assoc($result))
{
echo "<ul id=\"sidebar\">;
echo "<li><span class="psuedo-col">" . $row['column1'] . "</span> <span class="psuedo-col">". $row['column2']. "</span> <span class="psuedo-col">". $row['column 3']."</span></li></ul>";
}
Add <span>s around the content from the $row['...'], in order that the css has something to serve as a hook, and set an explicit width on those spans. Bearing in mind that if the content of the spans is too large it will either require an overflow rule (hidden, visible or auto) or your content will start to look odd.
As an example
span.psuedo-col {
display: inline-block;
width: 10em;
overflow: hidden;
}
Or you could use
`display: block;
/* other stuff */
float: left; /* or right, depending on your alignment requirements */
The floats, obviously, will take the contents of the spans out of the flow of the document, perhaps causing the <li> itself to collapse, sine it'll have no content.
Asfar as I understand your question, you want your LI elements to have a fixed width like TD in a table:
#sidebar li {
float:left;
width:33%; /* three columns with equal width */
}