Simple Jquery Plugin: July 2015

Tuesday, 14 July 2015

page redirection using javascript

Create index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>
<body>
<p align="center"><strong><font face="Arial"><big>Please wait 5 seconds before being redirected<br>
  To the Main Page</big></font></strong></p>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 100%;
      margin: auto;
  }
  </style>
<script>

//specify redirect url
var redirecturl="scroll.html" // here you can add redirection page.
//specify pause duration before redirection (in seconds)
var pausefor=5

//DONE EDITING

function postaction(){
if (window.timer){
clearInterval(timer)
clearInterval(timer_2)
}
window.location=redirecturl
}
setTimeout("postaction()",pausefor*1000)

</script>
<!--[if IE]>

<!--

// this script was originally authored by william kemper.  I have no homepage.
var switchm=new Array
switchm[0]="ffaa00";
switchm[1]="ffff00";
switchm[2]="00ff00";
switchm[3]="0099ff";
switchm[4]="ff0000";
switchm[5]="ff00ff";
// if you want to add more colors go ahead, all the for limits are based on array length so
// you shouldn't need to change any of the code, just add more colors.

i=0
j=0
function STROBE()
{
if (j>increment.length-1)
 {
 j=0
 i++
  if (i>switchm.length-1)
  {
  i=0
  }
 }
document.all.increment[j].filters.blendTrans.apply()
document.all.increment[j].bgColor=switchm[i]
document.all.increment[j].filters.blendTrans.play()
j++
}
timer=setInterval("STROBE()",20) // change the number to effect the speed of the loadbar.
timer_2=setInterval("REVEAL()",20)
function REVEAL()
 {
 if (document.images[0].complete)
  {
  clearInterval(timer)
  clearInterval(timer_2)
  document.all.loadbar.style.visibility="hidden";
  document.all.content.style.visibility="visible";
  }
 }
// i don't know how to put comments in the css, but change duration to  effect the speed of the fade effect.

//-->
<style>

</style>

<!--[if IE]>

<div id=loadbar 
style=position:absolute;top:expression(document.body.clientHeight/2-100);left:expression(document.body.clientWidth/2-50)>
<table cellspacing=0 cellpadding=0 width=100><tr><td 
colspan=10><b>Loading...</b></td></tr><tr>
<script language="JavaScript">


<div class="main-new-wrapper">
  <div class="container"> <br>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
      </ol>
      
      <div class="carousel-inner" role="listbox">
        <div class="item active"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg" alt="Chania" width="460" height="345">
          <div class="carousel-caption">
            <h3>ADD</h3>
            <p>Advertisement</p>
          </div>
        </div>
        <div class="item"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg" alt="Chania" width="460" height="345">
          <div class="carousel-caption">
            <h3>ADD</h3>
            <p>Advertisement</p>
          </div>
        </div>
      </div>
      
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
  </div>
</div>
</body>
</html>

Monday, 13 July 2015

jQuery simple Next-Previous slider

Create index.html

<html>
<head>
<title>jQuery simple Next-Previous slider</title>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<style>
div {
 width: 50px;
 height: 80px;
 margin: 10px;
 float: left;
 border: 1px black solid;
 padding: 3px;/*overflow:hidden;*/
  }
.next1 {
 background:#0066FF;
 text-align:center;
 padding:10px;
 float:left;
 cursor:pointer;
}
.prev1 {
 background:#0066FF;
 text-align:center;
 padding:10px;
 float:left;
 cursor:pointer;
}
.mynew {
 height:100px;
 width:100px;
 margin:auto;
 background:#ddd;
}
.ref {
 height: 100px;
 margin: 0;
 padding: 0;
 width: 100px;
 display:none;
}
</style>
</head>
<body>
<p>click next to see the image</p>
<p>click prev to see previous image</p>
<span class="next1">Next</span>
<div class="mynew">
  <div id="start" class="ref"><img src="http://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg" height="100" width="100"></div>
  <div class="ref"><img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg" height="100" width="100"></div>
  <div class="ref"><img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg" height="100" width="100"></div>
  <div class="ref"><img src="http://www.curdweb.com/wp-content/uploads/2014/12/jquery-plugins-1024x512.jpg" height="100" width="100"></div>
  <div class="ref"><img src="http://www.curdweb.com/wp-content/uploads/2014/08/about_1.jpg" height="100" width="100"></div>
  <div class="ref"><img src="http://curdweb.com/navin/fullwidthlider.com/images/slider2.png" height="100" width="100"></div>
  <div class="ref"><img src="http://curdweb.com/navin/fullwidthlider.com/images/slider1.png" height="100" width="100"></div>
  <div class="ref"><img src="http://curdweb.com/navin/fullwidthlider.com/images/slider3.png" height="100" width="100"></div>
  <div class="ref"><img src="http://curdweb.com/navin/responsive/images/slider2.jpg" height="100" width="100"></div>
  <div id="end" class="ref"><img src="http://curdweb.com/navin/responsive/images/slider4.jpg" height="100" width="100"></div>
