jQuery Menu Slider

jQuery Menu Slider with Left Right Button is useful user interface for website with long horizontal menu, with this Menu user able to scroll the menu with left and right sliders.

 Let us build this jQuery Horizontal Menu Slider with rotatable links inside the menu

Step: 1
Include jQuery Lib and menuSlider Plugin

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.menuSlider.js" type="text/javascript"></script>

Step: 2
Add jQuery handler for menuSlider

<script type="text/javascript">

$(document).ready(function(){
 $('#menuSlider').menuSlider({
  width: '500px', // Menu Width
  height: '36px', // Menu Height
  linkSlideCount : 5 // How many Menus scroll back when hit right or lef
  }); 
 });

</script>

Step: 3
menuSlider CSS Styles

<style type="text/css">

#menuSlider ul
{
 display:block;
 position:relative;
 list-style:none;
 padding:0px;
 margin:0px;
 height:36px;
}

#menuSlider ul li
{
 display:block;
 float:left;
 padding:7px;
 height:15px;
 text-align:center;
}

#menuSlider ul li a
{
 text-decoration:none;
 font-weight:bold;
 color:#000;
 font-family:Verdana, Geneva, sans-serif;
 font-size:12px;

}

#menuSlider ul li a:hover
{
 color:#390;
}

#menuSliderWrapper
{
 position:relative;
 width:1000;
 background:url(images/link_bg.png) repeat-x top;
}

#menuSlider .ls_left_button, #menuSlider .ls_right_button
{
 background:url(images/button_sprit.png) no-repeat 0px 0px;
 width:94px;
 height:36px;
 cursor:pointer;
 clear:both;
}

#menuSlider .ls_right_button
{
 background:url(images/button_sprit.png) no-repeat -94px 0px;
 
}

Step: 4
menuSlider HTML

<div id="menuSlider">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Enquiry</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Management</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Enquiry</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Management</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Management</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>

Live Demo

Download Script

Download PSD

Custom File upload control jQuery

Making Stylish HTML Form file input control in designing part of Web Layout was create browser compatibility issues and upload problems. Customizing Form Input Control using following jQuery technique.

jquery.fileControl.js

