Our day-to-day learnings and technical notes.https://thewebfosters.com/https://thewebfosters.com/build-forms-without-coding-introducing-formnx-a-drag-n-drop-form-builder/https://thewebfosters.com/build-forms-without-coding-introducing-formnx-a-drag-n-drop-form-builder/Are you looking for an affordable online form builder, that can help you create forms without coding? You may want to create any kinds of forms, it can be a simple Contact Form, Registration Forms, HR Forms, Lead Generation Forms or complex forms like Quizzes, Cost Calculation Forms, Survey forms, File upload forms or anything else. Introducing FormNX, anTue, 29 Oct 2024 11:28:07 GMThttps://thewebfosters.com/versioning-web-applications-products/https://thewebfosters.com/versioning-web-applications-products/Versioning is the process of assigning either unique version names or unique version numbers to unique states of computer software. Within a given version number category (major, minor), these numbers are generally assigned in increasing order and correspond to new developments in the software.Sun, 20 May 2018 08:29:58 GMThttps://thewebfosters.com/top-5-free-bootstrap-based-admin-template/https://thewebfosters.com/top-5-free-bootstrap-based-admin-template/There a lot of free bootstrap based admin templates, here we can curated list of Top 5.Fri, 04 May 2018 07:16:13 GMThttps://thewebfosters.com/mongodb-use-laravel-application/https://thewebfosters.com/mongodb-use-laravel-application/MongoDB MongoDB is a free and open-source cross-platform document-based NoSQL database program. Unlike RDBMS it doesn’t have a schema constraint. MongoDB uses JSON-like documents with schemas.Thu, 26 Apr 2018 11:51:35 GMThttps://thewebfosters.com/modular-approach-laravel-application/https://thewebfosters.com/modular-approach-laravel-application/Laravel is a great framework, not only because of the elegant syntax, rapid development tool but also because of the ecosystem & open source packages available for it. These packages help a lot to reduce the development time. Modules Modules are similar to packages with there own Models, View, Controller, Migrations and other classes. ByThu, 26 Apr 2018 07:21:09 GMThttps://thewebfosters.com/implementing-keyboard-control-jquery-draggable/https://thewebfosters.com/implementing-keyboard-control-jquery-draggable/In one of our recent project, we need to implement jQuery draggable with keyboard control. jQuery draggable is a good option to move element using mouse in users interface. But it lacks the functionality of keyboard control. But it can be easily achieved using keyup & keydown events. JavaScript jQuery('div#draggable').draggable({ create: function(event, ui) { jQuery(document).on('keydown', function(e){ switch(e.which) { case 37: { e.preventDefault(); //Prevent default action for keys console.log("left"); //Adjust the css position. jQuery(this).css('left', parseFloat(jQuery(this).css('left')) - 1 + 'px'); break; } case 38: { e.preventDefault(); console.log("up"); jQuery(this).css('top', parseFloat(jQuery(this).css('top')) - 1 + 'px'); break; } case 39: { e.preventDefault(); console.log("right"); jQuery(this).css('left', parseFloat(jQuery(this).css('left')) + 1 + 'px'); break; } case 40: { e.preventDefault(); console.log("down"); jQuery(this).css('top', parseFloat(jQuery(this).css('top')) + 1 + 'px'); break; } } }).on('keyup', function(e){ var key = e.which; if(key == 37 || key == 38 || key == 39 || key == 40){ //Perfome the same operatin which you on stop of draggable. update_div_coordinates(jQuery(this)); } }); }, stop: function( event, ui ) { update_div_coordinates(jQuery(this)); } }); function destroy_draggable(){ jQuery('div#draggable').draggable( "destroy" ); jQuery(document).off('keydown'); jQuery(document).off('keyup'); } function update_div_coordinates(element){ //logic } 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 jQuery('div#draggable').draggable({ create: function(event, ui) { jQuery(document).on('keydown', function(e){ switch(e.which) { case 37: { e.preventDefault(); //Prevent default action for keys console.log("left"); //Adjust the css position. jQuery(this).css('left', parseFloat(jQuery(this).css('left')) - 1 + 'px'); break; } case 38: { e.preventDefault(); console.log("up"); jQuery(this).css('top', parseFloat(jQuery(this).css('top')) - 1 + 'px'); break; } case 39: { e.preventDefault(); console.log("right"); jQuery(this).css('left', parseFloat(jQuery(this).css('left')) + 1 + 'px'); break; } case 40: { e.preventDefault(); console.log("down"); jQuery(this).css('top', parseFloat(jQuery(this).css('top')) + 1 + 'px'); break; } } }).on('keyup', function(e){ var key = e.which; if(key == 37 || key == 38 || key == 39 || key == 40){ //Perfome the same operatin which you on stop of draggable. update_div_coordinates(jQuery(this)); } }); }, stop: function( event, ui ) { update_div_coordinates(jQuery(this)); }}); function destroy_draggable(){ jQuery('div#draggable').draggable( "destroy" ); jQuery(document).off('keydown'); jQuery(document).off('keyup');} function update_div_coordinates(element){ //logic}Tue, 10 Apr 2018 11:53:44 GMThttps://thewebfosters.com/registration-login-using-social-media-laravel-socialite-package/https://thewebfosters.com/registration-login-using-social-media-laravel-socialite-package/With the growing usage of social media, Social Media Registration and authentication are important for any web applications. The advantage of having them is users can Register/Login into your application with the click of a button and don’t have to remember a new credential for the application. In this blog, you will look into integratingSat, 18 Nov 2017 13:55:27 GMThttps://thewebfosters.com/adding-custom-attributes-select-field-laravelcollective-html/https://thewebfosters.com/adding-custom-attributes-select-field-laravelcollective-html/Most of the time we use HTML select without any custom attributes. But in some cases adding custom attributes like data-* helps to easily access extra data related to the Option selected without making additional ajax call. LaravelCollective HTML is an awesome package to created HTML forms in Laravel. It provides a lot of featuresTue, 31 Oct 2017 08:21:47 GMThttps://thewebfosters.com/cost-website-web-application-development/https://thewebfosters.com/cost-website-web-application-development/“What is the cost of this website/web application Development” is the first question we hear from prospective clients. And our answer goes with many other questions. Can you share the complete requirements? Is the requirement in above question 100%? Do we expect some changes in requirements as the application development progresses to reflect market/users need?Sun, 27 Aug 2017 12:30:43 GMThttps://thewebfosters.com/whats-new-laravel-5-5/https://thewebfosters.com/whats-new-laravel-5-5/Laravel 5.5 finally released this August. Laravel 5.5 is the most awaited version as it is an LTS (Long term support) release after Laravel 5.1. For LTS release bug fixes are provided for 2 years and security fixes for 3 years. Laravel 5.5 will need a minimum of php7.0+, so if you haven’t yet upgradedSat, 12 Aug 2017 08:13:39 GMT