The Images which are hyperlinked don't appear to have any horizontal space between them and so look scrunched up. Applying a width doesn't seem to work and I've tried other Answers which don't work.
Here is my PHP code:
<?php
include_once("php_includes/check_login_status.php");
if($user_ok != true || $log_username == ""){
header("location: http://burningchat.tk/home");
exit();
}
$_SESSION['user_id'] = md5(time());
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{ margin: 0px; text-align: center; font-family: Arial; }
#pagetop{
position: fixed;
top: 0px;
width:100%;
height: 120px;
background: #FF5C26;
color: #FFF;
font-size: 23px;
padding-top: 50px;
transition: height 0.3s linear 0s, padding 0.3s linear 0s;
overflow:hidden;
}
#pagetop > #menu{
position: absolute;
bottom: 0px;
width:100%;
background: #FD4000;
height: 50px;
transition: height 0.3s linear 0s;
}
#wrapper{ margin-top: 230px;
}
#mainbody{
margin-top: 50px;
display:block;
}
</style>
<script>
var pagetop, menu, yPos;
function yScroll(){
pagetop = document.getElementById('pagetop');
menu = document.getElementById('menu');
yPos = window.pageYOffset;
if(yPos > 150){
pagetop.style.height = "36px";
pagetop.style.paddingTop = "8px";
menu.style.height = "0px";
} else {
pagetop.style.height = "120px";
pagetop.style.paddingTop = "50px";
menu.style.height = "50px";
}
}
window.addEventListener("scroll", yScroll);
</script>
</head>
<body>
<div id="pagetop">
The Gaming Hub
<div id="menu"><img src="images/home.png" alt="Chat" border="0" title="Go Back to Burning Chat"></div>
</div>
<div id="wrapper">
<h1><span style="font-family:tahoma,geneva,sans-serif;">Welcome to the Gaming Hub,</span></h1>
<p><span style="font-family:tahoma,geneva,sans-serif;">Whether the need is for something fun, or just to pass the time. Burning Chat's Gaming Hub allows a variety of fun activities, all for free.</span></p>
<hr width="50%">
<div id="mainbody">
<img src="images/standard.png" alt="Chat" border="0" title="Standard">
<img src="images/carbon.png" alt="Chat" border="0" title="Carbon">
<img src="images/gamer.png" alt="Chat" border="0" title="Gamer">
</body>
</html>
Use margin in the element like this:
#mainbody a{
margin: 0 5px;
}
Related
I have a website that displays a list of user accounts on the left side going down in a list that are clickable (hyperlinks) that take you to the user's profile page. Also, I have a search field (form) in the middle of the page where users can just search for someone. However, because of that search field, the usernames displayed on the left side that are aligned with this field are broken, you cannot click on them anymore. The hyperlinks that are not aligned with the search field and are under the alignment of it work. After troubleshooting, I found out that this field in my CSS code was the cause of it: position: absolute;
Taking that field out of the CSS code breaks the position of my search field in the middle of the page and it gets placed at the bottom of the page.
I don't know how to fix this problem without breaking the positioning of my content on the page.
My code:
<?php
include('init.inc.php');
$output = '';
if(isset($_POST['search'])){
$searchq = $_POST['search'];
$searchq = preg_replace("#[^0-9a-z]#i","",$searchq); //filter, can remove
$query = mysql_query("SELECT * FROM users WHERE user_first LIKE '%$searchq%' OR user_last LIKE '%$searchq%' OR user_uid LIKE '%$searchq%'");
$count = mysql_num_rows($query);
if($count == 0){
$output = 'There was no search found!';
}else{
while($row = mysql_fetch_array($query)){
$uname = $row['user_uid'];
$fname = $row['user_first'];
$lname = $row['user_last'];
$email = $row['user_email'];
$id = $row['user_id'];
$output .= '<div> '.$uname.' '.$fname.' '.$lname.' '.$email.'</div>';
}
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=""http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<section id="showcase1">
<section id="newsletter">
<div class="container">
<h1>ProjectNet Members:</h1>
</div>
</section>
<div class="container">
<div class="userList">
<?php
foreach (fetch_users() as $user){
?>
<p>
<button><a class="userList" href="profile.php?uid=<?php echo $user['id']; ?>"><?php echo $user['username']; ?></a></button>
</p>
<?php
}
?>
</div>
</div>
<div class="searchList">
<h2>Search for members</h2>
<form id="search" action="user_list.php" method="post">
<input type="text" name="search" placeholder="Search for members..." />
<input type="submit" value="Search" />
</form>
<?php print("$output");?>
</div>
</section>
</body>
</html>
CSS:
THIS IS THE CSS FOR THE SEARCH FIELD IN THE MIDDLE OF THE PAGE
.searchList {
color: #ffffff;
text-decoration: none;
font-weight: bold;
font: 19px Arial, Helvetica,sans-serif;
text-align: center;
line-height: 35px;
margin: auto;
margin-top: -100px;
position: absolute;
top: 45%;
width: 100%;
}
#search input[type="submit"] {
cursor: pointer;
border: none;
background: #fafafa;
color: #333;
font-weight: bold;
margin: 0 0 5px;
padding: 3px;
font-size: 15px;
font: Arial, Helvetica,sans-serif;
}
#search input[type="text"] {
width: 18%;
border: 1px solid #CCC;
background: #FFF;
margin: 0 0 5px;
padding: 4px;
}
#search input[type="submit"]:hover {
background: #e8491d;
color: #fafafa;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
CSS:
THIS IS THE CSS FOR THE LIST OF USERS ON THE LEFT SIDE OF THE PAGE
.userList {
color: #ffffff;
text-decoration: none;
font-weight: bold;
font: 20px Arial, Helvetica,sans-serif;
margin: auto;
}
.userList button {
background: #333;
width: 20%;
}
There isn't a whole lot of info supplied and its hard to visualize without an image but my guess would be a z-index issue.
Below you can see that the div goes from left to right(width 100%). I assume that this div is sitting on top of your userList div based on the supplied css. This means you probably cant click the hyperlinks below the searchList div.
.searchList {
color: #ffffff;
text-decoration: none;
font-weight: bold;
font: 19px Arial, Helvetica,sans-serif;
text-align: center;
line-height: 35px;
margin: auto;
margin-top: -100px;
position: absolute;
top: 45%;
width: 100%;
}
Try setting a z-index to the userlist div that is higher than the searchList so that you are able to click on the hyperlinks.
.userList {
color: #ffffff;
text-decoration: none;
font-weight: bold;
font: 20px Arial, Helvetica,sans-serif;
margin: auto;
z-index: 1000;
}
Absolute positioning is centering the searchList div in center without effecting other divs in the body. When you remove it, then the searchList div moves to the bottom because that is its location in the body.
I have a web page which displays data on the left side of the page and it goes down in a list.
I need help displaying a form in the middle/right side of the page using CSS. With the current CSS I have for the form, it is displayed at the bottom of the page which is wrong, I want it to be in the middle/right. The form is basically a search field where users can search for members on the website.
I'm bad with CSS, maybe someone can also suggest a cool style for the form? :D
The div class called searchList is where the form is that I want to align to the middle/right
My code:
<?php
include('init.inc.php');
$output = '';
if(isset($_POST['search'])){
$searchq = $_POST['search'];
$searchq = preg_replace("#[^0-9a-z]#i","",$searchq); //filter, can remove
$query = mysql_query("SELECT * FROM users WHERE user_first LIKE '%$searchq%' OR user_last LIKE '%$searchq%' OR user_uid LIKE '%$searchq%'");
$count = mysql_num_rows($query);
if($count == 0){
$output = 'There was no search found!';
}else{
while($row = mysql_fetch_array($query)){
$uname = $row['user_uid'];
$fname = $row['user_first'];
$lname = $row['user_last'];
$email = $row['user_email'];
$id = $row['user_id'];
$output .= '<div> '.$uname.' '.$fname.' '.$lname.' '.$email.'</div>';
}
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=""http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<section id="showcase1">
<section id="newsletter">
<div class="container">
<h1>ProjectNet Members:</h1>
</div>
</section>
<div class="container">
<div class="userList">
<?php
foreach (fetch_users() as $user){
?>
<p>
<button><a class="userList" href="profile.php?uid=<?php echo $user['id']; ?>"><?php echo $user['username']; ?></a></button>
</p>
<?php
}
?>
</div>
</div>
<div class="searchList">
<form id="search" action="user_list.php" method="post">
<input type="text" name="search" placeholder="Search for members..." />
<input type="submit" value="Search" />
</form>
<?php print("$output");?>
</div>
</section>
</body>
</html>
CSS:
.searchList {
color: #ffffff;
text-decoration: none;
font-weight: bold;
font: 20px Arial, Helvetica,sans-serif;
text-align: center;
}
UPDATE:
I managed to get the form in the middle of the screen, I need help moving it slightly towards the right.
CSS:
.searchList {
color: #ffffff;
text-decoration: none;
font-weight: bold;
font: 19px Arial, Helvetica,sans-serif;
text-align: center;
left: 0;
line-height: 35px;
margin: auto;
margin-top: -100px;
position: absolute;
top: 50%;
width: 100%;
float: right;
}
#search input[type="submit"] {
cursor: pointer;
border: none;
background: #fafafa;
color: #333;
font-weight: bold;
margin: 0 0 5px;
padding: 3px;
font-size: 15px;
font: Arial, Helvetica,sans-serif;
}
#search input[type="text"] {
width: 18%;
border: 1px solid #CCC;
background: #FFF;
margin: 0 0 5px;
padding: 4px;
}
}
#search input[type="submit"]:hover {
background: #e8491d;
color: #fafafa;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
Use CSS position property or float property.
To display form on the right of the page use float : right;
form {
float : right;
}
Moving to the right, where the 4th value is the left padding.
padding: 0px 0px 0px 30px;
..alternatively you can use.
padding-left: 30px;
If you want to have better control of the layout structure I suggest you use "grid" which is embedded in css. Search for "css grid".
#charset "UTF-8";
#moviesbox{
white-space: nowrap;
background-color: #363e4f;
width:4000px;
position:absolute;
overflow:auto;
}
.slider {
position: relative;
width: 155px;
display: inline-block;
background-color: #D4D4D4;
margin-bottom: 2em;
height: 300px;
padding: 3px;
white-space: normal;
}
h1 {
color: #00ff00;
}
p {
background-color: transparent;
color: #ffffff;
}
div
{
color: #00cc00;
}
div #controls
{
color: red;
}
div a
{
color: #00cc00;
}
div a:active {
color: #00cc00;
}
div a:hover {
color: #F58100;
}
<!--/MAIN PANEL/-->
#parent {
width:400px;
}
#controls, #monitor {
float:left;
margin-top:0px;
padding-below:200px;
height:400px;
width:50%;
border:1px;
display:inline-block;
solid rgba(0,0,0,1);
text-align:center;
}
<!--/CONTENT AND CONTROLS/-->
#detail {
width:320px;
height:180px;
margin-bottom:12px;
border: 1px solid #000000;
}
h1text {
color: #fb667a;
font-size: 16px;
font-weight: bold;
float:left;
width:159px;
white-space:pre-wrap;
background: transparent;
}
.year {
float:left;
background: transparent;
}
img {
margin-bottom: 5px;
background:#fff;
cursor:pointer;
transform: scale(1);
-moz-box-shadow: 0px 1px 5px 0px #00cc00;
-webkit-box-shadow: 0px 1px 5px 0px #00cc00;
box-shadow: 0px 1px 5px 0px #00cc00;
}
img:hover {
opacity: 0.5;
cursor:pointer;
transform: scale(1);
visibility:visible;
transition: all .2s ease-in-out;
transform: scale(1.1);
z-index:100;
transition-timing-function:cubic-bezier(0.5, 0, 0.1, 1);
transition-duration:400ms;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
/*::-webkit-scrollbar-thumb {
background: #FF0000;
}*/
#detail div {
position:relative;
width:100%;
height:100%;
}
#detail div img {
position: absolute;
top: 0;
left:0;
width:100%;
height: 400px;
z-index:1;
}
#detail div span {
color:#ffffff;
position:absolute;
margin
bottom:0;
right:0;
text-align:center;
width:100%;
background: #00cc00;
opacity: .8;
z-index:2;
}
#detail div span2 {
color:#ffffff;
position:absolute;
top:200px;
right:10px;
text-align:center;
width:50%;
height:200px;
background: #F58100;
opacity: .8;
z-index:10;
}
#links img {
width:10%;
height:30%;
margin-left:16px;
margin-top:100px;
}
<!--/SLIDER/-->
.track {
position: absolute;
top: 10px;
left: 10px;
margin: 0;
padding: 0;
border: 0;
width: 2000px;
}
.book {
float: left;
margin: 0;
margin-right: 10px;
padding: 0;
border: 0;
width: 150px;
height: 150px;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-webkit-transition: opacity 0.2s;
}
.book:hover {
opacity: 0.5;
}
.book:nth-child(1) {
background-color: #ff0000;
}
.book:nth-child(2) {
background-color: #ffaa00;
}
.book:nth-child(3) {
background-color: #ffff00;
}
.book:nth-child(4) {
background-color: #00ff00;
}
.book:nth-child(5) {
background-color: #0000ff;
}
.book:nth-child(6) {
background-color: #aa00ff;
}
.book:nth-child(7) {
background-color: #ff00ff;
}
.left, .right {
position: absolute;
color: white;
font-size: 48px;
top: 57px;
cursor: pointer;
z-index: 1;
}
.left {
left: 0;
}
.right {
right: 0;
}
<?php
//database connection
$host = 'localhost';
$user = 'root';
$pass = 'root';
$db = 'pixbeans';
/* 1) mysqli and mysqli result objects */
//$mysqli is object of mysqli class
$mysqli = new mysqli($host,$user,$pass,$db);
//print_r($mysqli);die;
//call query method of $mysqli object
$result = $mysqli->query
//SELECT queries are always return as mysqli result objects
("SELECT * FROM movies WHERE year BETWEEN 2000 AND 2016 ORDER BY rand() LIMIT 20")
or die($mysqli->error);
?>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pixBeans - Original Black TV Series</title>
<meta name="author" content="Antonio James">
<link rel="shortcut icon" href="assets/Icons/pixBeans icon.png">
<link href="tabpan.css" rel="stylesheet" type="text/css">
</head>
<style>*{margin: 0px; padding: 0px; background-color:black;}</style>
<body>
<div id="main-wrapper">
<div id="moviesbox" style="display:inline-block;">
<?php while ($movie = $result->fetch_assoc()): ?>
<div id="left1" class="left"><</div>
<div id="right1" class="right">></div>
<div class="slider" >
<img width='<?php 67*2.3 ?>' height='<?= 98*2.3 ?>' src='<?= $movie['image_url'] ?>'> <br>
<h1text><?= $movie['title'] ?></h1text> <br>
<span class='year'>(<?= $movie['year'] ?>)</span>
</div>
</div>
<?php endwhile; ?>
<script src="jquery-mobile/jquery-1.11.1.min.js"></script>
<script src="javascript/tabpan.js"></script>
<script src="javascript/imgjump.js"></script>
<script src="javascript/imgslider.js"></script>
</body>
</html>
I am trying to make all my images display on one horizontal line/row that can be scrolled left or right. However, no matter what I do I cannot seem to make the images quit wrapping to the next line. They are responsive so if i make the screen small 2 images will appear and the rest wraps to a new line. If i make full screen several images appear and the other 15 wrap accordingly. However, I want them to stay on one line. I dont care if the overflow is hidden or if the overflow scrolls in from off the page, I just want them to quit wrapping.
Here is what the site looks like right now:
screen shot. I made the parent div"moviesbox" dark grey so that you can see how far the div extends and I am using light grey to show the div area.
Here is the code that I am using to generate the images into the divs:
<div id="moviesbox" style="display:inline-block;">
fetch_assoc()): ?>
<div id="left1" class="left"><</div>
<div id="right1" class="right">></div>
<div class="slider" >
<img width='<?php 67*2.3 ?>' height='<?= 98*2.3 ?>' src='<?= $movie['image_url'] ?>'> <br>
<h1text><?= $movie['title'] ?></h1text> <br>
<span class='year'>(<?= $movie['year'] ?>)</span>
</div>
Here is the CSS I am using. I PREFER TO USE CSS but if not, i'm open to other fixes.
#moviesbox{
white-space: nowrap;
background-color: #363e4f;
width:4000px;
position:absolute;
overflow:auto;
}
.slider {
position: relative;
width: 155px;
display: inline-block;
background-color: #D4D4D4;
margin-bottom: 2em;
height: 300px;
padding: 3px;
white-space: normal;
}
THanks.
I'm creating my website found here, I added my logo at the top of the page.
As this site is a mobile-optimized site, I wanted to add the logo so it correctly scales to the appropriate viewport (device screen size).
I have accomplished this by using this code in my CSS file:
.logo{
width: 75%;
height: 10%;
}
My logo is stored in header.php, and is included on all of the respective pages. However, the logo looks good on the homepage, but when clicking one of the navigational tabs to bring up the list.php page, it doesn't look scaled correctly.
header.php ------------
<html>
<head>
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="other.css" />
</head>
<body width="100%">
<p align="center"><img src="http://www.xclo.co.uk/logomobi.png" onclick="history.go(-1);" class="logo" border="0" width="100%" />
<div class="ribbon"><div class="ribbon-stitches-top"></div><strong class="ribbon-content"><h1>Home - Search - More</h1></strong><div class="ribbon-stitches-bottom"></div></div></p>
<br /><br /><br /><br />
</p>
</body>
</html>
The CSS is:
body{
background-color:#dff7c8;
}
#font-face {
font-family: 'CustomFont';
src: url('fonts/fh_ink.eot'); /* For Internet Explorer 6+ */
}
#font-face {
font-family: 'CustomFont';
src: url('fonts/fh_ink.ttf'); /* For non-IE browsers */
}
a:link{
color:black;
text-decoration:none;
}
.border {
width: 90%;
height: auto;
Margin-left:auto;
Margin-right:auto;
background-color:#c3f495;
border: 5px ridge #009900;
border-radius: 20px 50px 20px 20px;
box-shadow: 10px 10px 10px rgba(0,0,0,0.55);
}
.title {
font-family: 'CustomFont';
text-align: center;
font-size: 2.5em;
color:#000000;
text-shadow: #999 2px 2px 4px;
}
.content {
font-size: 15px;
color:#000000;
}
.search {
width: 24em;
height:3em;
border: 5px solid #009900;
border-radius: 10px;
position: relative;
box-shadow: 2px 2px 2px 2px #A4A4A4;
font-size: 20px; Position:relative;
}
/* (portrait) ----------- */
#media screen and (orientation:portrait){
.logo{
position:relative;
width: 75%;
height: 10%;
}
.go {
position:relative;
float: right;
margin: 0px 0px 0px;
border: 0px;
background-color: transparent;
}
.inlay{
position:absolute;
top:-15px;
left:-15px
}
.img {
position:relative;
width:201px;
height:81px;
background-color: transparent;
}
.img2 {
position:relative;
border-radius:20%;
width:201px;
height:81px;
background-color: transparent;
}
.img3 {
position:relative;
width:150px;
height:81px;
background-color: transparent;
}
.img4 {
position:relative;
width:201px;
height:150px;
background-color: transparent;
}
.appimg {
position:relative;
width:20%;
height:20%;
background-color: transparent;
}
.drapp {
position:relative;
width:35%;
height:15%;
background-color: transparent;
}
.appstoreimg {
position:relative;
width:110px;
height:40px;
background-color: transparent;
}
.divider {
border-top: 3px dashed #009933;
}
li.android,
li.iphone,
li.ipad{
display:none;
}
body.android .android,
body.iphone .iphone,
body.ipad .ipad{
display:block;
}
}
/*(landscape) ----------- */
#media screen and (orientation:landscape){
.go {
position:relative;
float: right;
height:90px;
width:90px;
margin: 0px 0px 0px;
border: 0px;
background-color: transparent;
}
.inlay{
position:absolute;
top:-15px;
left:-15px
}
.img {
position:relative;
width:211px;
height:81px;
background-color: transparent;
}
.img2 {
position:relative;
width:211px;
height:81px;
background-color: transparent;
}
.img3 {
position:relative;
width:150px;
height:81px;
background-color: transparent;
}
.img4 {
position:relative;
width:211px;
height:160px;
background-color: transparent;
}
.appimg {
width:15%;
height:8%;
background-color: transparent;
}
.drapp {
position:relative;
width:25%;
height:30%;
background-color: transparent;
}
.appstoreimg {
position:relative;
width:220px;
height:80px;
background-color: transparent;
}
.logo{
position:relative;
width: 75%;
height: 10%;
}
.divider {
border-top: 3px dashed #009933;
}
li.android,
li.iphone,
li.ipad{
display:none;
}
body.android .android,
body.iphone .iphone,
body.ipad .ipad{
display:block;
}
}
list.php ------------
<?php
include_once('include/connection.php');
include_once('include/article.php');
$article = new storearticle();
$articles = $article->fetch_all();
?>
<html>
<head>
<title>xclo mobi</title>
<link rel="stylesheet" href="other.css" />
</head>
<body width="100%">
<?php include_once('header.php'); ?>
<div class="container">
<h6><div align="center" class="title" style="color:#618050;"><b><u><?PHP echo "category = ", htmlspecialchars($_GET['id']); ?></b></u></h6></div>
<?php foreach ($articles as $article) {
if ($article['promo_cat'] === $_GET['id']) { ?>
<div class="border">
<a href="single.php?id=<?php echo $article['promo_title']; ?>" style="text-decoration: none">
<img src="<?php echo $article['promo_image']; ?>" border="0" class="img" align="left"><br />
<img alt="" title="" src="GO.png" height="50" width="50" align="right" />
<br /><br /><br /><br />
<?PHP echo '<div class="title">' . $article['promo_title'] . '</div>'; ?>
<br />
<font class="content"><em><center><?php echo $article['promo_content']; ?></center></em></font>
</div><br/><br />
</a>
<?php } } ?>
</div>
<?php include_once('footer.php'); ?>
</body>
</html>
Could someone please guide me in the correct direction? Thank you.
There are a few methods you can try.
Your initial logo size is 1,000px × 400px (scaled to 743px × 297px)
I suggest to use this for ALL your CSS classes (.logo)
width:100%; max-width:743px; max-height:297px;
I use something to that affect and it works beautifully.
You could also try:
<img style="-ms-interpolation-mode: bicubic; width:100%;" border=0 alt="LOGO" align=middle src="your_image.xxx">
Which is another method I used for a client's website and using a 1800px wide image which renders nicely for large as well as small iPhone screens and will automatically adjust to screen width, without worrying about height attribute.
You have to remove either the width rule or the height rule to keep the image proportions.
Do you want it to be 10% of the height or 75% of the width?
Also remove the
width="100%"
from inline html. Keep all style rules in external css.
I want to upload video to server and then display it on web page using some player (like youtube) using PHP.
My client ask: "Videos must be no longer than 2 minutes and in either Quicktime, WMV, Mp4 or FLV format."
Is there any opensource script which help me to upload a video with client requirements and then an opensource player which plays that video?
Please help!
Thanks
This is my favourite solution:
http://flowplayer.org/
It enables to control the video quite a lot: it uses javascript settings and embedded flash video player.
Edit: if you look for good uploader, try
http://code.google.com/p/swfupload/
It can do multiple uploads, and filetype checks.
You must, first of all, create links to the videos you want to play (I created mine on a separate page[index.html]). Then upon the click of a link, it will open the page (play.php). I assumed that index.html was displaying the links to the videos from the database, then the rest of the scripting for playing is handled by play.php.
see codes below:
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
tr:nth-child(odd) {
background-color: #f2f2f2
}
</style>
</head>
<body>
<center>
<table width="53%" border="1">
<tr>
<td width="8%">S/NO</td>
<td width="92%">NAME OF VIDEO FILE</td>
</tr>
<tr>
<td align="center">1</td>
<td>Funny Nigeria Video Animation</td>
</tr>
<tr>
<td align="center">2</td>
<td><a href="play.php?url=WildGeese.mp4&pic=wg.png">Joan Armatrading-
Flight of the Wild Geese - MP4</a></td>
</tr>
</table>
</center>
</body>
</html>
play.php
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Fluid Width Video</title>
<style>
* { margin: 0; padding: 0; }
body {
font: 16px/1.4 Georgia, Serif;
width: 50%;
margin: 80px auto;
background: url(images/bglines.png);
}
h1 { font-weight: normal; font-size: 42px; }
h1, p, pre, video, h2, figure, h3, ol { margin: 0 0 15px 0; }
h2 { margin-top: 80px; }
h1 { margin-bottom: 40px; }
li { margin: 0 0 5px 20px; }
article { background: white; padding: 10%; }
pre { display: block; padding: 10px; background: #eee; overflow-x: auto; font: 12px Monaco, MonoSpace; }
img { max-width: 100%; }
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videoWrapper iframe,
.videoWrapper object,
.videoWrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
video {
width: 100% !important;
height: auto !important;
}
figure { display: block; background: #eee; padding: 10px; }
figcaption { display: block; text-align: center; margin: 10px 0; font-style: italic; font-size: 14px; orphans: 2; }
</style>
</head>
<body>
<?
if(isset($_GET['url'])){
$vid = "movies/".$_GET['url'];
$pos = "movies/".$_GET['pic'];
if($pos == "movies/ng.png"){
$cap = "Animation - Funny Play Station 3 Nigerin video clip";
}
if($pos == "movies/wg.png"){
$cap = "Jordan Armsterdam - The flight of the Wild Geese";
}
?>
<figure>
<video src="<?php echo $vid;?>" controls poster="<?php echo $pos;?>"></video>
<figcaption><?php echo $cap; ?></figcaption>
</figure>
<?php }else{ echo "You must be a paid Student in order to watch video tutorial!"; }?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
var $allVideos = $(".js-resize"),
$fluidEl = $("figure");
$allVideos.each(function() {
$(this)
// jQuery .data does not work on object/embed elements
.attr('data-aspectRatio', this.height / this.width)
.removeAttr('height')
.removeAttr('width');
});
$(window).resize(function() {
var newWidth = $fluidEl.width();
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.attr('data-aspectRatio'));
});
}).resize();
</script>
</body>
</html>