</div>
<span class="prev1">Prev</span>
<script>
var divc=$('.mynew');
var count=$('.mynew .ref').length;
var lelechacha=".mynew .ref:eq("+ (count-1) +")";
var $currPrevDiv   =$(lelechacha);

var $currDiv   =$('.mynew .ref:eq(0)');
$currDiv.css( "background", "" );
$currDiv .css( "background", "#333" );

var myFirstDiv=$currDiv;
var myLastDiv=$currPrevDiv;
 $currDiv.removeAttr('hidden');
$( ".next1" ).click(function() {
if(myLastDiv.attr('id')==$currDiv.attr('id')){
return;
}
  $currDiv  = $currDiv .next(); 
  $( ".mynew > div" ).css('display','none');
 
   $currDiv.css('display','block');
  $( "div" ).css( "background", "" );
  $currDiv .css( "background", "#333" );

});
 $( ".prev1" ).click(function() {
if(myFirstDiv.attr('id')==$currDiv.attr('id')){
return;
}
  $currPrevDiv  = $currDiv .prev();
  $( ".mynew > div" ).css('display','none');
 
   $currDiv.css('display','block');
    $currDiv  = $currPrevDiv;
  $( "div" ).css( "background", "" );
  $currPrevDiv .css( "background", "#333" );
 
  });
</script>
</body>
</html>

jQuery Traversing prev

Create index.html

<html>
<head>
<title>jQuery Traversing prev</title>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<style>
.roqw {
 background: #333 none repeat scroll 0 0;
 border: 4px solid #ccc;
 float: left;
 height: 200px;
 margin: 10px;
 padding: 3px;
 width: 176px;
}
h4 {
 text-align:center;
 color:#00CC99;
 margin:0px;
}
.mytclick {
 background: #000000;
 border: 3px solid #00e000;
 box-shadow: 2px 2px 3px 1px #333;
 color: #fff;
 cursor: pointer;
 height: 6px;
 line-height: 5px;
 margin: auto;
 padding: 20px;
 text-align: center;
 width: 100px;
}
.mytclick:hover {
 background: #0099FF;
}
.mysend {
 background: #cc6600;
 color: #fff;
 cursor: pointer;
 margin-top: 21px;
 padding: 6px;
 text-align: center;
}
</style>
</head>
<body>
<div class="mytclick">Click</div>
<div class="roqw" id="start">
  <h4>User Form</h4>
  <form action="mail.php" id="mail">
    <label>Name</label>
    <input type="text">
    <label>Email</label>
    <input type="text">
    <label>Phone No.</label>
    <input type="text">
    <div class="mysend"> SEND</div>
  </form>
</div>
<div class="roqw">
  <h4>Admin Form</h4>
  <form action="mail.php" id="mail">
    <label>Name</label>
    <input type="text">
    <label>Email</label>
    <input type="text">
    <label>Phone No.</label>
    <input type="text">
    <div class="mysend"> SEND</div>
  </form>
</div>
<div class="roqw">
  <h4>Client Form</h4>
  <form action="mail.php" id="mail">
    <label>Name</label>
    <input type="text">
    <label>Email</label>
    <input type="text">
    <label>Phone No.</label>
    <input type="text">
    <div class="mysend"> SEND</div>
  </form>
</div>
<div class="roqw">
  <h4>Feedback Form</h4>
  <form action="mail.php" id="mail">
    <label>Name</label>
    <input type="text">
    <label>Email</label>
    <input type="text">
    <label>Phone No.</label>
    <input type="text">
    <div class="mysend"> SEND</div>
  </form>
</div>
<div class="roqw">
  <h4>Contact Form</h4>
  <form action="mail.php" id="mail">
    <label>Name</label>
    <input type="text">
    <label>Email</label>
    <input type="text">
    <label>Phone No.</label>
    <input type="text">
    <div class="mysend"> SEND</div>
  </form>
</div>
<div class="roqw" id="startPrev">
  <h4>Help Form</h4>
  <form action="mail.php" id="mail">
    <label>Name</label>
    <input type="text">
    <label>Email</label>
    <input type="text">
    <label>Phone No.</label>
    <input type="text">
    <div class="mysend"> SEND</div>
  </form>
</div>
<script>
var $currDiv = $( "#startPrev" );
$currDiv .css( "background", "#0099FF" );
$( ".mytclick" ).click(function() {
  $currDiv  = $currDiv .prev();
  $( ".roqw" ).css( "background", "" );
  $currDiv .css( "background", "#0099FF" );
});
</script>
</body>
</html>