(function($) {
    
    $.fn.fileControl = function(options) {
                
        /* TODO: This should not override CSS. */
        var settings = {
            width : 250
        };
                
        if(options) {
            $.extend(settings, options);
        };
                        
        return this.each(function() {
            
            var self = this;
            var wrapper = $("<div>")
                            .css({
                                "width": settings.imagewidth + "px",
                                "height": settings.imageheight + "px",
                                "background": "url(" + settings.image + ") 0 0 no-repeat",
                                "background-position": "right",
                                "display": "inline",
                                "position": "absolute",
                                "overflow": "hidden"
                            });
                            
            var filename = $('<input class="file">')
                             .addClass($(self).attr("class"))
                             .css({
                                 "display": "inline",
                                 "width": settings.width + "px"
                             });

            $(self).before(filename);
            $(self).wrap(wrapper);

            $(self).css({
                        "position": "relative",
                        "height": settings.imageheight + "px",
                        "width": settings.width + "px",
                        "display": "inline",
                        "cursor": "pointer",
                        "opacity": "0.0"
                    });

            if ($.browser.mozilla) {
                if (/Win/.test(navigator.platform)) {
                    $(self).css("margin-left", "-142px");                    
                } else {
                    $(self).css("margin-left", "-168px");                    
                };
            } else {
                $(self).css("margin-left", settings.imagewidth - settings.width + "px");                
            };

            $(self).bind("change", function() {
                filename.val($(self).val());
            });
      
        });
        

    };
    
})(jQuer
fileControl 

FileControl.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Custom File Upload Control - W3Lessons.com</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.filecontrol.js"></script>

<script type="text/javascript">

$(document).ready(function(){

// Custom File Input Control
 $("input.attachment").fileControl({ 
 image: "browse_btn.png",
 imageheight : 39,
 imagewidth : 128,
 width : 175,
 height:40,
 marginleft:0
 });
 
 })



</script>
<style type="text/css">
body,td,th {
 color: #D3BCA7;
}
body {
 background-color: #333;
}

.attachment, .attach
{
 padding:10px;
 margin-bottom:5px;
}
</style>
</head>

<body>

<form method="post" enctype="multipart/form-data">
<input type="file" class="attachment" /><br />
<input type="file" class="attachment" /><br />
<input type="file" class="attachment" /><br />
<input type="submit" class="attach" value="Upload" />
</form>

</body>
</html>

Copy Button Image
 

Disable Enable Deselect Text Selection using JavaScript jQuery

As our subscriber request, how to Disable Enable Deselect Text Selection using JavaScript jQuery let us see how to work with prevent / disable text selection in web page using JavaScript / jQuery,



Here is the solution to prevent or disable enable text selection based on our requirement.

We can do the following:with this script:


Disable Text selection on your web page
Enable Text Selection on particular Area
Deselect Selected Text if you are in protected Area.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Disable /Prevent Text Selection jQuery-JavaScript</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
// Begin:
// Jquery Function to Disable Text Selection
(function($){if($.browser.mozilla){$.fn.disableTextSelect=function(){return this.each(function(){$(this).css({"MozUserSelect":"none"})})};$.fn.enableTextSelect=function(){return this.each(function(){$(this).css({"MozUserSelect":""})})}}else{if($.browser.msie){$.fn.disableTextSelect=function(){return this.each(function(){$(this).bind("selectstart.disableTextSelect",function(){return false})})};$.fn.enableTextSelect=function(){return this.each(function(){$(this).unbind("selectstart.disableTextSelect")})}}else{$.fn.disableTextSelect=function(){return this.each(function(){$(this).bind("mousedown.disableTextSelect",function(){return false})})};$.fn.enableTextSelect=function(){return this.each(function(){$(this).unbind("mousedown.disableTextSelect")})}}}})(jQuery)
// EO Jquery Function

// Usage
// Load Jquery min .js ignore if already done so
// $("element to disable text").disableTextSelect();
// $("element to Enable text").enableTextSelect();
//

jQuery(function($) {
$("body").disableTextSelect();

$("#code").mouseover(function(){
 $("body").enableTextSelect();
});

$("#code").mouseout(function(){  

// Code for Deselect Text When Mouseout the Code Area
if (window.getSelection) {
  if (window.getSelection().empty) {  // Chrome
    window.getSelection().empty();
  } else if (window.getSelection().removeAllRanges) {  // Firefox
    window.getSelection().removeAllRanges();
  }
} else if (document.selection) {  // IE?
  document.selection.empty();
}
       
 $("body").disableTextSelect();
});
});
</script>

<style type="text/css">
<!--
body {
 margin-left: 10px;
 margin-top: 10px;
}

#code
{
 padding:20px;
 border:2px dashed #CCC;
 font-family:"Courier New", Courier, monospace;
 font-size:15px;
 background-color:#EEE;
}
-->
</style>
</head>

<body>
<h2>Disable /Prevent Text Selection jQuery-JavaScript</h2>
<p>Below this Code Area User can Allow to Select a Text in other Area text selection was disabled</p>
<p id="code">
$(".elementsToDisableSelectFor").disableTextSelect();</p>
<p>When you are leaving above code box selection was deselected! If selected !</p>
</body>
</html>

Live Demo

Copy Text to Clipboard Jquery JavaScript

Working with Clipboard in web page is have some security restriction on browser such Firefox and internet explorer. Here is the solution to copy text to clipboard with jQuery without any browser restriction.

zClip the effective clipboard handling jQuery with Flash Support we can make copy any region of text range with custom style and animated interface let us create it one example.

<h2>Copy Text to Clipboard Jquery JavaScript</h2>

<div style="padding:10px; border:1px dashed #ccc;">
<p id="description">
Welcome to ZeroClipBoard
</p>
<a id="copy-description">Copy above Text to Clipboard</a>

</div>
<br />

<textarea id="dynamic" style="padding:10px; border:1px solid #333; width:300px; height:100px;"></textarea>
<br /><br />
<a style="padding:4px; border:1px solid #333;" id="copy-dynamic">Copy</a><span id="msg" style="color:#090;"></span>

<script type="text/javascript">

$(document).ready(function(){

    $('a#copy-description').zclip({
        path:'js/ZeroClipboard.swf',
        copy:$('p#description').text(),
  afterCopy:function(){
            $('a#copy-description').text('Copied').fadeOut('slow');
        }
    });


    $('a#copy-dynamic').zclip({
        path:'js/ZeroClipboard.swf',
        copy:function(){return $('textarea#dynamic').val();},
        beforeCopy:function(){
            $('textarea#dynamic').css('background','green');
            $(this).css('color','orange');
        },
        afterCopy:function(){
            $('textarea#dynamic').css('background','white');
            $(this).css('color','purple');
            $(this).next('.check').show();
        }  
    });


});


</script>

id for the source element must call with the copy- instruction before initiate a clipboard handling with zClip

Live Demo

Download Script

Change/Update Photo with Ajax Image Uploader

A Member request us, How to create a Google Profile Like: Ajax Image Photo Uploader to Change/Update Photo with Ajax Image Uploader using PHP and jQuery. Here is the solution for the Image Uploader like Google Profile Style Ajax Image Uploader

In this example I have use HTML Input file object replacer "prettyfile plugin".
here you can download the jQuery prettyFile Plugin and Use the following code to replace a file input like a "Update Photo" link. and Turn your interface look like a Google Profile Photo update page with PHP Ajax Uploader without refreshing the page. Change/Update Photo with Ajax Image Uploader

Place the PHP Server Side Process on Page Top:

<?php session_start();

if(isset($_SESSION['updated_image']))
$existing_image=$_SESSION['updated_image'];
else
$existing_image='unknown.jpeg';


if(isset($_POST['image_process']))
{
 echo "<pre>";
 $filename=$_FILES['profile_photo']['name'];
 // Check whether the Uploaded file is Image file
 if(preg_match("/^[a-zA-Z0-9-_\.]+\.(jpg|gif|png|jpeg)$/",$filename))
 {
  // Check the Uploaded Image size is Less than or equal to 100 KB ( 1 KB == 1024 Bytes)
  if($_FILES['profile_photo']['size']<=102400)
  {
   $file_ext=end(explode(".",$filename));
   $filename="profile-".time().".$file_ext";
   if(move_uploaded_file($_FILES['profile_photo']['tmp_name'],"images/$filename"))   
   {
    $_SESSION['updated_image']=$filename;
   // Push Javascript Message on top Window  
   ?>
   <script type="text/javascript">
   window.top.window.top.UploadStatus(0,'<?=$filename?>');
   </script>
   <?php     
   }else
   {
   // Push Javascript Message on top Window  
   ?>
   <script type="text/javascript">
   window.top.window.top.UploadStatus(3);
   </script>
   <?php    
   }
   
  }else
  {
   // Push Javascript Message on top Window
  ?>
        <script type="text/javascript">
  window.top.window.top.UploadStatus(2);
  </script>
        <?php   
  }
 }else
 {
   // Push Javascript Message on top Window  
  ?>
        <script type="text/javascript">
  window.top.window.top.UploadStatus(1);
  </script>
        <?php
 }
 exit();
}


?>

jQuery Disable Browser Right click Context Menu in a web page

Prevent visitors from right clicking on your web page for some security reasons, we need to disable right click context menu when visitors attempt to make right click;  Here is the simple and useful jQuery Solution to disable Browser Right click context menu to support all major browsers.

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){ 
$(this).bind("contextmenu", function(e) {
                e.preventDefault();
            });
}); 
</script>

