50% OFF!!!

Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Friday, November 13, 2015

PHP | XML to Html Table elment convertion

In this thread,
I will show generic & universal function that
gets XML string,
convert it,
and display it as an HTML table.
(you can add any css style to design your table later on of course)


The following code is using XML example from http://www.w3schools.com/xml/simple.xml.
The XML looks like that:
<breakfast_menu>
  <food>
    <name>Belgian Waffles</name>
    <price>$5.95</price>
    <description>Two of our famous...</description>
    <calories>650</calories>
  </food>
  <food>
    <name>Strawberry Belgian Waffles</name>
    <price>$7.95</price>
    <description>Light Belgian waffles...</description>
    <calories>900</calories>
  </food>
  <food>
    <name>Berry-Berry Belgian Waffles</name>
    <price>$8.95</price>
    <description>Light Belgian....</description>
    <calories>900</calories>
  </food>
  <food>
    <name>French Toast</name>
    <price>$4.50</price>
    <description>Thick slices made....</description>
    <calories>600</calories>
  </food>
  <food>
    <name>Homestyle Breakfast</name>
    <price>$6.95</price>
    <description>Two eggs, bacon...</description>
    <calories>950</calories>
  </food>
</breakfast_menu>



The function xmlToHtmlTable 
gets a SimpleXMLElement parameter which points to main parent for which will print all his children,
and returns html table representing the XML as string.

The Code:
 <?php  
   
 // get XML remotely / locally / or / just set it as string '<root>...</root>'  
 $sXml = file_get_contents('http://www.w3schools.com/xml/simple.xml');  
   
 // parse XML  
 $oXML = simplexml_load_string($sXml);  
 if (!$oXML) {  
      die('xml format not valid or simplexml module missing.');  
 }  
   
 // assuming running the root  
 $oXmlRoot = $oXML; // or can be [$oXML->food]  
   
 //echo '<pre>'; print_r( $oXmlRoot ); echo '</pre>';  
 echo xmlToHtmlTable($oXmlRoot);  
   
   
 function xmlToHtmlTable($p_oXmlRoot) {  
      $bIsHeaderProceessed = false;  
        
      $sTHead = '';  
      $sTBody = '';       
      foreach ($p_oXmlRoot as $oNode) {  
           $sTBody .= '<tr>';  
           foreach ($oNode as $sName => $oValue){  
                if (!$bIsHeaderProceessed) {  
                     $sTHead .= "<th>{$sName}</th>";  
                }  
                $sValue = (string)$oValue;  
                $sTBody .= "<td>{$sValue}</td>";                 
           }  
           $bIsHeaderProceessed = true;  
           $sTBody .= '</tr>';  
      }  
        
      $sHTML = "<table border=1>  
                     <thead><tr>{$sTHead}</tr></thead>  
                     <tbody>{$sTBody}</tbody>  
                </table>";  
      return $sHTML;  
 }  

This will output:

 
Hope it helps!
MDB BLOG!




 

Thursday, February 18, 2010

xHTML | Align center table

After hours of searching and checking, the following code makes your table
to align center of the screen.
This code tested and working on some WAP xHTML (MP) devices.

The first code should set table's margin as the following:
table
{
  margin-left: auto;
  margin-right: auto;
}


now, insert your table in div element:
<div style="text-align: center;">
  <table>
  ...
  </table>
</div>

Enjoy.
Ask question if needed...

Sunday, January 31, 2010

Javascript | clear input file value = file url

Included javascript function for clearing INPUT FILE contents!
I did it for disable uploading NON excel file (.xls).
(a message should be include...)

The CODE for ASP.NET:
<asp:FileUpload ID="txtFile" runat="server"
Enabled="true"
onchange="if (this.value.endsWith('.xls') == false) { this.parentNode.innerHTML = this.parentNode.innerHTML; }" />

The CODE HTML:

