9 Neon Buttons Pure CSS, Create Glowing Button Effect

How to create a Neon Button? Learn: Give a glowing effect to the button using pure CSS and make it sunshiny.


Super shine Neon Button Effects
Super Bright Neon Button

Hello, guys welcome to the CodingTuting with Jignesh Panchal. I hope you like our last post in which we created an Automatic Typing Effect using JavaScript. If you haven't visited so, click here.

And today we'll focus on Neon Effect on Button. So, let's get started.

Create Typewiter Effect HTML JavaScript | Typing Effect

How to Create as Automatic Typing Effect in HTML. We'll display a paragraph that display text like typing.


HTML Typewriter Effect using JavaScript
Auto Typing Effect |  Image by Clker-Free-Vector-Images from Pixabay

We'll create a simple logic using the Recursion method. Although, it is possible using for loop, conditional block (if), Recursion is the best solution.

Hello and welcome back to the CodingTuting with Jignesh Panchal. I hope you like our last creation on Create Animated Background using Pure CSS. Please visit if you haven't. Let's get started for today's creation.


What is Recursion?

A function who calls itself is called Recursion and the function that is being called is called a recursive function.

It is a very useful method to solve problem in computer programming. We'll learn more about the Recursion Method in another post.

CSS Gradient Background Animation, Get Source Code

How to create Animated Background using CSS only?

In this article, we'll create a movable gradient animation that gives a beautiful animation effect.


Animated Background using CSS
CSS Animated Background

Hello and welcome back friends to the CodingTuting with Jignesh Panchal. I hope you like our last post Lets get started.


What is the CSS Gradient?

Gradients are the combination of multiple colors that display a smooth transition between all selected colors.

And we'll select 3 colors for the background and 4 colors for the heading. All 3 backgrounds move from left to right and right to left which gives a beautiful CSS background effect. The same work has done for the heading.


Preview of Animated Background CSS Gradient


Understand HTML5 footer tag | Cool html footer template

What is a Web Page Footer and what does it contain?

The bottom area of the Web Page which contains the general information about the website is known as Web Page Footer or Website Footer. This general information is - The Company Name, Web Page Links, Contact information, Copyright info, etc.


Website Responsive Footer Design using HTML5 CSS and jQuery
Responsive Footer Design using HTML5 CSS jQuery

Hello readers, I'm Jignesh and welcome to the CodingTuting. Friends I hope you like our last creation which is Cool Full Responsive Design Template. If you haven't check it yet, so please check it.

And in today's article, we'll learn about the Use of <footer> Tag in HTML5, and also we'll create a Responsive HTML Footer Template using HTML5, CSS and jQuery. So let's get started.


Best HTML Responsive Website Design with CSS3 jQuery


How to Create Responsive Web Design without using Bootstrap ?


Responsive Website Template using HTML CSS
Create HTML Responsive Template using CSS and jQuery

I'm sure you've heard this - "If you want to make a Responsive Website, so go with the Bootstrap". Me too friends. I've created many Responsive Websites with the help of Bootstrap. But why I used Bootstrap for responsive design ?

The simple answer is - "Because, I didn't have good knowledge of CSS". One day my in my office my senior gave me an HTML Template and asked me to make it responsive.

Then I started to work and included the Bootstrap files and started to adding Bootstrap Grid and Classes. After finish one page, I show the design to my senior. Immediate he got that - I've used the Bootstrap in this project.

And he asked to remove the Bootstrap and make this Website Responsive without Using Bootstrap. Then I shocked and asked my senior - "Is it possible to make a website responsive without Bootstrap"?

He gave me to answer "Yes" and told me to - "We Can Make Responsive Website with CSS Only too". After that, I took some days to learn about Mobile Responsive Design with CSS. After that, I boost my CSS skills.

And now, I use maximum my own implementation to make Responsive Website Designs.

So this was a short story of mine, and welcome back friends to the CodingTuting. I'm Jignesh Panchal with another awesome tutorial. Friends, I hope you like our last beautiful creation on CSS Scroll Animation. If you haven't seen, please Click here.

Let's move to today's article - Responsive Web Design with HTML5 and CSS3.


I've created full single page Responsive Website Templates. In this, I've used HTML5 structure, CSS3 for responsive and animation and some JS and jQuery for toggle the class. We've the following features in this template.

1. Responsive Navigation Bar with Animation
2. Scrollable Image Strip and more

Preview of HTML Responsive Web Design with CSS


Scroll Animation CSS jQuery, 16 Cool Animations on Scroll


How to Make On Scroll Animation


16 Different Scroll Animation with CSS and jQuery
Animation on Scroll with CSS and jQuery at CodingTuting

UI Animations are the key effect on the beauty of any Web Page. Animation on Scroll is one of them. Today we'll learn How to make CSS Animation on Scroll using jQuery.

So, welcome back friends to the CodingTuting. I'm Jignesh Panchal with another awesome tutorial. Friends, I hope you like our last cool creation on Login Form. If you haven't seen, please Click here.

Let's move to today's creation.


I've created 16 different animations. I used CSS3 to created the animation and jQuery to control the animation. Many scroll animations are performed only once, then we need to reload the web page to see the animation again.

