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 website. We had been using font awesome since 3 version and we have explored version 5 soon after its release. For any websites, Fonts in Websites play an impact in UI / UX. Font awesome is just awesome!! The main reason of Font awesome5 doing great is it is been a popular repository and yet to find a competitor of its par. They provide wide range of icons set. None of the other icon packs provide such versatility and compatibility. Styles of FontAwesome 5 1) Solid 2) Regular 3) Light 4) Brands Font awesome 5 icons Font Awesome 5 comes in two versions : 1) Free 2) Pro Font Awesome5 official documentation states that we may get a Pro license of $60 with 1,718 more icons to the free version of 989 icons. Icons of light styles comes with Pro version Font awesome 5 comes in two formats 1) Web fonts for embedding in our project file. 2) Desktop fonts as ...

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...

jQuery is a JavaScript framework used for client side scripting of HTML. jQuery is used for 1) DOM manipulation 2) Event Handling 3) 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 stuff here. } Check whether the custom script is loaded. Check for console errors. You may find anyone of the above errors. Try whether it is working in document is ready or after page loads or ...

How to initialize Datatable plugin? Datatables.net is a sophisticated plug in built on Jquery, JavaScript library which provides more functionality to normal HTML tables. The plug in offers search, pagination and sorting functionalities. The assets file can be downloaded From the website, CDN From website: https://datatables.net/download/index CDN Links: https://cdn.datatables.net/ Basic Implementation of Datatable Write the basic markup of the table with data Add a class name to the table Include all the assets As Datatables.net is built on Jquery, make sure that Jquery is downloaded before data tables Sites Followers Rank Country SitePoint 11456 5 Canada Learnable 123449 3 USA Flippa 143567 1 Brazil $(function(){ $("#example").dataTable(); }) You may...

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/