Yasserzaid’s Weblog

December 18, 2008

Show and Hide DIV

Filed under: Javascript — yasserzaid @ 10:26 pm

Try this example:

http://forums.asp.net/t/1291323.aspx
<script language=”javascript”>

 function showDiv()

{

           var div = document.getElementById(‘myDiv’);

           div.style.position = “absolute”;

           div.style.visibility = “visible”;

           div.style.display = “block”;

          div.top = “50″;

           div.left = “50″;

}

 

function closeDiv()

{

         var div = document.getElementById(‘myDiv’);

         div.style.visibility = “hidden”;

         div.style.display = “none”;

}

</script>

<div id=”myDiv” style=”display:none;Visibility:hidden; width:100px; height:150px”  >

any text here

<input type=”button” value=”Close” onclick=”closeDiv()” />

</div>

<span style=”color:blue; cursor:pointer”  onclick=”showDiv()”  ><u>Click</u></span>

Good Luck

AJAX AutoComplete with static data

Filed under: AJAX — yasserzaid @ 10:20 pm

Try this example:

<ajaxtoolkit:autocompleteextender runat=”server”
id=”AutoCompleteExtender1? enabled=”true”
minimumprefixlength=”1″ servicepath=”~/SuggestionService.asmx”
servicemethod=”GetAllNames”
targetcontrolid=”txtSearch” />

 

create webserviece

SuggestionService.asmx

using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
using System.Collections.Generic;