But our animation works with every scroll, it doesn't need to reload the web page. We'll create the following kinds of Scroll Animation CSS.


1. CSS Zoom Animation
2. CSS Fade Animation
3. CSS Rotate Animation
4. CSS Flip Animation
5. CSS Bounce Animation

Preview of CSS Scroll Animation jQuery


Cool login Form in html with animate css effect, javascript


How to Create Login and Registration Form in HTML


Login Form in HTML with CSS3 Animation and JavaScript
Beautiful LogIn Form in HTML CSS & JavaScript

HTML Login Form is one of those creations which beginners create most in learning web design. And the Login Form Design is one of the first looks of Website or Web Application. Like Facebook, Gmail, etc all have a Login Form in the first look.

And, today we'll Create a Login Form with the help of HTML, CSS3, and JavaScript with a Cool Animation. So, welcome to the website CodingTuting with Jignesh Panchal. Friends, I hope you like our last beautiful creation on Count Your Characters.

Let's move ahead to today's creation.


How to Create CSS Responsive Login Form ?

It's so easy to create friends. Just you've good knowledge of HTML, CSS, and JavaScript. I'm not asking about a strong knowledge. But your basic knowledge is important for this kind of creation.

Many Login Forms are available on the internet, but many of them are not responsive. And you know that - I always focus on responsive design. So our this CSS Login Form Template is fully responsive.


Preview of CSS Login form Design


Character Count online tool, get JavaScript function count

Count your character with the help of an easy tool of CodingTuting. And learn How to Create Character Count Tool for our Website.


Character Count Online Tool in JavaScript
Character Count with Space | JavaScript Function Tool

Sometimes we need to type and submit our content on any website. And many websites have a fixed limit of character. We can't write more than limit. And some websites don't show the number of characters which we type at that time.

So we start to count our character manually while typing, which is so annoying. Today we'll make our own tool fo Character Count with Space. So Welcome Back to the CodingTuting with Jignesh Panchal

Friends I hope you like our last post which was on Pricing Table in CSS with Cool Animation. If you haven't check it - so please check it by Click here. Believe me, it is an awesome creation.

Let's move ahead towards today's creation.

Basically today we are going to learn JavaScript onKeyup and JavaScript onPaste Event. We'll create a function for character count and call that function using onKeyup and onPaste event.

Pricing Table with Cool Animation UI in HTML CSS jQuery


How to Create Pricing Table/Chart ?

Today we'll create a Beautiful and Responsive Pricing Table in HTML CSS and jQuery.

So Welcome Back friends to the CodingTuting ! I'm Jignesh Panchal, let's go head.


Pricing Table Responsive Design with Animation in HTML CSS and jQuery
Responsive Pricing Table Template with Animations

1. What is Pricing Table ?

Pricing Table is a container which contains Key Points, Features, Specifications, Configuration, Price of any service or product, etc.

Pricing Table Design UI helps users/visitors to understand and differenciate among different different products/services. It is a very usefull part of a offer based website.


2. Use of Pricing Table

If we visit any website which offers Products/Services like Godaddy, Hostgator, Avira, etc. They all display their products in a tabular format. This tabular format is a Pricing Table. It contains the Specifications, Key Features, and Price of each product.


And if you are designing or developing any offer based website, then sure you'll need a Pricing Table Design for your project. Many plugins are available for Wordpress users to add Pricing Table in their blog.


But if know to code, so to create a design of Pricing Table UI by self coding is the better option then use of the plugin. We can also create a Pricing Table in Bootstrap. Bootstrap has inbuilt CSS which gives a beautiful look to our design.

But here I'm doing focus on self coding skills. Try to avoid Bootstrap sometime and develop by your own Coding Skills. So today we'll learn - How to Create a Pricing Table using HTML CSS and jQuery.

5 Super responsive css cards design, css cards animation


Super Cool CSS Responsive Card Designs with Animation

Super Cool Responsive Card Designs

In today's article, we'll see about a beautiful web design which is known as cards. I've created beautiful 5 different designs of Cards using CSS. These Cards are very easy to design and these are responsive too.

So, today you'll see that How to make Responsive Cards using CSS.

And, welcome to the website CodingTuting.Com with Jignesh Panchal, let's begin!!!


1. What are CSS Cards ?

CSS Cards are a perticular layout like a paper, 2D box. It is a specific container which contains some HTML Code, text/information, etc.

The best example of Cards are Business Cards which we see in our real life. These Business Cards contains some information about a person. So we can considor the Business Cards as HTML CSS Cards.

But in Web Design, Cards have many types and purpose. HTML CSS Cards have many use with different different designs and layout.


2. Use and Types of Cards

There are many uses and types of HTML CSS Cards. Use of Cards is depended upon the need and pieces of information. If we want to display only some text or few lines, so we should go with Basic Cards, which contains a snippet of some text and a link.

If we want to add a picture with the snippet, so should use Image Cards. We can make Image Card more beautiful by applying some CSS Animation on the image. We'll see a beautiful CSS Card UI with the image in this tutorial.

8 Awesome Hamburger Menu Button, html css menu icon

