Learning Curve…

Posts Tagged ‘JQuery

1. Vertical Scoll position at the bottom of screen

<script type=”text/javascript”>

    function init() {

      var scnWid, scnHei;

      scnWid = document.body.clientWidth;

      scnHei = document.body.clientHeight;

      self.scrollTo(scnWid, scnHei);

    }

    window.onload = init;

  </script>

2. Vertical Scroll position based on a control in the screen

    Below example set scroll position at the start of grid’s header

<script type=”text/javascript”>

    function init() {

      var scnWid, scnHei;

      scnWid = getElementPosition(‘gridName’).left;

      scnHei = getElementPosition(‘gridName’).top;

     self.scrollTo(scnWid, scnHei);

    }

    function getElementPosition(elemID) {

      var offsetTrail = document.getElementById(elemID);

      var offsetLeft = 0;

      var offsetTop = 0;

      while (offsetTrail) {

        offsetLeft += offsetTrail.offsetLeft;

        offsetTop += offsetTrail.offsetTop;

        offsetTrail = offsetTrail.offsetParent;

      }

      return { left: offsetLeft, top: offsetTop };

    }

    window.onload = init;

  </script>

ASP.Net 4.0 has many improvements from previous versions such as

  • Web.config File Refactoring
  • Extensible Output Caching
  • Auto-Start Web Applications
  • Permanently Redirecting a Page by introducing a new method RedirectPermanent()
  • Shrinking Session State to shrink session data
  • Extensible Request Validation to avoid cross-site scripting (XSS) attacks by adding custom request-validation logic.
  • Object Caching and Object Caching Extensibility by introducing a new assembly “System.Runtime.Caching.dll”

ASP.Net 4.0 also introduced many new features such as

  • jQuery Included with Web Forms and MVC: Built in JQuery support
  • Content Delivery Network Support: Enables you to easily add ASP.NET Ajax and jQuery scripts to your Web applications. We can refence JQuery script over http like <script src=”http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js&#8221; >
  • New Meta tags under HTML Head tag
  • Enabling View State for Individual Controls
  • Extended Browser Capabilities
  • ASP.NET Chart Control to create visually compelling charts for complex statistical or financial analysis
  • New Field Templates for URLs and E-mail Addresses

JQuery selectors enable us to find one or more elements in your page’s document object model so we can apply all sorts of jQuery methods to these elements. Rather than inventing a new technique to find page elements, the designers of jQuery decided to use an existing CSS selector-based syntax:

1. The Universal Selector

The universal selector matches all elements in your page. To set the fontfamily of each element in a page to Arial, we can use this code:

$(‘*’).css(‘font-family’, ‘Arial’);

2. The ID Selector

This selector finds and retrieves an element by its id. For example, to set the CSS class for a button called Button1, we can use this code:

$(‘#Button1’).addClass(‘NewClassName’);

3.The Element Selector

This selector gets a reference to zero or more elements that match a specific tag name. For example, this code turns the text colour of all headings at level two to blue:

$(‘h2’).css(‘color’, ‘blue’);

4. The Class Selector

The class selector gets a reference to zero or more elements that match a specific class name.

Consider this HTML fragment:

<h1 class=”Highlight”>Heading 1</h1>

<h2>Heading 2</h2>

<p class=”Highlight”>First paragraph</p>

<p>Second paragraph</p>

Notice how two of the four elements have a CSS class called Highlight. The following jQuery code changes the background colour of the first heading and the first paragraph to red, leaving the other elements unmodified:

$(‘.Highlight’).css(‘background-color’, ‘red’);

5. Grouped and Combined Selectors

We can group and combine selectors. The following grouped selector changes the text colour of all h1 and h2 elements in your page:

$(‘h1, h2’).css(‘color’, ‘orange’);

With a combined selector, you can find specific elements that fall within some others. For example, the following jQuery touches just the paragraphs that fall within the MainContent element, leaving all other paragraphs alone:

$(‘#MainContent p’).css(‘border’, ‘1px solid red’);


Author

Learning days (Calendar)

June 2017
M T W T F S S
« Jun    
 1234
567891011
12131415161718
19202122232425
2627282930  

Knowledge Bank (Archives)

I am on Twitter

Blog Stats

  • 498,681 hits

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 43 other followers

%d bloggers like this: