So, my html page has content going under the footer. Can someone help me make the page get longer
so that you can scroll down to see the footer? or make it so that the footer begins where content ends(prefered)? Not sure what i did wrong.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>351 Project || Search Student Notes</title>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<?php include "advisor_header.html" ?>
<div>
<h1>Student Notes For <?php echo $student_first_name . " " . $student_last_name;?> </h1>
<div>
<div>
<textarea class="chunkybox" disabled="disabled" name="notes" rows="20" col = "15"><?php echo $student_notes;?></textarea>
</div>
</div>
<h3><center>End of Notes</center></h3>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<form name="activeadviseeform" class="centeredbutton">
<div>
<div>
<textarea style="height: auto;" class="chunkybox" name="notes" rows="20" col = "15" placeholder="Type notes to ADD"></textarea>
</div>
</div>
<button class="centeredbutton" type="submit">Add Notes</button>
</form>
<form action="advisor_edit_notes.php">
<button class="centeredbutton" type="submit">Edit Notes</button>
</form>
<?php if($_SERVER["REQUEST_METHOD"] == "POST"){
if ($student_notes == null) {
$appendednotes = $time . " " . $_POST['notes'];
}
if ($student_notes != null) {
$appendednotes = $student_notes . "\r\n" . $time . " " . $_POST['notes'];
}
$update = "UPDATE people SET notes = '$appendednotes' WHERE id = '$student_id'";
// update in database
$rs = mysqli_query($con, $update);
if($rs)
{
header("Refresh:0");
//printf("Notes Added to : %s Notes", $_SESSION["activeadvisee"]);
}
}
?>
</div>
</div>
<?php include "footer.html" ?>
</body>
</html>
footer.html:
<footer class='footer'>
Copyright © 2022 <br>
placeholder#temp.com :: Contact Form
</footer>
main.css:
.footer {
width: 100%;
height: 150px;
background: #3167b1;
position: fixed;
bottom: 0px; left: 0;
}
Position fixed may not be what you want from what it sounds like? Fixed would keep it on the page at all times with the scroll.
If you only want it to stay at the bottom I would think static is the position you would want - which is the default.
Is there something I'm misunderstanding?
https://www.w3schools.com/css/css_positioning.asp
position: fixed; An element with position: fixed; is positioned
relative to the viewport, which means it always stays in the same
place even if the page is scrolled. The top, right, bottom, and left
properties are used to position the element.
A fixed element does not leave a gap in the page where it would
normally have been located.
use any of the below
position: relative;
position: static;
.footer {
width: 100%;
height: 150px;
background: #3167b1;
position: relative;
bottom: 0px;
left: 0;
}
Try putting the footer.html code directly in your main PHP file after the </body> tag. also, have you added overflow attribute for making your page scrollable in the CSS file?
Related
Hey guys I have problems with contenteditable height. With code like this:
function Preview() {
var x = document.getElementById("code").value;
document.getElementById("preview").innerHTML = x;
}
.preview{
text-align: left;
color: white;
margin-left: 10px;
max-height: 300px;
overflow: auto;
}
<section id="main">
<div id="gra">
<input type="hidden" id="current-code" name="current-code" />
<textarea id="code" name="code">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A Simple PHP File</title>
</head>
<body>
<h1><?php echo "Hello, world!"; ?></h1>
</body>
</html>
</textarea>
<div class="flex">
Preview
Reset
</div>
</div>
<div id="gra">
<div contenteditable="true" class="preview" id="preview">
</div>
</div>
</section>
When I enter code with more I can observe effect like this:
Anyone can help me with limit contenteditable height?
try this code
and also change color: red; instead of color:white because its not see anything on white screen
function Preview() {
var x = document.getElementById("code").value;
document.getElementById("preview").innerHTML = x;
}
function Reset() {
document.getElementById("preview").innerHTML = "";
}
.preview {
text-align: left;
color: red;
margin-left: 10px;
max-height: 300px;
overflow-y: scroll;
border: solid 1px #ddd;
}
<section id="main">
<div id="gra">
<input type="hidden" id="current-code" name="current-code" />
<textarea id="code" name="code">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A Simple PHP File</title>
</head>
<body>
<h1><?php echo "Hello, world!"; ?>you write php code hear so it will not print on html</h1>
</body>
</html>
</textarea>
<div class="flex">
Preview
Reset
</div>
</div>
<div id="gra">
<div contenteditable="true" class="preview" id="preview">
</div>
</div>
</section>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have a question. I have for example list of div, i just want all these dives should be clickable. And after click on div, value from div should be pushed to on an other div. How I can do it in a best way?
<?php
define('HOST','xxxx');
define('USER','xxx');
define('PASS','xxxx');
define('DB','xxxxx');
$con = mysqli_connect(HOST,USER,PASS,DB);
$sql = "select * from users";
$res = mysqli_query($con,$sql);
$result = array();
while($row = mysqli_fetch_array($res)){
array_push($result,
array(
'email'=>$row[3],
));
}
echo json_encode(array("result"=>$result));
mysqli_close($con);
?>
<html>
<head>
<style>
#usersOnLine {
font-family:tahoma;
font-size:12px;
color:black;
border: 3px teal solid;
height: 525px;
width: 250px;
float: right;
overflow-y:scroll;
}
.container{
width:970px;
height:auto;
margin:0 auto;
}
</style>
</head>
<body>
<div class="container">
<div id="reciver"><h3>reciver</h3></div>
<div id="sender"><h3>sender</h3></div>
<h2 align="right"> all contacts </h2>
<div id="usersOnLine">
<?php
foreach($result as $key => $val)
{
echo $val['email'];
echo "<br>";
}
?>
</div>
</div>
</body>
</html>
here is useronline div in which many name are i want when i click on any name name push to reciver div how to made it i am new in php
You may do it with a Combination of Javascript and HTML. Below is how:
HTML, CSS & JAVASCRIPT - JQUERY
<!-- HTML-->
<html>
<head>
<!-- CSS-->
<style>
#usersOnLine {
font-family:tahoma;
font-size:12px;
color:black;
border: 3px teal solid;
height: 525px;
width: 250px;
float: right;
overflow-y:scroll;
padding: 10px;
}
.container{
width:970px;
height:auto;
margin:0 auto;
}
.clickAble{
display: inline-block;;
cursor:pointer; /* <== TO INDICATE TO USER THAT THIS IS CLICKABLE... */
}
</style>
</head>
<!-- HTML CONTENT -->
<body>
<div class="container">
<div id="receiver">
<h3>receiver</h3>
<!-- NOTICE THAT THIS IS NEW NOW... -->
<!-- IT'S IMPORTANT THAT YOU HAVE THIS PARAGRAPH EXACTLY AS IT IS HERE -->
<p class='bubbled-data'></p>
</div>
<div id="sender"><h3>sender</h3></div>
<h2 align="right"> all contacts </h2>
<div id="usersOnLine">
<?php
foreach($result as $key => $val){
echo "<span class='clickAble'>" . $val['email'] . "</span><br />";
}
?>
</div>
<!-- THE FORM -->
<form id="messageForm" action="<?php echo $_PHP_SELF; ?>" method="POST" >
<input type="text" name="data" id="message" placeholder="message" onFocus="fun1(this)" onBlur="fun2(this)" required="" /><br /><br />
<!-- NOTICE THAT WE ADDED A HIDDEN FIELD TO HOLD THE DATA -->
<input type="hidden" name="user_data" id="user_data" value="">
<input id="send" type="submit" value="Send">
</form>
</div>
<!-- JAVASCRIPT - JQUERY -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {
$(document).ready(function (e) {
var receiver = $("#receiver");
var clickAbles = $(".clickAble");
// BIND THE clickAble SPAN TO AN ON-CLICK EVENT...
// SO THAT WITH EACH CLICK, YOU CAN SIMPLE APPEND THE CONTENT OF THAT SPAN TO THE RECEIVER DIV
clickAbles.on("click", function(evt){
var nameValue = $(this).text();
receiver.find(".bubbled-data").text(nameValue);
// ADD THE SAME VALUE TO THE HIDDEN INPUT ELEMENT: #user_data
$("#user_data").val(nameValue);
});
});
})(jQuery);
</script>
</body>
</html>
TEST & FIDDLE WITH IT HERE
https://jsfiddle.net/7eres0L0/
I have made the HTML webpage and a search bar on my local machine, and am going to download XAMPP to host it locally.
The database will be on a VM and played through a hypervisor. I will be using the webpage and a single searchbar to look up names and associated devices with an 8 digit number on the device, called an asset ID.
A friend recommended PDO for a query language for the database, so would this prove better?
NOTE - database not yet operational or connected to. Just got the assignment yesterday.
HTML
<!DOCTYPE html>
<html>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
color: #FFFFFFFF;
}
img#bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#content {
position: relative;
z-index: 1;
text-align:center;
}
</style>
<head>
<title>Multigress Asset Management</title>
<!--[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
img#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]-->
</head>
<body>
<img src="F:\CAPSTONE PROJECT\background img.jpg" alt="background image" id="bg" />
<div id="content">
<h1>Multigress Asset Management</h1>
<h4>Search by First Name, Last Name, or Asset ID</h4>
<form action="" method="post">
<input type="text" name="data">
<input type="submit" value="Search">
</form>
<br />
<img src="F:\CAPSTONE PROJECT\Logo2.1.png" alt="Multigress Logo 2.1" width="200" height="100">
<h5>Copyright 2014-2017 | Date Last Updated: 4/27/2015</h5>
<h5>By viewing this page, you agree to the Terms & Conditions.</h5>
</div>
</body>
</html>
PHP
<?php
if(isset($_GET['data']) && $_GET['data']=='yes')
{
echo "<center><font color='red'>Comment Posted!</font></center>";
}
else
{
echo "<center><font color='red'>Username taken!</font></center>";
}
?>
Different stuff I'm playing around with:
$con=mysqli_connect("localhost","root","password","dtabasename");
$getUsers = $DBH->prepare("SELECT * FROM TABLE ORDER BY id ASC");
$getUsers->fetchAll();
In order to do so, you will need to generate a with an to send the data and then collect it into your PHP file.
HTML:
<form action="submit.php" method="post">
<input type="text" name="search" />
<input type="submit" value="Submit" />
</form>
PHP:
<?php
if(isset($_POST['search']){
//do database request here
$db=mysql_connect ("servername", "<username>", "<password>") or die ('I cannot connect to the database because: ' . mysql_error());
$sql="SELECT * FROM Search WHERE FirstName LIKE '%" . $name . "%' OR LastName LIKE '%" . $name ."%'";
}
?>
Step by Step tutorial:
http://www.webreference.com/programming/php/search/2.html
Hope it helps
I am trying to develop a website in php. On my main page I use include function (in php) to include other files in it. But when load the main page the CSS in the other files get all screwed up. It is showing as if there is no CSS at all so everything is on top of each other. When I load the files separately everything works perfectly fine.
So in the index.php file I have
//code
include 'toolbar.php';
Then in toolbar.php I have
div.fileinputs
{
position: relative;
}
div.fakefile
{
position: absolute;
top:0px;
left:0px;
z-index: 10;
}
.text_computer
{
position: absolute;
top:80px;
left:20px;
z-index: 20;
text-align:center
}
input.file
{
cursor: pointer;
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 30;
width:317;
height:202;
}
.text_upload
{
position: absolute;
top:6px;
left:80px;
z-index: 20;
text-align:center
}
input.submit
{
cursor: pointer;
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 30;
width:330;
height:50;
}
//code
<div class="fileinputs">
<input type="file" class="file" name='image'/>
<div class="fakefile">
<img src='red_frame.png' width='330'>
</div>
<div class="text_computer">
<a style='font-family:Arial;color:white;'><font size='6'>Choose a photo from<br> your Computer</font></a>
</div>
</div>
<div class="des_box">
<textarea name='description' cols='38' rows='4' placeholder='Enter a description here...' maxlength='500'></textarea><br>
</div>
<br>
<div class="fileinputs">
<input type="submit" class="submit" value='Upload'>
<div class="fakefile">
<img src='red_frame.png' width='330' height='50'>
</div>
<div class="text_upload">
<a style='font-family:Arial;color:white;'><font size='6'>UPLOAD!!!!</font></a>
</div>
</div>
This isn't all of the code but this is the part that is piling on top of each other when I include it in index.php
When I just run toolbar.php everything is spaced out fine.
Is there a way to fix this?
Could there be some other sort of problem that is causing this?
Wait never mind i found this <!DOCTYPE html> at the top of my index.php and removed it to see if it would fix the problem and for some reason it did. I have no idea why that fixed it, but now everything works.
I suggest not to use 'include', please try in the following way-
<?php
.
.
.
?>
<link href="../bootstrap/css/bootstrap-timepicker.min.css" rel="stylesheet"
type="text/css"/>
<?php
.
.
.
?>
Just include your CSS file through PHP. Its legitimate !
<?php include ('yourheader.php'); ?>
<style>
<?php include ('main.css'); ?>
</style>
You can use #import also to load the css styles.
#import url('/css/styles.css');
#import url('/css/main.css');
#import url('/css/color.css');
/* All three CSS files above will be loaded from
this single document. */
I have a PHP script A which displays data from database.
I have another another script B which gets the content of script A .But I need the content after script A is executed . But this is not happending .
// Script A
enter code here
<?php
session_start();
if(!isset($_SESSION['username']))
{
print "You have not logged in";
header('Location: index.htm');
}
session_write_close();
?>
<?xml version="1.0"?>
<!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" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv
="content-language" content="cs" />
<meta name="robots" content="all,follow" />
<meta name="author" content="All: ... [Nazev webu - www.url.cz]; e-mail: info#url.cz" />
<meta name="copyright" content="Design/Code: Vit Dlouhy [Nuvio - www.nuvio.cz]; e-mail: vit.dlouhy#nuvio.cz" />
<title>WAVES 1.0!</title>
<meta name="description" content="..." />
<meta name="keywords" content="..." />
<link rel="index" href="./" title="Home" />
<link rel="stylesheet" media="screen,projection" type="text/css" href="./css/main.css" />
<link rel="stylesheet" media="print" type="text/css" href="./css/print.css" />
<link rel="stylesheet" media="aural" type="text/css" href="./css/aural.css" />
<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script language="javascript" type="text/javascript">
function getQueryParams( val )
{
//Use the window.location.search if we don't have a val.
var query = val || window.location.search;
query = query.split('?')[1]
var pairs = query.split('&');
var retval = {};
var check = [];
for( var i = 0; i < pairs.length; i++ )
{
check = pairs[i].split('=');
retval[check[0]] = check[1];
}
return retval;
}
var values = getQueryParams();
var v = values['id'];
$(function()
{
$.getJSON("getviewresults.php?id="+v, function(data)
{
$.each(data, function(entryIndex, entry)
{
var name = entry['tid'];
var user = entry['status'];
var p= entry['description'];
var f = entry['time'];
var stime = entry['stime'];
$('<tr> <td>'+name+'</td> <td > '+p+'</td> <td> '+user+'</td> <td>'+f+'</td> <td> Log </td> <td>Device Log </td><td> LAN </td> </tr> ').appendTo('#container');
});
});
});
</script>
</head>
<body>
<!-- Main -->
<div id="main" class="box">
<!-- Header -->
<div id="header" style="left: 0px; width: 100%; top: 1px; height: 61px">
<!-- Logotyp -->
<h1 id="logo" style="left: 46px; top: 19px">WAVES 1.0!<strong>!</strong><span></span></h1>
<hr class="noscreen" />
<img src="Design/logo.jpg" style="right:0px; width: 134px; position: absolute;
top: -2px; height: 61px" />
</div> <!-- /header -->
<!-- Main menu (tabs) -->
<div id="tabs" class="noprint" style="width:100%; left: 0px; position: relative; top: 0px; height:24px">
<h3 class="noscreen">Navigation</h3>
<ul class="box">
<li>Home<span class="tab-l"></span><span class="tab-r"></span></li>
<li>Package<span class="tab-l"></span><span class="tab-r"></span></li>
<li >Configs<span class="tab-l"></span><span class="tab-r"></span></li>
<li>Live<span class="tab-l"></span><span class="tab-r"></span></li>
<li id="active">Results<span class="tab-l"></span><span class="tab-r"></span></li>
<li>Log out<span class="tab-l"></span><span class="tab-r"></span></li>
</ul>
<hr class="noscreen" />
</div> <!-- /tabs -->
<!-- Page (2 columns) -->
<!-- /page -->
<div style="border-right: #336699 thin solid; border-top: #336699 thin solid; left: 0px;
border-left: #336699 thin solid; width: 100%; border-bottom: #336699 thin solid;
position: relative; top: 0px; height: 480px; overflow:auto">
<table id="container" style="left: 0px; width:100%; position: relative; ">
<tr>
<td style="width: 100px">
<strong>Testid</strong></td>
<td style="width: 382px">
<strong>Description</strong></td>
<td style="width: 100px">
<strong>Status</strong></td>
<td style="width: 100px">
<strong>Time Taken</strong></td>
<td style="width: 100px">
<strong>Log </strong></td>
<td style="width: 100px">
<strong>Device Log </strong></td>
<td style="width: 100px">
<strong>LAN </strong></td>
</tr>
</table>
</div>
</div>
<!-- Footer -->
<!-- /footer -->
<!-- /main -->
</body>
</html>
// Script B
$ch = curl_init();
$url = "http://localhost/waves/viewresults.htm?id=".$id;
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch, CURLOPT_URL, $url);
$data = curl_exec($ch);
curl_close($ch);
chdir("temp/file");
$myFile = "summary.htm";
$fh = fopen($myFile, 'w') or die("can't open file");
fwrite($fh, $data);
fclose($fh);
The file summary.htm just has the code of the script A , which means it has not executed nnd hence has not data from the database .
What am I doing wrong ?
So I started to answer without reading your code but now see that you are using JavaScript to output the data from Script A instead of using PHP.
Why it wont work: You are dynamically creating a table at run time using client side JavaScript. This will render properly in a browser but will not render via curl. libcurl does not support javascript.
Suggested Solution
I would suggest that you modify getviewresults.php and follow this tutorial to buffer the output to a file or you could also optionally just rewrite Script A to use a server side script.
This was a really entertaining problem thank you.
Try renaming "viewresults.htm" to "viewresults.php" so it's parsed as PHP (you could use mod_rewrite to internally redirect viewresults.htm to viewresults.php so your URLs don't change).
Open the URL you're trying to get in your browser - i.e. http://localhost/waves/viewresults.htm?id=X (with correct value of X) - and see what content is output.
If you still see PHP code displayed in your browser then you know that the file is not being parsed as PHP. By default only filenames with .php on the end will be executed as PHP.
Also, I don't think the code in Script A is going to be executed properly anyway because the session variables won't be set.