Posts

Showing posts with the label javascript

reactjs | react-magic-move changes for React V15.1

Image
React Magic Move is a great component given by Ryan Florence( https://github.com/ryanflorence/react-magic-move). However when I tried to implement it it was not working in React version 15.x. Some of the functions used in that code were deprecated and were throwing error. So I thought I will fix that and here is the revised working code. https://github.com/venkat-vs-id/magic_move_kat This is not a Production module, its just a fun experiment I used to understand and play with ReactJS. Steps: Have a DIV with id="example" Copy the components to your components code. my_react_script.js is the code which implements the MagicMove examples. Either copy this code into your js file or use this file and make necessary changes. Make sure you copy the contents of my_CSS.css to your CSS file OR use this file and make required changes. Below are the screenshots of the examples 1) First screen 2) Basic Example 3) Buddy List Example

react-bootstrap-table | header column alignment fix

Image
I am working with react-bootstrap-table. Its a great module with few teething problem. for example whenever I have a lots of columns (in the table) my header column is misaligned with the columns in the dataarea. example: (before the fix) after applying the fix ( note that now you have a scroll bar too) Reason for the problem: In react-bootstrap-table "header" is a table and the data is another table. Since they are 2 different tables sometimes the header column width gets misaligned from the column of data table. Fix-Logic applied: The idea is simple, First I allow the table to be rendered as it is  Then first adjust the width of the data table columns using the width of the respective header column width. But remember only for the columns whose width is lesser than the header respective column width.  Now get the width of all data-columns and set the same to the width of the respective header columns. and tadaaaa the table in perfect alignment now. ...

Parse | Adhoc JavaScript Request to execute Cloud Code

I'm doing an IOS app which uses Parse's(www.parse.com) Cloud code. Being a IOS developer I found it a bit tedious to test the output of my Cloud Code(CC) using objective C (especially when I'm changing and developing the cloud code) I thought it would be easy if I can check the output of my CC using a JavaScript directly from the browser, because you can see the output of you CC immediately and also get a better understanding of what values are being returned. so I made a quick template which uses Parse JS API to   Login to Parse( In my app you can call a CC only if you login as a App user) Call could code and display its result. Download the template from this link - Venkat-GitHub-Page-Parse Remember to edit the index.html file and put your <app_ID> and <java-script-key> at Parse.initialize Edit the login details Edit the Cloud code function details and parameters( if any)