I have a css media query that resizes and repositions a div. In my html that div has 2 lines but on the smaller screen I would like it displayed as 1 line.
Is there a way to ensure I have:
Website Visitors: <?php echo $data; ?>
<div class="fb-like"></div>
Instead of:
Website Visitors: <?php echo $data; ?>
<br/>
<div class="fb-like"></div>
When a screen is less than a fixed amount (in this case 460px)?
I would like to use php or css as they're what I'm using for styling in my css.php file.
Remove the <br/> add this in your css (values can be anything you want):
.fb-like {
margin-top: 10px;
}
and in your media query:
.fb-like {
margin-top: 0px;
}
Not possible with complete PHP you might need to use Javascript too !!
You can try following code to fetch screen width and height!!!
<?php
session_start();
if(isset($_SESSION['screen_width']) AND isset($_SESSION['screen_height'])){
echo 'Screen resolution: ' . $_SESSION['screen_width'] . 'x' . $_SESSION['screen_height'];
} else if(isset($_REQUEST['width']) AND isset($_REQUEST['height'])) {
$_SESSION['screen_width'] = $_REQUEST['width'];
$_SESSION['screen_height'] = $_REQUEST['height'];
header('Location: ' . $_SERVER['PHP_SELF']);
} else {
echo '<script type="text/javascript">window.location = "' . $_SERVER['PHP_SELF'] . '?width="+screen.width+"&height="+screen.height;</script>';
}
?>
Related
I am using php to loop through and display all images from a directory. This works, however I want to add the image name underneath each of the images. I am struggling to get the text to center underneath it, as it seems to just place it next to it and appears to be in its own column separate to the image.
How do I go about fixing this? From research I've done the general solution seems to be placing them in a div together, I haven't done much php before but am I able to just stick the two echo statements inside of a div tag?
<div id="contentClothing">
<?php
function hoodie() {
$dir = 'images/clothing/hoodies/small/';
$files = scandir($dir);
$images = array();
foreach($files as $file) {
if(fnmatch('*.png',$file)) {
$images[] = $file;
}
if(fnmatch('*.jpg',$file)) {
$images[] = $file;
}
}
foreach($images as $image) {
echo '<img src="images/clothing/hoodies/small/'.$image.'"width=15% height=20% hspace=2% vspace=2% data-big="images/clothing/hoodies/large/'.$image.'" />';
echo '<span>'.$image.'</span>';
}
}
?>
</div>
Here is the css
#contentClothing {
padding-bottom: 5%; /* Height of the footer element */
margin-left: 15%;
}
span {
text-align: center;
}
This is how it looks http://puu.sh/m8Zh0/6b0da6ec03.png
Instead of <span>, use <p> tag. Wrap the whole image and text inside <div> tag and apply your styles to it.
// your code
foreach($images as $image){
echo '<div style="text-align:center; float:left; clear:right;">';
echo '<img src="images/clothing/hoodies/small/'.$image.'"width=15% height=20% hspace=2% vspace=2% data-big="images/clothing/hoodies/large/'.$image.'" />';
echo '<p>'.$image.'</p>';
echo '</div>';
}
// your code
I am using the php google drive sdk, and programatically loading a document from Drive into a div. The document loads correctly and I can edit and save without issue. The problem occurs when I attempt to use the insert image dialog via the document menu, it just loads a blank white box.
What do I need to do in order to get the correct insert image dialog to load as if I was using the document directly from within drive? Below is the code I use to load the document:
function loadDocumentForView()
{
$service = buildServiceAccountService("Google Drive account");
$file = $service->files->get($_SESSION['selectedDocument']);
$name = $file->getTitle();
$ext = strtolower(substr(strrchr($name, "."), 1));
if ($ext == 'doc' || $ext == 'docx')
{
if ($_SESSION['editSelectedDocument'] == 1)
{
$path = "https://docs.google.com/document/d/" . $_SESSION['selectedDocument'] . "/edit?usp=sharing&embedded=true";
}
else
{
$path = "https://docs.google.com/a/googleAccount/document/d/" . $_SESSION['selectedDocument'] . "/preview";
}
}
else {
echo "Incorrect Format";
return;
}
$html = "";
if ($_SESSION['editSelectedDocument'] == 1)
{
$html = $html . "<div style='text-align: left; margin-right: auto; margin-left: auto; margin-bottom: 15px; width:95%;'><input driveFile='" . $_SESSION['selectedDocument'] . "' type='button' value='Save' onclick='saveChangesAndDownload(this)' style='margin-right: 5px;' fileName='" . $_SESSION['selectedDocumentName'] ."'><input currentFile='" . $_SESSION['selectedDocument'] . "' type='button' value='Exit' onclick='exitWithoutSaving(this)'>";
$html = $html . "<span id='saveFeedbackSpan' class='serverCallResult'></span></div>";
$html = $html . "<object data='" . $path . "' style='text-align: center; margin-right: auto; margin-left: auto; width:95%; height: 99%;' id='documentViewerObject' doc='" . $_SESSION['selectedDocument'] . "'></object>";
}
echo $html;
}
The problem I think is that the insert image dialog uses a google PickerBuilder that uses Google's domain as the origin and if you look at the javascript console you will see a message like
Invalid 'X-Frame-Options' header encountered when loading 'https://docs.google.com/picker?protocol=gadgets&origin=https://docs.google.…NnhLX2lIv83439cgDPmc%22%7D))&rpctoken=hyerknnixivf&rpcService=bgxw5kefbo32': 'ALLOW-FROM https://docs.google.com' is not a recognized directive. The header will be ignored.
4080223570-picker_modularized_i18n_opc__iw.js:1008 Uncaught Error: Incorrect origin value. Please set it to - (window.location.protocol + '//' + window.location.host) of the top-most page
The problem is that you need to find a way to tell the picker what the origin of the document is like specifiend in the
Picker API. I have the same issue and am still looking for a way to do that as well.
today I experimented with HTML tables and populating them from a MySQL database. My code worked well for what I needed and as is the table looked something like this:
http://codepen.io/anon/pen/ogYRwj
However I ran into a major problem when actually integrating it onto my website. I use the include statement to display my table as well as my menu to swap between all my webpages. The table was displayed like this:
So I experimented with the width of the tbody.td element and I ended up changing this code:
thead th,tbody td {
width: 20%;
float: left;
border-right: 1px solid black;
}
to this:
tbody td{
width: 10%;
float: left;
border-right: 1px solid black;
}
thead th {
width: 20%;
float: left;
border-right: 1px solid black;
}
And somehow, it freakin' worked! But the lines between the thead.th elements didn't line up with the lines of the tbody.td elements on other devices such as my android, but it worked:
The code works when I include it using the PHP statement include /path/to/file.php, but now if I try to directly view /path/to/file.php it looks really strange, similar to the first image above!
Now I can't figure out what is wrong with the first version and how to display it properly on other devices such as Android?
Please come to rescue CSS and PHP wizards!
(EDIT:
The HTML output is pretty much identical to the local except
with results from the MySQL database.
The table is put into a PHP file where I link to the CSS file using
<link rel="stylesheet" type="text/css" href="path/to/style.css">
I have one main PHP file (index.php) in which I include the PHP file containing the HTML table (logs.php) using a function called getPage.
This is the code for index.php:
<?php
require_once(dirname(__FILE__) . '/functions/functions.php');
getPage('includes','home');
?>
<html>
<head>
<title>Fågelmatare</title>
</head>
<body>
<h3>Fågelmatare</h3>
<hr />
Home |
Logs |
Videos |
About
<hr />
<?php
if(!isset($_GET['page'])){
getPage('includes','home');
}else{
getPage('includes',$_GET['page'], 'home');
}
//switch($_GET['page']{
?>
</body>
</html>
I click on the Logs hyperlink to display my table (in logs.php).
In functions.php
<?php
function getPage($dir, $filename, $default = false){
$root = $_SERVER['DOCUMENT_ROOT'];
$path = $root . '/' . $dir;
if(is_dir($path)){
if(file_exists($path . '/' . $filename . '.php')){
include $path . '/' . $filename . '.php';
return true;
}
if(file_exists($path . '/' . $filename . '.html')){
include $path . '/' . $filename . '.html';
return true;
}
if($default){
if(file_exists($path . '/' . $default . '.php')){
include $path . '/' . $default . '.php';
return true;
}
if(file_exists($path . '/' . $default . '.html')){
include $path . '/' . $default . '.html';
return true;
}
}
}
return false;
}
?>
Here is the source code for logs.php
I'm using nginx as my web server, running on a Raspberry Pi.
)
I have another approach, although cross browser support still isn't very good. It uses position:sticky so you'll need to test in Safari or enable experimental flags for position:sticky.
Here's the experiment:
http://codepen.io/jpdevries/pen/vLVbpQ?editors=1100
The idea is that you wrap the <table> in a <div>, set that <div> to position:relative then simply set the <thead> to position:sticky;top:0;.
You can then just set the max-height and overflow on the wrapper <div> to make that scrollable. As it scrolls, the <thead> will stick to the top.
It is admittedly sort of a "cheap trick" because as you can see below the scrollbar starts at the top of the <table>, not the top of the <tbody>. It is quick and easy though and should be more relevant once browser support stabilizes.
Why does this if statement have each of its conditionals wrapped in PHP tags?
<?php if(!is_null($sel_subject)) { //subject selected? ?>
<h2><?php echo $sel_subject["menu_name"]; ?></h2>
<?php } elseif (!is_null($sel_page)) { //page selected? ?>
<h2><?php echo $sel_page["menu_name"]; ?></h2>
<?php } else { // nothing selected ?>
<h2>Select a subject or a page to edit</h2>
<?php } ?>
Because there is html used. Jumping between PHP and HTML is called escaping.
But I recommend you not to use PHP and HTML like this. May have a look to some template-systems e.g. Smarty or Frameworks with build-in template-systems like e.g. Symfony using twig.
Sometimes its ok if you have a file with much HTML and need to pass a PHP variable.
Sample
<?php $title="sample"; ?>
<html>
<title><?php echo $title; ?></title>
<body>
</body>
</html>
This is not much html but a sample how it could look like.
That sample you provided us should more look like....
<?php
if(!is_null($sel_subject))
{ //subject selected?
$content = $sel_subject["menu_name"];
}
else if (!is_null($sel_page))
{ //page selected?
$content = $sel_page["menu_name"];
}
else
{ // nothing selected
$content = "Select a subject or a page to edit";
}
echo "<h2>{$content}</h2>";
?>
You could echo each line of course. I prefer to store this in a variable so I can easy prevent the output by editing one line in the end and not each line where I have added a echo.
According to some comments i did a approvement to the source :)
Because the <h2> tags are not PHP and will display an error if the PHP Tags are removed.
This code will display one line of text wrapped in <h2> tags.
This is called escaping.
Because you cannot just type html between your php tags.
However, I would rather use the following syntax because it is easier to read. But that depends on the programmers opinion.
<?php
if(!is_null($sel_subject))
{ //subject selected?
echo "<h2>" . $sel_subject["menu_name"] . "</h2>";
}
elseif (!is_null($sel_page))
{ //page selected?
ehco "<h2>" . $sel_page["menu_name"] . "</h2>";
}
else
{ // nothing selected
echo "<h2>Select a subject or a page to edit</h2>";
}
Because inside the if-statement there is an HTML code, which you can put it by closing PHP tags and open it again like this:
<?php if(/*condition*/){ ?> <html></html> <?php } ?>
or:
<?php if(/*condition*/){ echo '<html></html>' ; }
That is because in this snippet we see html and php code. The code <?php changes from html-mode to php-mode and the code ?> changes back to html-mode.
There are several possibilites to rewrite this code to make it more readable. I'd suggest the following:
<?php
//subject selected?
if (!is_null($sel_subject)) {
echo "<h2>" . $sel_subject["menu_name"] . "</h2>";
//page selected?
} elseif (!is_null($sel_page)) {
echo "<h2>" . $sel_page["menu_name"] . "</h2>";
// nothing selected
} else {
echo "<h2>Select a subject or a page to edit</h2>";
}
?>
using the echo-command to output html, you don't need to change from php-mode to html-mode and you can reduce the php-tag down to only one.
I have a menu that is image based (one yellow and one blue, for example). I designed the buttons in Illustrator and then converted to PNG files. Right now, I'm using CSS for hovering affects.
So when I hover over the image, it changes. So this is good (because it works), but its far from perfect (that's why I'm here)... One of my buttons in CSS looks like this:
.home_menu, .about_menu, .video_menu, .demo_menu, .contact_menu {
float: left;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 10px;
width: 100px;
height: 34px;
display: block;
}
.home_menu {
background: transparent url('../images/buttons/home_but.png');
}
.home_menu:hover {
background-image: url('../images/buttons/home_but_hov.png');
}
The HTML is like started out like so:
<div id="main_menu">
</div>
So basically I'm changing the CSS background image for each class.
Two questions. First, I'm trying to get each menu to be the blue version when on that page. So I wrote a PHP function to do this (in a class), just in case I want to avoid JavaScript. It looks like this:
// Display table and loop through links and images from array
public function print_navigation($image_dir, $ds, $page_nav, $page_nav_alt, $menu) {
$current_file = explode('/', $_SERVER['PHP_SELF']);
$current_page = $current_file[count($current_file) - 1];
$current_page;
//$i = 0;
foreach ($page_nav as $key => $value) {
$menu_output .= '<a href="';
$menu_output .= $key;
$menu_output .= '" id="';
$menu_output .= $menu[$key];
$menu_output .= '" style="background: transparent url(';
if ($current_page == $key) {
$menu_output .= $image_dir . $ds . $page_nav_alt[$key];
}
else {
$menu_output .= $image_dir . $ds . $page_nav[$key];
}
$menu_output .= ');"';
$menu_output .= '></a>';
$i++;
}
echo $menu_output;
}
It seems to work for the Home page ($home variable), but not for the others. I have variables like this (arrays and variables in another file, truncated for brevity):
$menu = array(
$home => 'home_menu',
...);
$page_nav_ylw = array(
$home => $home_but_ylw,
...);
$page_nav_blu = array(
$home => $home_but_blu,
...);
Then I have all the images in variables, referenced to in the arrays, eg, $home_but_ylw refers to the PNG for that button.
The PHP function is a bit odd, because I use the $key for two arrays, which I'm sure is bad. But I'm having a hard time getting it to work otherwise.
Second question is: is there any reason I can't add JavaScript (like jQuery) right on top of this to get me the hover effects so that I can remove it from the CSS? Ideally I'd like to display the buttons with a PHP loop that also handles current page and then do the hover affects with jQuery.
Sorry for the long post. Hope it makes sense.
Thanks in advance!
If you were planning on serving your pages dynamically then I think jQuery would be a much better option. However, if your links are going to separate pages then try something this:
function printNav($Page = "home"){
$HTML = "";
$HTML .= "";
$HTML .= "";
$HTML .= "";
$HTML .= "";
echo $HTML;
}
On each separate page:
<div id="main_menu">
<?php printNav("home"); ?>
</div>
CSS:
.ActiveNav {
background-image: url('../images/buttons/blue_bg.png');
}
.MenuItem {
float: left;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 10px;
width: 100px;
height: 34px;
display: block;
}
.HomeMenuItem {
background: transparent url('../images/buttons/home_but.png');
}
.HomeMenuItem:hover {
background-image: url('../images/buttons/home_but_hov.png');
}
EDIT: If you wanted a different image for each button - I would suggest using a generic button background and hover and putting the text and icons on top of it.
Based on this answer, I was able to find a work around to my problem:
PHP menu navigation
Basically, I used the GET method to get the selected class. This worked nicely. I consolidated my CSS, and was able to get this thing working.
Here is what it turned out like, for one link:
<?php $class = $_GET['selected_tab']; ?>
<div id="main_menu">
<a href="index.php/?selected_tab=home" id="home_menu" title="Home"
class="<?php if(strcmp($class, 'home') == 0) {echo 'selected';} ?>"></a>
CSS like so:
#home_menu {
background: transparent url('../images/buttons/home_but.png');
}
#home_menu:hover, #home_menu.selected {
background-image: url('../images/buttons/home_but_hov.png');
}
Next step is to convert to jQuery.
Thanks Mike GB for your help but it wasn't quite what I was looking for.