Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
- <script>
- function myFunction() {
- $("#h01").html("Hello jQuery");
- }
- $(document).ready(myFunction);
- $(document).ready(function() {
- $("#hide").click(function() {
- $(".p_class").hide();
- });
- });
- $(document).ready(function() {
- $("#show").click(function() {
- $(".p_class").show();
- });
- });
- $(document).ready(function() {
- $("#toggle").click(function() {
- $(".p_id").toggle();
- });
- });
- $(document).ready(function() {
- $("button").click(function() {
- $(this).hide();
- });
- });
- $(document).ready(function() {
- $(".external .internal").click(function() {
- $(this).parents(".external").hide("slow");
- });
- });
- $(document).ready(function() {
- $("#p1").mousedown(toggle);
- $("#p1").mouseup(toggle);
- });
- $(document).ready(function() {
- $("#flip").click(function() {
- $("#panel").slideToggle("fast");
- });
- });
- $(document).ready(function() {
- var div = $("#animatedDiv");
- div.animate({
- height : '300px',
- opacity : '0.4'
- }, "slow");
- div.animate({
- fontSize : '30pt'
- }, "slow");
- div.animate({
- width : '300px',
- opacity : '0.8'
- }, "fast");
- div.animate({
- height : '100px',
- opacity : '0.4'
- }, "slow");
- div.animate({
- width : '100px',
- opacity : '0.8'
- }, "fast");
- div.animate({
- height : '300px',
- opacity : '0.4'
- }, "slow");
- div.animate({
- width : '300px',
- opacity : '0.8'
- }, "fast");
- div.animate({
- height : '100px',
- opacity : '0.4'
- }, "slow");
- div.animate({
- width : '100px',
- opacity : '0.8'
- }, "fast");
- div.animate({
- height : '300px',
- opacity : '0.4'
- }, "slow");
- div.animate({
- width : '300px',
- opacity : '0.8'
- }, "fast");
- div.animate({
- height : '100px',
- opacity : '0.4'
- }, "slow");
- div.animate({
- width : '100px',
- opacity : '0.8'
- }, "fast");
- div.animate({
- height : '300px',
- opacity : '0.4'
- }, "slow");
- div.animate({
- width : '300px',
- opacity : '0.8'
- }, "fast");
- div.animate({
- height : '100px',
- opacity : '0.4'
- }, "slow");
- div.animate({
- width : '100px',
- opacity : '0.8'
- }, "fast");
- div.animate({
- height : '300px',
- opacity : '0.4'
- }, "slow");
- div.animate({
- width : '300px',
- opacity : '0.8'
- }, "fast");
- div.animate({
- height : '100px',
- opacity : '0.4'
- }, "slow");
- div.animate({
- width : '100px',
- opacity : '0.8'
- }, "fast");
- });
- $(document).ready(function() {
- $("#stop").click(function() {
- $("div").stop(true, true);
- });
- });
- $(document).ready(function() {
- $("#contentButton").click(function() {
- alert("Zawarto??: " + parseInt($("#skladnik1").val() + $("#skladnik2").val()));
- });
- });
- function toggle() {
- $("#div1").fadeToggle();
- $("#div2").fadeToggle("slow");
- $("#div3").fadeToggle(3000);
- }
- </script>
- <meta charset="utf-8">
- <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
- Remove this if you use the .htaccess -->
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>new_file</title>
- <meta name="description" content="">
- <meta name="author" content="56327">
- <meta name="viewport" content="width=device-width; initial-scale=1.0">
- <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
- <link rel="shortcut icon" href="/favicon.ico">
- <link rel="apple-touch-icon" href="/apple-touch-icon.png">
- <style>
- #panel, #flip {
- padding: 5px;
- text-align: center;
- background-color: #e5eecc;
- border: solid 1px #c3c3c3;
- }
- #panel {
- padding: 50px;
- display: none;
- }
- </style>
- <div id="flip">
- Kliknij, ?eby wy?wietli? panel
- </div>
- <div id="panel">
- Witaj!
- </div>
- </head>
- <body>
- <div>
- <header>
- <h1 id="h01">new_file</h1>
- <h2>This is a heading</h2>
- <p class="p_id">
- This is paragraph.
- </p>
- <p class="p_id">
- This is another paragraph.
- </p>
- <p class="p_class">
- Paragraf pierwszy.
- </p>
- <p class="p_class">
- Paragraf drugi.
- </p>
- <button id="hide">
- Click me
- </button>
- <button id="show">
- Don't click me!
- </button>
- <button id="toggle">
- Toggle
- </button>
- </header>
- <div class="external">
- <p>
- Po klikni?ciu przycisku panel zostanie ukryty
- </p>
- <button class="internal">
- Ukryj panel
- </button>
- </div>
- <div class="external">
- <p>
- Po klikni?ciu przycisku panel zostanie ukryty
- </p>
- <button class="internal">
- Ukryj panel
- </button>
- </div>
- <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
- <br>
- <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
- <br>
- <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
- <p id="p1">
- Wskazanie paragrafu spowoduje wy?wietlenie elementów
- </p>
- <button id="stop">
- zatrzymaj animacj?
- </button>
- <div id="animatedDiv" style="background:#98bf21; height:100px;width:100px;position:relative;">
- OK
- </div>
- <p id="par1" >
- <b><i>Oprogarmowanie komputerowe</i></b>
- </p>
- <button id="contentButton">
- contentButton
- </button>
- <input type="text" id="skladnik1" value="123" />
- <input type="text" id="skladnik2" value="123" />
- <nav>
- <p>
- <a href="/">Home</a>
- </p>
- <p>
- <a href="/contact">Contact</a>
- </p>
- </nav>
- <div>
- </div>
- <footer>
- <p>
- © Copyright by 56327
- </p>
- </footer>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement