Desire Code

Android Tutorial , Programming Tutorial, Php Tutorial, Learn Android, HTML Tutorial, Coding , Java Tutorial, GTU Programs, Learning Programming

Thursday, 23 February 2017

How to Create a Sticky Navigation with CSS3 & jQuery

Author:  |   |  No Comments | 

In this tutorial, I am going to show you that how to create a sticky navigation bar with CSS3 & JQuery.

In the modern website, Most of the website use this feature of sticky navigation. It is one of the idea to attract user to visit their website.

When webpage will more large and include large amount of content in the page this type of navigation will be used for make user friendly website.

If Navigation bar will sticky then user can click on the menu from any where and easily redirect on other page. So, It will be used for get more and more traffic on your website.

Now , we will see the example that how to create a sticky navigation with CSS3 and JQuery. Here, I describe all steps. Follow the steps and run the example :

JAVASCRIPT :


  • First of all , add this external jquery file to apply jquery in this example

1
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>


  • Now, This code is used for add wrapper elements for set positioning of the element.

1
2
3
jQuery("nav").wrap('<div class="nav-placeholder"></div>');
jQuery("nav").wrapInner('<div class="nav-inner"></div>');
jQuery(".nav-inner").wrapInner('<div class="nav-inner-most"></div>');


  • This function will run on load page and window resize and it will only update navset when if it will not fixed position.

1
2
3
4
5
6
7
function stickyUtility()
 {
  if (!jQuery("nav").hasClass("fixed"))
  {
   navset = jQuery("nav").offset().top;
  }
 }


  • This function will be used for when scroll event will fire.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
jQuery(window).scroll(function() {
  
  scrollPos = jQuery(window).scrollTop();
  
  if (scrollPos >= navset) {
   jQuery("nav").addClass("fixed");
  } else {
   jQuery("nav").removeClass("fixed");
  }
  
 });

Full Code of JQuey file :

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
jQuery(document).ready(function()
{
 var navset, scrollPos = 0;

 jQuery("nav").wrap('<div class="nav-placeholder"></div>');
 jQuery("nav").wrapInner('<div class="nav-inner"></div>');
 jQuery(".nav-inner").wrapInner('<div class="nav-inner-most"></div>');

 function stickyUtility()
 {
  if (!jQuery("nav").hasClass("fixed"))
  {
   navset = jQuery("nav").offset().top;
  }
 }
 
 stickyUtility();
 
 jQuery(window).resize(function()
 {
  stickyUtility();
 });
 
 jQuery(window).scroll(function()
 {
  scrollPos = jQuery(window).scrollTop();
  
  if (scrollPos >= navset)
  {
   jQuery("nav").addClass("fixed");
  }
  else
  {
   jQuery("nav").removeClass("fixed");
  }
  
 });
});

CSS :

  • Write this css code in your css file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
html
{
 padding: 0;
 margin: 0;
}

body
{
 font-family: Helvetica, sans-serif;
 line-height: 1.5em;
 padding: 10px 0;
 margin: 0;
}

p
{
 margin: 0 0 2em 0;
}

.container
{
 width:100%;
 margin: 0 auto;
 position: relative;
}

nav
{
 z-index: 500;
 width:100%;
 background-color: black;
}

.fixed
{
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
}


.fixed .nav-inner-most
{
 width:100%;
 margin: 0 auto;
 background-color: black;
}

nav ul
{
 margin: 0;
 padding: 0;
}

nav ul li
{
 list-style: none;
 float: left;
}
.right
{
 list-style: none;
 float: right;
}
nav ul li a:link,
nav ul li a:visited
{
 display: block;
 text-decoration: none;
 padding: 10px 40px;
 background-color: black;
 color: orange;
 font-size: 90%;
 font-weight: bold;
}

nav ul li a:hover
{
 background-color: orange;
 color: black;
}

nav ul li:last-child a:link,
nav ul li:last-child a:visited
{
 border-right: none;
}

.list:before, .list:after
{
 content: "";
 display: table;
}
.list:after
{
 clear: both;
}

HTML

  • Now write the html code in your html file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="container">
  
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha-IlXS0OWTL94fRftSaAYi93uSmxUntsEo0IxaNc_5y5bCC_D30_jNUlPXnYMalBzpkPWbHnJEKWRTffEJMa1I6uZMADQaa8vwihg5oSgnj8HvY8lBy_9DE8JOaFY-oMCXqQ9krhR3Ss/s1600/gold-coast-australia-Australia-lake-Sunrise-Morning-315x851.jpg" width="100%" height="50%" />

  <nav>
   <ul class="list">    
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li class="right"><a href="#">Sign Out</a></li>
    <li class="right"><a href="#">Sign In</a></li>
    
   </ul>
  </nav><!-- /navigation -->

  <!-- write down description of the page-->
 </div>

Full Source Code :

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html lang="en">

<head>
 <title>Desire Code : Sticky Navigation Tutorial</title>                  
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
 
 <link rel="stylesheet" media="screen, projection" href="css/screen.css" />
 
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
 <script type="text/javascript" src="js/script.js"></script>
 
