Sunday, March 27, 2011

Problem repeating a background image on y axis in HTML?

Often we come across a situation where a div height will change across pages and a lot divs in those pages use the same CSS rule.

If you want to repeat the background image on y-axis and you want to change the height of the div dynamically where the background image has to repeat itself, you can do it using JavaScript. And now that you came here, it is a real simple job.

Theoretically what you are going to do is,
1.Assign the div, whose height you are looking to change dynamically, an ID.
2.When the document is loaded, get the height occupied by that div
3.Assign that height to the CSS rule where background repeat is mentioned.
As simple as that! Heres the working code.

<style type="text/css">
width: 450px;
background-image: url(images/line_v.gif);
background-repeat: repeat-y;
background-position: right center;
min-height: 10px;
float: left;
<div id="content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper turpis in
tortor interdum sed mattis lectus mollis. Pellentesque laoreet quam et mauris feugiat
sit amet eleifend turpis imperdiet. Praesent condimentum libero vitae massa imperdiet
pellentesque. Vestibulum et risus dolor, ac tincidunt velit. Maecenas lobortis diam
tellus. Suspendisse auctor, velit ut imperdiet semper, erat orci pharetra tortor,
venenatis vulputate metus eros ut felis. Cras ullamcorper odio sed felis ornare
ultricies. Phasellus porta adipiscing aliquet. Aenean ligula tellus, blandit a pulvinar
in, fermentum a erat. Sed arcu nisl, porta eu vestibulum at, luctus sed tellus.
Aenean eget quam justo, quis ultricies ante. Vivamus tempor sollicitudin augue ut
rhoncus. Sed odio mauris, imperdiet ut elementum vitae, dapibus at quam. Nullam
in aliquam sem. Fusce consectetur laoreet elit, non consequat nunc tempus nec. Cras
at enim ipsum. Praesent ipsum purus, tempus non sagittis volutpat, fringilla eget
mi. Maecenas sed elit est. Morbi facilisis purus eget nunc tincidunt iaculis mattis
quam pellentesque. Sed tortor leo, laoreet sit amet mattis a, fermentum in ligula.
Sed tempor lacus a lorem fermentum fermentum semper nunc sagittis. Vivamus et est
porta purus mollis cursus eget in ante. Sed lacinia, diam in tempor suscipit, turpis
enim posuere turpis, sit amet vestibulum quam nulla id elit. Vivamus ultricies tempus
mi, non consequat velit mollis id. Curabitur vehicula, turpis id tempor condimentum,
sem nulla molestie enim, vel commodo metus ipsum non nisi. Aliquam erat volutpat.


<script type="text/javascript">

var divHeight;
var textobj = document.getElementById("content");

if (textobj.offsetHeight) { divHeight = textobj.offsetHeight;}
else if ( { divHeight = textobj.offsetHeight; }

changecss('#content', 'min-height', divHeight + "px");

function changecss(theClass, element, value) {
var cssRules;

var added = false;
for (var S = 0; S < document.styleSheets.length; S++) {

if (document.styleSheets[S]['rules']) {
cssRules = 'rules';
} else if (document.styleSheets[S]['cssRules']) {
cssRules = 'cssRules';
} else {
//no rules found... browser unknown

for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
if (document.styleSheets[S][cssRules][R].selectorText == theClass) {
if (document.styleSheets[S][cssRules][R].style[element]) {
document.styleSheets[S][cssRules][R].style[element] = value;
added = true;
if (!added) {
try {
document.styleSheets[S].insertRule(theClass + ' { ' + element + ': ' + value + '; }', document.styleSheets[S][cssRules].length);

} catch (err) {
try { document.styleSheets[S].addRule(theClass, element + ': ' + value + ';'); } catch (err) { }



Here's the line_v.gif, . Place it in images folder and give it a go to see how it works.

Make sure the javascript is at the end of document. Else it would would throw "object required" error.

Happy coding!

Thursday, March 24, 2011

Using JQuery Datepicker in Master Pages

I will cover 2 points here.
1. Using JQuery's DatePicker
2. Using it in Master Page, Content Page situations

To use JQuery's DatePicker, you should have access to JQuery and JQuery UI libraries. You can either use CDNs(Content Distribution Networks) or have JQuery libraries in your site.
The libraries have both JavaScripts and CSS files.
I have used Google CDN for JQuery & JQuery UI javascripts. And for the CSS part, I have downloaded them to my site. And the reason is, I could not get CSS running if used CDN for it!

Time to get dirty.
In the master page's head section, add the links to the libraries

Once you get the libraries, in the content page, drag & drop a asp:TextBox and add the jquery code to attach the datepicker to the textbox.
It should look like below.

If you are not using master page, you can replace $('[id$=TextBox1]') with $("#TextBox1"). Thats it! Just 4 files to link and 2 lines of code will get you a beautiful Datepicker on your page.
Happy coding!

Wednesday, March 23, 2011

Binding a List or string array to ListView and operating on it

Suppose you have a Object Datasource attached to ListView and you have GetList, Delete and Insert operations set on it that would operate on a db. If that ODS primarily deals with string array, then you are about to face some challenges.
The problem with showing a plain string array to ListView is, that array is nameless.
To overcome this, all you have to do is use Container.DataItem where it usually was Bind("Name")

Operating on the data
To delete a row from db, the only information you have in the ListView is string data. So, we have to make use of it and tie that info to every delete button (you get this when you select delete operation on the ODS) for every row. You do that in ItemDataBound event.

protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
string venueName = (e.Item as ListViewDataItem).DataItem.ToString();
(e.Item.FindControl("DeleteButton") as Button).CommandArgument = venueName;

To make insertion into db, find the input text control inside InsertItem template of ListView as shown below and in ItemCommand event, use the command name property to distinguish between operations.

protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
string venueName = (e.Item as ListViewDataItem).DataItem.ToString();
(e.Item.FindControl("DeleteButton") as Button).CommandArgument = venueName;
protected void ListView1_ItemCommand(object sender, ListViewCommandEventArgs e)
if (e.CommandName == "Delete")
string venue = e.CommandArgument.ToString();
Response.Redirect(Request.Url.AbsolutePath, true);
else if (e.CommandName == "Insert")
VenueEntity venueEntity = new VenueEntity();
venueEntity.Name = (ListView1.InsertItem.FindControl("VenueTextBox") as TextBox).Text;
venueEntity.AddedBy = User.Identity.Name;
venueEntity.DateAdded = DateTime.Now;

Response.Redirect(Request.Url.AbsolutePath, true);

Adding Attributes to ListView item in Asp.Net

One problem when switching from GridView to ListView would be to understand that ListView doesn't have rows as GridView. To add attributes to ListView item, it should be done in ItemDataBound event as below.

protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
if (e.Item.ItemType == ListViewItemType.DataItem)
object objTemp = ListView1.DataKeys[((ListViewDataItem)e.Item).DisplayIndex].Value as object;
if (objTemp != null)
string id = objTemp.ToString();
((HtmlTableRow)e.Item.FindControl("courserow")).Attributes["onmouseover"] = "'DodgerBlue';'hand';";
((HtmlTableRow)e.Item.FindControl("courserow")).Attributes["onmouseout"] = "'Black';";
((HtmlTableRow)e.Item.FindControl("courserow")).Attributes["onclick"] = "window.location.href = 'ManageCourse.aspx?CourseId=" + id + "'";

You need the runtat attribute set to server for "courserow" row.