Tags » JQuery

Rounded Button for jQuery ColorPicker

Introduction

In this blog, we will explore the trick to replace the default square ColorPicker Button with a rounded one.

Background

One recent requirement lead to this research, where rounded button was needed instead of the default square one. 823 more words

ASP.NET

Project Two - CSS3 Animations & Transitions - Blog Two

The main aim to this project was to show of my understanding of CSS3 Animation and Transitions and demonstrate what I had learnt in the form of elements changing on my portfolio. 580 more words

JQuery

Trigger Event in Jquery

$(window).on(‘load’, function(){
if($(‘#searchData’).val() != “”){
var a = $(‘#mysearch’)[0];
var evObj = document.createEvent(‘MouseEvents’);
evObj.initMouseEvent(‘change’, true, true, window);
a.dispatchEvent(evObj);
}
});

Jquery

jQuery next prev li example

 <!DOCTYPE html>
<html>
 <head> 
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script>
   $(document).ready(function() { 
   $("#next").click(function() {
    var currentSelect = $('ul > .selected');
     if (currentSelect.next().length == 0) { $('ul > li:first').addClass('selected'); } 
     else {   currentSelect.next().addClass('selected');  }
     currentSelect.removeClass('selected');
});

$("#prev").click(function() {
    var currentSelect = $('ul > .selected');
     if (currentSelect.prev().length == 0) { $('ul > li:last').addClass('selected');  } 
     else {  currentSelect.prev().addClass('selected'); }
     currentSelect.removeClass('selected');
});
   });
 </script>   
 
 <style>
  ul{ font-family: monospace;font-size: 15px;font-family: monospace;font-style: normal;font-size-adjust: none;width:auto;   }
  ul li.selected{background:#ff0000;}
  ul li{background-color:#ff9900;width:100px; margin:5px;padding:5px;list-style-type:none;}
 </style>
</head>
<body>
 <h1>Jquery next() prev() functions</h1>
 <div>
  <ul>
   <li class="selected">One</li>
   <li>Two</li>
   <li>Three</li>
   <li>Four</li>
   <li>Five</li>  
  </ul>
 </div>
 </div>
  <button id="next" class="btn">Next</button>  
  <button id="prev" class="btn">Prev</button>    
 </div>
 </body>
</html> 7 more words
JQuery

How to call a jquery funtion from string

Here am going to explain how to call Jquery function from strings meaning that I have a function name in string format.

In one of my portal development I have a requirement to call Jquery functions dynamically which means we are stored Jquery function names on SharePoint list. 251 more words

SharePoint 2013

Ultimate 3D Carousel

Ultimate 3D Carousel is a fully responsive media 3D carousel plugin that allows you to display media content with an unique original layout from a 3D perspective. 60 more words

Web Technology

How to upload file with ajax in php

A simple way to upload file and update your values with ajax

 <html>
<head>
<title>PHP AJAX Image Upload</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function (e) {
    $("#uploadForm").on('submit',(function(e) {
        e.preventDefault();
        $.ajax({
            url: "upload.php",
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success: function(data)
            {
               $("#targetLayer").html(data);
            }            
       });
    }));
});
</script>
</head>
<body>
<div class="bgColor">
<form id="uploadForm" action="upload.php" method="post">
<div id="targetLayer">No Image</div>
<div id="uploadFormLayer">
<label>Upload Image File:</label><br/>
<input type="text" name="ss" value="">
<input name="userImage" type="file" class="inputFile" />
<input type="submit" value="Submit" class="btnSubmit" />
</form>

</div>
</div>
</body>
</html> 62 more words
JQuery