Solved the error with the sessions. It now creates one directory and stores everything correctly. I think it must have been to do with YUI but moving the code for creating the directory to an earlier point in the page has solved the problem.
Just Drag Drop not working 100% in IE.
Well the project is done as much as it’s going to be for the hand in. Unless anything I mention below really needs to be sorted.
The Drag Drop works nice and smoothly now and although the code that creates the actual Drag Drop interface has not expanded a great deal on the example I am editing, it did take a long time to make it work smoothly and in the way required. Hopefully it will count a long way towards my mark.
The Elements can be dragged into the page and can be edited using a small selection of editing tools.
Depending on the classes given to the elements, once focused on it allows for images to be uploaded or text to be edited.
The website output can be viewed and then downloaded as a ZIP file now with the images etc.
Adding elements has not been finished but is for advanced users.
An account can be created and it is possible to login and logout all through ajax.
The tutorial all works and goes through a few steps as an example.
Problems are:
Drag drop does not work 100% in IE but perfect in Firefox. I don’t think the changes required to make it work cross browser are that extensive but would take quite a while with trial and error.
Another problem is with a value stored in a session. I have edited it to work in Firefox now however it would have originally worked fine in IE. When the page is loaded a unique directory is created using values from the database. The name is then stored in the session and recalled for storing images and for getting the output. However to write the new image location it gets given the directory name when the page is loaded but this ends up being different to that which is in the session so the image is uploaded to one directory but referenced to another. The main problem is 2 directories are created instead of one. Both unique. As if the page loads a second time without being seen. My only theory is that YUI is causing some interference.
Really for how far the project has come these are the only 2 errors and I’m hoping its ok just to write about these.
Working on write up at the moment and hope to have it mostly completed by Sunday. Although I have tried to spread the work out it has ended up being that this project was very time consuming but I am pleased with the outcome. Just need to get the write up finished to the same standard.
…and I finally get the Drag Drop to work the way I wanted.
Just defining the class of the elements to drop into did not work. It worked fine for elements just one after another, but it would not allow elements to be dropped inside other elements.
Using the z-index in various ways did not work at all.
Checking for various events did not work due to it all being based on YUI recognising when an element is being dragged over an element which you can drop inside, which it did not want to do.
Posting in the YUI forum returned nothing as well.
But after analysing every slight change to the variables when dragging elements in various locations I finally found a solution.
First I stopped elements being dropped in relation to a dragdrop element that can contain other elements. This was an if statement that checked the class of the element. I then changed it to when it found the particular class it would follow different dragdrop rules to the rest of the elements.
Using some YUI Dom lookup features I got it to check the Y positions of the proxy of the element being dragged and the element being dragged over. This then gave a distance. Depending on the distance I could determine whether it was near the top of the element and so should drop outside the container or within and so should drop inside. Finally getting the current height of the element I was able to check how close to the bottom of the container it is and so whether it should be dropped below.
I have also almost got the YUI rich text editor working. When an element is clicked its id is stored in a varaible and it is also checked for containing elements with the class “text”. If found then a button is created in the sidebox which allows the rich text editor to be opened to edit the text. However, I’m having trouble getting it to pass the id of the element the text should be submitted to and getting it to take the current text and display in the editor when opened.
The right sidebox also allows editing of the padding and margin of the focused element and also using the YUI colour picker it allows editing of the Background colour.
Hopefully it will all come together very quickly once I have the errors above sorted.
Still having problems with the Drag Drop. However, I have put that part on hold for a while and already have some new ideas to get it working.
I have been working on getting the parts of the site working. The first sidebox now opens when hovered over and disappears when its hovered off. The elements that can be dragged into the page are listed inside this box. Each one I have given a basic logo as its appearance. This is as the elements could be any size that appear in the box which would cause problems when there are very large elements. A logo standardises the list. The Logos can then be clicked on and dragged into the page and drop where they are required. As soon as the element has been taken into the main page, the original is recreated within the sidebox so that another can be dragged in.
The Login now uses some Ajax which is mainly provided by a YUI component. This allows quick and easy login without moving away from the website being designed.
I have also created a dropdown box in the sidebox to select what category of elements the user wishes to look through. Upon clicking a category some more ajax is used to display the list of elements in that category.
Unfortunately I now have another error which I need to find a solution to. When a category is selected and the ajax returns the new list of elements, the elements can now no longer be dragged into the page.
My plan now is to get this error sorted, have another go at the drag drop with my new ideas and to create the editing options of the elements. Hoping to get the project to at least be nearing a finishing point by the end of the month. Just trying to make as much progress as possible now instead of staying stuck on errors so much.
I am still attempting to get the drag drop function working correctly in my project. I eventually decided the best way to do it was to allow the drag and drop to initially work so that you would be moving objects around the DOM. This would ensure ease of use and remove the need for alot of CSS absolute positioning. Once positioned an element will then be able to be positioned absolute only if required.
To create this functionality I am editing an example from YUI which had the general idea already developed. I have edited this to work with my project by allowing divs to be repositioned in the DOM caompared to other divs which have been defined as drag drop elements.
However, this is where I have currently got stuck. I have not yet worked out how to position elements inside other elements. It constantly recognises it as being over both the new container element and the main drag drop area.
I have attempted to solve this in many ways including using the z-index which have all proved unsuccessful. I am now attempting to use some other parts of YUI to solve the problem and I think this may work. I just need to make sure I write the code correctly as I have only vaguely implemented it so far. If this fails then I will consult the YUI forums for some guidance.
Once I have the drag drop sorted there are many other parts I can begin to implement and make alot more progress with my project. This will include allowing new elements to be put in the page, finishing the programming for adding new elements, allowing an output, and then putting in more tools for editing the content. I will also include some features for the advanced users like a breadcrumb of where you are dropping an element on the page and insertion of custom html. Along with some helpful tools for beginners like help hints and colours to display position of where an object will be dropped.
I have now got the basics of the initial php sorted. I will still need to create some more major bits but I cannot do this until I have got the basics for the creating the websites done. I had one error in the php I have done but decided to leave it for as I could waste a load of time sorting it when I later completely change it. A decision which was correct as I have decided to go about it a different way.
I have been working out how to allow users to add scripts and to be used in the page while allowing them to be edited by other users using the WYSIWYG editor which I am creating. After a number of thoughts, changes and scribbles in my notepad I believe I have solved this problem. I won’t go into it in detail here yet but once I have implemented the idea I’ll explain as then I’ll know all the exact details.
I have been playing around with the various possibilities with the YUI javascript libraries. There really are so many possibilities with this. It seems I am going to end up using many of the features as they will allow me to really develop my WYSIWYG editor to allow very easy use and make so many possibilities.
I have managed to get a side box to scroll in and out using animation. It doesn’t work as well as I want but I guess I’ll come back to this later. I have also tried editing one of the drag and drop examples to suit my needs when creating a website formatted by a table. After a bit of testing with it I decided it wasn’t going to work. I then went to look at some other possibilities. Another example has provided the solution, I have decided that positioning everything absolute will work better but contained inside a div to allow centering etc. For table layouts it will be possible to drag and drop in a table which will then have elements (wrapped in divs) relatively inside it. I hope that all makes sense.
I am trying to make sure that I build this with certain defaults that allow a novice to use it easily but with the flexibility so that even a professional may find it useful. This is in my list of client requirements which I will publish here soon once I have it finalised.
While exploring YUI I took a look into their CSS foundations. These have opened even more possibilities in developing my project and I think I will use them in my future websites as well. If anyone else doing a project reads this I think you may want to have a look at them as they really help with browser compatibility. I watched the video on the site to work out what it was really all about. It allows you to completely reset all html formatting, create a standard font size for all browsers which still allows font resize (important for accessibility) and gives some easy to work with templates and grids.
Hopefully over the next week or so I will have the drag and drop mostly implemented, some sort of output created, some basic elements available and a few WYSIWYG editing options.
So far I have decided to use the yahoo YUI javascript library as it has a nice drag and drop function. It also includes alot of other nice features which I would like to have as options to add into the websites that can be designed.
I have also decided that, in order to allow enough space in the browser window for the designing, I will try to make all menus hidden around the edge. These menus will then expand when hovered over to display all options. Not the most major part to be thinking of right now though.
I have created the initial mySQL database and begun creating the php pages to access the database.
I hope to get all the main php pages that access the database finished by the end of tomorrow. I also want to get the basics for the drag and drop implemented and start working on calculating the meaning of the drag and drop positioning so as to create the xhtml output required.
I think I need to look at some more examples of similar websites in existance to get some better ideas for how I will have output from the website.
I will post a link to what I have done so far once there is something worth looking at. Hopefully in the next couple of weeks.
Dr James: Let me know if you want me to lay out my posts more like the project log skeleton you sent us or if this was okay. Thanks.