Friday, 30 December 2011

Disappear a pane - jquery

Disappear a pane when you click.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Disappear</title>

<script type="text/javascript" src="../html/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
                          
    $(".pane .delete").click(function(){
        $(this).parents(".pane").animate({ opacity: 'hide' }, "slow");
    });

});
</script>

<style type="text/css">
body {
    margin: 10px auto;
    width: 470px;
}
h3 {
    margin: 0;
    padding: 0 0 .3em;
}
p {
    margin: 0;
    padding: 0 0 .5em;
}
.pane {
    background:#999966;
    padding: 10px 20px 10px;
    position: relative;
    border-top: solid 2px #c4df9b;
}
.pane .delete { color:#CC0000; text-decoration:underline;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}
</style>
</head>

<body>
<div class="pane">
    <h3> heading1</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
    <div class="delete">Click for Disappear</div>
</div>
<div class="pane">
    <h3> heading2</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
    <<div class="delete">Click for Disappear</div>
</div>
<div class="pane">
    <h3>heading3</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
    <div class="delete">Click for Disappear</div>
</div>
<div class="pane">
    <h3> heading4</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
    <div class="delete">Click for Disappear</div>
</div>
<div class="pane">
    <h3> heading5</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
    <div class="delete">Click for Disappear</div>
</div>
</body>
</html>
Posted by at No comments:
Labels:

Wednesday, 28 December 2011

Example of Sprite method in a menu

Example: Sprite method in a menu


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sprite</title>
<link href="css/13aug_sprite.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery_learn/script/jquery-1.2.6.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
    $(".nav1 ul li.aboutlist a").hover(function(){
   

        $(this).next("div").slideDown();
       
    },
    function(){
    $(this).next("div").slideUp();   
    }
    );
});
</script>
</head>

<body>
<div class="container">
<div class="nav">
<ul>
<li><a href="#" class="home"> home</a></li>
<li><a href="#" class="why"> why</a></li>
<li><a href="#" class="community"> community</a></li>
<li><a href="#" class="video"> video</a></li>

<li><a href="#" class="support"> support</a></li>
<li><a href="#" class="contact"> contact</a></li>
</ul>
</div>

</body>
</html>
Posted by at No comments:
Labels:

change background of each cell

Example: change background of each cell

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>change background of each cell</title>

<script type="text/javascript" src="script/jquery-1.2.6.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
    $(".tab li").hover(function() {
        $(this).css('background-color','red');
    }, function() {
        $(this).css('background-color','#ccc');
    });
   
    $(".menu li a").click(function() {
        $(".menu li a").css('background-color','');
        $(this).css('background-color','red');   
        return false;   
    });
});
</script>
<style type="text/css">
body {
    margin: 10px auto;
    width: 570px;
    font: 75%/120% Arial, Helvetica, sans-serif;
}
.menu {
    margin: 100px 0 0;
    padding: 0;
    list-style: none;
}
.menu li {
    padding: 0;
    margin: 0 2px;
    float: left;
    position: relative;
    text-align: center;
}
.menu a {
    padding: 14px 10px;
    display: block;
    color: #000000;
    width: 144px;
    text-decoration: none;
    font-weight: bold;
   
    border:1px solid red;
}
.menu li em {
    background: url(images/hover.png) no-repeat;
     border:1px solid red;
    width: 180px;
    height: 45px;
    position: absolute;
    top: -85px;
    left: -15px;
    text-align: center;
    padding: 20px 12px 10px;
    font-style: normal;
    z-index: 2;
    display: none;
}
</style>
</head>

<body>
<h3>change background of each cell</h3>
<ul class="menu tab">
    <li>
        <a href="#">Web Designer Wall</a>       
        <em style="top: -85px; display: none;">A wall of design ideas, web trends, and tutorials</em>
    </li>
    <li>
        <a href="#">Best Web Gallery</a>
        <em style="top: -85px; display: none;">Featuring the best CSS and Flash web sites</em>
    </li>
    <li>
        <a href="#">N.Design Studio</a>
        <em style="top: -85px; display: none;">Blog and design portfolio of WDW designer, Nick La</em>
    </li>
</ul>
</body>
</html>
Posted by at No comments:
Labels:

Thursday, 15 December 2011

jQuery AJAX

  • jQuery has a rich library of methods (functions) for AJAX development.
  • AJAX = Asynchronous JavaScript and XML.

    AJAX is a technique for creating fast and dynamic web pages.

    AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
  • Query provides a rich set of methods for AJAX web development.
  • With jQuery AJAX, you can request TXT, HTML, XML or JSON data from a remote server using both HTTP Get and HTTP Post.
  • And you can load remote data directly into selected HTML elements of your web page!
  • The jQuery load() method is a simple (but very powerful) AJAX function. It has the following syntax: $(selector).load(url,data,callback)
    Use the selector to define the HTML element(s) to change, and the url parameter to specify a web address for your data.

     Only if you want to send data to the server, you need to use the data parameter. Only if you need to trigger a function after completion, you will use the callback parameter.
     
    Example:
    <html>
    <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $("div").load('test1.txt');
      });
    });
    </script>
    </head>
    <body>

    <div><h2>Let AJAX change this text</h2></div>
    <button>Change Content</button>

    </body>
    </html>

    Low Level AJAX

    $.ajax(options) is the syntax of the low level AJAX function.

    $.ajax offers more functionality than higher level functions like load, get, and post, but it is also more difficult to use.
    The option parameter takes name|value pairs defining url data, passwords, data types, filters, character sets, timeout and error functions.

    Example:
    <html>
    <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("button").click(function(){
      $.ajax({url:"test1.txt", success:function(result){
        $("div").html(result);
      }});
    });});
    </script>
    </head>
    <body>

    <div><h2>Let AJAX change this text</h2></div>
    <button>Change Content</button>
    </body>
    </html>

    jQuery AJAX Methods From This Page:

    Request Description
    $(selector).load(url,data,callback) Load remote data into selected elements
    $.ajax(options) Load remote data into an XMLHttpRequest object


