MyNotesThings: 2014

Monday, April 14, 2014

Position in CSS

Different Types of Position in CSS:

Static. This is the default for every single page element. Different elements don't have different default values for positioning, they all start out as static. Static doesn't mean much, it just means that the element will flow into the page as it normally would. The only reason you would ever set an element to position: static is to forcefully-remove some positioning that got applied to an element outside of your control. This is fairly rare, as positioning doesn't cascade.
Relative. This type of positioning is probably the most confusing and misused. What it really means is "relative to itself". If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will no effect on it's positioning at all, it will be exactly as it would be if you left it as position: static; But if you DO give it some other positioning attribute, say, top: 10px;, it will shift it's position 10 pixels DOWN from where it would NORMALLY be. I'm sure you can imagine, the ability to shift an element around based on it's regular position is pretty useful. I find myself using this to line up form elements many times that have a tendency to not want to line up how I want them to.
There are two other things that happen when you set position: relative; on an element that you should be aware of. One is that it introduces the ability to use z-index on that element, which doesn't really work with statically positioned elements. Even if you don't set a z-index value, this element will now appear on top of any other statically positioned element. You can't fight it by setting a higher z-index value on a statically positioned element. The other thing that happens is it limits the scope of absolutely positioned child elements. Any element that is a child of the relatively positioned element can be absolutely positioned within that block.
Absolute. This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left bottom and right to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the <html> element itself meaning it will be placed relatively to the page itself.
The trade-off, and most important thing to remember, about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn't affect other elements. This is a serious thing to consider every time you use absolute positioning. It's overuse or improper use can limit the flexibility of your site.
Fixed. This type of positioning is fairly rare but certainly has its uses. A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn't change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled, creating an effect a bit like the old school "frames" days. Take a look at this site (update: dead link, sorry), where the left sidebar is fixed. This site is a perfect example for since it exhibits both good and bad traits of fixed positioning. The good is that it keeps the navigation present at all times on the page and it creates and interested effect on the page. The bad is that there are some usability concerns. On my smallish laptop, the content in the sidebar is cut off and there is no way from me to scroll down to see the rest of that content. Also if I scroll all the way down to the footer, it overlaps the footer content not allowing me to see all of that. Cool effect, can be useful, but needs to be thoroughly tested.

Tuesday, March 25, 2014

Access Property in Jquery/Javascript

Public Property Declared in .cs file

Public Property PId() As Integer
            Get
                Return _PId
            End Get
            Set(ByVal value As Integer)
                _PId= value
            End Set
        End Property

Public Property LocationID () As Integer
            Get
                Return _LocationID
            End Get
            Set(ByVal value As Integer)
                _LocationID = value
            End Set
        End Property

Note:-To access property it should be declared as Public

Access property in Jquery/Javascript:

var PatientID = eval('<%= PId%>');
var LocationID = eval('<%=LocationID %>');

Friday, February 21, 2014

Setting focus of control , immediately when the Ajax Modal Popup Open.

When we want to set the focus of say Textbox when the popup opens use setTimeout() method.

We normally set the focus in this way(this will not work):

function showmodalpopup(){
       var mpePopup=$find("<%ModalPopupID"%>);
       mpePopup.show()
       $("#txtID").focus();
}

But this will not work if we want to set focus of textbox immediately when the Modal Popup opens because the control(Textbox) is not render.So $("#txtID") will give us null value.

Lets work with this:

Use setTimeout() method

It will delay the method in milliseconds

function showmodalpopup(){
       var mpePopup=$find("<%ModalPopupID.ClientID"%>);
       mpePopup.show()
       setTimeout(txtsetfocus(),100);          //time is in milliseconds
}
function txtsetfocus(){
    $("#txtID").focus();
}

Getting Telerik Control Object which is in Item Template.

Lets consider that your RadComboBox is in ItemTemplate.

So here $find(<%=RadComboxID.ClientID%>); will not work as the control is in item template.

We need to first find the radcombobox
Get the id of it
And then use it with $find()
Now you can use the inbuilt telerik methods on the object of radcombobox

var RadComboxID= $("[id$='RadComboxID']").attr("id");

var objradcombobox=$find(RadComboxID); //Here you got the object of RadComboBox

objradcombobox.get_selectedvalue(); //use telerik methods with radcombox object

Getting Today's Date in Jquery/Javascript:

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!

var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd;
}
if (mm < 10) {
mm = "0" + mm;
}
today = dd + ':' + mm + ':' + yyyy;
console.log(today);

Today's Date In Jquery

Objects created of same control(element) are not same

Html control

Script starts from here

var obj1=$("#test");
var obj2=$("#test");
console.log(obj1==obj2);
if(obj1==obj2){ //this will be always false
console.log(true);
}

objects of same element

MyNotesThings