</head>

<body>

 <div class="container">
  
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha-IlXS0OWTL94fRftSaAYi93uSmxUntsEo0IxaNc_5y5bCC_D30_jNUlPXnYMalBzpkPWbHnJEKWRTffEJMa1I6uZMADQaa8vwihg5oSgnj8HvY8lBy_9DE8JOaFY-oMCXqQ9krhR3Ss/s1600/gold-coast-australia-Australia-lake-Sunrise-Morning-315x851.jpg" width="100%" height="50%" />

  <nav>
   <ul class="list">    
    <li><a href="http://desirecode.blogspot.in">Menu 1</a></li>
    <li><a href="http://desirecode.blogspot.in">Menu 2</a></li>    <li><a href="http://desirecode.blogspot.in">Menu 3</a></li>    <li><a href="http://desirecode.blogspot.in">Menu 4</a></li>    <li><a href="http://desirecode.blogspot.in">Menu 5</a></li>    <li class="right"><a href="http://desirecode.blogspot.in">Sign Out</a></li>    <li class="right"><a href="http://desirecode.blogspot.in">Sign In</a></li>    
   </ul>
  </nav>

  <!-- write down description of the page-->
 </div>
 
</body>

</html>

Output :
Sticky Navigation with CSS3 and JQuery

Click Here For Live Demo :

Live Demo

, , , , , ,

Saturday, 18 February 2017

Image Zoom Magnifying Glass Effect with CSS3 and jQuery

Author:  |   |  No Comments | 

In Image Zoom , Magnifying Glass Effect is very useful in now a days. Most of eCommerce Website or any product selling website include this type of facility for their customer.

eCommerce Website owner always put this functionality to increase traffic of the customer on their website. Using this feature, user can each point of image with zoom.

When small size of image in the webpage and user can't see properly than if these feature will added on image hover then user can easily will see that image with zoom.

Here, i explain whole code with step by step . Let's follow the step and run the example.


JAVASCRIPT :
  • This condition is used in .mousemove() function . In this condition when user hover on the image , script will execute.
  • image_object variable will create a new image object with same image. For getting dimention from the image we must create object of the image.

1
2
3
4
5
6
7
if(!sub_width && !sub_height)
{
var image_object = new Image();
image_object.src = $(".small").attr("src");
sub_width = image_object.width;
sub_height = image_object.height;
}


  • In this below condition , This is .zoom-area position of the div. mx and my variable will be take position of the div from left and top side.
  • If Pointer will be move outside the container then magnify will be hide otherwise magnify will be display.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
else
{
 var magnify_position = $(this).offset();
 var mx = e.pageX - magnify_position.left;
 var my = e.pageY - magnify_position.top;
 if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
 {
  $(".large").fadeIn(100);
 }
 else
 {
  $(".large").fadeOut(100);
 }
 if($(".large").is(":visible"))
 {
  var rx = Math.round(mx/$(".small").width()*sub_width - $(".large").width()/2)*-1;
  var ry =Math.round(my/$(".small").height()*sub_height - $(".large").height()/2)*-1;
  
  var bgp = rx + "px " + ry + "px";
  
  var px = mx - $(".large").width()/2;
  var py = my - $(".large").height()/2;

  $(".large").css({left: px, top: py, backgroundPosition: bgp});
 }
}

CSS :
  • Now add css code.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style>
 *
 {
  margin: 0;
  padding: 0;
 }
 .zoom-area
 {
  width: 500px;
  margin: 50px auto;
  position: relative;
  cursor: none
 }
 /* create magnify glass */
 .large
 {
  width: 175px;
  height: 175px;
  position: absolute;
  border-radius: 100%;
 
  /* box shadow for glass effect */
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 
  0 0 7px 7px rgba(0, 0, 0, 0.25), 
  inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  
  /*hide the glass by default*/
  display: none;
 }
 .small
 {
  display: block;
 }
</style>

HTML :


1
2
3
4
5
6
7
8
9
<div class="magnify">
 
 <!-- container of the magnify glass with original/large version -->
 <div class="large"></div>
 
 <!-- This is the small image -->
 <img class="small" src="https://i.ytimg.com/vi/6lt2JfJdGSY/maxresdefault.jpg" width="500" height="500" />
 
</div>

