Free carousel for many UI,Page custom design-OWL Carousel

Ref Link :  http://owlgraphic.com/owlcarousel/How To Use
1. Load jQuery and include Owl Carousel plugin files
To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included.

1. <!-- Important Owl stylesheet -->

1. <link rel="stylesheet" href="owl-carousel/owl.carousel.css">

1.  

1. <!-- Default Theme -->

1. <link rel="stylesheet" href="owl-carousel/owl.theme.css">

1.  

1. <!-- jQuery 1.7+ -->

1. <script src="jquery-1.9.1.min.js"></script>

1.  

1. <!-- Include js plugin -->

1. <script src="assets/owl-carousel/owl.carousel.js"></script>

2. Set up your HTML
You don't need any special markup. All you need is to wrap your divs(owl works with any type element) inside the container element <div class="owl-carousel">. Class "owl-carousel" is mandatory to apply proper styles that come from owl.carousel.css file.

1. <div id="owl-example" class="owl-carousel">

1. <div> Your Content </div>

1. <div> Your Content </div>

1. <div> Your Content </div>

1. <div> Your Content </div>

1. <div> Your Content </div>

1. <div> Your Content </div>

1. <div> Your Content </div>

1. ...

1. </div>

3. Call the plugin
Now call the Owl initializer function and your carousel is ready.

1. $(document).ready(function() {

1.  

1. $("#owl-example").owlCarousel();

1.  

1. });

Demo

Touch

Can touch this

Grab

Can grab this

Responsive

Fully responsive!

HORIZANTAL list with menu cat

HORIZANTAL MENU LEFT RIGHT NOT ADD

<html>
<head>
<script type="text/javascript" src="menuscroll/jquery.min.js"></script>
<script type="text/javascript">
/*var previousElement = null;
function changeClass (newElement) {
     if (previousElement != null) {
          previousElement.className = "";
     }

     newElement.className = "selected";
     previousElement = newElement;
}

// just add a call to this function on the load of the page
function onload() {
     lis = document.getElementById("nav").getElementsByTagName("a");
     for (var i=0; i<lis.length; i++) {
          if (lis[i].className == "selected")
            previousElement = lis[i];
     }
}*/
$(document).ready( function()
{
    $("a").click( function()
    {
        $(".selected").removeClass("selected");
        $(this).addClass("selected");
    } );

$("#left").click( function()
    {
       alert('left');
   $('#left').style.background-color='#100';
    } );

$("#right").click( function()
    {
       alert('right');
  $('#right').style.background-color='#100';
 
    } );
});
</script>
<style type="text/css">
.selected {
    background: #cccccc;
border-bottom:2px solid #000;
}
#nav
{
width:200px;
overflow:hidden;
content: "»";
margin-right: 6px;

}
ul
{
width:400px;
overflow:hidden;
top:0;
}
li
{
float:left;
padding-right:5px;
}
#left
{
postion:relative;
float:left;
}
#right
{
postion:relative;
float:right
}
</style>
</head>
<body onload="onload()">
<div id="nav">

    <ul><label id="left"><<</label> <label id="right">>></label>

        <li><a href="#" onclick="changeClass(this)" class="selected">Main</a></li>
        <li><a href="#" onclick="changeClass(this)">Downloads</a></li>
        <li><a href="#" onclick="changeClass(this)">News</a></li>

        <li><a href="#" onclick="changeClass(this)">Forums</a></li>
        <li><a href="#" onclick="changeClass(this)">Proposals</a></li>
    </ul>
</div>
</body>
</html>

Simple client side Pagination using jQuery

Simple client side Pagination using jQuery

http://www.akshitsethi.me/simple-client-side-pagination-using-jquery/

HTML5/ CSS3 Practical guide

A Beginner’s Guide to HTML & CSS

Learn how to build beautiful & intuitive websites.

A Practical Guide to HTML & CSS has one goal – to teach people how to build beautiful and intuitive websites by way of clear and organized lessons. The guide covers a variety of topics within web design and development, ranging from beginner to advanced skill levels.

A Beginner’s Guide to TML & CSS

Thanks for Easy review: http://learn.shayhowe.com/

A Beginner’s Guide to HTML & CSS is a simple &comprehensive guide dedicated to helping beginners learn HTML & CSS.

1. 1Terminology, Syntax, & Introduction
2. 2Elements & Semantics
3. 3Box Model & Positioning
4. 4Typography
5. 5Backgrounds & Gradients
6. 6Unordered, Ordered, & Definition Lists
7. 7Images, Audio, & Video
8. 8Building Forms
9. 9Organizing Data with Tables
10. 10Coding Practices & Additional Resources

A BEGINNER’S GUIDE TO HTML & CSS

An Advanced Guide to HTML & CSS

An Advanced Guide to HTML & CSS takes a deeper look at front-end design & development, teaching the latest for any designer.

1. 1Performance & Organization
2. 2Detailed Positioning
3. 3Complex Selectors
4. 4Responsive Web Design
5. 5Preprocessors
6. 6jQuery
7. 7Transforms
8. 8Transitions & Animations
9. 9Feature Support & Polyfills
10. 10Extending Semantics & Accessibility

IPAD Disable Browser Bounce In IOS Browser

Disable Browser Bounce In IOS Browser

When your browser in the iPad or iPhone browser you will notice when you reach the top or bottom of the page you get what i call the browser bounce. This is when the page finishes but the browser carry’s on and bounces back down. In a recent iPad web App i have been developing i found it pretty annoying, i want the web App to feel like a web App and not like your in the browser. With this little code snippet you can disable it.

paste in <head> tag or common javascript file for WebApps

<script type="text/javascript">
$(document).bind(
  'touchmove',
  function(e) {
    e.preventDefault();
  }
);
</script>

