CodemySite_Web development

Macy.js is a javascript library plugin which can customize the columns,margin depended on different browser resolution.It's very friendly to responsive design websites and it's lightweight which is only 4KB and min version 2KB. Github here Step1: Link macy.js Step2: html html CSS css The images contains in the parents DOM. Step3: JS js Here the container is the section named macy-container.And columns margin should be set you want.  breakAt: the conditions when the attributes change,when the resolutions change. Like the responsive css ways: @media screen and (max-width:XXX){...} More details from gitHub: Options: container Default: None Use this option to specify your target container element to apply Macy too. All direct children of an element with this selector will become sortable items and a height applied to the target container. columns Default:  4 Define the default amount of columns to work with. Use the  breakAt  option

Bootstable.js is a javascript library of editable table for adding and deleting information lines. github here  Step1: Link bootstrap css and js Link jquery and bootstable.js head body bottom Step2: HTML html Give table a id name which will be selected in script. A button can recall the new line. Step3: JS js It basically initializes the plugin which can only do with one table,and for multiple tables should be SetEdible() one by one. The Parameters: $( '#mytable' ).SetEditable({      columnsEd: null ,         //Index to editable columns. If null all td editables. Ex.: "1,2,3,4,5"      $addButton: null ,        //Jquery object of "Add" button      onEdit: function () {},   //Called after edition      onBeforeDelete: function () {}, //Called before deletion      onDelete: function () {}, //Called after deletion      onAdd: function () {}     //Called when added a new row }); See the Pen bootstable.js---e

select demo drag demo The plugin loads images with selecting or dragging,which have rendering thumbnails. Github here Step1: link jquery, imageuploader.js imageupload.css (option) Step2: html html the form should be inside the block section. form action is to the server address. Step3: js js Active plugin with uploader(); the default options attributes: Option Name Description Default Value submitButtonCopy What you want the upload submit button to say Upload Selected Files instructionsCopy What the first set of instructions say Drag and Drop, or furtherInstructionsCopy What the second set of instructions say You can also drop more files, or selectButtonCopy What the primary file select button says Select Files secondarySelectButtonCopy What the secondary file select button says Select More Files dropZone The jQuery element where the uploader should listen for drop events $('body') fileTypeWhiteList The whitelist of file ext

The plugin can filter the images with data-tag and filter buttons generated automatically by data-tag attributes. Idea Github here Step1: jQuery neccessary filter-tages.js < script src = "js/jquery.min.js" ></ script > < script src = "js/filter-tags.js" ></ script > Step2: html html The button sections put filter button which will add automatically with jQuery. And each image flitered with "data-tags". CSS Basic styling for buttons and images. Step3: JS Select every buttons,images and create the tagged object. Go through every tags and if the tag have nothing,just make the tagged object empty, or push the tags of images to the tagged objects. Build buttons named show All actives with slideDown animations. This part is a samble when clicked the filtered buttons, give it tag name and filter it with fadeIn animation. See the Pen filter gallery by Yifang Di ( @diyifang ) on CodePen