<!DOCTYPE html> <html lang="en"> <head> <title>User Form</title> </head> <body> <input type="hidden" name="user_id" value="1"> <form name="user-form" id="user-form" enctype="multipart/form-data"> <input type="file" name="image_file"> <input type="text" name="name"> <button type="button" title="Save" id="save-user">Save</button> </form> </body> </html>
JavaScript:
$("#save-user").on("click", function() {
var user_form = $(this).closest("#user-form");
var details = new FormData($(user_form)[0]);
// you can also append any custom paramter to form data, if not skip these
// details.append('user_id', $('body').find('[name="user_id"]').val());
$.ajax({
type: 'POST',
url: '/save-document',
data: details,
processData: false,
contentType: false,
success: function(data) {
console.log("user updated successfully");
},
error: function(e) {
console.log("error");
}
});
});
]]>
HTML (Add this code at the end of body):
<div id="fancybox" class="modal" style="display: none;"> <span class="fancybox-close">×</span> <img class="fancybox-content" id="fancybox-img"> <div id="fancybox-caption"></div> </div>
CSS:
/* Fancybox */
.fancyimg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.fancyimg:hover {opacity: 0.7;}
/* The Modal (background) */
#fancybox {
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding: 20px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.fancybox-content {
margin: auto;
display: block;
width: 100%;
max-width: 900px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#fancybox-caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 40px;
}
/* Add Animation - Zoom in the Modal */
.fancybox-content, #fancybox-caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.fancybox-close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.fancybox-close:hover,
.fancybox-close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.fancybox-content {
width: 100%;
}
}
/* FancyBox end */
JS:
$("img.fancyimg").on("click", function() {
var img_src = $(this).attr("data-big");
var img_src = img_src ? img_src : $(this).attr("src");
$("#fancybox").show();
$("#fancybox-img").attr("src", img_src);
$("#fancybox-caption").html($(this).attr("alt"));
});
$(".fancybox-close").on("click", function() {
$("#fancybox").hide();
});
Configuration, Just one 
- Add ‘class=”fancyimg”‘ to the img tag you wanna click and zoom
P.S.: You can also show large image by setting data attribute: data-big=”/big-img-path”
That’s it, you’re good to go with LightBox built with CSS & Javascript without using any plugins. Enjoy 
If you are a developer then keep the following SEO guidelines in mind as youâre working on your website.
1. Write a good, user friendly URL
Bad example : http://halla.in/contest.php?contest_id=MTgx
Good Example : https://www.twenty20.com/challenges/underwater
Don’t use Underscore (_) in URLs to separate words instead you can use hyphen(-).
2. Watch your Meta Tags:
In some cases, coding errors can confuse search engines when they try to read the page, which is bad in every way possible. Search engines canât rank what they canât even understand.
Developers also need to be aware of the importance of meta tags.
Developers donât usually create the content of the meta tags, but they still need to understand how they work.
The most important meta tags are the title and description tags. Whenever a user conducts a search, the content from these two tags is the first thing that users see in the search results.
As a developer, one way you can hurt your page rankings is by accidentally creating duplicate meta tags. Search engines generally frown on duplicate content, so avoid this.
3. Fast â site speed
Google has stated the page load speed matters in their algorithm, so make sure you have tuned your site and are obeying best practices to make things speedy. Always try to Minify CSS & JS.
4. Create a good 404 Page.
5. Proper Image file name & <alt> tag
Try to add proper name to images which you are using in website. Don’t just add random name like Homepage1.jpg, homepage2.jpg, etc. it’s really a bad habit. Just observe image once and give a proper filename.
You must add an alt attribute to every <img> tag used into your webpage.
An image with an alternate text specified is inserted using the following HTML line:
<img src=”image.png” alt=”text_to_describe_your_image”>
Remember that the point of alt text is to provide the same functional information that a visual user would see. Search engines, users who disabled images in their browsers and other agents who are unable to see the images on your webpage can read the alt attributes assigned to the image since they cannot view it.
6. Avoid inline CSS style
It is a good practice to move all the inline CSS rules into an external file in order to make your
page “lighter” in weight and decrease the code to text ratio. Check the HTML code of your page and identify all style attributes for each style attribute found you must properly move all declarations in the external CSS file and remove the style attribute.
7. Use HTML Compression/Gzip
Compress your pages using gzip compression on your code. This helps ensure a
faster loading web page and improved user experience.
8. Reduce HTTP requests
You can reduce http requests through various methods such as using text instead of images, using css sprites, using data URIs instead of images, or combining several external files together into one.
9. Never use Flash and iframe.
10. Use Canonicalisation :
For eg., http://example.com and http://www.example.com/ should resolve to the same URL. Fix your URL and redirect other URL to your fixed one. Client want example.com as a main URL, If user type www.bookmywash.co then it should redirect to bookmywash.co .
In order to fix this you must consider using a 301 re-write rule in your .htaccess file so that
both addresses (http://example.com and http://www.example.com) resolve to the same URL.
11. IP CANONICALIZATION
Website’s IP should redirect to Website’s domain name.
]]>
The code is pretty simple, you just need to use <meta> tag. Put the below code under your HTML <head> tag:
<!-- Chrome, Firefox OS and Opera --> <meta name="theme-color" content="#66bb6a"> <!-- Windows Phone --> <meta name="msapplication-navbutton-color" content="#66bb6a"> <!-- iOS Safari --> <meta name="apple-mobile-web-app-status-bar-style" content="#66bb6a">]]>
$("form").on("change", "input[type='file']", function() {
if ($(this).val()) {
read_image(this);
}
});
// render image files
function read_image(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(input).parent().find('img').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
]]>
HTML
<body>
<a href="#" class="back-to-top">
<i class="fa fa-chevron-up"></i>
</a>
</body>
jQuery
$( document ).ready(function() {
// back to top
var amountScrolled = 300;
$(window).scroll(function() {
if ($(window).scrollTop() > amountScrolled) {
$('a.back-to-top').fadeIn('slow');
}
else {
$('a.back-to-top').fadeOut('slow');
}
});
$('a.back-to-top').click(function() {
$('body, html').animate({
scrollTop: 0
}, 400);
return false;
});
});
CSS
a.back-to-top {
display: none;
text-align: center;
line-height: 50px;
width: 50px;
height: 50px;
position: fixed;
z-index: 999;
right: 20px;
bottom: 20px;
background-color: #1ab394;
color: #fff;
border-radius: 3px;
}
a.back-to-top:hover {
color: #fff;
}
]]>