W3 Lessons: JavaScript

Showing posts with label JavaScript. Show all posts

Thursday, November 22, 2012

Prevent your website opening in Iframe

One of our client, don't want to load their website inside an iframe any other website. In this case PHP provide an excellent header option to prevent or deny iframe opening of your web pages. In case you are in static html we can use JavaScript to redirect a actual page as browser URL on top.

Google is example website for iframe blocking, you did not open Google website in iframe.

PHP code to prevent iframe loading on dynamic php pages.

<?php
// php header to prevent iframe loading of your web page
header("X-FRAME-OPTIONS: DENY");
?>

Example of prevent iframe loading in PHP pages

<?php
header("X-FRAME-OPTIONS: DENY");
?>
<!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>Iframe Blocker</title>
</head>
<body>

<h1>Welcome</h1>

</body>
</html>

JavaScript code to prevent loading iframe on Static HTML pages

<script type="text/javascript">

// Prevent iframe loading of your web page and redirect to iframe target.
if( (self.parent && !(self.parent===self))
    &&(self.parent.frames.length!=0)){
    self.parent.location=document.location
}
</script>

Example of prevent iframe loading in Static HTML pages

<!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>Iframe Blocker</title>

<script type="text/javascript">
if( (self.parent && !(self.parent===self))
    &&(self.parent.frames.length!=0)){
    self.parent.location=document.location
}
</script>

</head>
<body>
<h1>Welcome</h1>

</body>
</html>

Thursday, September 22, 2011

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

Monday, September 19, 2011

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

Monday, September 12, 2011

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();
}


?>

Read Full Article

Monday, September 5, 2011

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>

Thursday, September 1, 2011

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();
}


?>

Read Full Article