Browsed by
Category: Jquery

Parent Child Hierarchy using jqTree in jQuery / Javascript

Parent Child Hierarchy using jqTree in jQuery / Javascript

Parent Child Hierarchy using jqTree in jQuery / Javascript: When you want to display your data in parent child hierarchical view, then jQuery’s jqTree is the most simplest and easy plugin which can be configured in just 5 mins.   By following their official documentation steps, I just created a simple one page(combined all in the below one file only for easy try) which works nicely. But they provide lot of examples and customization’s which you can use anywhere in…

Read More Read More

285 total views, 2 views today

Dynamic render content on radio button change using bootstrap 4, jQuery

Dynamic render content on radio button change using bootstrap 4, jQuery

Dynamic render content on radio button change using bootstrap 4, jQuery: Interactive dynamic render content (here coupon and offer) is displayed on click coupon/offer radio button. UI is designed using bootstrap 4. jQuery is used to hide and show the respective contents(coupon/offer) on radio button change. By default both is displayed with the one more radio button named “All”.   Bootstrap 4 Sidebar and Content UI Source code: <!DOCTYPE html> <html lang=”en”> <head> <!– Required meta tags –> <meta charset=”utf-8″>…

Read More Read More

658 total views, 1 views today

Bootstrap 4 Responsive Megamenu With 6 Columns Example

Bootstrap 4 Responsive Megamenu With 6 Columns Example

Bootstrap 4 Responsive Megamenu With 6 Columns Example: In the last post, I posted the simple megamenu, in this I am posting responsive megamenu with 6 columns which will looks something like ecommerce or any affiliate networking site megamenu style.   Bootstrap 4 Responsive Megamenu With 6 Columns Example Source code: <!DOCTYPE html> <html lang=”en”> <head> <!– Required meta tags –> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”> <!– Bootstrap CSS –> <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css” integrity=”sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ” crossorigin=”anonymous”> <!– Yamm styles–> <link…

Read More Read More

1,192 total views, 2 views today

Bootstrap 4 Responsive Megamenu Example

Bootstrap 4 Responsive Megamenu Example

Bootstrap 4 Responsive Megamenu Example: Megamenu is one of the most important feature and need for ecommerce and business websites. There are lot of mega menu samples and examples for bootstrap 3. Since the bootstrap 4 came up with major changes, you can not use those examples/samples to make mega menu with bootstrap 4. Bootstrap 4 cheat sheet with all the classes are shared in the below link, Bootstrap 4 all classes list – Cheat Sheet I am sharing the…

Read More Read More

6,058 total views, 17 views today

Bootstrap 4 Responsive Slider Example

Bootstrap 4 Responsive Slider Example

Bootstrap 4 Responsive Slider Example: Bootstrap 4 slider came up with 5 different devices responsiveness along with slider next/previous button and the slider indicator. Which also came up with the text over the slider. Bootstrap 4 is released recently with major update. As per Bootstrap official changelog, Bootstrap 4 has been a massive undertaking that touches nearly every line of code. We’re stoked to share it with you and hear your feedback. We’ve got a lot of news to share…

Read More Read More

1,119 total views, 1 views today

Bootstrap 4 All Classes List – Cheat Sheet

Bootstrap 4 All Classes List – Cheat Sheet

Bootstrap 4 is released with much update mainly with flex options. I have shared bootstrap 4 all classes list below and this will be your cheat sheet for quick reference. Bootstrap 4 came up with a lot of new classes and modifications of existing classes. Bootstrap 4 is having around 300 classes. Please find below:   .active .alert .alert-dismissible .alert-heading .alert-* ( * => danger|info|primary|secondary|success|warning ) .alert-link .bg-* ( * => danger|info|primary|secondary|success|warning ) .bg-faded .bg-inverse .blockquote .blockquote-footer .blockquote-reverse .breadcrumb .breadcrumb-item .bs-tether-element-attached-*…

Read More Read More

1,120 total views, no views today

How to integrate google custom search to your website?

How to integrate google custom search to your website?

How to integrate google custom search to your website?:Google custom search is the best search tool which you can integrate to your website. If you are using any CMS(wordpress, joomla etc.,) softwares for your blog/site , then lot of ready-made plugins are exist. One important drawback with google custom search is it searches only from the google indexed pages. So if your website is new and integrated with google custom search then google may not search and provides the results…

Read More Read More

641 total views, 1 views today

Google to search only within your site using jQuery & Bootstrap

Google to search only within your site using jQuery & Bootstrap

Google to search only within your site using jQuery & Bootstrap: We have lot of plugins to make google to search only within your site in CMS frameworks like wordpress, joomla etc. But when you are developing your own custom site then enabling google to search only within your site may need some coding part. In this post I am explaining you how to make google to search only within your site. Requirements: jQuery & Bootstrap JS files [you will…

Read More Read More

608 total views, no views today

Responsive Dynamic Header using jQuery, PHP & Bootstrap

Responsive Dynamic Header using jQuery, PHP & Bootstrap

Responsive Dynamic Header using jQuery, PHP & Bootstrap: Dynamic header is providing the dynamic content for both logged in and logged out users differently. In our example here we have Login button at the right top and some content in the page. If you click Login it will be changed as my accounts and even the contents in the page changes dynamically. This is the approach followed in many websites for dynamic header to achieve simple and easy interface for…

Read More Read More

682 total views, 1 views today

Auto populate one dropdown based on other dropdown value change in Angular JS

Auto populate one dropdown based on other dropdown value change in Angular JS

Auto populate one dropdown value based on other dropdown value change in Angular JS:   As we know Angular JS is a two way data binding, mapping the $scope variable in the html/view file will map and bind the updated value which we are assigning/updating in the controller.   I recommend you to study Angular JS Hello world for dummies post if you do not have much idea about angular JS.   Requirements: We need jquery.min.js & angular.min.js to work…

Read More Read More

1,408 total views, no views today