<input type="file" onchange="if (this.value.endsWith('.xls') == false) { this.parentNode.innerHTML = this.parentNode.innerHTML; }" style="width:216px;" />



Enjoy...
:)

Monday, July 6, 2009

Javascript html date control (validation)


Here is a sample code for an html input date control include DATE validation!
I searched a lot for such method for integration with PHP page but was little difficult.

Here is the HTML CODE:
<input id="inputDate1" name="Field1" value="21/07/2006" type="text" onblur="validateDate(this, '/')" maxlength="10">

<button onclick="setTodayDate(this.previousSibling, '/')">today</button>



Here is the JAVASCRIPT CODE:
function validateDate(p_inputObj, delim)
{
var text = p_inputObj.value;
var errorMsgs = "Following error(s) :\n";
var isDateCorrect = true;

var delim1 = text.indexOf(delim);
var delim2 = text.indexOf(delim, delim1+1);
if (delim2 <= delim1)
{
isDateCorrect = false;
errorMsgs = errorMsgs + "- Must be in format of dd/mm/yyyy like (21/09/2008)\n";
}
else
{
var day = parseInt(text.substring(0, delim1), 10);
var splitter1 = text.substring(delim1, delim1+1);
var month = parseInt(text.substring(delim1+1, delim2), 10);
var splitter2 = text.substring(delim2, delim2+1);
var year = parseInt(text.substring(delim2+1), 10);

if (isNaN(day) || isNaN(month) || isNaN(year))
{
isDateCorrect = false;
if (isNaN(day)) { errorMsgs = errorMsgs + "- Day not in correct format!\n"; }
if (isNaN(month)) { errorMsgs = errorMsgs + "- Month not in correct format!\n"; }
if (isNaN(year)) { errorMsgs = errorMsgs + "- Year not in correct format!\n"; }
}
else
{
if (day<1)
{
errorMsgs = errorMsgs + "- Day must be between grater than 0\n";
isDateCorrect = false;
}

if (month>12 || month<1)
{
isDateCorrect = false;
errorMsgs = errorMsgs + "- Month must be between 01 to 12\n";
}
else
{
if (month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12 )
{
if (day>31)
{
errorMsgs = errorMsgs + "- Day must be between 1 to 31\n";
isDateCorrect = false;
}
}
else if(month==2)
{
// is leap year
if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0))
{
if (day>29)
{
errorMsgs = errorMsgs + "- Day must be between 1 to 29\n";
isDateCorrect = false;
}
}
else
{
if (day>28)
{
errorMsgs = errorMsgs + "- Day must be between 1 to 28\n";
isDateCorrect = false;
}
}
}
else
{
if (day>30)
{
errorMsgs = errorMsgs + "- Day must be between 1 to 30\n";
isDateCorrect = false;
}
}
}

if (year<2000)
{
isDateCorrect = false;
errorMsgs = errorMsgs + "- Year not valid. must be more than 2000!\n";
}
else if (year>9999)
{
isDateCorrect = false;
errorMsgs = errorMsgs + "- Year must be 4 digits!\n";
}
}
}

if (isDateCorrect == true)
{
var newStr = (day<10 ? '0' : '') + day + delim +
(month<10 ? '0' : '') + month + delim +
year; // +" "+hour+":"+minute+" "+AMPM;
p_inputObj.title = '';
var date = new Date();
date.setFullYear(year, month-1, day);
p_inputObj.dateVal = date;
p_inputObj.value = newStr;
p_inputObj.style.backgroundColor='#FFFFFF';
return true;
}
else
{
//alert(errorMsgs);
errorMsgs = errorMsgs.substring(0, errorMsgs.length-1);
p_inputObj.dateVal = null;
p_inputObj.title = errorMsgs;
p_inputObj.style.backgroundColor='#ffaaaa';
p_inputObj.focus();
return false;
}
}