Animated Hamburger Menu Button in HTML CSS JavaScript for mobile and desktop
Animated Hamburger Menu Button HTML CSS | CodingTuting

Today's Web World is of Responsive Web Design. Where we have now is everything responsive. Image, Text, etc all are responsive. And Icons and Buttons also plays an important role in responsive web design.

Because it is not possible to show the content like Desktop in Small Screen Devices (Mobile, Tablet). So we use the Buttons and Menu Icon in HTML for the display that content.

And today we look about Hamburger Menu Button, it is the most important part of Responsive Design.


What is Hamburger Menu Button in Web Design?

It is a simple 3 Horizontal Graphic Lines on each other. It is a stack of 3 lines, and looks like burger stack, that's why it is known as Hamburger Menu Button . It is also called Menu Button. See the look of this button in the top image.


The use of Hamburger Menu Button is for expand and collapse the Main Menu, Navbar and other expandable content of the website. We can use Hamburger Menu for Mobile and Desktop as well.

We'll create Hamburger Menu to Cross CSS , Hamburger Menu and Back Button, Hamburger Menu to Sidebar Navigation Menu , etc in this tutorial.

Navigation Bar Hover Effect CSS, html css hover transition

Hover Animation on Navigation Bar
Navigation Bar Hover Effects CSS | CodingTuting

Navigations are the first impression of the website. It contains the links to all pages of our website. I've posted and shared the source code about the Responsive and colorful Navbar before. If you haven't check that post, please see here.

Navigations are one of the main parts of the website, that's why HTML5 has given the <nav> tag, which is use to create navigation for website. We can create navbar by using HTML CSS, Bootstrap etc. All these navigations have simple and basic look.

Sometimes we want our navigation more attractive. For this, we use our own CSS. Today we'll do something like this. Today we'll make a Simple Navigation Bar using HTML5 <nav> tag. And we'll make it more attractive by giving a beautiful hover effect using CSS.

We'll give a beautiful touchup to our website by creating this Hover Effect Navbar. We'll use only HTML and CSS, and those creators who haven't knowledge of JavaScript, they will like it more.


See the Preview of CSS Hover Effect Navigation



Now Focus on Source Code

Before look at the source code, let's understand How I did this? Don't be hurry for source code.

I'm using font-awesome .svg icons in my code. You can use it too or any others as you like.


  • I creted the Navigation first using <nav> tag with class menu. And placed some links with icons in <a> tag.
  • I gave the class active to the one link to show the active page.
  • I gave a colored border-bottom to the each <a> tag.
  • Then I gave padding:22px to each <a> tag which is equal to the base line of the Navigation.
  • I defined the keyframe CSS3 animations for different different browser. This animation reduce the padding of <a> tag from 22px to 6px. And vice-versa one more animation.
  • At last, I call this CSS3 Keyframe animation on hover the <a> tag.

Changing the padding of <a> tag from 22px to 6px (on hover), and 6px to 22px (default) is giving the animation effect to the navigation.


Above is the summary for understanding the source code. Please focus on this full source code and try to understand it. If you've any doubt please let me know in the comment.



HoverNavbar.html

<!--Code by CodingTuting.Com Jignesh Panchal-->
<!DOCTYPE html>
<html>

    <head>
        <title>Hover Nabvar</title>
        <link rel="stylesheet" href="StyleHoverNavbar.css"/>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
    </head>

    <body>

        <nav class="menu">

            <a href="#" class="active" title="Home"><i class="fas fa-home"></i> Home </a>
            <a href="#" title="About"><i class="far fa-address-card"></i> About </a>
            <a href="#" title="Gallery"><i class="fas fa-photo-video"></i> Gallery </a>
            <a href="#" title="Contact"><i class="fas fa-mobile-alt"></i> Contact </a>
            <a href="#" title="FAQ"><i class="fas fa-question"></i> FAQ </a>            
        
        </nav>

    </body>

</html>


StyleHoverNavbar.css

/*Code by CodingTuting.Com Jignesh Panchal*/
@-webkit-keyframes up-underline {
    0% { padding: 22px 0px; }    
    100% { padding: 6px 0px; }
}

@-moz-keyframes up-underline {
    0% { padding: 22px 0px; }    
    100% { padding: 6px 0px; }
}

@-o-keyframes up-underline {
    0% { padding: 22px 0px; }    
    100% { padding: 6px 0px; }
}

@keyframes up-underline {
    0% { padding: 22px 0px; }    
    100% { padding: 6px 0px; }
}

@-webkit-keyframes down-underline {
    0% { padding: 6px 0px; }    
    100% { padding: 22px 0px; }
}

@-moz-keyframes down-underline {
    0% { padding: 6px 0px; }    
    100% { padding: 22px 0px; }
}

@-o-keyframes down-underline {
    0% { padding: 6px 0px; }    
    100% { padding: 22px 0px; }
}

@keyframes down-underline {
    0% { padding: 6px 0px; }    
    100% { padding: 22px 0px; }
}

body{
    margin:0;
}

