Rotating blocks in JavaScript - javascript

I'd like to create a JavaScript web app that makes blocks appear on the page that can be dragged around by the user. If I used DIVs with background colors, it would be easy to rotate them by 90 degrees at a time.
However, if I wanted to rotate them arbitrarily, how could I accomplish this? I'd rather not have to resort to Flash, images, Java applets or HTML5. (I'd like it to be a plain DHTML app, maybe with a cgi script on the backend, but limit the number of plugins I need.)
(EDIT: The draggable DIVs isn't the hard part, I have that down. It's the rotating that I'd like ideas on.)

Dragging is easy. See Catfish's answer.
But rotation? If you'd rather not resort to any of those techniques, then you pretty much can't do it. Sorry.
WebKit (Safari, Chrome) and Mozilla (Firefox) implement the best solution: CSS declarations. I assume one could manipulate them through Javascript, like everything else.
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
However, given all the different restrictions you list (HTML5, mainly), it sounds like you're looking for something that will work every browser, so this solution is out. You could pull it off in <canvas>, though it's also not globally compatible, it'd be a pain, and I'd probably qualify that as HTML5, anyway.
So, no go. You pretty much list every technology that would make this possible as not being an option. Either no cross-browser compatibility, or use a plugin.
The new web is coming. Things will be better. For now, deal with it.

you can use jquery UI to have draggable blocks.
check this out.

Hey dude. Unfortunately, I've never seen or done this with javascript and I say with a little trepidation it may not be possible using true javascript.
There is a way to do with with CSS(3), but it differs slightly from browser to browser.
-moz-transform: rotate(-45deg);
and / or
-webkit-transform: rotate(90deg);
Dragging is pretty simple, difficult to build from scratch but simply googling will come up trumps.
If your using something like jQuery or Prototype, both these should be easy enough to plugin.
Hope it helps.

Catfish's answer for dragging around the boxes is good and useful, but the rotation will be more of a pain.
Take a look at the example here at css3please.com, it shows a cross browser compatible way to do things.
Looks like a promising project!

Related

Javascript framework for draggable objects on web browsers

What would be the best Javascript framework to implement objects that can be dragged around the window and hovered over to make other objects appear?
I was thinking about AngularJS but is that the best choice? jQuery doesn't seem to be versatile enough.
Also, which one is the most cross-browser compatible?
Thanks
Edit: jQuery UI could be an option but it seems that what I am trying to do would be animation-heavy and a framework using hardware acceleration would be more suitable than one using browser acceleration?
You're only going to get native acceleration using HTML5 in combination with CSS3. To that end, there are means of implementing something similar to dragability, which, in combination with this answer, may achieve what you need via the events. JS still required, but much, much less.
The downside is that you lose browser compatibility. To remedy this, check out Modernizr. You can add in jQuery UI if a legacy browser accesses your site, but otherwise stick with HTML5. As you can guess, doing animations without Flash and with native acceleration AND browser compatibility can get hairy quickly.

Zoom in/out in a container

I want to implement a system to zoom in/zoom out a container div in "real time" with javascript.The container contains different subdivs which are connected through a line using the jsPlumb library My webpage looks something like this:
Is there any 3rd party library which will help me to implement this ? Please advise me where to start. Thank you in advance.
Looking around the internet, there doesn't appear to be any libraries for what you intend to do- although I would love to be proven wrong.
Edit: While working on something completely unrelated to this, I came across a library called zoom.js that allows you zoom in on any element. It's API looks quite easy to use, but it is still a proof of concept, and doesn't work on IE. The creator said specifically to not use it in anything important, which is why I'm keeping my old answer too.
However, looking through the source code for zoomooz, I'm pretty sure that here's how you do it: Use the jQuery animate function to slowly apply the change in the css transform property. More specifically, you want to use the scale(XValue, YValue) function for this.
A couple things to remember about using CSS transform:
Set the transform-origin property, so that the page fits inside of the screen when scaled, instead of going outside the borders or something similar.
Include browser specific prefixes like -webkit-transform, -ms-transform, and -moz-transform in addition to transform.
CSS transform is an experimental feature, according to Mozilla, so make sure it is compatible with the browser your users are using.

HTML 5 Rotating Banner?

I was wondering if anyone could offer any advice. I'm an expert HTML / CSS coder...but I have little experience with HTML 5. I have read about the great things it can do and I want to learn it, but im not 100% sure of what I can do with it. I have read a lot of articles regarding HTML 5 but none of them go into enough detail about it to answer my questions.
Aside from making layout easier, can it do things like create a rotating banner? I need to take the banner on the main page of this site
www.newmarklearning.com
and make it ipad / iphone compatible. I know I could use Javascript and a host of other coding options, but i fugued this is a great place I could start messing with HTML 5.
Problem is in not really sure if thats the right technology to use. Can HTML 5 / CSS 3 handle such things or am i limited to Javascript / Ajax etc???
Any help pointing me in the right direction would be great.
Thanks
Craig
Regarding animations, CSS3 offers you a lot of options. See e.g. here for more information on 2D Transforms. There exist 3D Transformations, too. However, only Webkit-based browsers support it right now. This site also offers a list of CSS3's new features.
In your case, to have the banner animated, you would have to combine a transform with a transition property (the transition let's it animate, the transform only describes the targeted rotation/scale/skew). If you want a constant animation (not just once), there might be some Javascript necessary.
Well, apart from that, HTML5 offers you a lot more new features, like offline storage or other things. The only problem is that the user has to have a relatively new browser in order to support everything, which sadly isn't the case right now (I know several companies that still run Windows XP with some IE6 or 7 or something like that - any updates disabled :-/)
Edit: Oh, OK, I just took a look at your site. For such a "slideshow", at least a little bit of Javascript will be necessary, to store the current slide etc.. But every smartphone browser should support it without a problem
do you mean the banner on the right? That changes on a timer, or when a number or arrow is clicked?
It would be easiest to recreate that with JavaScript.
Check out:
http://www.dhteumeuleu.com/
If you want some cool ideas

Fixing CSS positioning and scaling

I was contemplating writing a UI toolkit where setting the position and size of an element/widget was intuitive and powerful. Here are some examples of how it would be used (not currently implemented):
ui("Panel").size(". 40").pos("0 0").attach(element);
ui("Textarea").size(". %-10").pos("0 40").attach(element);
ui("Panel").size(". 10").pos("0 bottom+5");
Where . means auto, % means 100% and the possibility to add pixels to percentages.
Does anything like said exist (even as a jQuery plugin or something)? Somethings just aren't possible with pure CSS.
If you want to create it in Javascript you will have to make the script read the ui code then convert to css. This would cause too much overhead and wouldn't really be worth the hassle. It would be nice to have a quicker more intuitive way to create styles but unfortunately without paying in efficiency it wont work too well.
I would be very wary before lunching into this. This would give any devloper joining your project a major headache of needing to learn your new layout mechanisims.
I have yet to see what CSS can not do, so you may want to look into what it can do further before going ahead look at the various examples from http://www.csszengarden.com/ . I'm not saying CSS is easy but it is standard.
If you need more power look at CSS3 the majority of which can be achived using jQuery.
Sorry to say but I think you are heading down the wrong road by building your own. Use standard, tested, well knowen and documented way. Don't reinvent the wheel unless you are in the wheel making business.

Javascript Game: What should i know?

I am thinking as a challenge i should write a javascript based game. I want sound, images and input. A background to simulate a screen (like 640x480 with all my images in it) would be useful to separate the rest of the page from the 'game'. What should i look at?
Some things i would need
Framecontrol. A way to get the current time (or delta).
Image, displaying it and moving it. How do i display full image. Knowing pixel access may be cool.
Input A way to lock it in a box (like flash does) is cool.
Sound play simple sounds on demand (like when i get a hit). Several sounds at once would be great
Bottlenecks. What are things that will kill the CPU?
Restrictions. What cant i do? I hear i cant 'sleep' to wait. I must set a callback
Good or best pratice. What are good things i can do to either keep speed up or to lower glitch or compatibility problems.
I'm going to answer this looking at things from a mootools javascript perspective:
Framecontrol. A way to get the current time (or delta).
periodical()
Image, displaying it and moving it. How do i display full image.
setStyles()
Input A way to lock it in a box (like
flash does) is cool.
Plain old CSS
Sound play simple sounds on demand
(like when i get a hit).
Swiff, remote();
Bottlenecks. What are things that will
kill the CPU?
Internet Explorer.
Restrictions.
3D ... ?
What are good things i can do ... to
lower glitch or compatibility
problems.
Use a framework.
As a starting point, you may want to write it for Opera, as Opera provides a game canvas that will help you out.
For some examples of games in javascript:
http://dev.opera.com/articles/view/3d-games-with-canvas-and-raycasting-part/
http://my.opera.com/WebApplications/blog/show.dml/200788
This one is interesting, it is demos of games using the canvas element.
http://www.canvasdemos.com/tag/games/
The best way to see where the problems are is to start writing the game, and then you will see what may be a problem. By looking at demos you can get an idea what performance issues they encountered. For example, a full 3D Doom game will have problems, but, as the first article above explains, there are some ways to optimize for javascript.
Once you get it working with Opera, then you can look at Firefox 3.5+ and Safari, as well as Chrome, and see if you can make some changes to have it work on those. How many platforms it works on depends on how much work you want to do for it. For a proof-of-concept pick the easiest browser for your task.
The best place to start would be to get very familiar with the <canvas> tag (it allows you to draw anything on screen)
This may help a lot:
http://benfirshman.com/projects/jsnes/
its an online NES emulator that renders everything on screen - the source is also available
Hope that helps =)

Categories