</head>

Google profile style Image Uploader Script with PHP and jQuery

A Member request us, How to create a Google profile photo update style Image uploader using PHP and jQuery. Here is the solution for the Image Uploader like Google Profiles Change Photo Style

In this example I have use HTML Input file object replacer "prettyfile plugin".
here you can download the jQuery prettyFile Plugin and Use the following code to replace a file input like a "Update Photo" link. and Turn your interface look like a Google Profile Photo update page with PHP Ajax Uploader without refreshing the page.

Place the PHP Server Side Process on Page Top:

<?php session_start();

if(isset($_SESSION['updated_image']))
$existing_image=$_SESSION['updated_image'];
else
$existing_image='unknown.jpeg';


if(isset($_POST['image_process']))
{
	echo "<pre>";
	$filename=$_FILES['profile_photo']['name'];
	// Check whether the Uploaded file is Image file
	if(preg_match("/^[a-zA-Z0-9-_\.]+\.(jpg|gif|png|jpeg)$/",$filename))
	{
		// Check the Uploaded Image size is Less than or equal to 100 KB ( 1 KB == 1024 Bytes)
		if($_FILES['profile_photo']['size']<=102400)
		{
			$file_ext=end(explode(".",$filename));
			$filename="profile-".time().".$file_ext";
			if(move_uploaded_file($_FILES['profile_photo']['tmp_name'],"images/$filename"))			
			{
				$_SESSION['updated_image']=$filename;
			// Push Javascript Message on top Window		
			?>
			<script type="text/javascript">
			window.top.window.top.UploadStatus(0,'<?=$filename?>');
			</script>
			<?php					
			}else
			{
			// Push Javascript Message on top Window		
			?>
			<script type="text/javascript">
			window.top.window.top.UploadStatus(3);
			</script>
			<?php				
			}
			
		}else
		{
			// Push Javascript Message on top Window
		?>
        <script type="text/javascript">
		window.top.window.top.UploadStatus(2);
		</script>
        <?php			
		}
	}else
	{
			// Push Javascript Message on top Window		
		?>
        <script type="text/javascript">
		window.top.window.top.UploadStatus(1);
		</script>
        <?php
	}
	exit();
}


?>