Mental Jetsam

By Peter Finch

Archive for the ‘HTML’ Category

Google Developer Day 2011 HTML 5 Challenge

Posted by pcfinch on August 22, 2011

I entered the Google Developer Day 2011 HTML5 challenge, to create a “Google doogle” of the Developer Day Logo entirely in HTML, and I actually made the cut… top 3 in Australia, I’m very happy 🙂

https://sites.google.com/site/opencallforgdd/the-challenge-1

http://www.peterfinch.me/gdd2011/

Advertisements

Posted in HTML, javascript, Personal | Leave a Comment »

Displaying XML data in .NET

Posted by pcfinch on February 14, 2011

The following is an example of displaying information from a XML document in .NET using an “xmlDataSource” and “DataList”. This is a very simple way to display record base information from an XML data source placed in the application directory like the file below (e.g. “~/data/news.xml”), and it is easy to convert to an “sqlDataSource”, in the future, by replacing the “XPath()” function with “Eval()”.

<?xml version="1.0" encoding="utf-8" ?>
<news>
 <item id='a1'>
 <title>New Website</title>
 <date>Monday, 7th Feb 2011</date>
 <image>news/website.jpg</image>
 <short>New Development Labs website.</short>
 </item>
 <item id='a2'>
 <title>New Taskbar</title>
 <date>Monday, 207th Dec 2010</date>
 <image>news/taskbar_1.jpg</image>
 <short>Released new taskbar functionality.</short>
 </item>
</news>

Just insert the following code into the C# webform and masterpage.

<asp:XmlDataSource ID="newsDataSource" runat="server" DataFile="~/data/news.xml">
</asp:XmlDataSource>
<asp:DataList ID="newsDataList" runat="server" DataSourceID="newsDataSource">
 <ItemTemplate>
 <img src='images/<%#XPath("image")%>' />
 <a href='details.aspx?id=<%#XPath("@id") %>'>
 <%#XPath("title") %>
 </a>
 <div><%#XPath("date") %></div>
 <div><%#XPath("short") %></div>
 </ItemTemplate>
</asp:DataList>

A subset of the XML document can be selected by adding an optional “XPath” attribute to the “xmlDataSource” tag…

<asp:XmlDataSource
  ID="newsDataSource" runat="server"
  DataFile="~/data/news.xml"
  XPath="/news/item[@id='a1']">
</asp:XmlDataSource>

or using the following C# code.

newsDataSource.XPath = String.Format("/news/item[@id='{0}']", id);

Posted in C#.NET, HTML | Leave a Comment »

3 column HTML page layout with fixed left and right sidebars using CSS

Posted by pcfinch on February 8, 2011

The following is a simple 3 column HTML page layout using CSS (no tables) so that the left and right “sidebars” have a fixed size and the content expands and contracts to fit the remaining page width.

There are a couple of “tricks” to get this working.

  • Use “float:left” and “float:right” to position the left and right sidebars.
  • The “lbar” and “rbar” divisions MUST appear before the “middle” division.
  • [Optional] Remove the margin from the h1 heading “margin:0” otherwise it looks odd on some browsers if it’s the first element in the division.
<html><head>
<style type="text/css">
body { font-size:10pt }
.lbar { float:left ; width:120px; background-color:yellow }
.rbar { float:right ; width:120px; background-color:yellow }
.middle { margin-left:130px; margin-right:130px; background-color:gray }
h1 { margin:0; font-size:12pt; background-color:blue ; color:white ;  }
</style>
</head><body>
<div>
<h1>Left Bar</h1>
<ul><li>Home</li>
<li>Development</li>
<li>Dowload</li>
<li>Support</li></ul>
</div>
<div>
<h1>Right Bar</h1>
<ul><li>Peter</li>
<li>Steve</li>
<li>Andrew</li>
<li>Chris</li></ul>
</div>
<div>
<h1>Middle</h1>
<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.<p>
</div>
</body></html>

Posted in CSS, HTML | Leave a Comment »

CSS position:fix not working on IE 7

Posted by pcfinch on June 9, 2010

I was trying to create a fixed button bar, at the top of the page, on Internet Explorer 7 using JQuery but I could not get the bar to stay at the top. The CSS property “position:fixed” lets you fix the location of a HTML element on a page so when the rest of the page is scrolled, using the scrollbars for example, the element stays in the same location in the browser window. I found that adding the following DOCTYPE to the top of the pages fixed the problem.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bar")
    .css("width", "100%")
    .css("height","23px")
    .css("position","fixed")
    .css("zIndex", "100") 
    .css("background","gray")
});
</script>
</head>
<body style="margin:0 0 0 0">
<div id="bar">The bar goes here...</div>
.....

Posted in CSS, HTML, javascript | Leave a Comment »