FULL CODE :

 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<html>
 <head>
  <style>
  *
  {
   margin: 0;
   padding: 0;
  }
  .zoom-area
  {
   width: 500px;
   margin: 50px auto;
   position: relative;
   cursor: none
  }
  /* create magnify glass */
  .large
  {
   width: 175px;
   height: 175px;
   position: absolute;
   border-radius: 100%;
  
   /* box shadow for glass effect */
   box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 
   0 0 7px 7px rgba(0, 0, 0, 0.25), 
   inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
   
   /*hide the glass by default*/
   display: none;
  }
  .small
  {
   display: block;
  }
  </style>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
  </script>
  <script>
  $(document).ready(function()
  {
   var sub_width = 0;
   var sub_height = 0;
    $(".large").css("background","url('" + $(".small").attr("src") + "') no-repeat");

   $(".zoom-area").mousemove(function(e){
    if(!sub_width && !sub_height)
    {
     var image_object = new Image();
     image_object.src = $(".small").attr("src");
     sub_width = image_object.width;
     sub_height = image_object.height;
    }
    else
    {
     var magnify_position = $(this).offset();

     var mx = e.pageX - magnify_position.left;
     var my = e.pageY - magnify_position.top;
     
     if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
     {
      $(".large").fadeIn(100);
     }
     else
     {
      $(".large").fadeOut(100);
     }
     if($(".large").is(":visible"))
     {
      var rx = Math.round(mx/$(".small").width()*sub_width - $(".large").width()/2)*-1;
      var ry = Math.round(my/$(".small").height()*sub_height - $(".large").height()/2)*-1;

      var bgp = rx + "px " + ry + "px";
      
      var px = mx - $(".large").width()/2;
      var py = my - $(".large").height()/2;

      $(".large").css({left: px, top: py, backgroundPosition: bgp});
     }
    }
   })
  })
  </script>
 </head>

 <div class="magnify">
  
  <!-- container of the magnify glass with original/large version -->
  <div class="large"></div>
  
  <!-- This is the small image -->
  <img class="small" src="https://i.ytimg.com/vi/6lt2JfJdGSY/maxresdefault.jpg" width="500" height="500" />
  
 </div>
</html>

Output :
magnify zoom image hover

 Click Here For Live Demo :

Live Demo

, , , , , ,

Thursday, 9 February 2017

Floating Back to Top Button with Smooth Scroll using CSS & JQuey

Author:  |   |  No Comments | 

Today, we will learn about how to make floating back to top button with smooth scroll using CSS & JQuery.

Floating back button is fantastic and it's most useful button for when website page size is too much large and user want to scroll at the top when it's at bottom of the page. It's very useful to make user friendly website.

This type of button is most useful when we have a large amount of content in a single page that time we need this type of button going at the top of the page.

To make better interface and responsive button, we need to use css and jQuery to create this button.

When page is scroll down, then button automatically display on the page and when click on button then page will scroll and move on top of the page.

Floating back button helped to back to the top of the screen without manually scroll to the user.

We are using CSS and JQuery for create this button. We describe all process and code of this program. This button will help for web developer for make website user friendly. At the end , We also Provide Live Demo button for run this example.

Now , Follow the steps and run this example :


  • JavaScript :


First of all , you need to add this link for add jquery.

1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Now , Write this JavaScript code in script tag for check that if page scroll down above 100px then button will be display otherwise button will not be display on the page.

1
2
3
4
5
6
7
$(window).scroll(function(){ 
    if ($(this).scrollTop() > 100) { 
        $('#scroll').fadeIn(); 
    } else { 
        $('#scroll').fadeOut(); 
    } 
});

Now, Write this JavaScript code for button click event. When button is clicked then page will scroll at the top of the page. We also put animation for smooth scrolling using .animate() function and also use .scrollTop() method for page scroll to top.

1
2
3
4
$('#scroll').click(function(){ 
    $("html, body").animate({ scrollTop: 0 }, 600); 
    return false; 
});

This is full JavaScript Code :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<script type='text/javascript'>
$(document).ready(function(){ 
    $(window).scroll(function(){ 
        if ($(this).scrollTop() > 100) { 
            $('#scroll').fadeIn(); 
        } else { 
            $('#scroll').fadeOut(); 
        } 
    }); 
    $('#scroll').click(function(){ 
        $("html, body").animate({ scrollTop: 0 }, 600); 
        return false; 
    }); 
});
</script>


  • CSS :


Now , Write this below code for button view.



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
#scroll {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:#3498db;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:60px;
    -moz-border-radius:60px;
    border-radius:60px
}
#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff;
}
#scroll:hover {
    background-color:#e74c3c;
    opacity:1;filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}


  • HTML :


1
<a href="#" id="scroll" style="display: none;"><span></span></a>


  • Full Code :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script type='text/javascript'>
    $(document).ready(function(){ 
     $(window).scroll(function(){ 
      if ($(this).scrollTop() > 100) { 
       $('#scroll').fadeIn(); 
      } else { 
       $('#scroll').fadeOut(); 
      } 
     }); 
     $('#scroll').click(function(){ 
      $("html, body").animate({ scrollTop: 0 }, 600); 
      return false; 
     }); 
    });
   </script>
   <style type="text/css">
   #scroll {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:#3498db;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:60px;
    -moz-border-radius:60px;
    border-radius:60px
   }
   #scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff
   }
   #scroll:hover {
    background-color:#e74c3c;
    opacity:1;filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
   }
   </style>
 </head>

 <body>
  <a href="#" id="scroll" style="display: none;"><span></span></a>
  <!-- write your page content here -->
 </body>
</html>


  • Watch Video :




Click Here For Live Demo :
Live Demo

, , , , , ,

Like us on Facebook

Site Visitor

Powered by Blogger.