I have a popup window that with the following source code ("likes.php"):
<!DOCTYPE html>
<html>
<head>
<title>Like</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
</head>
<body>
<ol>
<?php for($i=0;$i<500;$i++){ ?>
<li><p><?php echo $i ?></p></li>
<?php } ?>
</ol>
</body>
</html>
Now the problem is that although all the paragraphs are created, I can't see them, because there is no scrollbar. How can I attach a scrollbar to my page?
Link to printscreen
It is working on chrome, but not in firefox IF it comes in a popup window (other file calls window.open("likes.php"). Works in both browsers in regular windows.
Use the css overflow property. Add this to your <head> tag:
<style type="text/css">
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.scroller {
overflow: scroll;
padding: 5px;
height: 100%;
}
</style>
To specifically add a horizontal or vertical scrollbar, use overflow-x or overflow-y, respectively.
You'll also want to fix the close tag of your <li> element, and wrap it in a proper container, like this
<div class="scroller">
<ul>
<?php for($i=0;$i<500;$i++)
echo "<li>".$i."</li>";
?>
</ul>
</div>
To control overflow, you generally need to use the CSS overflow property
overflow: scroll
as stated by p.s.w.g., but you would never need to apply this to the whole body like (s)he suggests. The browser should add a scrollbar to the full page on it's own if your code is formatted properly.
The current issue is likely caused by your not closing the second <li> tag and by the PHP being improperly formatted. You don't need a break at the end of each line. The reason the lines aren't breaking is that you haven't enclosed the <li> elements inside an <ol> or <ul>. Also, putting the beginning of your if statement, the filler, and the end inside separate php tags will just confuse the computer. Instead use:
<?php
echo "<ul>";
for( $i=0; $i<500; $i++) {
echo "<li>" . $i . "</li>";
}
echo "</ul>";
?>
Related
CSS
.number{
float:none;
background-color:white;
cursor:ponter;
}
#panel{
background-color:red;
height:200px;
width:100px;
overflow-y:scroll;
}
I want to make a list of number in a panel. I've tried with HTML
HTML
<div id="panel>
<span class="number">1</span>
<span class="number">2</span>
<span class="number">3</span>
<span class="number">4</span>
.....
<span class="number">50</span>
</div>
When <span> is clicked, something will appear by jQuery, but I have no problem with jQuery.
Because I thought that looping the number manually doesn't efficient, I tried to use PHP.
PHP
<?php
for($number=0;$number<=50;$number++){
echo "<span class='number'>".$number."</span>";
}
?>
But the number made by PHP doesnt do the same like HTML does.
This is what I want and done by HTML.
This is done with PHP and the numbers are made horizontally until 50
You need to make sure the same whitespace is present when looping through it in PHP:
<?php
for($number=0;$number<=50;$number++){
echo "<span class='number'>".$number."</span>\n";
}
?>
Remember, your original code is just outputting one long string:
<span class='number'>1</span><span class='number'>2</span>...
In this case, whitespace (A newline) is important which may alter how your CSS looks. Forcing a new line each time you echo out a <span> by adding \n should fix this.
.number{ display : inline-block; }
I'm trying to display images using CSS so that I can switch which image is being displayed depending on what stylesheet is selected. It works fine sometimes, others not. Can you help me figure out why?
I first use php to echo out the HTML based on the page id:
if($host == 'comparison.php?page=1.1.9')
{
echo "<div class='image8'></div>";
}
if($host == 'comparison.php?page=1.1.10')
{
echo "<div class='image9'></div>";
}
In the CSS, I identify the class, and tell it to display the image:
div.image8 {
content:url(homilies/1.1.9.jpg);
width: 100%;
}
div.image9 {
content:url(homilies/1.1.10.jpg);
width: 100%;
}
1.1.10 works perfectly, and the image changes when I select another stylesheet. 1.1.9 does not work at all, and when I inspect the element, the 'div.image8' doesn't even show up. What could be going on here? It works in other places too, I can't figure out the pattern.
Ok D.C, I'm in a good mood and like I mentioned in a comment above, I created a quick, down and dirty, one page code to test your situation. Everything worked great for me, but I did learn a few things too. I have no idea how 1.1.10 worked perfectly for you but not 1.1.9 because from what I can tell neither should work. Tested in Firefox v53.0.2.
Using content:url('some_image'); never showed the image for me.
Had to use background-image: url('some_image'); for an image to appear.
The DIV needed a non-breaking space ( ) between the DIV tags for the DIV to show the image. In other words, you can't have a background image if there is no content in the DIV. So maybe you just need to add a non-breaking space between your DIV tags to make it work?
That's about it. Now for a working example. You can and should modify it to fit your needs. For example link the style sheet instead of internal like I did. I just wanted to make a quick one page of code to test if everything will work.
<?php
//Use a PHP ternary operator to check if the GET variable is set in the URL.
$page=isset($_GET['page'])?$_GET['page']:'';
switch ($page) {
case '1.1.9':
$img_class='image8';
break;
case '1.1.10':
$img_class='image9';
break;
case '1.1.11':
$img_class='image10';
break;
default:
$img_class='image0';
break;
}
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Image By Get Var</title>
<style>
/*Everything between the STYLE tags would actually be in your style sheet instead of internal to your page.*/
html, body {
height: 100%;
background: #ccc;
padding: 10px;
}
#img_container {
margin-top: 20px;
background-repeat: no-repeat;
background-size: contain;
height: 50%;
width: 50%;
}
/* You can use the static images below to test this code, but should replace with your images using a relative path.*/
/* Used tinypic.com for demo images since it allows free hotlinking. */
div.image0 {
background-image: url('http://i50.tinypic.com/j9blw9.jpg');
}
div.image8 {
background-image: url('http://i42.tinypic.com/5n52ex.jpg');
}
div.image9 {
background-image: url('http://i60.tinypic.com/316ozv5.jpg');
}
div.image10 {
background-image: url('http://i43.tinypic.com/2eg5j7s.jpg');
}
</style>
</head>
<body>
<p>The form only exists so that a GET variable can be sent to the page to test PHP setting CSS based on the GET variable.</p>
<form method="get">
<input type="radio" name="page" value="1.1.9"> 1.1.9<br>
<input type="radio" name="page" value="1.1.10"> 1.1.10<br>
<input type="radio" name="page" value="1.1.11"> 1.1.11<br>
<input type="submit" value="Submit">
</form>
<form>
<input type="submit" value="Reset To Default">
</form>
<?php
/* The div container has a non-breaking space so that the div will exist to have a background */
echo '
<div id="img_container" class="'.$img_class.'"> </div>
';
?>
</body>
</html>
I hope that helps. If 1.1.9 still does not work when you replace the image in my example with the relative path to your image, then you should make sure that the image is located in the path that you have specified.
Good luck!
Found the solution, for anyone interested: after using a CSS validator, I found that there were invisible characters mucking things up. Lesson learned.
Anyone know of a PHP method, code snippet or project that I can use or start with to take a HTML input and remove the <style> tag but apply all the styles to each element they were intended for?
Example Input:
<html>
<head>
<style>
body {
font-size: 10px;
}
td {
font-size: 8px;
}
</style>
</head>
<body>
<!--This is my table with smaller text: -->
<table>
<tr><td>this text is:</td><td>8px</td></tr>
</table>
</body>
</html>
Desired output:
<html>
<head>
</head>
<body style="font-size: 10px;">
<!-- This is my table with smaller text: -->
<table>
<tr><td style="font-size: 8px;">this text is:</td><td style="font-size: 8px;">8px</td></tr>
</table>
</body>
</html>
Why? I want my app to include original emails with replies without the original message styles messing with the format of the reply. I'm guessing this is the way forward for me because when you view the source of a reply in Outlook, it seems to use this method.
https://github.com/tijsverkoyen/CssToInlineStyles should do the trick. The code would look like this:
use TijsVerkoyen\CssToInlineStyles\CssToInlineStyles;
$cssToInlineStyles = new CssToInlineStyles();
$css = "body {
font-size: 10px;
}
td {
font-size: 8px;
}";
$html = "
<body>
<!--This is my table with smaller text: -->
<table>
<tr><td>this text is:</td><td>8px</td></tr>
</table>
</body>
";
echo $cssToInlineStyles->convert(
$html,
$css
);
If you'd rather use an online tool there is also http://premailer.dialect.ca/
What you're looking is a style inliner, that's often used on HTML email development, here you have some tools:
https://templates.mailchimp.com/resources/inline-css/
http://foundation.zurb.com/emails/inliner.html
https://inliner.cm/
https://putsmail.com/inliner
https://github.com/tijsverkoyen/CssToInlineStyles
https://github.com/jjriv/emogrifier
https://www.npmjs.com/package/css-inliner (for npm)
http://www.mailermailer.com/labs/tools/magic-css-inliner-tool.rwp
Depending on your apps code, you could find some library to do so... if you want to build your own.... maybe the npm package can serve you as guide.
Hope this helps
I am using Emogrifier for creating HTML mail messages - and it works really good for me.
Here's a link:
Emogrifier
You can use id and class to save your CSS code and call whenever you want in a tag.
I am developing a website and including two menus into a Home page. The Home page, and both menus have the extension .php. I am testing locally on Apache Server.
The issue: One of my menus, which is a top navigation bar, displays correctly on my local server but its menu items / links are not clickable and do not show the rollover effect. This is ONLY when I load the Home page with the menu included via PHP.
When I load the menu page itself (still on my local server), the issue is not present, my menu displays and works fine, including the links.
Please see the code below:
Home Page
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Home</title>
<!-- various css imports, removed for readability -->
</head>
<body id="home">
<?php include('top-bar.php'); ?>
<!-- Container div -->
<div id="container">
<?php include('menu.php'); ?>
<!-- Container div -->
</div>
</body>
</html>
Menu bar
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- various css imports, removed for readability -->
<title>Topbar</title>
</head>
<body id="home">
<div id="headerbar">
<!-- Centered container -->
<div id="container">
<!-- Top bar -->
<div id="header">
<div id="maintitle">
<span style="color: #499DF5">My</span><span style="color: #FFFFFF"> Name</span> </div>
<!-- Second menu bar -->
<div id="menutop">
<ul>
<li id="contactme" title="Write me an email"><a href='#'><span>Contact me</span></a></li>
<li class="last" id="vcf"><a href="#" onClick="MyWindow=window.open('contact-card-popup.html','MyWindow','width=300,height=150'); return false;" title="Download my contact card (.vcf or .csv)">Download
contact card</a></li>
<li class="last" style="float: right;" id="googleplus"><a target="_blank" title="Follow me on Google+" href="https://plus.google.com/u/0/114402922247766544960/posts">
<i class="fa fa-google-plus fa-fw"></i></a></li>
<li style="float: right;" id="linkedin"><a target="_blank" title="View my LinkedIn profile" href="http://www.linkedin.com/in/myprofile">
<i class="fa fa-linkedin fa-fw"></i></a></li>
<li style="float: right;" id="visualize.me"> <a target="_blank" href='http://vizualize.me/myprofile?r=myprofile' title='View my infographic resume on Vizualize.me'><span style="font-weight:bold">Visualize.me</span></a></li>
</ul>
</div> <!-- End Second menu bar -->
<div id="jobtitle">Jobtitle</div>
<!-- End header div -->
</div>
<!-- End Centered container -->
</div>
<!-- End headerbar div -->
</div>
</body>
</html>
And CSS:
/* Layout
-----------------------------------------------------------------------------*/
body {
}
#container {
width:1020px;
position:relative;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px;
}
#headerbar{
width:100%;
min-width:500px;
height:130px;
position:absolute;
background: #414141;
}
#menutop {
min-width:500px;
width:1020px;
position:absolute;
margin-top:20px;
}
#wrapper {
clear:both;
height:900px;
width:1020px;
position:relative;
margin: 0 0 0 -25px;
}
/* Top menu: header
-----------------------------------------------------------------------------*/
#header {
font-family:'Open Sans', sans serif;
}
#maintitle {
font-weight:bold;
font-size:34px;
width:250px;
height:40px;
min-height:60px;
position:relative;
margin-left:40px;
margin-top:25px;
}
#jobtitle {
color: #FFFFFF;
font-size: 14px;
width: 230px;
height: 25px;
position: absolute;
margin-left: 270px;
margin-top: 9px;
left: 16px;
top: 36px;
}
I tried replacing my php include
<?php include('top-bar.php'); ?>
with the link relative to the root:
<?php include($_SERVER['DOCUMENT_ROOT']."/my-website/top-bar.php"); ?>
This did not change anything.
I also validated against W3C, just in case it would throw any obvious errors, which it did not.
Any ideas on why the PHP menu works in standalone but not when included? Thank you.
Edit:
On a good suggestion of Moshe I updated the JSFiddle he created. Since it seems I cannot use several files in there, I put the code of the top menu inside the home page, where the php import is performed. Doing so clearly makes the links in the menu non-working so it sounds like a CSS issue. I however do not see where the issue is.
http://jsfiddle.net/0ows5vym/4/
And this is the menu only, working fine in standalone: http://jsfiddle.net/fdbvwL3t/
Note: Please diregard the icons not displayed at the far right of the menu, they are based on other imports I cannot easily reproduce here. That part works fine locally.
You would use dirname(FILE) to get current directory.
try using
include(dirname(__FILE__). "/my-website/top-bar.php")
instead of $_SERVER['DOCUMENT_ROOT']
FILE constant will give you absolute path to current file
and dirname(FILE) to get the directory of current included file
In which file are you trying to load your php file?
if it is in your index.php (probably),
then you need to take in account your path facing the file where you have it
lets suppose that:
you have a absolute path for your index.php like
/var/www/html/thisismywebsite/index.php
and your file is in
/var/www/html/thisismywebsite/project/someinnerfolder/topbar.php
the above would not solve it.
Instead, you may opt for a solution like
<?php
define('BASEPATH', dirname(__FILE__) . "/");
include(BASEPATH . "project/someinnerfolder/topbar.php");
Just remember, the includes must be relative to the entry point of your application, so your include must be relative to where you start your app.
BONUS:
Don't start all your files with the tag, and so on, since it will give you issues later on. rather, opt to use a master to keep this kind of html
I finally got it. Playing with the JsFiddle here: http://jsfiddle.net/0ows5vym/4/ put me on the right track.
I have a "container" element that was called twice, once in my php menu and then again in the main page. I made the mistake of giving that container a unique ID where it should be a class, if I want to be able to call it several times.
Replacing the container "id" with "class" fixes it, cf here. http://jsfiddle.net/0ows5vym/6/
<!-- Container div -->
<div class="container">
<?php include('menu.php'); ?>
<!-- Container div -->
</div>
Moshe - thank you for letting me know about JsFiddle. I like that tool. Also your suggestion helped me find the answer.
Ok, ive spent a few days trying to figure out why this isnt working, and so far Google has gave me nothing of use. Maybe there is a built in rule that I just am not aware of. I hate posting on sites like this with questions that could be trivial but ive exhausted my own efforts.
So I have placed a background in my CSS and it works on the alotted tag, but it is adding some padding that is not specified. Trying to change it does nothing. The background for the body stretches the duration of the screen but not this one.
Here is where the header is being included.
<?php
require_once 'classes/Membership.php';
$membership = new Membership();
$loggedin = $membership->confirm_loggedin();
if(!$loggedin){
ob_start();
header("Location: http://lolteamrecruiter.com/login.php");
ob_end_flush();
}
?>
<!DOCTYPE html>
<?php
include # 'header.php';
?>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<div id="Login">
<!--LOGOUT BUTTON -->
<p>
Results Page
</p>
</div>
</body>
</html>
Here is the php file being included.
<link href="css/header.css" rel="stylesheet" type="text/css" />
<div id="header">
<img src="css/images/angel.png" height="40px" width="20px">
<?php
require_once 'classes/Membership.php';
$membership = new Membership();
$loggedin = $membership->confirm_loggedin();
if($loggedin){
echo ' <div id="header-right-account">
<ul id="nav">
<li>My Account
<ul>
<li>Edit</li>
<li>Tacos</li>
<li>Burritos</li>
<li>Log Out</li>
</ul>
</li>
</ul>
</div>';
}else{
echo '<div id="header-right">Log In</div>';
}
?>
</div>
This is the css file thats applying the background
#header{
background-image : url(images/black.png);
background-repeat : no-repeat;
background-size: 100% 100%;
background-attachment : fixed;
background-origin:border-box;
margin: 0 auto;
padding: 0;
top:0;
}
The site to see this is at http://lolteamrecruiter.com/
Do you mean the spacing around the logo? Just add display:block to the image.
Edit
Okay, add margin:0 to the body.
Your image is aligned to the baseline by default, which means that gap below it is space for the lower part of letters like p, g, j, etc.
Try this:
#header a img { vertical-align: middle; }
body {
background-image : url(images/login-box-backg2.png) no-repeat;
background-size: 100% 100%;
background-attachment : fixed;
margin: 0;
padding: 0;
}