Thursday, September 2, 2010

Collapsible Div

function ToggleCollapsible(ControlIdToShow, SaveStateField, ControlFireID) {
    var control = document.all[ControlIdToShow].style;
    var expandstate = document.all[SaveStateField];

    var ControlFireID = document.getElementById(ControlFireID);

    if (control.display == 'none') {
        control.display = '';
        expandstate.value = 'true';

        if (ControlIdToShow == "ToShow") {
            //showImageID.style.display = "none";
            //hideImageID.style.display = "block";
            //On button click change the image
            ControlFireID.src = "Collapsible/collapse.gif";
            ControlFireID.title = "Hide";
        }
    }
    else {
        control.display = 'none';
        expandstate.value = 'false';

        if (ControlIdToShow == "ToShow") {
            //showImageID.style.display = "block";
            //hideImageID.style.display = "none";
            //On button click change the image
            ControlFireID.src = "Collapsible/expand.gif";
            ControlFireID.title = "Show";
        }
    }

    return false;
}

<input type="hidden" name="CollapsiblePanelHidden" value="True" />
<input id="imgBtnShow" name="imgBtnShow" type="image" src="Collapsible/expand.gif"
onclick="return ToggleCollapsible (&#39;ToShow&#39;, &#39;CollapsiblePanelHidden&#39;, &#39;imgBtnShow&#39;)"
title="Show" style="display: block;" />
<div id="ToShow" style="display: none;">
<table id="ShowTable">
<tr>
<td>
<a id="ShowTableContent"
title="Click to expand/collapse" onclick="return ToggleCollapsible (&#39;PanelToShowOrHide&#39;, &#39;CollapsiblePanelHidden&#39;, &#39;imgBtnShow&#39;, &#39;imgBtnHide&#39;)"
href="#">Collapsible panel (click to expand).</a></td>
</tr>
<tr>
<td id="PanelToShowOrHide" style="width: 100%; display: none; color: Red;">
http://asp-tech.blogspot.com/
</td>
</tr>
</table>
</div>

Wednesday, September 1, 2010

Generate CSS DropDown Menu from DataBase

IF OBJECT_ID (N'dbo.MenuMain', N'U') IS NOT NULL
 DROP TABLE dbo.MenuMain;
GO

CREATE TABLE dbo.MenuMain(ID INT, [Name] VARCHAR(50),[Link] VARCHAR(50), [Title] VARCHAR(50), ParentID INT, [Order] INT)

INSERT INTO dbo.MenuMain

SELECT 1, 'CSS Drop Down Menus', NULL, NULL, 0, 1 UNION ALL
SELECT 2, 'Vertical CSS Pop-Out Menu', NULL, NULL, 0, 2 UNION ALL
SELECT 3, 'CSS Hover Navigation',     '#', 'SEO Consultants Directory', 2, 1 UNION ALL
SELECT 4, 'Horizontal Drop & Pop Menu', NULL, NULL, 0, 3 UNION ALL
SELECT 5, 'SEO Consultants Sample',     '#', 'SEO Consultants Vertical Example', 2, 2 UNION ALL
SELECT 6, 'Tanfa Demo example',         '#', 'Complete Example', 5, 1 UNION ALL
SELECT 7, 'Stage 1',                    '#', 'Vertical Menu - Page 1', 6, 1 UNION ALL
SELECT 8, 'Stage 2',                    '#', 'Vertical Menu - Page 2', 6, 2 UNION ALL
SELECT 9, 'Stage 3',                    '#', 'Vertical Menu - Page 3', 6, 3 UNION ALL
SELECT 10, 'Stage 4',                   '#', 'Vertical Menu - Page 4', 6, 4 UNION ALL
SELECT 11, 'Stage 5',                   '#', 'Vertical Menu - Page 5', 6, 5

SELECT   ID    ,
         [Name],
		 [Link],
		 [Title],
         CASE WHEN ParentID = 0
              THEN NULL
              ELSE ParentID
         END AS ParentID,
         [Order]
FROM     dbo.MenuMain
ORDER BY ParentID,
         [Order]
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using System.Text;

public partial class HorizontalCssMenu : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        //http://ago.tanfa.co.uk/css/examples/menu/tutorial-h.html#hs7
        //http://www.alistapart.com/articles/horizdropdowns/

        if (!IsPostBack)
        {
            LoadMenu();
        }
    }

    private void LoadMenu()
    {
        DataTable dtMenu = LoadData();
        
        StringBuilder sbMenu = new StringBuilder();

        foreach (DataRow dr in dtMenu.Rows)
        {
            if (string.IsNullOrEmpty(Convert.ToString(dr["ParentID"]))
                || Convert.ToString(dr["ParentID"]) == "0")
            {
                if (sbMenu.Length != 0)
                    sbMenu.Append(Environment.NewLine);
                sbMenu.Append("
    " + Environment.NewLine); sbMenu.Append("
  • ");
    sbMenu.Append("

    " + Convert.ToString(dr["Name"]) + "

    " + Environment.NewLine);
    sbMenu.Append("
  • " + Environment.NewLine + "
"); } else { StringBuilder sbTemp = new StringBuilder(); if (Convert.ToInt32(dr["Order"]) == 1) sbTemp.Append(Environment.NewLine + "
    "); sbTemp.Append(Environment.NewLine + "
  • ");
    sbTemp.Append("" + Convert.ToString(dr["Name"]) + "");
    sbTemp.Append(Environment.NewLine + "
  • "); if (Convert.ToInt32(dr["Order"]) == 1) sbTemp.Append(Environment.NewLine + "
"); string id = "ID=\"" + Convert.ToString(dr["ParentID"]) + "\""; int length = sbMenu.ToString().IndexOf(id); if (length != -1) { string Previous = sbMenu.ToString().Substring(0, length); string Next = sbMenu.ToString().Substring(length); if (Convert.ToInt32(dr["Order"]) == 1) sbMenu.Insert((Previous.Length + Next.IndexOf(" ")), sbTemp); else sbMenu.Insert((Previous.Length + Next.IndexOf("")), sbTemp); } else sbMenu.Append(sbTemp); } } if (sbMenu.ToString().Length > 0) { menu.InnerHtml = sbMenu.ToString(); } } public DataTable LoadData() { DataSet dsUserMenu = null; try { //Connection string from Web.Config string sDBConnection = "SERVER=;DATABASE=;UID=;pwd="; string[] sTableName = { "Menu" }; string sQuery = @"SELECT ID , [Name], [Link], [Title], CASE WHEN ParentID = 0 THEN NULL ELSE ParentID END AS ParentID, [Order] FROM dbo.MenuMain ORDER BY ParentID, [Order]"; dsUserMenu = new DataSet(); DBHelper.FillDataset(sDBConnection, CommandType.Text, sQuery, dsUserMenu, sTableName); dsUserMenu.DataSetName = "Menus"; DataRelation objMenuRelation = new DataRelation("ParentChild", dsUserMenu.Tables["Menu"].Columns["ID"], dsUserMenu.Tables["Menu"].Columns["ParentID"], false); objMenuRelation.Nested = true; dsUserMenu.Relations.Add(objMenuRelation); return dsUserMenu.Tables[0]; } catch (Exception ex) { throw ex; } } }

Download .cs, .aspx, .css, .sql file form below
HorizontalCssMenu.zip


References
ago.tanfa.co.uk
Example
alistapart