Before reading on please be sure you have working experience with Jquery UI !!
Please have a look at this fiddle : [url removed, login to view]
And also have a look at this image: [url removed, login to view]
Your job would be to complete the code that you found at fiddle above.
The image is color coded so to say, showing the fiddle when your work is done ;)
Whiles explaining I'll refer to the colors (RED, GREEN, BLUE, PINK, YELLOW) in the image, for better understanding.
1. Items, Tabs & Containers should be managed through 2 mysql tables
- each item, container & tab is = a row in mysql
- items can not contain other items
- only container (BLUE/PINK) and drop zones (RED) can accept other container or items
- all the items, containers and tabs must be created from database!
Example mysql table for Items&Containers:
this would produce a container (BLUE) with 4 items (GREEN) in it.....
Example for TAB table:
this would produce the 3 tabs (YELLOW) in the image.
2. Items are:
- GREEN in image
- simple DIV's like: <div class="item" style="height:20px; width:100px;"></div>
- draggable, droppable, sortable
3. Containers are:
- simple div's <div class="item" style="height:20px; width:100px;"></div>
- can contain (UI accept) items (GREEN)
- can contain (UI accept) container (GREEN)
4. Zones (RED):
- each tab has 3 zones
- zones accept containers (BLUE/PINK)
- zones accept items (GREEN)
- all item- and tab- positions must upon change be saved in a mysql table (sorting of tabs, and sorting of items and position of items (tabs))
I want to be able to add tabs, container and images from database
- when more tabs are added, then new dropzones must be available in each of them as well..
This should be done with only jquery sortable, draggable, TAB / jqueryui and with as little php code as possible!
Please ask when you have questions, please don't bid if you never worked with UI before.
This project has been extended, the code in the fiddle is not the actual code anymore.
There is a new, much more complete version of the code (the project is about 75% complete) and there are but a few things to fix:
- 3 Drop zones (RED in image5) on each tab
- saving of tabs is not working alright
- containers are not working alright
So there is not too much left to do....
PLEASE BID ONLY WHEN YOU CAN FINISH THE PROJECT WITHIN 3 DAYS !!
PLEASE BID ONLY WHEN YOU ACCEPT TO RECEIVE MONEY -ONLY WHEN YOU COMPLETE THE PROJECT- !!
IMPORTANT: This project is done.
We need somebody to do the following:
Please have a look at this:
This is a Jquery UI. Each item and container are now created through <li> and <ul> tags but we need them to be <div> tags...
Your only work would be to change all li and all ul tags to div tags... and maybe correct 1 or two problems in the code, tabs are sometimes not saving correctly.
Please include JQUERYUI in your bid in order to verify that you have read this text.
Please bid only if you can finish this in max 2 days. thanks
This project is done. we have only 1 problem. the positions of tabs i.e. Tab 1, Tab 2, Tab 3 etc. is not being save correctly.
You are bidding on fixing this only problem.
please write UPDATEJQUERYUI in your bid to confir you read this text.