Posted by at No comments:
Labels:

jQuery CSS Manipulation

jQuery css() Method

jQuery has one important method for CSS manipulation: css()
The css() method has three different syntaxes, to perform different tasks.
  • css(name) - Return CSS property value
  • css(name,value) - Set CSS property and value
  • css({properties}) - Set multiple CSS properties and values

1. Return CSS Property

Use css(name) to return the specified CSS property value of the FIRST matched element:

syntax:

$(this).css("background-color"); 
 
Example:

 <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").click(function(){
    $("p").html($(this).css("background-color"));
  });
});
</script>
</head>

<body>
<div style="width:100px;height:100px;background:#ff0000"></div>
<p>Click in the red box to return the background color.</p>
</body>
</html>

2. Set CSS Property and Value

Use css(name,value) to set the specified CSS property for ALL matched elements:

syntax:

$("p").css("background-color","yellow"); 
 
Example:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("background-color","blue");
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html> 

3.Set Multiple CSS Property/Value Pairs

Use css({properties}) to set one or more CSS property/value pairs for the selected elements:

syntax:
 
$("p").css({"background-color":"yellow","font-size":"200%"}); 
 
Example:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").css({"background-color":"blue","font-size":"200%"});
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

 Size Manipulation Examples:

jQuery has two important methods for size manipulation.
  • height()
  • width()

 


1. The height() method sets the height of all matching elements:
 
Syntax:
 
$("#div1").height("200px"); 
 
 Example:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").height("200px");
  });
});
</script>
</head>

<body>
<div id="div1" style="background:yellow;height:100px;width:100px">HELLO</div>
<div style="background:red;height:100px;width:100px">W3SCHOOLS</div>
<button>Click me</button>
</body>
</html>

 
1. The width() method sets the widthof all matching elements: 

Syntax:

$("#div2").width("300px"); 
 
Example:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#div2").width("300px");
  });
});
</script>
</head>

<body>
<div style="background:yellow;height:100px;width:100px">HELLO</div>
<div id="div2" style="background:red;height:100px;width:100px">W3SCHOOLS</div>
<button>Click me</button>
</body>
</html>

 

jQuery CSS Methods

CSS Properties Description
1. $(selector).css(name) Get the style property value of the first matched element
2.$(selector).css(name,value) Set the value of one style property for matched elements
3. $(selector).css({properties}) Set multiple style properties for matched elements
4. $(selector).height(value) Set the height of matched elements
5. $(selector).width(value) Set the width of matched elements
Posted by at No comments:
Labels:

jQuery HTML Manipulation


1. Changing HTML Content

jQuery contains powerful methods (functions) for changing and manipulating HTML elements and attributes.

  • $(selector).html(content)

The html() method changes the contents (innerHTML) of matching HTML elements.

syntax:

$("p").html("manipulate"); 

Example:

 <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").html("manipulate");
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

2. Adding HTML content

The append() method appends content to the inside of matching HTML elements.
  • $(selector).append(content)

The prepend() method "prepends" content to the inside of  matching HTML elements.
  • $(selector).prepend(content)

syntax:

$("p").append(" addcontent"); 

Example: 

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").append(" <b>for addcontent</b>.");
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

3. Adding HTML content: after(), before()

The after() method inserts HTML content after all matching elements.
  • $(selector).after(content)
The before() method inserts HTML content before all matching elements. 
  • $(selector).before(content)

syntax:

$("p").after(" content-add.");

Example:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").after(" to add content.");
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

jQuery HTML Manipulation Methods:

Function Description
1. $(selector).html(content) Changes the (inner) HTML of selected elements
2. $(selector).append(content) Appends content to the (inner) HTML of selected elements
3. $(selector).after(content) Adds HTML after selected elements 

Posted by at No comments:
Labels:

jQuery Callback Functions


  • A callback function is executed after the current animation is 100% finished.
  • JavaScript statements are executed line by line. However, with animations, the next line of code can be run even though the animation is not finished. This can create errors.
  • To prevent this, you can create a callback function.
  • A callback function is executed after the current animation (effect) is finished.

jQuery Callback Example

The callback parameter is a function to be executed after the hide effect is completed:
  • $(selector).hide(speed,callback)

Syntax:

$("p").hide(1000,function(){
  alert("The paragraph is now hidden");
});

  Example:
 
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000,function(){
      alert("The paragraph is now hidden");
    });
  });
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>

Example without Callback:

Without a callback parameter, the alert box is displayed before the hide effect is completed:
 
  syntax:
 
 $("p").hide(1000);
alert("The paragraph is now hidden");
 
   Example:

 


<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
    alert("The paragraph is now hidden");
  });
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>


Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)