Showing posts with label jquery. Show all posts
Showing posts with label jquery. Show all posts
Saturday, January 31, 2015
jQuery Touch Screen Effect Image Slider Mouse Press and Move
As the People started using Touch Screen devices, More than half of the Traffic now comes from Touch Screen Devices. It is important to have Image Slider having same effect on Computer screen.
Download Demo view-source
<script type=text/javascript src=http://code.jquery.com/jquery-1.4.2.js></script>
<script type=text/javascript src=http://smoothdivscroll.com/js/jquery-ui-1.8.23.custom.min.js></script>
<script type=text/javascript src=http://smoothdivscroll.com/js/jquery.mousewheel.min.js></script>
<script src="http://smoothdivscroll.com/js/jquery.smoothdivscroll-1.3-min.js"></script>
<script src="http://smoothdivscroll.com/js/jquery.kinetic.js"></script>
<script type="text/javascript">
// Initialize the plugin with no custom options
$(document).ready(function () {
$("#makeMeScrollable").smoothDivScroll({
hotSpotScrolling: false,
touchScrolling: true,
manualContinuousScrolling: true,
mousewheelScrolling: false
});
});
</script>
Sunday, January 25, 2015
How to create facebook like edit box using jquery
Hai frnds, today im creating facebook like profile edit with jquery without using any database. Here i used the simple .toggle() function means it toggle two functions when a button is clicked, but the .toggle() function is available upto jquery 1.8 version if any one working with jquery 1.9 or above version it does not work so please download the below 1.8 jquery version. All the versions are available in jquery official site. Simply go to http://jquery.com/download/ website scroll down the page to Past Releases of jquery, Download and Enjoy it.
Sample Screenshot
Sample Screenshot
In this example iam including the jquery 1.7 version so dnt worry about it. Just copy the example and paste it in your notepad then save it as .html file and Run it. In the below example i have created the textbox and loaded image dynamically using jquery so observe the example carefully.
Right Click and save the above two images
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script>
$(document).ready(function()
{
$(#but).toggle(function(){
var val=$(h2).text();
$(this).css({background: url(close.gif) no-repeat})
$(h2).empty();
$(h2).append(<input id="da" type="text" name="box" value="+val+"></input>);
},function(){
var value=$("#da" ).val();
$(this).css({background: url(edit.gif) no-repeat})
$(h2).html(value);
});
});
</script>
<style type="text/css">
<!--
a.edit {
float: right;
background: url(edit.gif) no-repeat;
padding:100px;
}
-->
</style>
</head>
<body>
<div align="center" style="padding-top:200px">
<div style="width:400px;border:#FF3366;border-radius:8px;
border-style:dotted;height:60px">
<h2>Click here to Edit</h2>
</div>
<div style="width:400px; padding:20px">
<a href="#" class="edit" id="but"></a>
</div>
</div>
</body>
</html>
Subscribe to:
Posts (Atom)