I want to replicate the dynamic drag-drop layout similar to
http://www.picmonkey.com/ collage,
where you can drag an item on the edges of the container and place it and the layout adjusts accordingly.
Do you know of any algorithm?
Have a look at
http://www.sitepen.com/blog/2011/12/05/dojo-drag-n-drop-redux/
There are many more examples like this if you search in google. Pick anyone and you are good to go.
Related
I am planning to create a little website(forum) with Quiz questions. So I had an idea to make cool borders in Photoshop(ice, fire, earth) and to implement them on the website. I don’t have any experience in creating live websites whatsoever, so I am interested to know what are the best practices for doing this? The problem is that questions could have anywhere from 10 to 100 words so I need different border sizes.
I currently have two ways of doing this, but neither really satisfies me.
1) Create different border sizes in photoshop and when posting questions check for character length and use appropriate border.
2) Create images with questions already, and post it like that.
I am also worried about the speed of the site. I realize that this is not a common practice, but is it doable? Any input or guide is appreciated.
The easy way to do this is with the CSS border-image property. You can create a square image with the borders you want and then add a CSS prroperty with the following format:
question-border{
border-image: url(<url of image on webserver>) <px size of border> <stretch/round>
}
Using stretch will stretch the middle part of the image, while using round will tile it.
The example on w3schools shows this well.
I need to put together a prototype of a scrollable list with items that can be vertically resized. For example, a list of charts. I wish I could post any code but dont even know where to start from. Tried googling but nothing came up.
Any idea what a good starting point might be?
Thanks
Personally I would start with creating a list of elements in a vertical fashion. That should be pretty straight forward.
Second I'd reuse a library which may already have a resizable component that you can use. This should allow you to learn about resizable elements.
http://jqueryui.com/resizable/
Finally, put them together and see where your bugs are!
Complex Grid Layout, Help!
I'm making a responsive website using bootstrap 3.0.2 and can't figure out the layout that is stated in the requirements document for the project. I made an image of what I need, and will give more detail, or update my question, if needed. I am open to any suggestion on how to accomplish this.
The Issue
This image describes what I need the design to look like at three different widths.
I should add, each box will be basically a div with an image, article title and summary within it.
Like to say ... in advanced
Id like to say thanks and apologize in advanced if the question is dumb or the answer is obvious. I have been a dev for a long time, but I'm new to responsive design and I've been banging my head on the wall trying to get this to work
The problematic part of your project is to make two smaller blocks side with a bigger one and make these two 50%. As far as I know, there are no mature cross-browser solutions that would accomplish that without javascript.
You may want to take a look at: Flexbox and for Comrade IE Flexie.
Another approach to accomplish the same could be using viewport dimensions. Just be aware of the browsers support.
All in all, if you can do that, I would suggest just using JS, with a fallback to css that will not break the site's look too much. Having just finished a project with similar requirements, I would just like to say good luck.
I really like the way SlickGrid DataView smoothly scrolls and renders/hides stuff for me. I'd love it if I could use this same sort of behavior to display data that is slightly less tabular in format. For example, a thumbnail gallery with thousands of thumbnails in it.
The main problem is I'd need display my list of items in a grid horizontally as well as vertically. I suppose it could be accomplished with a dataview by dynamically changing the number of columns based on the size of the window, though this seems kind of an abuse of the system. Is there a better system for this out there?
I ended up writing it myself. Enjoy!
I'm trying to implement some kind of drag and drop snap to grid similar to something like this
http://wordsquared.com/. Was contemplating trying to use JQuery UI and somehow save the position of the items. Seems like snapping to a grid, and saving would be a fairly common scenario. I was contemplating trying to implement this all in Drupal, any suggestions, examples, things I ay not be aware of would be very helpfull.
It sounds like the Homebox module may be close to what you're looking for.