/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{

    public WebService ()
    {

        //Uncomment the following line if using designed components
        //InitializeComponent();
    }

    [WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public string[] GetAllNames(string prefixText, int count)
    {
        ArrayList filteredList = new ArrayList();
        string s2 = “\n”;
        char[] ch = s2.ToCharArray();
        string[] names ={ “India”, “UK”, “US”, “China”, “Nepal” };

        foreach (string name in names)
        {
            if (name.ToLower().StartsWith(prefixText.ToLower()))
            {
                filteredList.Add(name);
            }
        }
        return (string[])filteredList.ToArray(typeof(string));
    }

}

Good Luck

AJAX ModalPupup Extender with static Image

Filed under: AJAX — yasserzaid @ 10:15 pm

Try this example:

.aspx

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default2.aspx.cs” Inherits=”Default2″ %>

<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”cc1″ %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
    <title>Change Picture</title>
    <style>
        .modalBackground {
        background-color:Gray;
        filter:alpha(opacity=70);
        opacity:0.7;
        }

        .modalPopup {
        background-color:#FFD9D5;
        border-width:3px;
        border-style:solid;
        border-color:Gray;
        padding:3px;
      
        }
    </style>
</head>
<body>
    <form id=”form1″ runat=”server”>
    <div>
        <asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
        </asp:ScriptManager>
       
        <asp:Image ID=”Image1″ runat=”server” ImageUrl=”images/040720070325170a1ul1.jpg” imgUrl=”images/040720070325170a1ul1.jpg” onclick=”changePicture(event.srcElement.imgUrl)”/>
        <asp:Image ID=”Image2″ runat=”server”  ImageUrl=”~/images/ahly.jpg” imgUrl=”images/ahly.jpg” onclick=”changePicture(event.srcElement.imgUrl)” Height=”102px” Width=”85px”/>
        <asp: Panel ID=”Panel1″ runat=”server” CssClass=”modalPopup” style=”display:none”>
            <asp:Image ID=”Image3″ runat=”server”/>
            <br />
            <br />
            <asp:Button ID=”Button2″ runat=”server” Text=”Cancel” />
        </asp: Panel>
        <cc1:ModalPopupExtender ID=”ModalPopupExtender1″ runat=”server” TargetControlID=”Button1″ PopupControlID=”Panel1″ CancelControlID=”Button2″>
        </cc1:ModalPopupExtender>
        <div style=”display:none”>
            <asp:Button ID=”Button1″ runat=”server” Text=”Button” />
        </div>
       
        <script type=”text/javascript” language=”javascript”>
            function changePicture(imgUrl){
                $get(“<%=Image3.ClientID %>”).src = imgUrl;
                $get(“<%=Button1.ClientID %>”).click();
            }
        </script>
    </div>
    </form>
</body>
</html>

Good Luck

Allow only one Space in TextBox

Filed under: Javascript — yasserzaid @ 10:14 pm

Try this example using Javascript

you can add this function to your textbox’s onblur event or any you want to check..

    <script type=”text/javascript” >
        function checkSpace()
        {
            var txt = document.getElementById(‘TextBox1′);
            var strText = txt.value;
            var strArr = new Array();
            strArr = strText.split(” “);
            for(var i = 0; i < strArr.length ; i++)
            {
                if(strArr[i] == “”)
                {
                    alert(“there must be one space char between words!”);
                    break;
                }
            }
        }
    </script>

<asp:TextBox ID=”TextBox1″ runat=”server” onblur=”checkSpace();”></asp:TextBox>

//—————-Or——————

function AllowSpace(txt)
{
   var CharArray=txt.value.split(”);
   var count=0;
   for(var i=0;i<CharArray.length;i++)
   {
     if (CharArray[i] == ” “)
     {
        if(count == 0)
        {
            count = count + 1;
        }
        else
        {
          return false;
        }
      }
   }
   return true;
}

<asp:TextBox ID=”TextBox1″ runat=”server” onblur=”AllowSpace(this);”></asp:TextBox>
 

Good Luck

How to remove arrow from Menu

Filed under: ASP.Net — yasserzaid @ 9:36 pm

Try this :

<asp:Menu ID=”menu” runat=”server” StaticEnableDefaultPopOutImage=”false” >

</asp:Menu>

Good Luck

Tab Menu

Filed under: ASP.Net — yasserzaid @ 8:16 pm 
<div id="topNav">
    <asp:SiteMapDataSource ID="topMenuData" runat="server" ShowStartingNode="false" />
    <asp:Menu ID="topMenu" runat="server" DataSourceID="topMenuData"
        MaximumDynamicDisplayLevels="0" Orientation="Horizontal">
        <StaticMenuItemStyle CssClass="staticMenuItemStyle" />
        <StaticSelectedStyle CssClass="staticSelectedStyle" />
        <StaticHoverStyle CssClass="staticHoverStyle" />
    </asp:Menu>
</div>

The first just displays the top line; notice that it has MaximumDynamicDisplayLevels set to 0, meaning that only a single level of static items is show. ShowStatingNode is set to false so that the single root node doesn’t show either.

The sub-menu is another Menu control:

<div id="subNav">
    <asp:SiteMapDataSource ID="subMenuData" runat="server"
        ShowStartingNode="false" StartFromCurrentNode="true" />
    <asp:Menu ID="subMenu" runat="server" DataSourceID="subMenuData"
        Orientation="Horizontal">
        <StaticMenuItemStyle CssClass="substaticMenuItemStyle" />
        <StaticHoverStyle CssClass="substaticHoverStyle" />
    </asp:Menu>
</div>

This uses a separate SiteMapDataSource, but with the default configuration this comes from the same site map file as the first SiteMapDataSource. The key properties are StartfromCurrentNode, which is set to true to make this second menu start from the current page; ShowStartingNode is set to false so that the current node isn’t show, resulting in the child nodes being shown. So you select an item from the top menu and its children are shown in the bottom.

 Now you can add some styling and you get very close to the MSDN style:

<style type="text/css">
    #topNav
    {
        width: 100%;
        background-color: #964240;
        vertical-align: bottom;
        padding: 0;
        margin: 0;
        z-index: 0;
    }
    #subNav
    {
        width: 100%;
        border-left: solid 1px #000;
        border-bottom: solid 1px #000;
        border-right: solid 1px #000;
        padding: 0;
        margin: 0;
        height: 24px;
        background-color: #eee;
    }
    .staticMenuItemStyle
    {
        width: 89px;
        background-color: #7A1312;
        border: solid 1px #000;
        color: #fff;
        text-align: center;
    }
    .staticSelectedStyle
    {
        background-color: #eee;
        color: #000;
        border-bottom: solid 1px #eee;
        z-index: 100;
    }
    .staticHoverStyle
    {
        background-color: #902423;
    }

    .substaticMenuItemStyle
    {
        width: 89px;
        background-color: #eee;
        text-align: center;
    }
    .substaticHoverStyle
    {
        background-color: #D0D0D0;
        border: solid 1px #A68F8F;
    }
</style>

It’s not quite the same, but close. You could get closer with background images, to give the menu items a more rounded look, as well as using the CSS Adapters to produce cleaner HTML, but like this you get a good looking tab-style menu very simply.

Check

http://blogs.ipona.com/davids/archive/2008/08/19/tab-style-menus.aspx

Good Luck

Simple Drop-Down Menu

Filed under: CSS — yasserzaid @ 7:35 pm

Try this example:

HTML Code :

<ul id=“sddm”>
    <li><a href=“#”
       onmouseover=“mopen(‘m1′)”
       onmouseout=“mclosetime()”>Home</a>
        <div id=“m1″
           onmouseover=“mcancelclosetime()”
           onmouseout=“mclosetime()”>
        <a href=“#”>HTML Drop Down</a>
        <a href=“#”>DHTML Menu</a>
        <a href=“#”>JavaScript DropDown</a>
        <a href=“#”>Cascading Menu</a>
        <a href=“#”>CSS Horizontal Menu</a>
        </div>
    </li>
    <li><a href=“#”
       onmouseover=“mopen(‘m2′)”
       onmouseout=“mclosetime()”>Download</a>
        <div id=“m2″
           onmouseover=“mcancelclosetime()”
           onmouseout=“mclosetime()”>
        <a href=“#”>ASP Dropdown</a>
        <a href=“#”>Pulldown menu</a>
        <a href=“#”>AJAX Drop Submenu</a>
        <a href=“#”>DIV Cascading Menu</a>
        </div>
    </li>
    <li><a href=“#”>Order</a></li>
    <li><a href=“#”>Help</a></li>
    <li><a href=“#”>Contact</a></li>
</ul>
<div style=“clear:both”></div>

CSS Code

#sddm
{ margin: 0;
padding: 0;
z-index: 30}

#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial}

#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 60px;
background: #5970B2;
color: #FFF;
text-align: center;
text-decoration: none}

