Creative Technocrayts

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/

For anyone who is delivering websites with deadly deadline; there are many chances to miss a few points. To overcome the lag it is better to have a checklist to go through before the launch. When many developers are contributing to the project, it is better to brainstorm and prepare a list to go through at the end. The list may be drawn based on the scope of the project whether the site / application is repsonsive, accessible or print support. File Structuring 1. Supporting files in proper folders (img, css, js, downloads) Maintaining proper project folder structure helps to organize easily and stick to a proper workflow which will avoid conflicts in a team. Header 2. Use a correct Doctype preferably latest version. ( !DOCTYPE html ) You can read here for more information 3. Include Favicons Favicons is a quick identity to our websites. Read on how to implement favicons to our websites. 4. Viewport tag with user-scalable attribute for responsive websites. Viewpo...

A Curated Learning Path for Aspiring Web Developers: HTML, CSS & Design Fundamentals This article has curated essential articles for any aspiring web developer. These articles cover the basics of Web design, HTML, and CSS—the foundational pillars of front-end development. 📚 HTML Fundamentals HTML5 Markup Language HTML5 is the markup language used for creating web pages. This article was written keeping in mind beginners to web development . It gives the basic layout of an HTML5 web page followed by a brief explanation of each part. Read more… 📱 Responsive Web Design (RWD) As there are more mobile platforms and devices emerging in the market, making your websites accessible to all clients is very important. Sustaining business through all means is inevitable in this competitive market. An approach of making your websites cus...

CSS Preprocessor CSS Prprocessing by Definition: 1. Preprocessor is any program that process the input data to produce output that can be used as an input for another program. 2. CSS Preprocessor is a processor which gets some instructions or raw code and compiles it into a .css file. When we first step into web development and design, we work with CSS and develop smaller sites and micro sites. As we gain experience and start working in larger application and work in a team, we may come across the word ‘CSS Preprocessing’. When we build bigger application, it is always important to follow ‘Do Not Repeat Yourself’ (DRY) principle and keep our code maintainable and organized . When we hand code CSS, we may have to put in lot of effort and time to achieve the quality results whereas using a preprocessor will automate the processes and scripting tasks. Reasons for using CSS Preprocessor Scalability and architecture When we work in large application we can separate the c...