HTML, CSS & ...

venerdì 1 marzo 2013

JQuery Tabs - Enable - Disable

Here the code to create and disable your tabs:

$("#tabs").tabs({ disabled: [1, 2, 3, 4, 5 ] });

<ul>

</ul>

… Your Content …

</div>

… Your Content …

</div>

and here the code to enable them:

$('#tabs').tabs('enable', 1)

$('#tabs').tabs('enable', 2)

My Two Cents ...

martedì 19 febbraio 2013

JQuery - PostBack from JQuery Modal DialogBox

In our web applications sometimes we need to use JQuery Modal Dialog Box and make some action in it, for example an insert/update into a database.
To make this, we have to associate at the action of the modal box button an hidden Aspx button.
The following code show how make this.

JQuery code to make the Modal Dialog Box:

$("#Your_DIV_ID").dialog(

{

autoOpen: false,

height: 400,

width: 350,

modal: true,

buttons:

{

Ok: function ()

{

$("#Your_Button").click();

Cancel: function ()

{

$(this).dialog("close");

}

close: function ()

{ }

}).parent().appendTo($("form:first"));

The Html/Aspx Code to declare your Modal Box and for example the button for the action:

... Your Div Content ...

<asp:Button ID="Your_Button" style = "display:none" runat="server" Text="Save" onclick="Your_Button_Click" />

</div>

C# Code of the button:

protected void Your_Button_Click(object sender, EventArgs e)

{

// Do Somenthing

}

My Two Cents ...

JQuery - Getting Value From DropDownList

If you need to get the value of a Drop Down List, look at the following example:

var value = $("#Yuor_DropDownList_ID option:selected").val();

My Two Cents ...

Verify Future Date with Javascript

The following Javascript function shows a way to verify if a date is in the future:

function isFutureDate(obj)

{

var dteDate;

var now = new Date().format("yyyyMMdd");

obj1 = obj.split("/");

var day = parseInt(obj1[0], 10);

var month = parseInt(obj1[1], 10);

var year = parseInt(obj1[2], 10);

var born = obj1[2] + obj1[1] + obj1[0];

if (parseInt(born) > parseInt(now))

return true;

else

return false;

}

My Two Cents ...

InLine BulletList

If you need to have Inline Bullet List and not vertical and with a custom bullet, you can do as shown here:
This is the code you have to put in .aspx page:

<asp:BulletedList ID="your_bullet_id" runat="server" ></asp:BulletedList>

and here teh code per CSS stylesheet:

{

display: inline;

padding-left: 15px;

background: url(path_of_your_custom_bullet_image) no-repeat;

}

My Two Cents ...

mercoledì 7 novembre 2012

Background Image

If we want to use an image as background of our web page, we can follow two different ways.

The first is:

/*here the html code*/

<body>

...

</body>

/*here the css code*/

body

{

margin: 0px;

padding: 0px;

}

img.bg

{

width: auto;

height: auto;

position: fixed;

top: 0;

left: 0;

z-index:-9999;

}

In the css code we anchor the image on the left-top side of the page that have no margin and no padding.

If we want, we can anchor on top-right or bottom(left-right) of the page, it depends of what we want; in fact if we anchor on top-left (for example) we will always see the top and left sides of the photo, and the right - bottom sides could be cut, according to the different resolutions.

If we want to see the all width or the all hight of the image we write the css as follow:

width: 100%;

height: 100%;

Continua a leggere...»

Pagine

venerdì 1 marzo 2013

JQuery Tabs - Enable - Disable

martedì 19 febbraio 2013

JQuery - PostBack from JQuery Modal DialogBox

JQuery - Getting Value From DropDownList

Verify Future Date with Javascript

InLine BulletList

mercoledì 7 novembre 2012

Background Image