I have an issue and want to see if this thought is possible. I created a project tracker where an individuals can load their project information (office, project title, status, date, assigned to., etc). The form works great. I have another form, update form, for the individual to update their input value (choice same as load project form: office, project, title, status, date, assigned to., etc) as the project progress. This form updates great. However, a issue I am having, if the HTML field is left blank, on the update form HTML input field, it sends a value of “null” that overrides the value posted to the tracker list of post - not being updated. The update form intended purpose is to give the individual a list of possible choices to what they might need to update, in this case everything.
Is there a way to not send any value if the input field is left blank to not override the value currently posted? Is this even possible or do I need to do something different, like have a separate update form for each different area/column being updated.
I am posting and updating the values to a SharePoint using the REST API.
---Edit to include Script---
<div id="container">
<!-- --------------- code to update a list item ------------- -->
<div id="updateForm">
<div id="UpdateClose" style='text-align: left; float: right; margin-right: 10px; cursor: pointer;'>Close</div>
<div style='margin: 0 auto; width: 100%; padding-top: 5px; padding-bottom: 5px; color: white; margin-top: 40px; margin-bottom: 10px; background-color: orange;'>
<p>Click here to move</p>
</div>
<p>Fill out this form completely to update your item.</p>
<input placeholder="Item ID" type="text" id="itemID">
<table>
<tr>
<td>Office</td>
<td><input type="text" id="uOffice" style="width: 200px"></td>
</tr>
<tr>
<td>Project Title</td>
<td><input type="text" id="uProjectTitle" style="width: 200px"></td>
</tr>
<tr>
<td>Priority</td>
<td><input type="text" id="uPriority" style="width: 200px"></td>
</tr>
<tr>
<td>Start Date</td>
<td><input type="text" id="uStartDate" style="width: 200px"></td>
</tr>
<tr>
<td>Assigned To</td>
<td><input type="text" id="uAssignedTo" style="width: 200px"></td>
</tr>
<tr>
<td>Status</td>
<td><input type="text" id="uStatus" style="width: 200px"></td>
</tr>
<tr>
<td>Requestor</td>
<td><input type="text" id="uRequestor" style="width: 200px"></td>
</tr>
</table>
<button id="UpdateListItem">UPDATE</button>
</div>
<div id="introTxt">
<p>Post and Track your Projects</p>
<p id='openForm'><img class='qIcon' src="https://intelshare.intelink.gov/sites/dcsa/ep/epMainFiles/Project_Tracker/graphics/google-docs.svg" alt="logo" style="width: 100px; position: relative; top: 0px; margin-right: 10px; cursor: pointer; "><span style='color: blue; cursor: pointer; position: relative; top: 20px; font-weight: bold;' >Select to post a project. When the post project form opens, hover over the input fields for additional instructions.</span></p>
<p id='openUForm'><img class='qIcon' src="https://intelshare.intelink.gov/sites/dcsa/ep/epMainFiles/Project_Tracker/graphics/google-docs.svg" alt="logo" style="width: 100px; position: relative; top: 0px; margin-right: 10px; cursor: pointer; "><span style='color: black; cursor: pointer; position: relative; top: 20px; font-weight: bold;' >Select to update a task. When the post project form opens, hover over the input fields for additional instructions.</span></p>
</div>
<div id="qForm" style='width: 250px; height: auto; padding: 10px; position: absolute; z-index: 10; background-color: white; border: 1px solid grey; text-align:center; cursor: all-scroll; display: none;'>
<div id="qFormClose" style='text-align: left; float: right; margin-right: 10px; cursor: pointer;'>Close</div>
<div style='margin: 0 auto; width: 100%; padding-top: 5px; padding-bottom: 5px; color: white; margin-top: 40px; margin-bottom: 10px; background-color: orange;'>
<p>Click here to move</p>
</div>
<input type="text" placeholder="Enter Your Office" name="Office" id="office" title='Enter in your office' required> <br><br>
<input type="text" placeholder="Enter a Project Name" name="Project Name" id="project" title='Enter in a project name' required> <br><br>
<input type="text" placeholder="Priority" name="url" id="priority" title='Enter in project priority'> <br><br>
<input type="text" placeholder="Project Start Date" name="Start Date" id="startDate" title='Enter in project start date'> <br><br>
<input type="text" placeholder="Assigned to" name="Assigned" id="assigned" title='Project assigned to'> <br><br>
<input type="text" placeholder="Status" name="Status" id="status" title='Project status'> <br><br>
<input type="text" placeholder="Requestor" name="Requestor" id="requestor" title='Project requestor'> <br><br><br>
<div id="udList" style='cursor: pointer';>Submit</div>
</div>
<div class="row vertical-padding"></div>
<!--Close of vertical padding-->
<div id="leftCol" class="grid_12">
<input id="myInput" type="text" placeholder="To find a specific task, enter either the office name, individual's name, or by task ID...">
<h2 style='color:blue; marigin: 0 auto; text-align: center; font-weight: bold;'>Project List</h2>
<p>Select table header to sort.</p>
<div id="CustomerPanel">
<table id='tableCars' style="width: 100%;" border="1 px">
<tr>
<td>
<div id="carsGrid" style="width: 100%"></div>
</td>
</tr>
</table>
</div>
</div>
<!--Close of grid-->
</div>
<!--Close container-->
/*Add to Project Tracker List*/
var context;
var web;
var Url;
var listItemEntity;
jQuery(document).ready(function() {
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', FunctionReady);
ItemSubmit();
$("#qForm").draggable();
$("#qFormClose").click(function() {
$("#qForm").fadeOut();
});
$("#openForm").click(function() {
$("#qForm").fadeIn();
});
$("#openUForm").click(function() {
$("#updateForm").fadeIn();
});
}); //Close of document ready function
var answer = document.getElementById('comAnswer');
function ItemSubmit() {
$("#udList").click(function() {
$("#qForm").fadeOut(400);
var officeValue = $("#office").val();
var projectValue = $("#project").val();
var priorityValue = $("#priority").val();
var startDateValue = $("#startDate").val();
var assignedValue = $("#assigned").val();
var statusValue = $("#status").val();
var requestorValue = $("#requestor").val();
if (this.value != 0) {
AddItemToList(listItemEntity, officeValue, projectValue, priorityValue, startDateValue, assignedValue, statusValue, requestorValue);
} else {
AddItemToList(listItemEntity, officeValue, projectValue, priorityValue, startDateValue, assignedValue, statusValue, requestorValue);
}
$('#qForm').children('input').val('');
});
}
function FunctionReady() {
context = new SP.ClientContext.get_current();
web = context.get_web();
context.load(web);
context.executeQueryAsync(onRequestSuccess, onRequestFailure);
}
function onRequestSuccess() {
Url = web.get_url();
GetListItemEntity(Url);
}
function onRequestFailure(sender, args) {
alert("Error Occured:" + args.get_message());
}
function GetListItemEntity(webUrl) {
var queryUrl = webUrl + "/_api/lists/getbytitle('ProjectTracker')?$select=ListItemEntityTypeFullName";
$.ajax({
url: queryUrl,
method: "GET",
headers: {
"Accept": "application/json;odata=verbose"
},
success: onEntitySuccess,
error: onEntityFailure
});
}
function onEntitySuccess(data) {
listItemEntity = data.d.ListItemEntityTypeFullName;
}
function onEntityFailure(err) {
alert(err.statusText);
}
function AddItemToList(r, officeValue, projectValue, priorityValue, startDateValue, assignedValue, statusValue, requestorValue) {
try {
var queryUrl = Url + "/_api/lists/GetByTitle('ProjectTracker')/items?";
$.ajax({
url: queryUrl,
type: "POST",
contentType: "application/json;odata=verbose",
data: JSON.stringify({
'__metadata': {
'type': r
},
'Office': officeValue,
'ProjectTitle': projectValue,
'Priority': priorityValue,
'StartDate': startDateValue,
'AssignedTo': assignedValue,
'Status': statusValue,
'Requestor': requestorValue
}),
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: onQuerySucess,
error: onQueryFailure
});
} catch (ex) {
alert("Exception" + ex.message);
}
}
function onQuerySucess() {
jQuery("#success").fadeIn();
}
function onQueryFailure(error) {
alert(JSON.stringify(error));
}
jQuery(document).ready(function() {
////Project Tracker Table script
var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('ProjectTracker')/items";
$.ajax({
url: requestUri,
type: "GET",
headers: {
"accept": "application/json; odata=verbose"
},
success: onSuccess,
error: onError
});
function onSuccess(data) {
var objItems = data.d.results;
var tableContent = '<table id="projectTable" style="width:100%" border="1 px"><thead><th>ID</th>' + '<th>Office</th>' + '<th>Project_Title</th>' + '<th>Project_Priority</th>' + '<th>Project_Date</th>' + '<th>Assigned_To</th>' + '<th>Project_Status</th>' + '<th>Requestor</th>' + '</thead><tbody>';
for (var i = 0; i < objItems.length; i++) {
tableContent += '<tr class="sortTable">';
tableContent += '<td>' + objItems[i].ID + '</td>';
tableContent += '<td>' + objItems[i].Office + '</td>';
tableContent += '<td>' + objItems[i].ProjectTitle + '</td>';
tableContent += '<td>' + objItems[i].Priority + '</td>';
tableContent += '<td>' + objItems[i].StartDate + '</td>';
tableContent += '<td>' + objItems[i].AssignedTo + '</td>';
tableContent += '<td>' + objItems[i].Status + '</td>';
tableContent += '<td>' + objItems[i].Requestor + '</td>';
tableContent += '</tr>';
}
$('#projectGrid').append(tableContent);
}
function onError(error) {
alert('Error');
}
}); ///End of Document Ready Function
///Sort Project Table
jQuery(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".sortTable").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
jQuery(document).on("click", 'th', function() {
if ($(this).is('.asc')) {
$(this).removeClass('asc');
$(this).addClass('desc selected');
sortOrder = -1;
} else {
$(this).addClass('asc selected');
$(this).removeClass('desc');
sortOrder = 1;
}
var table = $(this).parents('table').eq(0)
var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
this.asc = !this.asc
if (!this.asc) {
rows = rows.reverse()
}
for (var i = 0; i < rows.length; i++) {
table.append(rows[i])
}
})
}); //close of document ready
//Update Project Tracker list item Script
$(document).ready(function() {
jQuery(document).on("click", '#UpdateListItem', function() {
updateListItem();
}); //button closed
jQuery(document).on("click", '#UpdateClose', function() {
$("#updateForm").fadeOut();
}); //button closed
function updateListItem() {
//var listName = "ProjectTracker";
var url = _spPageContextInfo.webAbsoluteUrl;
var myID = $("#itemID").val();
var listName = "ProjectTracker";
var office = $("#uOffice").val();
var pTitle = $("#uProjectTitle").val();
var priority = $("#uPriority").val();
var startDate = $("#uStartDate").val();
var assignedTo = $("#uAssignedTo").val();
var status = $("#uStatus").val();
var requestor = $("#uRequestor").val();
var title = "New Updated Information";
var itemType = "SP.Data.Project_x0020_TrackerListItem";
console.log(office);
var item = {
"__metadata": {
"type": itemType
},
"Title": title,
"Office": office,
"ProjectTitle": pTitle,
"Priority": priority,
"StartDate": startDate,
"AssignedTo": assignedTo,
"Status": status,
"Requestor": requestor
};
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('ProjectTracker')/items(" + myID + ")",
type: "POST",
type: "POST",
contentType: "application/json;odata=verbose",
data: JSON.stringify(item),
headers: {
"Accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "MERGE",
"If-Match": "*"
},
success: onSuccess,
error: onError
});
function onSuccess(data) {
jQuery("#success").fadeIn();
}
function onError(error) {
alert(JSON.stringify(error));
}
} //Function close
});
I added a real-time stock widget to a client’s Jive site that is using an HTML widget. The code uses the Jive native jQuery library to pull JSONP data from Yahoo using their YQL API. This widget is written to work with only 1 stock symbol. If requested, I can modify it to pull in multiple symbols.
I keep getting an error for if (res.query.results). It says it is undefined. If anybody knows of a good stock HTML widget with just price and name of symbol: Please help. I am digging deep in Google.
Console output:
render-widget.jspa?size=1&frameID=262901&widgetType=7&containerID=1327&containerType=700&inFrame=1:173 Uncaught TypeError: Cannot read property 'results' of undefined
at Object.success (render-widget.jspa?size=1&frameID=262901&widgetType=7&containerID=1327&containerType=700&inFrame=1:173)
at j (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at x (jquery.min.js:4)
at HTMLScriptElement.b.onload.b.onreadystatechange (jquery.min.js:4)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
// This version has been tested to work in Jive 4.0.15 and 5.0. It should work in Jive 4.5 but has not been tested
// Add the stock symbol here
var yourStockSymbol = 'LIFE';
</script>
<div id="stock_miniQuote_head" class="ajaxtrigger"><span id="stockSymbol"></span> (common stock)</div>
<div id="stock_miniQuote">
<div id="stockIndicator"><p>Retrieving stock information...</p></div>
<div class="stock_divider">
<div id="stock_left">
<span class="stock_label">Price</span><br/>
<strong class="stock_strong">$<span id="stockAsk"></span></strong><br/>
</div>
<div id="stock_right">
<span class="stock_label">Change</span><br/>
<strong class="stock_strong"><span id="stockChange"></span></strong><br />
<strong class="stock_strong"><span id="stockChangePercent"></span></strong><br />
</div>
<div style="clear: both;"></div>
</div>
<div id="stock_body">
<div id="stock_body_content">
<span class="stock_label">Volume</span><br/>
<strong class="stock_strong"><span id="stockVolume"></span></strong>
<br /><br />
<span class="stock_label">Average Daily Volume</span><br/>
<strong class="stock_strong"><span id="stockAvgVolume"></span></strong>
<br /><br />
<span class="stock_label">52 Week Range</span><br/>
<strong class="stock_strong"><span id="stockRange"></span></strong>
</div>
<div style="clear: both;"></div>
</div>
</div>
<style>
#stockIndicator {
text-align:left;
padding: 10px;
margin: 5px;
color: red;
}
.ajaxtrigger:hover {
cursor: pointer;
cursor: hand;
}
#stock_miniQuote_head {
background-color:#464A55;
color:#FFFFFF;
font-size:14px;
font-weight:bold;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
}
#stock_miniQuote {
border-bottom-color:#DDDDDD;
border-bottom-left-radius:5px 5px;
border-bottom-right-radius:5px 5px;
border-bottom-style:solid;
border-bottom-width:1px;
border-left-color:#DDDDDD;
border-left-style:solid;
border-left-width:1px;
border-right-color:#DDDDDD;
border-right-style:solid;
border-right-width:1px;
border-top-color:initial;
border-top-style:none;
border-top-width:initial;
list-style-type:none;
margin-bottom:10px;
padding-bottom:0;
padding-top:10px;
vertical-align:text-top;
height: 100%;
width: 99%;
}
.stock_divider {
border-bottom:1px solid #B2B0AD; padding-bottom:5px;
}
#stock_left {
float:left; width:35%; height:50px; border-right:1px solid #B2B0AD; padding:0 15px;
}
#stock_right {
float:right; width:*; padding:0 20px; vertical-align:text-top;
}
.stock_label {
font-size:14px;
}
.stock_strong {
font-size:17px;
}
#stock_body {
padding:10px 0 15px;
}
#stock_body_content {
float:left; width:170px; padding:0 15px;
}
</style>
<script type="text/javascript">
if ($('#jive-widgets-browser').css('display') == 'block') {
// Do Nothing as we are in edit mode
} else {
// Build the URL to Yahoo YQL services
var q = escape('select * from yahoo.finance.quotes where symbol in ("' + yourStockSymbol + '")');
var theURL = "https://query.yahooapis.com/v1/public/yql?q=" + q + "&format=json&diagnostics=false&env=http%3A%2F%2Fdatatables.org%2Falltables.env&callback=?";
$(document).ready(function(){
// Load function on launch
$("#stockIndicator").show();
doAjax(theURL);
// Function for refreshing the stock by clicking on the title header
$('.ajaxtrigger').click(function(){
$("#stockIndicator").show();
doAjax(theURL);
return false;
});
// Function to add commas to numbers for volume
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
}
// Main function to make JSON request to Yahoo for stock information
function doAjax(url){
$.ajax({
url: url,
dataType: 'jsonp',
success: function(data){
var s = data.query.results;
if(s){
if(s.quote.Change > 0) {
// Change the change text to green
$('#stockChange').css({'color': 'green'});
$('#stockChangePercent').css({'color': 'green'});
} else {
// Change the change text to red
$('#stockChange').css({'color': 'red'});
$('#stockChangePercent').css({'color': 'red'});
}
// This is where we add the JSON values back into the HTML above
$('#stockSymbol').html(s.quote.symbol);
$('#stockAsk').html(s.quote.LastTradePriceOnly);
$('#stockChange').html(s.quote.Change);
$('#stockChangePercent').html(s.quote.ChangeinPercent);
$('#stockVolume').html(numberWithCommas(s.quote.Volume));
$('#stockAvgVolume').html(numberWithCommas(s.quote.AverageDailyVolume));
$('#stockRange').html(s.quote.YearRange);
$("#stockIndicator").hide();
} else {
var errormsg = '<p>Error: could not load the page.</p>';
$("#stockIndicator").show();
$("#stockIndicator").html(errormsg);
}
}
});
}
}); //end ready function
} //end first else
</script>
The Yahoo Finance APi was turned off earlier this year, including accessing this information via YQL queries. You will need to find an alternate service and update our code accordingly.
There was another thread about this here, Yahoo Finance API changes (2017)
I am using SimplePie for Yahoo weather forecast. I am on a new Server and now the output looks like this:
set_feed_url($path . $code); $feed->set_item_class('SimplePie_Item_YWeather'); $feed->init(); function time2minuts($time) { $minuts = 0; $atime = explode(" ", $time); $ttime = explode(":", $atime[0]); if ($atime[1] == "pm") { if ((int)$ttime[0]!=12) $ttime[0] = $ttime[0] + 12; } $minuts = (int)$ttime[0] * 60 + (int)$ttime[1]; return $minuts; } $weather = $feed->get_item(0); $fore = $weather->get_forecasts(); $unit = $weather->get_units_temp(); $ampm = "n"; // indica noche $icon = $weather->get_condition_code(); // Calculamos la hora de Mallorca en minutos $curday = time2minuts(date("g:i a")); //echo $curday.'---'.date('h:m d.m.y').'---'.date("g:i a"); $iniday = time2minuts($weather->get_sunrise()); $endday = time2minuts($weather->get_sunset()); if ($curday > $iniday && $curday < $endday) { $ampm = "d"; // indica dia } $land = $weather->get_country(); if($land == 'Spain') { $land = 'Spanien'; } ?>
This is my php code. My PHP Version is 5.5.9-1ubuntu4.6 simplepie 1.3.1
Thank you for your help,
mallmis
thanks for your fast response.
My script is working ón the old server. But I will post:
<?
require("simplepie.inc");
require("simplepie_yahoo_weather.inc");
$code = "769293"; // Menorca 12517557
$path = "http://weather.yahooapis.com/forecastrss?u=c&w=";
$feed = new SimplePie();
$feed->set_feed_url($path . $code);
$feed->set_item_class('SimplePie_Item_YWeather');
$feed->init();
function time2minuts($time)
{
$minuts = 0;
$atime = explode(" ", $time);
$ttime = explode(":", $atime[0]);
if ($atime[1] == "pm") {
if ((int)$ttime[0]!=12) $ttime[0] = $ttime[0] + 12;
}
$minuts = (int)$ttime[0] * 60 + (int)$ttime[1];
return $minuts;
}
$weather = $feed->get_item(0);
$fore = $weather->get_forecasts();
$unit = $weather->get_units_temp();
$ampm = "n"; // indica noche
$icon = $weather->get_condition_code();
// Calculamos la hora de Mallorca en minutos
$curday = time2minuts(date("g:i a"));
//echo $curday.'---'.date('h:m d.m.y').'---'.date("g:i a");
$iniday = time2minuts($weather->get_sunrise());
$endday = time2minuts($weather->get_sunset());
if ($curday > $iniday && $curday < $endday) {
$ampm = "d"; // indica dia
}
$land = $weather->get_country();
if($land == 'Spain')
{
$land = 'Spanien';
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Yahoo Weather</title>
<style type="text/css">
<!--
body {
font-family: "Trebuchet MS", Tahoma, Verdana;
font-size: 12px;
font-weight: normal;
color: #777777;
text-decoration: none;
background-color: #FFFFFF;
}
#weather {
width: 240px;
height: 120px;
margin-left: 10px;
}
#current {
width: 240px;
height: 120px;
text-align: right;
color: #FFFFFF;
font-weight: bold;
}
#current #temp {
font-size: 24px;
font-style: normal;
padding-top: 40px;
padding-right: 16px;
}
#current #fore {
padding-right: 16px;
font-size: 11px;
}
#current #city {
padding-right: 16px;
}
-->
</style>
</head>
<body>
<div id="weather" style="background:url('icon<?php echo $ampm; ?>.png') no-repeat 40px 40px;">
<div id="current" style="background:url('http://l.yimg.com/us.yimg.com/i/us/nws/weather/gr/<?php echo $icon . $ampm . ".png"; ?>') no-repeat 0px -10px;">
<div id="temp"><?php echo $weather->get_temperature(); ?>°<?php echo $unit; ?></div>
<div id="fore"><?php echo $fore[0]->get_low() . "°" . $unit; ?>
bis <?php echo $fore[0]->get_high() . "°" . $unit; ?></div>
<div id="city"><?php echo 'Mallorca' . ", " . $land; ?></div>
</div>
</div>
</body>
</html>
I think it has do do something with my new server.
Cheers,
mallmis
Just starting to learn the Yii. I do not know how to change the button and remove the "No files selected" in the widget
"CMultiFileUpload" in Yii framework?
$this->widget('CMultiFileUpload', array(
'model'=>$model,
'attribute'=>'photos',
'accept'=>'jpg|jpeg|gif|png',
'name'=>'photos',
'remove'=>'remove',
'options'=>array(
),
'denied'=>'File is not allowed',
'max'=>4, // max 10 files
));
This is browser dependent. Ex. Mozilla shows the input file type field with "No files selected". In IE it will come defferently.
If you want to hide the message "No files selected", do it with CSS
input[type='file']
{
color: transparent;
}
If you want to customize more, Try this bellow code.
Add this CSS code in your CSS file
#multFileUpload button#fileAlt
{
border: 3px solid #cccccc;
background-color: #FF7B10 !important;
color: #ffffff;
font-size: 14px;
padding: 10px 5px;
cursor: pointer;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#multFileUpload input[type='file']
{
display: none;
}
Add this jQuery code in your javascript file
$(document).ready(function()
{
var maxFiles = 4;
var fileCountStart = 0;
$("#fileAlt").on('click', function()
{
fileCountStart += 1;
if (maxFiles >= fileCountStart)
{
$('#photos').trigger('click');
if (fileCountStart == maxFiles)
$("#fileAlt").attr('disabled', 'disabled');
}
});
});
Now Yii code
<div id="multFileUpload">
<button id="fileAlt">Select an Image</button>
<?php
$this->widget('CMultiFileUpload', array(
'model' => $model,
'id'=>'photos',
'attribute' => 'photos',
'accept' => 'jpg|jpeg|gif|png',
'name' => 'photos',
'remove' => 'remove',
'options' => array(
),
'denied' => 'File is not allowed',
'max' => 4, // max 10 files
));
?>
</div>
I am new to php, the only sites that I have built didn't use any php or dynamic content. I believe I need to build a container but my attempts have failed. I can't use a table because I need a table centered within the header.
What I am trying to do should be easy. I want to build a header with a navbar in it quite like stackoverflows actually. I call my header using include, currently my header just includes some log in message code and calls my login class code.
I can figure out the code if someone just tells me the basic concept of what I'm trying to do. I tried a div. Table isn't my solution. I've seen answers on here with other containers and separate css files but I really didn't understand.
Header code. No formatting yet.
<!DOCTYPE html>
<html>
<head>
<?php
// show potential errors / feedback (from login object)
if (isset($login)) {
if ($login->errors) {
foreach ($login->errors as $error) {
echo $error;
}
}
if ($login->messages) {
foreach ($login->messages as $message) {
echo $message;
}
}
}
?>
<?php
// show potential errors / feedback (from registration object)
if (isset($registration)) {
if ($registration->errors) {
foreach ($registration->errors as $error) {
echo $error;
}
}
if ($registration->messages) {
foreach ($registration->messages as $message) {
echo $message;
}
}
}
?>
That is how it looks when I start and my php code works fine.
I am trying to do this.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome to SafeLog</title>
<style type="text/css">
/* just for the demo */
body {
font-family: Arial, sans-serif;
font-size: 12px;
margin: 10px;
}
label {
position: relative;
vertical-align: middle;
bottom: 1px;
}
input[type=text],
input[type=password],
input[type=submit],
input[type=email] {
display: block;
margin-bottom: 15px;
}
input[type=checkbox] {
margin-bottom: 15px;
}
#apDiv1 {
position:absolute;
width:1745px;
height:115px;
z-index:1;
left: -10px;
top: 4px;
}
#apDiv2 {
position:absolute;
width:200px;
height:30px;
z-index:1;
background-color: #333333;
}
.texttest {
color: #FFF;
}
</style>
<body>
<div style="width:auto" style="height:30" style="background-color:333333">
<body>
<?php
// show potential errors / feedback (from login object)
if (isset($login)) {
if ($login->errors) {
foreach ($login->errors as $error) {
echo $error;
}
}
if ($login->messages) {
foreach ($login->messages as $message) {
echo $message;
}
}
}
?>
<?php
// show potential errors / feedback (from registration object)
if (isset($registration)) {
if ($registration->errors) {
foreach ($registration->errors as $error) {
echo $error;
}
}
if ($registration->messages) {
foreach ($registration->messages as $message) {
echo $message;
}
}
}
?>
everything is working fine besides that div. I am not very good with css and html, I used to be a vb developer making small in house solutions for business.
Edited--
Actually its your div tag only...
Make it
style="background-color:#333;"
in the div
Why not use HTML to lay out then use CSS to style and position it?