Sandeep Prajapati - Asp.net: CSS

Showing posts with label CSS. Show all posts

Wednesday, August 21, 2013

Custom Message box and Confirm window all in one

Hello,
I have created a custom message box and confirm window which can be used in all programming languages and all platforms.
syntex :

AlertCust([Control], {Message Title}, [Message Text], {IconType}, {PromptType}, [OnOk], [OnCancel]);

Description :

[Control] : Optional, Pass the control which raises the prompt. in Confirm or Alert window when click ‘OK’ button is clicked, the default server event will be executed, if value is passed. if null, clicking on ‘OK’ the prompt window will be closed, no further action.
{Message Title} : Required, Message Title. Title will appear in bold font.
[Message Text] : Optional, Message text in second line, in normal fonts.
{IconType} : Required, Enum values. pass icon type to display icon specific to message. options Error, Warning, Information
{PromptType} : Required, This property helps to decide what kind of prompt we need. e.g. Validation, MessageBox(OkOnly), OKCancel, YesNo.
[OnOk] : Optional, To provided custom callback method, set javascript method name, will be executed when clicked ‘OK’.
[OnCancel] : Optional, To provided custom callback method, set javascript method name, will be executed when clicked ‘Cancel’.

anyone can download code from Here

Friday, April 1, 2011

Apply Frame to Image with CSS

Author Sandeep at 10:30 AM

Hello

Many times we need to display image like profile image or advertisements

and at that time we need to decorate it within frame…

Here we have a simplest way to apply frame which will help to set frame to any size image and unique for all..

here I have a sample code for it

<html>
<head>
<style>
img {
    background: url("shadow.gif") no-repeat scroll right bottom transparent;
    border-color: #EEEEEE -moz-use-text-color -moz-use-text-color #EEEEEE;
    border-right: medium none;
    border-style: solid none none solid;
    border-width: 1px medium medium 1px;
    padding: 4px 10px 10px 4px;}
</style>
</head>
<body>
     <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxKSyD46sNlLs8yYLBFMz_YGOiYANzbKSUPo5YT5f2K34QvZgGOWTWF_s_aWPoe4zuVafRytM6346dkW7bkjptRImMMCLWyaCxtGgAjPD97wa7HWZ_l94H2uWxlU8V2UKIJPgvyj7sTO5x/s220/Sandeep.JPG'>
</body>
</html>

and the you can have any kind of frame image

here I am uploading a sample image

and the output you will get is

All the Best

Monday, October 18, 2010

Select Multiple Checkbox with Shift key in Gridview by javascript

Author Sandeep at 1:32 AM

Hello Friends,
Recently i was just looking at my Gridview where i have a checkbox in each row.. now i need to select all Check box.. for that lots of material is available on net..
and all are enough so i am not going to deep in it
check out this… http://www.codeproject.com/KB/grid/GridCheckBox.aspx

but now my problem was that i wanted to select few rows but not all
let’s say in my gridview the number of records are around 100.. and i want to check the checkbox of first 35 records
in that case i had to click on checkbox of all 35 rows.
i thought, like all mail accounts like gmail, yahoo, live and in may more…
i should be able to select multiple records by shift key.
means select the first record and pressing shift key select the 35st record so all the records in between will be selected..
and for that i found lots of jquery or any other javascripts.
but here i have tried to make something my own and i am happy to make it..

here is code

on Page

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
        <Columns>
            <asp:BoundField DataField="ID" HeaderText="Id" />
            <asp:BoundField DataField="Name" HeaderText="Name" />
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:CheckBox ID="CheckBox1" 

onclick="CheckAllCheckbox(document.getElementById('ctl00_ContentPlaceHolder1_GridView1'),this,event);"
                        runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

on code Behind

protected void Page_Load(object sender, EventArgs e)
   {
       if (!IsPostBack)
       {
           DataTable dt = new DataTable();
           dt.Columns.Add("ID");
           dt.Columns.Add("Name");
           DataRow dr;
           for (int i = 1; i < 130; i++)
           {
               dr = dt.NewRow();
               dr["ID"] = i;
               dr["Name"] = "Record No" + i.ToString();
               dt.Rows.Add(dr);
           }
           GridView1.DataSource = dt;
           GridView1.DataBind();
       }
   }

Javascript

var lst = null;
        function CheckAllCheckbox(ctrl, sValue, e) {
            var chkName = sValue.id;
            var arlstr = sValue.id.split(ctrl.id);
            var id = arlstr[1].split('_')[1].substring(3);

            var ee = (window.event) ? event : e;
            if (ee.shiftKey) {
                if (lst != null) {
                    var First = 0, last = 0;
                    if (parseInt(lst) > parseInt(id)) {
                        First = parseInt(id);
                        last = parseInt(lst);
                    }
                    else {
                        First = parseInt(lst);
                        last = parseInt(id);
                    }

                    for (i = First; i < last; i++) {                        
                        var p = (i <= 9 ? '0' + i : i);
                        var ctrlnew = chkName.replace('ctl' + id, 'ctl' + p);                        
                        document.getElementById(ctrlnew).checked = sValue.checked;
                    }                    
                }
            }
            lst = id;
        }

Here is the Source to Download http://cid-552998535cb9985d.office.live.com/self.aspx/.Public/SelectWithShift.rar Thanks

Wednesday, April 14, 2010

Light-weight Popup using CSS and Javascript..

Author Sandeep at 11:43 PM

Hello Friends
Once Again with a Rocking point we have seen lots of Popup till now…..
all are good at their places just search on Google “Model Popup” and you will get a long list of examples and javascripts for popup…
Ajax Control toolkit Model Popup Extender http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/ModalPopup/ModalPopup.aspx
then few more
http://www.modalpopups.com/blog/
http://www.jquery-dev.com/2008/12/02/jqmodal-jquery-modal-popup-plugin
one more javascript framework is Dojo http://www.dojotoolkit.org/
here i am also one type of popup… but i am sure you will like it
because it don’t require any kind of configuration and dependencies…

it is combination of CSS and javascript… with 70:30 ratio….
means here CSS is used more and rest is javascript….
then also its more power full

so from first sight you can determine its light–weight compare to other model popups

here i have an example…

   1: <input id="Button1" type="button"

   2:      value="Dispay Message" onclick="ShowDiv('DivPopUp')" />

Drop the control on which you want to fire ModelPopup.. and assign javascript event to fire onclick="ShowDiv('DivPopUp')"

if you are using server control like

   1: <asp:Button ID="Button2" runat="server" Text="Dispay Message" />

then at Server Side code….

in Page_Load Event

   1: Button2.Attributes.Add("onclick", "ShowDiv('DivPopUp')");

now

Sandeep Prajapati - Asp.net

Pages