.menu{
    text-align: center;
    line-height: 3.5;
    border-bottom: 4px solid #E91E63;
}

    .menu a{
        padding: 22px 0px;
        margin-right: 40px;
        font-family: arial;
        font-size: 18px;
        text-decoration: none;
        color: #282929;
        border-bottom: 3px solid #e91e63;
        
        -webkit-animation: down-underline .4s;
        -moz-animation: down-underline .4s;
        -o-animation: down-underline .4s;
        animation: down-underline .4s;

        -webkit-transition: all .2s ease-in;
        -moz-transition: all .2s ease-in;
        -o-transition: all .3s ease-in;
        transition: all .3s ease-in;
    }

    .menu a:hover{
        color:#e91e63;
        padding: 6px 0px;
            
        -webkit-animation: up-underline .4s;
        -moz-animation: up-underline .4s;
        -o-animation: up-underline .4s;
        animation: up-underline .4s;
    }

    .menu a.active{
        padding: 6px 0;
    }


We hope you got - How To Make Navigation Hover CSS. You can use this idea of animation to anywhere as you like. And you can also make more animations like this.

If there is any bug in this tutorial please let us know in the comment.

We would like your suggestion on any topic. Please suggest us, we'll try to post about that topic as soon as. If you've any query regards the Web Design, Development, etc. Please do comment.


Sharing is Caring


Thanks for Reading


best css floating social media share buttons for website

CSS Floating Social Media Share Button

Social Media Share buttons are an important part of every website. It helps our website viewers and readers to connect with us via many platforms. Generally, websites have social media share buttons on top header and footer.

So people use to scroll up and scroll down to find the social media icons/buttons. This kinds of social media sharing buttons are not much effective, because it is invisible most of the time on the screen. So today we'll see the Fixed Social Media Share Buttons.

These buttons are permanently fixed in the middle of the screen. And it is responsive too. Many newbies web developers and designers look for How To Add Social Media Share Button on the website?

So today you'll get the beautiful solution of How to Add Floating Social Media Buttons to Website. Many bloggers download the plugins to add Social Media Sharing Buttons on their blog/website.

And these plugins make the website heavy and the website takes a long time to load in a web browser. Because most plugins contain HTML, CSS along with JavaScript and jQuery But our Social Media Share Buttons are too light.

These are built-in pure HTML and CSS. You can add these Floating and Fixed Social Media Share Button in your Blogger website, WordPress website, etc. These works with hover effects. These are the few lines of code.

Just add this HTML design and CSS in your website.


See this Preview of Fixed and Floating Social Media Share Button



CSS Fixed & Floating Social Media Share Button with Source Code

Let's understand the source code.

I'm using font-awesome .svg icons in my code. You can use it too or any others as you like.


  • I created the basic design in HTML. Then I placed social media icons in <a> tag in a divesion <div>. Then I gave position:fixed and other CSS to locate the vertically center to this division
  • I gave descriptive ID to the each icon's parent <a> tag. And a common class my-social to the each icon.
  • I applied the appropriate CSS for colors, margins, and padding to all icons.
  • I gave float:right to the all icons for the maintain the reverse order of the tabindex.
  • I selected to the all <a> tags except the first one using this selector #social-share a:not(:first-child)
  • I defined the CSS3 Keyframe Animation for the fade-in effect. I used 4 different CSS3 Keyframe Animation Code for supports to all browsers.
  • Then I used the hover effect CSS by selecting the <a> element except first child.

Above is the summary of understanding the source code. Please focus on this full source code and try to understand it. If you've any doubt please let me know in the comment.



SocialShare.html

<!DOCTYPE html>
<!-- Code by CodingTuting.Com Jignesh Panchal -->
<html>
    <head>
        <title>Social Share</title>
        <link rel="stylesheet" href="css/style.css">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>

        <div id="social-share">
          
            <a href="#" title="Social Share" id="share">
                <i class="fas fa-share-alt my-social"></i>
            </a>

            <a href="#YWhatsapp url" target="_blank" title="Instagram" id="instagram">
                <i class="fab fa-instagram my-social"></i>
            </a>
                        
            <a href="#YReddit url" target="_blank" title="Reddit" id="reddit">
                <i class="fab fa-reddit-alien my-social"></i>
            </a>            

            <a href="#YLinkedin url" target="_blank" title="Linkedin" id="linkedin">
                <i class="fab fa-linkedin-in my-social"></i>
            </a>

            <a href="#YWhatsapp url" target="_blank" title="Whatsapp" id="whatsapp">
                <i class="fab fa-whatsapp my-social"></i>
            </a>
            
            <a href="#Ytwitter url" target="_blank" title="Twitter" id="twitter">
                <i class="fab fa-twitter my-social"></i>
            </a>

            <a href="#Yfacebook url" target="_blank" title="Facebook" id="facebook">
                <i class="fab fa-facebook-f my-social"></i>
            </a>

        </div>

    </body>
</html>


Style.css

/* CSS Code by CodingTuting.Com Jignesh Panchal */
@-webkit-keyframes fadeIn {
    0% { opacity: 0; }    
    100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
    0% { opacity: 0; }    
    100% { opacity: 1; }
}

@-o-keyframes fadeIn {
    0% { opacity: 0; }    
    100% { opacity: 1; }
}

