Creative Technocrayts

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/

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

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