#sddm li a:hover
{ background: #49A3FF}

#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2}

#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: 11px arial}

#sddm div a:hover
{ background: #49A3FF;
color: #FFF}

JavaScript Code

var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = ‘hidden’;

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = ‘visible’;

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = ‘hidden’;
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;

Good Luck

Tab Border Curve

Filed under: CSS — yasserzaid @ 7:25 pm

Hi

try this example:

<style type=”text/css”>
u.corner u
{
 background-color: ButtonFace;
 display: block;
 font-size:1px;
 height: 1px;
 overflow: hidden;
 text-decoration: none;
}
u.corner u.h1
{
 margin: 0 5px;
}
u.corner u.h2
{
 margin: 0 3px;
}
u.corner u.h3
{
 margin: 0 2px;
}
u.corner u.h4
{
 margin: 0 1px;
 height: 2px;
}
.uContent
{
 background-color: ButtonFace;
 height: 200;
 padding: 5px;
}
</style>

<div>
 <u class=”corner”>
  <u class=”h1″></u>
  <u class=”h2″></u>
  <u class=”h3″></u>
  <u class=”h4″></u>
 </u>
 <div class=”uContent”>New content</div>
 <u class=”corner”>
  <u class=”h4″></u>
  <u class=”h3″></u>
  <u class=”h2″></u>
  <u class=”h1″></u>
 </u>
</div>

Good Luck

Blog at WordPress.com.