For an Augmented Reality CMS I'm working on I'm looking for a special type of WYSIWYG editor.
I need to be able to position images over a background image, resize/organize them and be able to read out their relative positions.
No text/html editing at all.
Flash solutions are a last resort for I'm sure this can be done with HTML and Javascript
Does anyone know about such a solution?
Thanks a lot in advance,
Menno
...afraid you'll have to roll up your sleeves and roll your own for the most part, but something like this http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/ might get you going. It's jQuery based if you don't mind that, but in principle it's a start (or something similar).
Related
Before posting this question I did many tries and searched everywhere for alternatives, but I gave up and I'm asking here..
What is the easiest way to create an interactive map controlled by functions?
Here are details:
I have a div with fixed width/height, without a background, and I need to dynamically add things (images/text) inside of it, at any position, and they can also overlap each other if needed.
An example is better than thousand words:
- assuming the div is 500w 500h, I need to create an image at (200,200) with a size of 50x50
Here are the thousand words:
I tried with canvas, but it's too hard to remove something without touching the other things (for example if images #1 and #2 are overlapped and I want to delete the #1, I'll delete part of img #2 in the process. Of course the best thing would be to save things stored to when I need to delete something I can redraw all the rest, but it's a huge pain, if something easier exist would be better)
Tried also with http://leafletjs.com/index.html, but it seems too powerful to solve my problem, and I don't even know if it works without a background.
Maybe the best solution would be to use simple divs with good positioning, so I can change through functions their content easily, but I suck at div positioning.
Thank you to everyone that can help me :)
I really recommend the MapBox JavaScript API. It's a nifty utility that I have used in various instances. https://www.mapbox.com/blog/mapbox-javascript-api/ Extremely extendable API.
Hi I'm trying to find a plug-in for flipping page, something like the Booklet but need to be responsive, if the screen are higher than wider it need to convert to single page layout, and need to work with touch, but I'm really not finding it! Maybe it doesn't exist. Is important to be free software.
If somebody knows something about, I'll really appreciate the help.
Turnjs seems to be a good option for this.
I want to implement a special highlighting to by buttons. The one, I found on the iBooks app for iPhone/iPad suites my needs. I think it is very complex due to the fact that all the strokes are looking different. I could use some CSS-Sprites-Voodoo but I don’t think I will be able to assign these styles so easily. Has anyone done something similar? I would be happy to hear some ideas.
Thanks, Floyd
http://i.stack.imgur.com/SlfHx.png
I tried this out: http://jsfiddle.net/brianflanagan/XUpFc/ Basically, the gist is to grab any selected text and wrap it in a span to give it a class with a background image. Not sure how useful this is, but it might get you started...
Essentially, I had this idea in my head for a sort of evolution simulator, not exactly like Conways Game of Life, but the one part where they do match is that they will both be based on a square grid.
Now, personally, I like working in HTML+Javascript+ for simple apps, since it allows fast UI creation, and if you're not doing something computationally heavy, then JS in a browser is a decent platform.
The problem I'm trying to solve right now involves drawing and updating the grid. I might be missing something, but it seems like there is no easy AND computationally light way of doing this for an 80x40 grid. The easy way would be to generate a div with absolute position and a specific background color for any square that is NOT empty. However that can become very slow with anything more than 60-70 colored squares.
I'm definitely willing to switch to a different language if the situation calls for it, but first I just want to know I'm not stupidly missing out on an easy way to do this with HTML+JS.
Answer should include either one of the following:
a) A reasonable way to draw and update a 80x40 grid ( where the squares change color and "move" ) in HTML+JS
b) Another language that can do this reasonably fast. I would prefer to avoid having to spend a few days learning DirectDraw or something of the sort.
Why not build the grid as an HTML Table? After all this is what you want?
Give each cell a computed id and create some javascript functions to update them. Shoudlnt be a problem at all.
You could look at the new canvas tag in HTML 5 but from what you've said I dont think you need it.
<canvas> seems to be the right way to do this. A library like Raphael will help you avoid cross-platform issues. Another options is Processing.js, but it does not work in IE.
For a small grid (< 100x100), use a table and give each cell an ID for fast access.
For bigger grids, you should consider using a canvas object or embedding an Java or Flash applet.
I have an idea I'm trying to implement.
I want to display half a dozen pictures on a screen, in say a circle shape, and as I hover over one with the mouse it fades from grey and white into full colour, maybe even getting a little larger, or generating a drop-shadow effect which stays while the mouse is over it.
Although I'm not too shabby on VB6 and SQL Server, my web development experience extends about at far as using notepad to generate raw HTML to display some favourite folders, links to websites and documents etc, in Active Desktop.
So guys, what programming resource websites should I be looking at, such as w3schools.com and specifically whether I should be using JavaScript or some other method ... also specific method calls to look at would be good.
I'm not after "here ... try this code" and then 10 screens of code to cut and paste, I'm after tips, such as "for the positioning, look at www.thiswebpage.com and look at XYZ" and "for the fade effect, look at ABC method on JavaScript" or whatever.
EDIT: 14/07/2009 - Just thought that this might be pertinent. I'll be hosting the pages on a Google Apps hosted website.
Also, the black and white fade effect wasn't the only effect I was considering, it was just one possibility. Other nice, subtle effects might be considered.
What you want to implement shouldn't be all that difficult. However if you do not know any JS then W3C schools is a good place to start.
You should also check out Mootools. It is a great framework for all your JS needs. They also have some great demos you can try.
For general effects and starting point for this type of user experience: JQuery
From there - research jQuery plugins that do this type of thing. Good search terms may be carousel.
Raphaël is a very nice Javascript library that can do everything you want. For instance, they have demos with drop shadows on images and with image rotation.
For that type of work I like to use Scriptaculous. It has a number of animation commands that are easy to use. You can run a bunch of effects in parallel on a DIV, so you can easily perform a MOVE and a SCALE effect on the same object and it handles the synchronization.
You can do all of this with regular old JavaScript.
Here is an example of a MOVE:
new Effect.Move('yourDIV', { x: 0, y: 0, mode: 'absolute' });
You could probably get a quite similar effect done by using some JS library which can animate CSS properties nicely. For example Scriptaculous and jQuery can probably fit the task and should be simple to learn.
The basic idea would be that you have an image in a div. The image's transparency can be set to 0.5, so the div's background color shades through it. This way you can get an effect similar to a black and white image with the correct choice of a background.
If you want an exact black and white effect or such, you will have to generate black and white versions of your images, or use the HTML5 canvas element to manually apply color transforms to the images. That won't work in older browsers and internet explorer, though.
Learn JS, you can learn the syntax from http://www.w3schools.com/JS/default.asp
Expand this knowledge with articles from known writers, like Crockford.
Salt it all with learning one of the leading frameworks (I like Mootools).
While doing steps 1-3 code, code, and do more coding.
You will need some form of Javascript, and if I were doing that I would look at the Script.aculo.us library. (An immediate effect could be done with CSS, but for a gradual fade, you will need Javascript.)