Showing posts with label Jquery. Show all posts
Showing posts with label Jquery. Show all posts

Awesome Jquery Plugins

Awesome Jquery Plugins

Today Discussed Jquery Plugins More then Plugins awesome different Plugin in jquery Slider and draggable Jquery without plugins Slider Click Here
Awesome Jquery Plugins
Awesome Jquery Plugins

Date Picker Plugins

Jquery Plugins first Date Picker Plugins Follows Code Just Copy and Past Awesome Date Picker Jquery Plugins.
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
 
</body>
</html>


Jquery Auto Complete Plugins

Jquery  Auto Complete Plugins Follows Code Copy and Paste this Code.
try this
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    var availableTags = [
      "dotnet",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
 
 
</body>
</html>

Jquery Draggable Plugins

Jquery Draggable Plugins Follows Code Copy and Paste this code.


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #draggable { width: 150px; height: 150px; padding: 0.5em; }
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable();
  });
  </script>
</head>
<body>
 
<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>
 
 
</body>
</html>

Slider Jquery CSS3 Without Plugin

Slider Jquery CSS3 Without Plugin

Jquery Slider Without Plugin
Jquery Slider Without Plugin


Jquery Slider Without Plugin 

Jquery and html CSS3 Slider image animation style only used without any plugin. Fully nice look and page speed up your wep page. So make a own slider without any plugin. plugin avoided in slider.
following example code for jquery and css3.

index.html 

<div class="gallery">
 <ul>
   <li class="each">
    <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-1.jpg" alt="Lorem 1" />
    <span class="caption">
      <h2>Lorem #1</h2>
      <p>Lorem ipsum dolor sit amet.</p>
    </span>
   </li>
   <li class="each">
    <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg" alt="Lorem 2" />
    <span class="caption">
      <h2>Lorem #2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt esse numquam est qui aut debitis.</p>
    </span>
   </li>
   <li class="each">
    <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-3.jpg" alt="Lorem 3" />
    <span class="caption">
      <h2>Lorem #3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt esse numquam est qui aut debitis.</p>
    </span>
   </li>
   <li class="each">
    <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-4.jpg" alt="Lorem 4" />
    <span class="caption">
      <h2>Lorem #4</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt esse numquam est qui aut debitis.</p>
    </span>
   </li>
   <li class="each">
    <img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-5.jpg" alt="Lorem 5" />
    <span class="caption">
      <h2>Lorem #5</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt esse numquam est qui aut debitis.</p>
    </span>
   </li>
 </ul>
 <div class="direction">
  <span class="next">+</span>
 </div>
</div>

Style.css

/* Import */
@import url("http://fonts.googleapis.com/css?family=Lato");

/* Basic Reset */
* {  
  font-smoothing: antialiased;
  margin: 0; padding: 0;
}
body { 
  background: #33322f; 
  overflow-x: hidden; 
}

/* Gallery */
.gallery { 
 position: relative; 
 width: 700px; height: 306px; 
 margin: auto; 
 overflow: hidden; 
 list-style: none;
}
.gallery img { 
 display: block; 
 float: left; 
}
.gallery ul {
 list-style: none;
}
.gallery ul li.each { 
 position: relative; 
 float: left;
 transition: all .8s; 
}
.gallery ul li.each, .gallery ul li.each img { 
 height: 0px; 
}
.gallery ul li.each img { 
 opacity: 0.5; 
 transition: all .4s; 
}
.gallery ul li.each.active, .gallery ul li.each.active img { 
 height: 306px; 
}
.gallery ul li.each.active img { 
 opacity: 1; 
}
.gallery .caption { 
 position: absolute;
 bottom: 0; 
 left: 20px; right: 20px;
 text-transform: uppercase;
}

.gallery .caption h2, .gallery .caption p {
 background: #fff000; 
 padding: 7px;
  box-shadow: 0 0 20px #000;
}
.gallery .caption h2 {
 font: 24px "Lato", sans-serif;
 float: left;
}
.gallery .caption p {
 font: 18px "Lato", sans-serif;
 float: left;
  clear: both;
}

/* Direction */
.direction { 
 position: absolute; 
 top: 50%; margin-top: -74px; 
 right: -100px;
 background: #fff000;
 width: 158px; height: 158px;
 display: block;
 transform: rotate(45deg); 
  z-index: 9999;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);
}
.direction .next {
 position: absolute;
 top: 90px; left: 25px;
 color: #ededed;
 font: 40px "Lato", sans-serif;
 text-shadow:
  0 1px #000,
  0 2px #ccc,
  0 3px #ccc,
  0 4px #ccc,
  0 5px #ccc;
 transform: rotate(-45deg);
 cursor: pointer;
}
Slider.js

$(function(){
 $slideshow = $(".gallery ul");
 $slideactive = $slideshow.find("li.each").first().addClass('active').show();
 $(".direction .next").click(function(){
 $slideactive = $slideshow.find("li.active").next();
  if(!$slideactive.size())
   $slideactive = $slideshow.find("li.each").first();  $slideshow.find("li.active").removeClass("active");
   $slideactive.addClass("active");
 });
});

Jquery() Function


jQuery to replace one tag with another

Using jQuery, I'm trying to replace all the occurrences of:
<p>.....</p>

With

<h1>.....</h1>

Code


$('p').replaceWith(function(){
    return $("<h1/>", {html: $(this).html()});
});



Disabling Right Mouse Click

If you are to disable right click on your web browser, you can use the following piece of code:

$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});


Detect Current Mouse Coordinates

Now, suppose you need to detect the current mouse coordinates in the web browser in use. To do this, you can write the following piece of code:


$(document).ready(function() {
$().mousemove(function(e)
{
$('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);
});
<div id=MouseCoordinates></div>
});



Set a Timer

The following piece of code can be used to set a timer using jQuery:

$(document).ready(function()
{
window.setTimeout(function()
{
// some code
}, 1000);
});