Rss Feed Like Us on facebook Google Plus
Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

November 18, 2013

Retrieve Data from Client Machine DataBase on Web using Javascript Active-X object

To Retrieve data from Local database you can use JavaScript simulation using Active-X
object on your Asp.net Website.

If all of your users are on Windows computers, you could use ADO or ODBC to connect to a corresponding database. checkout the example

Limitations:
This script will work only on Internet Explorer

EXAMPLE

SCRIPT:

<script id="clientEventHandlersJS" type="text/javascript">
        function GetData() {
            var connection = new ActiveXObject("ADODB.Connection");
            var connectionstring = "Data Source=AJIT-LAPTOP\\sqlexpress;Initial Catalog=user;User ID=ajit;Password=ajit;Provider=SQLOLEDB";
            connection.Open(connectionstring);
            if (connection) {
                var rs = new ActiveXObject("ADODB.Recordset");
    //FOR Single Record
                var userid = document.getElementById("txtuserid").value;
                rs.open("select password from userdetail where userid='" + userid + "'", connection);
                if (!rs.EOF) {
                    var c1 = rs.fields("userid").value;
                    alert(c1);
                }
                else {
                    alert("Record Not Found");
                }
              //For Multiple Records
          rs.Open ("select col1,col2 from tbl_test", conn,0,1);
          while (! rs.EOF)
          {
             c1 = rs.fields("col1").value;
             c2 = rs.fields("col2").value;
             document.write(c1+' - '+c2+'<br>');
             rs.MoveNext ();
          }
                rs.close();
                rs = null;
                connection.close;
                return true;
            }
            else {
                return false;
            }
        }
    </script>

HTML:

<form id="form1" runat="server">
    <table>
        <tr>
            <td>
               USER ID: <input type="text" id="txtuserid" runat="server" />
                <input type="button" id="btn" onclick="javascript:return GetData()" style="width: 80px;
                    height: 30px;" value="OK" runat="server" />
            </td>
        </tr>
    </table>
    </form>



Read More

September 4, 2013

Semantics : HTML5 Features

Semantics is one of the most distinctive features of the Web Platform versus other application platforms. Developers usually ignore or de-prioritize such feature but the mastery of it can bring many benefits to our projects.

The Web is text and text has a meaning. Ultimately the content that our browsers read is pure text. Web sites and web applications have been created in an ecosystem where text based content is linkable, searchable and mashable. In the open web scenario our content can be shown, fed and remixed by third parties, search engines and accessibility tools. All these benefits don't come for free. 

Automated tools can only do half of the job at recognizing the nature of the content. The better job the developer does at marking the right semantics of the content the easier will be for the rest of the agents to deal with it. HTML5 provides a series of tools to make developers life easier too:
  • New media elements.
  • New structural elements.
  • New semantics for internationalization.
  • New link relation types.
  • New attributes.
  • New form types.
  • New microdata syntax for additional semantics.

New Semantic Elements in HTML5

Many of existing web sites today contains HTML code like this: <div id="nav">, <div class="header">, or <div id="footer">, to indicate navigation links, header, and footer.

HTML5 offers new semantic elements to clearly define different parts of a web page:
  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <figcaption>
  • <figure>
  • <footer>



HTML5 <section> Element

The <section> element defines a section in a document.
According to W3C,  "A section is a thematic grouping of content, typically with a heading."

Example:
<section>
  <h1>TECH IMPULSION</h1>
  <p>"A Comprehensive technology blog with great articles."</p>
</section>


HTML5 <article> Element

The <article> element specifies independent, self-contained content.

"An article should make sense on its own and it should be possible to distribute it independently from the rest of the web site."

Examples of where an <article> element can be used:

  •     Forum post
  •     Blog post
  •     News story
  •     Comment

Example:
<article>
  <h1>Microsoft Launches Internet Explorer 10</h1>
  <p>Windows Internet Explorer 10 (abbreviated as IE10) was released to
  the  public by Microsoft.....</p>
</article>

HTML5 <nav> Element

The <nav> element defines a set of navigation links.

"The <nav> element is intended for large blocks of navigation links. However, not all links in a document should be inside a <nav> element!"


Example:
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

HTML5 <aside> Element

"The <aside> element defines some content aside from the content it is placed in (like a sidebar)."

The aside content should be related to the surrounding content.


Example:
<p>My family and I visited The Epcot center this summer.</p>
 
<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