@keyframes fadeIn {
    0% { opacity: 0; }    
    100% { opacity: 1; }
}

    #social-share {
        position: fixed;
        right: 0px;
        top: 50%;
        z-index:10;
    }
   
        #social-share a {
            text-decoration: none;
            float: right;
        }

        #social-share a:not(:first-child) {
            animation:fadeOut 0.5s;
            display: none;
        }        

        #social-share:hover a:not(:first-child) {
            display: inline;
            -webkit-animation: fadeIn 0.5s;
            -moz-animation: fadeIn 0.5s;
            -o-animation: fadeIn 0.5s;
            animation: fadeIn 0.5s;
        }

        #social-share:hover .fa-share-alt {
            border-radius: 0px;
        }
                     
        #social-share a .my-social {
            border-right: 0;
        }

        #social-share a .fa-facebook-f {
            padding: 8px 12px;
            color: #3F51B5;
            border-radius: 3px 0px 0px 3px;
        }
        
        #social-share a .fa-twitter {
            color:#87ceeb;
        }

        #social-share a .fa-whatsapp {
            color:#008000;
        }

        #social-share a .fa-linkedin-in {
            color:#607d8b;
        }

        #social-share a .fa-reddit-alien {
            color:#ff6c00;
        }

        #social-share a .fa-instagram {
            color:#ff1740;
            padding: 8px 11px;
        }
        
        #social-share > a > .fa-share-alt {            
            color: #2196f3;
            border-right: 0;
            padding: 8px 10px;   
            border-radius: 3px 0px 0px 3px;    
        }
         
        #social-share #facebook:focus > .fa-facebook-f, #social-share .fa-facebook-f:hover {
            background-color: #3F51B5;
            border-color:#3F51B5;
            color: #fff;
        }
        
        #social-share #twitter:focus > .fa-twitter, #social-share .fa-twitter:hover {
            background-color:#87ceeb;
            border-color: #87ceeb;
            color:#fff;
        }
        
        #social-share #whatsapp:focus > .fa-whatsapp, #social-share .fa-whatsapp:hover {
            background-color:#008000;
            border-collapse: #008000;;
            color:#fff;
        }
        
        #social-share #linkedin:focus > .fa-linkedin-in, #social-share .fa-linkedin-in:hover {
            background-color:#607d8b;
            border-collapse: #607d8b;;
            color:#fff;
        }
        
        #social-share #reddit:focus > .fa-reddit-alien, #social-share .fa-reddit-alien:hover {
            background-color:#ff6c00;
            border-collapse: #ff6c00;;
            color:#fff;
        }
        
        #social-share #instagram:focus > .fa-instagram, #social-share .fa-instagram:hover {
            background-color:#ff1740;
            border-collapse: #ff1740;
            color:#fff;
        }
        
        #social-share #share:focus > .fa-share-alt, #social-share .fa-share-alt:hover {
            color: #fff;
            background-color: #2196f3;
            border-color: #2196f3;
        }

        .my-social {
            font-size: 1.5em;
            border: 1px solid #3F51B5;
            padding: 8px 10px;
            cursor: pointer;
            transition: all 0.4s ease-out;
            -webkit-transition: all .4s ease-out;
            -moz-o-trasition: all .4s ease-out;
            -o-trasition: all .4s ease-out;
        }


We hope you got - How to Add Social Media Share Button in Website. If there is any bug in this tutorial please let us know in the comment.

We would like your suggestion on any topic. Please suggest us, we'll try to post about that topic as soon as. If you've any query regards the Web Design, Development, etc. Please comment.


Sharing is Caring


Thanks for Reading


How to use jQuery stop function, stop running animation


use jQuery Stop Function
jQuery stop function CodingTuting Image by Arek Socha from Pixabay

Sometimes we need to stop any function in jQuery in the middle. So How to stop function in jquery?
In this tutorial, we'll learn - How to use jQuery stop function.

Using jQuery stop() method/function, we can stop the currently running function. The stop() function in jQuery is very useful on the animations. It is used to stop the currently running animation.

We can stop the functions like jQuery fadeIn(), jQuery fadeOut(), jQuery slide() and more. We can resume the stoped animation too. This method is also known as jquery stop and resume animation.

Let's see


Syntax:

$(selector).stop(stopAllAnimations, jumpToEnd);

1st Parameter - stopAllAnimations

It is an "optional" boolean (true or false) parameter. It is used to stop all animations which are in the queue. The default value of this parameter is false.


2nd Parameter - jumpToEnd

It is an "optional" boolean (true or false) parameter. It is used to complete immediately the currently running animation. The default value of this parameter is false.


We'll understand the use of these parameters in this tutorial.



Example of without parameter:

Start the animation by click on the "Start" button. And stop the animation by clicking the "Stop" button.



Example with parameter:

1) $(selector).stop(true);

Here, stopAllAnimations parameter is set to true.
There are 4 animations here in the queue. left, down, right and top. All queued animations will stop once we click on the "Stop" button.



2) $(selector).stop(false, true);

Here, jumpToEnd parameter is set to true.
There are 4 animations here in the queue. left, down, right and top. It'll complete immediately the current animation and move to the next animation, once we click on the "Stop" button.



Source Code of the above Example

HTML and CSS
<style>
.myBox
{
 background:#ff0000;
 height:100px;
 width:100px;
 position: relative;
 margin-top:20px;
}
</style>

<button id="startAnimation"> Start </button>
<button id="stopAnimation"> Stop </button>

<div class="mybox"></div>

jQuery function
$(document).ready(function(){
    $("#startAnimation").click(function(){
        $(".mybox").animate({ left: "+=300px" }, 2000 );
        $(".mybox").animate({ top: "+=100px" }, 2000 );
        $(".mybox").animate({ left: "-=300px" }, 2000 );
        $(".mybox").animate({ top: "-=100px" }, 2000 );
    });

    $("#stopAnimation").click(function(){
        $(".mybox").stop(false, true);
    }); 
});


We hope you got - How to stop jQuery Function from execution. If there is any bug in this tutorial please let us know in the comment.

We would like your suggestion on any topic. Please suggest us, we'll try to post about that topic as soon as. If you've any query regards the Web Design, Development, etc. Please comment.


Sharing is Caring


Thanks for Reading


Create Responsive Navbar using HTML CSS jQuery

How To Create Responsive Navbar using HTML, CSS & jQuery

Responsive navigation bar using html css jquery
Responsive Navbar like Bootstrap Navbar using HTML CSS jQuery CodingTuting

A beautiful Responsive Design Navigation Menu is important for a website. The Navigation Menu Bar is also known as Navbar, Menubar, etc.


What is Navbar in HTML?

A Navbar is a strip which contains the menu/links of other pages. Eg: Home, About, Contact, etc. There are two types of Navbar. 1. Horizontal Navbar, 2. Vertical Navbar. We'll create a Horizontal Navigation Bar.



In this tutorial, we'll create a beautiful responsive design navbar using HTML, CSS, and jQuery. Generally, people use Bootstrap Navbar. Especially new designers who haven't much knowledge about CSS & JS, go with Bootstrap.

Understand jQuery more. Click here

Many websites are responsive, but it is not sure that - the Bootstrap has used on that website. If you are doing the job in the company- You may get a task to make Responsive Menu without using Bootstrap. So, you have to do it.

But can we create a responsive navbar without bootstrap? The simple answer is - Yes. So How to do it ? Here we'll create a beautiful colorful responsive navbar with dropdown without bootstrap. Let's begin.


Step 1- HTML Design of Navbar

Create a division and make an HTML Unordered List of menus and a form for Search Box in the division. Give a discriptive class name for applying CSS.


Step 2- Add Required Styles and Scripts

Create an empty CSS page "Style.css" and add it in the <head> section of the page. We are using the Font Awesome icon in our code. You can use another icon. Or you can go with Font Awesome.

Also, we'll create a small jQuery function. So add Font Awesome and the jQuery before the closing of the </body> tag.

Here is the Code of the HTML Design.

<!DOCTYPE html>
<html lang="en">

 <head>
  <title> Beautiful Navbar </title>
  
  <meta content="width=device-width, initial-scale=1" name="viewport" />
  
  <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
  
  <div class="nav nav-sky">
   
   <div class="menu-btn"> <i class="fas fa-bars"></i> </div>
   
   <div class="nav-elements">
   
    <ul class="nav-content">
     
     <li> <a href="#" title="Home" class="active"> <i class="fas fa-home"></i> Home </a> </li>
     
     <li> <a href="#" title="About"> <i class="fas fa-address-card"></i> About </a> </li>
     
     <li>
      
      <div class="dropdown">
       
       <a href="#" class="dropdown-link" title="Gallery">
        <i class="fas fa-camera"></i> Gallery <i class="fas fa-caret-down"> </i>  
       </a>
       
       <div class="dropdown-menu">       
        
        <a href="#" title="Option 1"> Opton 1 </a>
        <a href="#" title="Option 2"> Opton 2 </a>
        <a href="#" title="Option 3"> Opton 3 </a>
        
       </div>
       
      </div>
      
     </li>
     
     <li> <a href="#" title="Contact"> <i class="fas fa-phone"></i> Contact </a> </li>
     
    </ul>
   
    <form class="search-area">
     <input type="text" name="search" placeholder="Search Item" title="Search Item">
     <button class="btn-search" name="search-button" title="Search">Search</button>
    </form>
    
   </div>
  
  </div>

    <script data-src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script defer data-src="https://use.fontawesome.com/releases/v5.8.2/js/all.js" integrity="sha384-DJ25uNYET2XCl5ZF++U8eNxPWqcKohUUBUpKGlNLMchM7q4Wjg2CUpjHLaL8yYPH" crossorigin="anonymous"></script>
    </body>
</html>


Step 3- Add CSS

Give style for make inline list item of <ul>. Styles for coloring and all. We've also added the @media query in the CSS to make it responsive. Make sure to write good CSS in proper indentation according to the design.

/* CSS for style layout start*/
.nav {
 padding: 0px 50px;
    font-family: sans-serif;
}

 .nav .menu-btn {
  display:none;
 }
 
.nav-content {
 padding: 0;
 list-style-type: none;
 display: inline-block;
 margin: 0px;
}

 .nav-content li {
  display: inline-block;
 }
 
  .nav-content li a {
   text-decoration:none;
   padding: 14px 10px;
   display: flex;
  }
  
   .nav-content li a .fa-caret-down {
    padding: 0px 10px;
   }