function setTodayDate(p_inputObj, p_delim)
{
var dtNow = new Date();
var day = dtNow.getDate();
var month = dtNow.getMonth() + 1;
var year = dtNow.getFullYear();
p_inputObj.value = (day<10 ? '0' : '') + day + p_delim +
(month<10 ? '0' : '') + month + p_delim +
year;
}


Date format if dd/MM/yyyy but it can also be MM/dd/yy or yyyy!
Enjoy... :)

Tuesday, June 23, 2009

Html (& javascript) Slider example


Here is an example for html slider - Only using HTML & Javascript.
Nice animated slider (good looking animation)

Code:
<html>
<head>
<style>
.spltr {width: 4px; background-color: firebrick;}
</style>
<script language="javascript" type="text/javascript">
function scrollSpeedAdd(obj,step)
{
scrollStop();
scrollAdd(obj, scrollAdd.step + step);
}
function scrollAdd(obj,step)
{
scrollAdd.elem = document.getElementById('MainSlideDiv');
if(scrollAdd.elem)
{
scrollAdd.step = step;
scrollAdd.I = window.setInterval(startScroll,10);
}
}
function startScroll()
{
scrollAdd.elem.scrollLeft = scrollAdd.elem.scrollLeft + scrollAdd.step;
}
function scrollStop()
{
window.clearInterval(scrollAdd.I);
}
</script>
</head>
<body
<b>Set your mouse over the arrows...</b><br /><br />
<table width="700" border="0" cellspacing="0" cellpadding="0" bgcolor="khaki">
<tr style="text-align: center;">
<td width="30" onmouseout="scrollStop();" onmouseover="scrollAdd(this,-2)" onclick="scrollSpeedAdd(this,-1)"> << </td>
<td width="640" align="center">
<div style="overflow:hidden; width:630; height:55;" id="MainSlideDiv" dir="rtl">
<table width="100%" style="text-align:center" border="0" cellspacing="5" cellpadding="5">
<tr>
<td>Test 1111 </td>
<td class="spltr"> </td>
<td>Test 2222 </td>
<td class="spltr"> </td>
<td>Test 3333 </td>
<td class="spltr"> </td>
<td>Test 4444 </td>
<td class="spltr"> </td>
<td>Test 5555 </td>
<td class="spltr"> </td>
<td>Test 6666 </td>
<td class="spltr"> </td>
<td>Test 7777 </td>
<td class="spltr"> </td>
<td>Test 8888 </td>
<td class="spltr"> </td>
<td>Test 9999 </td>
<td class="spltr"> </td>
<td>Test AAAA </td>
<td class="spltr"> </td>
<td>Test BBBB </td>
<td class="spltr"> </td>
<td>Test CCCC </td>
<td class="spltr"> </td>
<td>Test DDDD </td>
<td class="spltr"> </td>
<td>Test EEEE </td>
<td class="spltr"> </td>
<td>Test FFFF </td>
<td class="spltr"> </td>
</tr>
</table>
</div>
</td>
<td width="30" onmouseout="scrollStop()" onmouseover="scrollAdd(this,2)" onclick="scrollSpeedAdd(this,+1)"> >> </td>
</tr>
</table>
</body>
</html>

Monday, January 12, 2009

Javascript | Restrict number of open windows



Javascript Restrict number of open windows

here is a javascript code which allows:

  • Check if window is open
  • List open windows
  • Manage 5 open windows (Any amount)
  • Open restricted num. of windows.







function openWindowMAX5(p_url)
{
var win_I;
for(var i=0; i<5; i++)
{
win_I = window.open('', 'win_' + i);
if (win_I.document.location.href == 'about:blank')
{
window.status = 'win_'+i;
win_I = window.open(p_url, 'win_' + i);
break;
}
}
event.returnValue = false;
return false;
}


Used html code:
Open on new window

Tested on:

Working: IE7, CHROME 1.0.154

Not Working: Mozilla Firefox 3.0