HTML5 <header> Element

The <header> element specifies a header for a document or section.

"The <header> element should be used as a container for introductory content."

You can have several <header> elements in one document.

The following example defines a header for an article:

Example:
<article>
  <header>
    <h1>Internet Explorer 9</h1>
    <p><time pubdate datetime="2011-03-15"></time></p>
  </header>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the  public on March 14, 2011 at 21:00 PDT.....</p>
</article>

HTML5 <footer> Element

The <footer> element specifies a footer for a document or section.

A <footer> element should contain information about its containing element.

"A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc."

You can have several <footer> elements in one document.

Example:
<footer>
  <p>Posted by: Azziet Singh</p>
  <p><time pubdate datetime="2012-03-01"></time></p>
</footer>

HTML5 <figure> and <figcaption> Elements

"The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc."

While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.

The <figcaption> tag defines a caption for a <figure> element.

The <figcaption> element can be placed as the first or last child of the <figure> element.

Example:
<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>



Read More

September 3, 2013

HTML5 Introduction

HTML5 is the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability.
                                                                                                            W3.org

HTML5 is the ubiquitous platform for the web. Whether you're a mobile web developer, an enterprise with specific business needs, or a serious game dev looking to explore the web as a new platform, HTML5 has something for you! Choose your path: 
                                                                                                          HTML5 Rocks


HTML5 - New Features

Some of the most interesting new features in HTML5:
    HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Multimedia, Semantics, and Offline & Storage
  • The <canvas> element for 2D drawing
  • The <video> and <audio> elements for media playback
  • Support for local storage
  • New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
  • New form controls, like calendar, date, time, email, url, search

Browser Support for HTML5

Mozilla Firefox, Google Chrome, Opera , Safari , IE 9+




Read More

August 10, 2013

Use of HTML5 Download Attribute

As we know, there are many files that are not downloaded directly. For example: images, webpages, PDF files, music files, etc. We have to right click on images and then click on Save Image to save an image file. But if I want to download an image file directly, then I have to use the download attribute.
<a href="Image.jpeg" download>Download image</a>
Simply type download in the <a> anchor tag. By using this, when we click on download image, the image starts downloading. The same method is used for downloading PDF, webpage files (HTML), etc. 

If we want to give a new name to the download file, then we have to write:
<a href="Folder/myimagehavenoname.png" download="myImage">Download image</a> 
Here, we write download="myImage". When we click on Download image, then an image file is downloaded with  name myImage with a .png extension. The browser automatically detects the correct file extension and adds it to the downloaded file. So there is no need to add the file extension in the download attribute.

CHECK BROWSER SUPPORT :

For checking our browser support download attribute, we have to use JavaScript:
var a=document.createElement('a');
if(typeof a.download !="undefined")
{
    document.write('Download attribute supported');
}
else
{
    document.write('Download attribute not supported');
}
Currently, Chrome 14+ and Firefox 20+ supports the download attribute (tried and tested by me on Chrome).

I am including the .zip file for downloading in which I am showing the use of the download attribute as well as checking browser support for the download attribute.

Read More

June 10, 2013

CSS3 Media Queries for Screen

CSS3 @media Screen  Queries..
 CSS3 added support for the media="screen" way of defining which stylesheet to use for which representation of the data. CSS3 adds a new feature to this functionality, by adding media queries.
Basically, this means you can change stylesheets based on for instance the width and height of the viewport. In a broader sense, this means as the spec puts it: “by using Media Queries, presentations can be tailored to a specific range of output devices without changing the content itself.”
Below are two tests, for min-width and max-width, currently only functional (and thus green) in Safari 3, Opera, and Firefox 3.1 (Alpha). This is however the future of web development, and could make building pages that are usable in both the mobile as the normal web a lot easier.
min-width 640px
max-width 1100px

The CSS which should color the two divs above is as follows:
@media all and (min-width: 640px) { #media-queries-1 { background-color: #0f0; } } @media screen and (max-width: 2000px) { #media-queries-2 { background-color: #0f0; } }
MEDIA QUERIES FOR STANDARD DEVICES
/* Smartphones (portrait and landscape) ----------- */
 @media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
 @media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
 @media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
 @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
 @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
 @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
 @media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
 @media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
 @media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
} 
Read More

© 2011-2016 Techimpulsion All Rights Reserved.


The content is copyrighted to Tech Impulsion and may not be reproduced on other websites.