Creative Technocrayts

Mobile usability of websites Web is pervasive and the way we access to web is constantly changing and change is happening for the better. People are increasingly using smartphones to access sites than desktops and laptops as once they did. So keeping our websites mobile friendly is essential. Mobile usability of websites If you are new to web development how to make websites responsive will give a better idea. Early 2018, Google has announced that websites which are mobile friendly will be ranked for better results in search engine. So it is always better to make sure you have optimized mobile performance to be there in the show! Mobile usability and Responsiveness Websites and content management systems should also be mobile oriented and make users feel ease while accessing. Mobile usability on the whole is a broad concept which includes responsiveness of the site and both are not the same. Responsive site means how well our sites adapt to the width and orientation of the mobi...

Font Awesome 5 is an icon set and toolkit making it easy for web designers to add vector icons and social icons to websites. We had been using Font Awesome since version 3 and we explored version 5 soon after its release. For any website, Fonts in Websites play a significant impact on UI/UX. Font Awesome is just awesome!! The main reason for Font Awesome 5 doing great is that it has been a popular repository and has yet to find a competitor of its par. They provide a wide range of icon sets; none of the other icon packs provide such versatility and compatibility. Styles of FontAwesome 5 Solid Regular Light Brands Font Awesome 5 icons Font Awesome 5 Versions Free Pro Font Awesome 5 official documentation states that we may get a Pro license f...

DataTables jQuery Plugin Options – Complete Guide In Part I of this series, we introduced the basics of the DataTables.net jQuery plugin . The DataTables jQuery plugin provides a rich set of configuration options for sorting, paging, search, and responsive layouts. Let’s see how you can utilize these options efficiently. CDN Links for DataTables Add the following CSS and JS files to your project using CDN links: Stylesheet References https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css Script References https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css Disable All Options $("#example").dataTable({ paging: false, searching: false, info: false }); To display “Show entries” dropdown at the bottom of the data table $('.promo-prici...

Common jQuery Errors and How to Resolve Them jQuery is a JavaScript framework used for client-side scripting of HTML. jQuery is used for: DOM manipulation Event Handling Animation jQuery is a popular framework with a large community of developers using it, and many plugins have been developed using it. While working using jQuery in our projects, we may encounter the following errors in common: 1) Uncaught TypeError: Cannot read property 'xxx' of undefined 2) Uncaught TypeError: 'xxx' is not a function 3) SyntaxError: syntax error 4) 404 Errors 5) Conflict errors You may also read: Datatables-plugin options Ways to handle errors in jQuery Check whether jQuery is loaded. if (typeof jQuery == 'undefined') { // jQuery IS NOT loaded, do stu...

How to initialize Datatable plugin? Datatables.net is a sophisticated plug-in built on the jQuery JavaScript library. It provides enhanced functionality to normal HTML tables, offering built-in search, pagination, and sorting features. Download & Assets The asset files can be downloaded via the following methods: Official Website: datatables.net/download/index CDN Links: cdn.datatables.net Basic Implementation of Datatable Write the basic markup of the table with data. Add a unique ID or class name to the table. Include all the assets. As Datatables.net is built on jQuery , ensure that jQuery is loaded before the DataTables script. <table class="dashboard-table" id="example"> <thead> <tr> <th>Sites</th> <th>Followers</th> <th>R...

How to display a div on another div hover event? On a CSS hover event, we can change another div's styles. The another div can be either child or siblings. If a div has to be displayed only upon hover, 1) When the child div is inside parent div 2) When both the divs are siblings Read CSS Selectors For displaying div in hover, use :hover selectors. Following link demonstrates the displaying child when parent is hovered. https://jsfiddle.net/CreativeTechnocrayts/grtw44wd/9/ When displaying sibling div, ~ selector is used. (General sibling selector) When displaying an adjacent sibling , + selector is used (Adjacent sibling selector) We can directly select the element by using class or id names. Follow our FB page @CreativeTechnocrayts Subscribe to Creative Technocrayts and be a part of growing community.

In frequent case, we may notice that the container element will not grow as per the height of the children. This article deals with the fixes for the solution. The  sample issue is reproduced here for demonstration. https://jsfiddle.net/CreativeTechnocrayts/b1qfp9rz/2/