Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8" />
- <title>Задача 1</title>
- <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
- <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
- <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
- <style>
- .ui-tooltip, .arrow:after {
- background: black;
- border: 2px solid white;
- }
- .ui-tooltip {
- padding: 10px 20px;
- color: white;
- border-radius: 20px;
- font: bold 14px "Helvetica Neue", Sans-Serif;
- text-transform: uppercase;
- box-shadow: 0 0 7px black;
- }
- .arrow {
- width: 70px;
- height: 16px;
- overflow: hidden;
- position: absolute;
- left: 50%;
- margin-left: -35px;
- bottom: -16px;
- }
- .arrow.top {
- top: -16px;
- bottom: auto;
- }
- .arrow.left {
- left: 20%;
- }
- .arrow:after {
- content: "";
- position: absolute;
- left: 20px;
- top: -20px;
- width: 25px;
- height: 25px;
- box-shadow: 6px 5px 9px -9px black;
- -webkit-transform: rotate(45deg);
- -moz-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
- -o-transform: rotate(45deg);
- transform: rotate(45deg);
- }
- .arrow.top:after {
- bottom: -20px;
- top: auto;
- }
- </style>
- <script>
- $(document).ready(function(){
- $(document).change(function(){
- if($("#effect").val() == "myAnimation"){
- $( "#ime" ).tooltip({
- open: function (event, ui) {
- ui.tooltip.animate({
- left: 890
- }, 800,
- function () {
- ui.tooltip.animate({
- left: 721.5
- }, 800);
- });}
- ,
- hide: {
- effect: "fade",
- duration: 100
- }
- });
- }
- else {
- $( "#ime" ).stop(true, true);
- $( "#ime" ).tooltip({
- show: {
- effect: $( "#effect" ).val(),
- delay: 50
- },
- position: {
- my: "center bottom-20",
- at: "left top",
- using: function( position, feedback ) {
- $( this ).css( position );
- $( "<div>" )
- .addClass( "arrow" )
- .addClass( feedback.vertical )
- .addClass( feedback.horizontal )
- .appendTo( this );
- }
- }
- });
- }
- });
- });
- </script>
- </head>
- <body >
- <div style="width:400px; margin:100px auto;">
- <select id="effect">
- <option value="blind">Blind</option>
- <option value="bounce">Bounce</option>
- <option value="clip">Clip</option>
- <option value="drop">Drop</option>
- <option value="explode">Explode</option>
- <option value="fade">Fade</option>
- <option value="fold">Fold</option>
- <option value="highlight">Highlight</option>
- <option value="puff">Puff</option>
- <option value="pulsate">Pulsate</option>
- <option value="scale">Scale</option>
- <option value="shake">Shake</option>
- <option value="size">Size</option>
- <option value="slide">Slide</option>
- <option value="transfer">Transfer</option>
- <option value="myAnimation">My animation</option>
- </select>
- <br/><br/>
- <div id="okay" style="width:100px">Име:</div><input id="ime" class="tooltip" name="ime" style="width:200px" title="Име"/>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement