Social login features on a website give plenty of users. Facebook login N sign up through its app is such a feature. You will create an app for Facebook Login on your website here and code as well. This is a complete tutorial in multiple parts.
Tag » Toggle
Bootstrap Off-canvas Menu and Sidebar with or without Overlay
Previously we have created Bootstrap off-canvas menu and sidebar. Further, the code was quite handy for WordPress websites. However, Bootstrap offers better accessibility and support for screen readers and similar assistive technologies.
Off-canvas Sidebar and Menu – WordPress and Bootstrap
Off-canvas sidebar and menu are quite popular. These collapsible sidebars offer a lot of convenient to put extra content on the page. You can implement an off-canvas sidebar in a Bootstrap powered website as well. All you need is a little HTML, CSS, and jQuery code.
Bigger Search Form with Drop-down in Navigation Bar
Websites that use Bootstrap 4 framework, sometimes need a bigger search form in the navigation bar. These websites might also need a drop-down or select input to provide better search. Create a navigation bar consists of a bigger search form.
How to Use Individual JavaScript Plugin in Bootstrap
You can use individual JavaScript plugin in Bootstrap framework also, rather using whole Bootstrap JS file built on jQuery. Once I had need to include only Navbar component which depends on Collapse JavaScript plugin from Bootstrap.
Bigger & Fixed Search Box with Dropdown in Bootstrap Navbar
Twitter Bootstrap is powerful mobile first front-end framework that provides all the necessary components to develop responsive websites using its common elements. One of the most popular elements on any website is the top navigation bar and the search widget. On a recent project, I had to implement Bigger & Fixed Search Box with Dropdown in Bootstrap Navbar and making the search bar fixed across different screen size.
jQuery slideUp(), slideDown() and slideToggle()
The jQuery slide methods slides elements up and down. jQuery comes with three handy methods to create the sliding effect easily :
Change Class using Jquery
The power of jQuery offers many features to web developers. jQuery has addClass(), removeClass() and toggleClass() methods to change class.
//Add a class $('#element').addClass('class_name'); //Remove a class $('#element').removeClass('class_name'); //Remove old class and add new class $('#element').removeClass('old_class').addClass('new_class'); //Or a short way to swap classes $("#element").toggleClass('old_class new_class');
Toggle class using jQuery
Sometimes we faced the problem of toggling the class in html because of only by changing the classes can do a different action in html.
Toggle class means exchange the class names. We can toggle class using jQuery as follows:
$(document).ready(function(){ if($('#id').hasClass('active')) $('#id').removeClass('active').addClass('deactive'); else $('#id').removeClass('deactive').addClass('active'); })