.dropdown .close-dropdown .fa-times {
 padding-right:10px;
 float: right;
 display:none;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu {
    position: absolute;
    z-index: 1;
    min-width: 130px;
 display:none;
}

.search-area {
 float:right;
 list-style-type: none;
 display: inline-block;
 padding: 8px;
}

 .search-area input {
  border-radius: 4px;
  padding: 6px;
  transition: all .5s;
 }
 
 .search-area input:focus {
  border-radius: 4px;
  outline: none;
 }

.btn-search {
 border-radius: 4px;
 padding: 6px;
    cursor: pointer;
 transition: all .5s;
}

svg:not(:root).svg-inline--fa {
    padding-right: 5px;
}
/*  CSS for style layout end*/


/* CSS Media Query for 768p start */
@media screen and (max-width: 768px) {
 
 .bottom-border-nav{
  border-bottom:0.1px solid;
 }
 
 .nav {
  padding: 0px;
 }
 
 .nav .menu-btn {
  display:block;
  padding: 10px;
  font-size:2rem;
 }
 
 .nav-elements {
  display:none;
 }
 
 .nav-sky .search-area {
  border-top: 1px solid #fff;
 }
 
 .nav-content {
  display: block;
 }
 
  .nav-content li {
   display: block;
  }
 
 .dropdown-menu {
  position: relative;
  min-width: auto;
 }
 
  .dropdown-menu a {
   padding-left: 20px !important;
  }
  
 .search-area {
  float: none;
  width: 100%;
  padding: 12px 8px;
  border-top:0.1px solid;
 }
} 
/* CSS Media Query for 768p end */


/* CSS for sky theme start*/
.nav-sky {
 color:#fff;
 background-image: linear-gradient(#44adff, #8acbfd);
}

 .nav-sky .nav-content li a {
  color:#fff;
 }
 
 .nav-sky .nav-content li a:hover, .nav-sky .dropdown:hover .dropdown-link {
  background-image: linear-gradient(#1096ff, #5fb8ff);
 }
  
 .nav-sky .dropdown-menu {
  background-color: #a2d5fd;
  box-shadow: 0px 5px 10px #abdaff;
 }
 
 .nav-sky .search-area input {
  color: #fff;
  background: transparent;
  border: 1px solid #fff;
 }
 
 .nav-sky .search-area input:focus {
  box-shadow: 0px 0px 10px #fff;
 }

 
 .nav-sky .search-area input::placeholder {
  color:#fff;
 }
 
 .nav-sky .btn-search {
  background: transparent;
  border: 1px solid #fff;    
  color: #fff;
 }
 
 .nav-sky .btn-search:hover, .btn-search:focus {
  background-color: #0182e6;
  border: 1px solid #0182e6;    
  color: #fff;
 }

 .nav-sky .active {
  background-image: linear-gradient(#1096ff, #5fb8ff);
 }
/* CSS for sky theme end*/


Step 4- Add jQuery Function

Add simple jQuery function before closing the </body> tag for a slide up and slide down the menu in small devices.

<script>
    $(document).ready(function(){
        $(".menu-btn").click(function(){
            $(this).toggleClass("bottom-border");
            $(this).next(".nav-elements").slideToggle("slow");
        });
    });
</script>


Here is the output picture of our code

Responsive navigation bar using html css jquery
Responsive Navigation Bar Nav Sky HTML CSS jQuery CodingTuting

Mobile Responsive View

View of Mobile Friendly Gradient Navigation HTML CSS jQuery
Mobile Friendly Navigation Bar Nav Sky HTML CSS jQuery CodingTuting

Heyyyyy!!!
Have you tested the responsive design of this navbar well? It is very important to test the responsive design of our website/content.
Here is the best way to test the responsive design of the website.

Give appropriate class for another more navbar

class="nav nav-anger"

Red Responsive Navigation Bar HTML CSS jQuery
Responsive Navigation Bar Nav Anger HTML CSS jQuery CodingTuting

class="nav nav-wet"

Responsive Navbar in Green color
Responsive Navigation Bar Nav Wet HTML CSS jQuery CodingTuting

class="nav nav-coal"

Responsive Navbar with Dropdown HTML CSS jQuery
Responsive Navigation Bar Nav Coal HTML CSS jQuery CodingTuting


class="nav nav-silver"

Responsive Horizontal navigation bar Gradient
Responsive Navigation Bar Nav Silver HTML CSS jQuery CodingTuting

class="nav nav-aqua"

Create top Navigation Bar Responsive HTML CSS
Responsive Navigation Bar Nav Aqua HTML CSS jQuery CodingTuting

class="nav nav-sunny"

Yellow Gradient Responsive Navbar with Dropdown
Responsive Navigation Bar Nav Sunny HTML CSS jQuery CodingTuting

class="nav nav-lips"

Navbar in HTML CSS with Pink Gradient
Responsive Navigation Bar Nav Lips HTML CSS jQuery CodingTuting


We hope you like this all beautiful gradient navbar without using the bootstrap. If there is any bug in this tutorial please let us know in the comment.

We would like your suggestion on any topic. Please suggest us, we'll try to post about that topic as soon as. If you've any query regards the Web Design, Development, etc. Please comment.

Sharing is Caring


Thanks for Reading


jQuery Effect - slide - CodingTuting


jQuery Effect - slide


CodingTuting

This is the example of the jQuery slideToggle() method. Learn jQuery with jQuery Tutorial at CodingTuting.Com. You'll find more jQuery Tutorials on this site.

jQuery slide effect is used to slide up and slide down the content.

There are 3 kinds of slide effect are in jQuery.

  1. slideDown()
  2. slideUp()
  3. slideToggle()

1)   slideDown()

The jQuery effect "slideDown()" is used to slide down the content.

Syntax:

$(selector).slideDown(speed, callback);

slideDown() methods has two optional parameters:-

1. The parameter "speed" is used to change the speed of slide. The value of the "speed" parameter can be: "slow", "fast", or in milliseconds.

2. The parameter "callback" is a function, which executes after the slideDown() method completed. We'll learn about callback in the upcoming chapter.

Example:

This will slide down the text after a click on the button.

Learn jQuery with jQuery Tutorial at CodingTuting.Com. This is the example of the jQuery slideDown() method. You'll find more jQuery Tutorials on this site.



Code


<head>

    <style> 
        #slideBox
        {
            padding: 5px;
            text-align: center;
            background-color: #3b3e48;
            border: solid 1px #c3c3c3;
        }

        #slideBox 
        {
            padding: 50px;
            display: none;
        }
    </style>

</head>

<body>
 
    <button id="slideDown-btn">Slide Down</button>

    <div id="slideBox">
        <p>Learn jQuery with jQuery Tutorial at CodingTuting.Com. This is the example of the jQuery slideDown() method. You'll find more jQuery Tutorials on this site.</p>
    </div>

</body>

Add this jQuery before closing the </body> tag

    <script> 
        $(document).ready(function(){
            $("#slideDown-btn").click(function(){
                $("#slideBox").slideDown("slow");
           });
        });
    </script>


2)   slideUp()

The jQuery effect "slideUp()" is used to slide up the content.

Syntax:

$(selector).slideUp(speed, callback);

slideUp() methods has two optional parameters:-

1. The parameter "speed" is used to change the speed of slide up. The value of the "speed" parameter can be: "slow", "fast", or in milliseconds.

2. The parameter "callback" is a function, which executes after the slideUp() method completed. We'll learn about callback in the upcoming chapter.

Example:

This will slide up the text after a click on the button.

Learn jQuery with jQuery Tutorial at CodingTuting.Com. This is the example of the jQuery slideUp() method. You'll find more jQuery Tutorials on this site.



Code


<head>

    <style> 
        #slideUpBox
        {
            padding: 5px;
            text-align: center;
            background-color: #3b3e48;
            border: solid 1px #c3c3c3;
        }

        #slideUpBox 
        {
            padding: 50px;
        }
    </style>

</head>

<body>
 
    <button id="slideUp-btn">slide up</button>

    <div id="slideUpBox">
        <p>Learn jQuery with jQuery Tutorial at CodingTuting.Com. This is the example of the jQuery slideUp() method. You'll find more jQuery Tutorials on this site.</p>
    </div>

</body>

Add this jQuery before closing the </body> tag

    <script> 
        $(document).ready(function(){
            $("#slideUp-btn").click(function(){
                $("#slideUpBox").slideUp("slow");
           });
        });
    </script>


3)   slideToggle()


jQuery slideToggle effect
jQuery slideToggle() Effect | jQuery Tutorial | CodingTuting

The jQuery effect "slideToggle()" is used to switching in slideUp and the slideDown methods.

Syntax:

$(selector).slideToggle(speed, callback);

slideToggle() methods has two optional parameters:-

1. The parameter "speed" is used to change the speed of toggle effect. The value of the "speed" parameter can be: "slow", "fast", or in milliseconds.

2. The parameter "callback" is a function, which executes after the slideToggle() method completed. We'll learn about callback in the upcoming chapter.

Example:

This will toggle (switch) between slide up and slide down effect on the element after a click on the button.

Learn jQuery with jQuery Tutorial at CodingTuting.Com. This is the example of the jQuery slideToggle() method. You'll find more jQuery Tutorials on this site.



Code


<head>

    <style> 
        #slideToggleBox
        {
            padding: 5px;
            text-align: center;
            background-color: #3b3e48;
            border: solid 1px #c3c3c3;
            display:none;
        }

        #slideToggleBox 
        {
            padding: 50px;
        }
    </style>

</head>

<body>
 
    <button id="slideToggle-btn">Slide Toggle</button>

    <div id="slideToggleBox">
        <p>Learn jQuery with jQuery Tutorial at CodingTuting.Com. This is the example of the jQuery slideToggle() method. You'll find more jQuery Tutorials on this site.</p>
    </div>

</body>

Add this jQuery before closing the </body> tag

    <script> 
        $(document).ready(function(){
            $("#slideToggle-btn").click(function(){
                $("#slideToggleBox").slideToggle("slow");
           });
        });
    </script>

Thanks for Reading