Thanks for Ref:
http://www.photoshop-plus.co.uk/2012/06/26/ios-browser-bounce-how-to-disable-it/


POSTED ANS :2

<meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 <meta name="viewport" content="width=device-width, user-scalable=no" />

up vote7down voteaccepted


This will prevent scrolling on the whole page
document.ontouchmove = function(e) {e.preventDefault()};

In your case, where you want some divs to be scrollable, and some not to, you should be able to catch the event before it gets to the document
scrollableDiv.ontouchmove = function(e) {e.stopPropagation()};

HTML / HTML5 useful links

W3School HTML Important parts

start at => http://www.w3schools.com/html/

history of html =>http://www.w3schools.com/html/html_intro.asp

Global attribute =>http://www.w3schools.com/tags/ref_standardattributes.asp

Html text format=> http://www.w3schools.com/html/html_formatting.asp

HTML head Elements http://www.w3schools.com/html/html_head.asp

Style sheet http://www.w3schools.com/html/html_css.asp

Table http://www.w3schools.com/html/html_tables.asp

Html form elements http://www.w3schools.com/html/html_forms.asp

Iframes : http://www.w3schools.com/html/html_iframe.asp

Html scripts (noscripts) http://www.w3schools.com/html/html_scripts.asp

Some Useful HTML Character Entities http://www.w3schools.com/html/html_entities.asp

Mathematical Symbols Supported by HTML

http://www.w3schools.com/html/html_symbols.asp

 

html url http://www.w3schools.com/html/html_urlencode.asp

 

html xhtml: http://www.w3schools.com/html/html_xhtml.asp

 

 

 

HTML5:

Html5 into: http://www.w3schools.com/html/html5_intro.asp

Html5 new tag:removed http://www.w3schools.com/html/html5_new_elements.asp

Semantics:

http://www.w3schools.com/html/html5_semantic_elements.asp

html5 new input type:

http://www.w3schools.com/html/html5_form_input_types.asp

html5 new form attr:

http://www.w3schools.com/html/html5_form_attributes.asp

canvas:

http://www.w3schools.com/html/html5_canvas.asp

svg:

http://www.w3schools.com/html/html5_svg.asp

video:

http://www.w3schools.com/html/html5_video.asp

audio:

http://www.w3schools.com/html/html5_audio.asp

geolocation:

http://www.w3schools.com/html/html5_geolocation.asp

drog and drop

http://www.w3schools.com/html/html5_draganddrop.asp

web storage: (local storage, seesion storage)

http://www.w3schools.com/html/html5_webstorage.asp

cache:

http://www.w3schools.com/html/html5_app_cache.asp

web work:

http://www.w3schools.com/html/html5_webworkers.asp

server side events:

http://www.w3schools.com/html/html5_serversentevents.asp

HTML PLUG-IN addverdise adding:

http://www.w3schools.com/html/html_object.asp

html tags:

http://www.w3schools.com/tags/default.asp

html events:

http://www.w3schools.com/tags/ref_eventattributes.asp

html canvas:

http://www.w3schools.com/tags/ref_canvas.asp

html tags summary support:

http://www.w3schools.com/tags/ref_html_dtd.asp

html color name:

http://www.w3schools.com/tags/ref_colornames.asp

iso language code:

http://www.w3schools.com/tags/ref_language_codes.asp

http status message:

http://www.w3schools.com/tags/ref_httpmessages.asp

http methods:

http://www.w3schools.com/tags/ref_httpmethods.asp

html Examples:

http://www.w3schools.com/html/html_examples.asp

 

 

 

 

 

 

 

 

 

 

 

 

 

HTML free editor -- Microsoft

Microsoft Expression Web 4 (Free Version)

Share

• 
• 

http://www.microsoft.com/en-in/download/details.aspx?id=36179#  Thanks for links

Language:

English

Download

Expression Web is a full-featured professional tool for designing, developing, and publishing compelling, feature-rich websites that conform to web standards.

• Details

  Version:	Date Published:
  4.0.1460.0	20-12-2012
  File name:	File size:
  Web_Trial_en.exe	98.7 MB

  Expression Web 4 gives you the tools you need to produce high-quality, standards-based Web sites: built-in support for today’s Web standards, sophisticated CSS design capabilities, and visual diagnostic tools. Whether you work with PHP, HTML/XHTML, CSS, JavaScript, ASP.NET or ASP.NET AJAX, Expression Web makes it faster and easier to create and maintain exceptional web sites.
  
  Please note: This free version of Expression Web is not eligible for Microsoft technical support and is community support. For more information, visit the Expression Community site.
  
  For additional language downloads for Expression Web, please select one of the following:
  • German
  • Spanish
  • French
  • Italian
  • Japanese
  • Korean
  • Simplified Chinese
  • Traditional Chinese

• System Requirements

  Supported Operating System

  Windows 7, Windows 8, Windows Vista, Windows XP

  • PC with 1 GHz or faster processor
  • 1 GB of RAM or more
  • 2 GB or more of available hard-disk space
  • .NET Framework 4.0
  • Silverlight 4.0
  • Support for Microsoft DirectX® 9.0 graphics with Windows Vista Display Driver Model (WDDM) Driver, 128 MB of graphics RAM or more, Pixel Shader 3.0 in hardware, 32-bits per pixel
  • DVD compatible drive
  • 1024 x 768 or higher resolution monitor with 24-bit color
  • Internet functionality requires Internet access (additional fees may apply)
  • Some product features require FireFox 3.0 or later, Internet Explorer 8
  Actual requirements and product functionality may vary based on your system configuration and operating system.

• Install Instructions

  1. Click Download (above).
  2. In the Install dialog box, click Run.

• Related Resources

  • Microsoft Expression Community website
  • Expression Web Forums