jQuery Traversing next

Create index.html

<html>
<head>
<title>jQuery Traversing next</title>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<style>
.roqw {
 background: #333 none repeat scroll 0 0;
 border: 4px solid #ccc;
 float: left;
 height: 200px;
 margin: 10px;
 padding: 3px;
 width: 176px;
}
h4 {
 text-align:center;
 color:#00CC99;
 margin:0px;
}
.mytclick {
 background: #000000;
 border: 3px solid #00e000;
 box-shadow: 2px 2px 3px 1px #333;
 color: #fff;
 cursor: pointer;
 height: 6px;
 line-height: 5px;
 margin: auto;
 padding: 20px;
 text-align: center;
 width: 100px;
}
.mytclick:hover {
 background: #0099FF;
}
.mysend {
 background: #cc6600;
 color: #fff;
 cursor: pointer;
 margin-top: 21px;
 padding: 6px;
 text-align: center;
}
</style>
</head>
<body>
<div class="mytclick">Click</div>
<div class="roqw" id="start">
  <h4>User Form</h4>
  <form action="mail.php" id="mail">
    <label>Name</label>
    <input type="text">
    <label>Email</label>
    <input type="text">
    <label>Phone No.</label>
    <input type="text">
    <div class="mysend"> SEND</div>
  </form>
</div>
<div class="roqw">
  <h4>Admin Form</h4>
  <form action="mail.php" id="mail">
    <label>Name</label>
    <input type="text">
    <label>Email</label>
    <input type="text">
    <label>Phone No.</label>
    <input type="text">
    <div class="mysend"> SEND</div>
  </form>
</div>
<div class="roqw">
  <h4>Client Form</h4>
  <form action="mail.php" id="mail">
    <label>Name</label>
    <input type="text">
    <label>Email</label>
    <input type="text">
    <label>Phone No.</label>
    <input type="text">
    <div class="mysend"> SEND</div>
  </form>
</div>
<div class="roqw">
  <h4>Feedback Form</h4>
  <form action="mail.php" id="mail">
    <label>Name</label>
    <input type="text">
    <label>Email</label>
    <input type="text">
    <label>Phone No.</label>
    <input type="text">
    <div class="mysend"> SEND</div>
  </form>
</div>
<div class="roqw">
  <h4>Contact Form</h4>
  <form action="mail.php" id="mail">
    <label>Name</label>
    <input type="text">
    <label>Email</label>
    <input type="text">
    <label>Phone No.</label>
    <input type="text">
    <div class="mysend"> SEND</div>
  </form>
</div>
<div class="roqw">
  <h4>Help Form</h4>
  <form action="mail.php" id="mail">
    <label>Name</label>
    <input type="text">
    <label>Email</label>
    <input type="text">
    <label>Phone No.</label>
    <input type="text">
    <div class="mysend"> SEND</div>
  </form>
</div>
<script>
var $currDiv = $( "#start" );
$currDiv .css( "background", "#0099FF" );
$( ".mytclick" ).click(function() {
  $currDiv  = $currDiv .next();
  $( ".roqw" ).css( "background", "" );
  $currDiv .css( "background", "#0099FF" );
});
</script>
</body>
</html>

Tuesday, 7 July 2015

Jquery POPUP with multiple options

Create Index.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".ref").click(function(){

$(".cont").attr("class","contentwa");

$(".contentwa").html($(this).attr('contentwa')+ "<a id='closeme' href='#'>Close Me</a>");
});
$(document).click(function(e){
 if(e.target.id=="closeme"){
$(".contentwa").attr("class","cont").html('');

}
});
});

</script>
<style>
body {
 background:#333;
}
.main-wrapper {
 padding:20px;
 background:#ccc;
 margin:auto;
 overflow:auto;
}
.main-header {
 background: #036;
 margin: auto;
 overflow: auto;
 padding: 10px;
}
.about {
 background: #036;
 margin: auto;
 overflow: auto;
 padding: 10px;
 margin-bottom:10px;
}
.about h2 {
 color:#fff;
 text-align:center;
}
.intro {
 background: #ddd;
 font-size: 150%;
 height: 200px;
 padding: 10px;
}
.ref {
 background:#99FF00;
 padding:10px;
 float:left;
 margin: 10px;
 cursor: pointer;
}
.closeme:before {
 background: #0066FF;
 padding: 10px;
 float: left;
 position: absolute;
 top: 263px;
 display:none;
}
.closeme:after {
 display:block;
}
.contentwa {
 margin:auto;
 width:400px;
 height:400px;
 background:#999999;
 color:#000000;
 padding:10px;
}
.contentwa h2 {
 font-weight:bold;
 color:#0099FF;
}
.contentwa p {
 color:#333;
 text-align:justify;
}
</style>
</head>
<body>
<div class="main-wrapper">
  <div class="about">
    <h2>Jquery POPUP Window</h2>
  </div>
  <div class="main-header">
    <div class="ref" contentwa="<h2>jQuery</h2><p>jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery is the most popular JavaScript library in use today, with installation on over 60% of the top million highest-trafficked sites on the Web. jQuery is free, open-source software licensed under the MIT License.

jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications.</p>">JQuery</div>
    <div class="ref" contentwa="<h2>Html5</h2><p>HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web. As of October 2014 this is the final and complete fifth revision of the HTML standard of the World Wide Web Consortium (W3C). The previous version, HTML 4, was standardized in 1997.

Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML.</p>">Html5</div>
    <div class="ref" contentwa="<h2>JavaScript</h2>
<p>JavaScript, also known as ECMAScript (the untrademarked name used for the standard), is a dynamic programming language. It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed. JavaScript (at least the strict subset asm.js) is also considered an assembly language of the web – a compile target of source-to-source compilers – for making client side web applications, using other programming languages, supported by all the major browsers without plug-ins. It is also used in server-side network programming with runtime environments such as Node.js, game development and the creation of desktop and mobile applications.</p>">JavaScript</div>
  </div>
  
  <div class="cont"></div>
</div>

</body>
</html>

Friday, 3 July 2015

Jquery click show and hide Feedback Form

Create index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Jquery click show social sharing</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.linkwithus {
 background:#ccc;
 margin:auto;
 padding:20px;
 border:5px solid #333;
 display:none;
 width:25%;
 overflow:auto;
}
.button-me {
 background: #0066ff none repeat scroll 0 0;
 border: 3px solid #333;
 border-radius: 10px;
 box-shadow: 1px 2px 2px #333;
 color: #fff;
 cursor: pointer;
 float: left;
 font-family: tahoma;
 font-weight: bold;
 padding: 10px;
 text-align: center;
 text-shadow: 1px 2px 1px #333;
}
.myblock {
 float:left;
 width:40%;
 margin:10px;
}
.label-name {
 padding:10px;
}
.inputme {
 background:#ddd;
 margin: 10px;
 padding: 4px;
}
.label-name1 {
 padding:10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".button-me").click(function(){
        $(".linkwithus").toggle();
  /*$("body").css("background-color", "#8E8E8E");*/
    });
});
</script>
</head>
<body>
<div class="button-me">Feedback</div>
<div class="linkwithus">
  <form action="mail.php" method="post">
    <label class="label-name">Name</label>
    <input type="name" id="name" class="inputme"  placeholder="Enter Name">
    <br>
    <label class="label-name"> Email </label>
    <input type="email" id="email" class="inputme"  placeholder="Enter Email-Address">
    <br>
    <label class="label-name">Phone</label>
    <input type="phone" id="phone" class="inputme" placeholder="Enter Phone Number">
    <br>
    <button type="submit" class="button-me">Submit</button>
  </form>
</div>
</body>
</html>

Jquery Processbar

Jquery click show and hide social sharing

Create index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Jquery click show social sharing</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.linkwithus {
 background:#ccc;
 margin:auto;
 padding:20px;
 border:5px solid #333;
 display:none;
 width:25%;
 overflow:auto;
}
.social-blocks {
 height:57px;
 width:57px;
 margin:10px;
 float:left;
 background:#000;
 border-radius: 50%;
}
.social-blocks:hover {
 border:4px solid #fff;
 background:#333333;
}
.social-blocks p {
 color: #fff;
 font-size: 27px;
 font-weight: bold;
 line-height: 0;
 text-align: center;
}
.social-blocks p a {
 text-decoration:none;
 color:#fff;
}
.social-blocks p a:hover {
 text-decoration:none;
 color:#0099FF;
}
.button-me {
 background: #0066ff none repeat scroll 0 0;
 border: 3px solid #333;
 border-radius: 10px;
 box-shadow: 1px 2px 2px #333;
 color: #fff;
 cursor: pointer;
 float: left;
 font-family: tahoma;
 font-weight: bold;
 padding: 10px;
 text-align: center;
 text-shadow: 1px 2px 1px #333;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".button-me").click(function(){
        $(".linkwithus").toggle();
  /*$("body").css("background-color", "#8E8E8E");*/
    });
});
</script>
</head>
<body>
<div class="button-me">Link With Us</div>
<div class="linkwithus">
  <div class="social-blocks">
    <p><a href="#">li</a></p>
  </div>
  <div class="social-blocks">
    <p><a href="#">f</a></p>
  </div>
  <div class="social-blocks">
    <p><a href="#">tw</a></p>
  </div>
  <div class="social-blocks">
    <p><a href="#">y</a></p>
  </div>
</div>
</body>
</html>