Javascript component for window/pane flip effect? - javascript

I'm prototyping a thin client UI using extjs and am looking for an effect that will simulate a form/pane flipping over to reveal another form/pane. Its for a details view for an object that has two major sets of properties.
I found a flex component that can do this, and can even simulate four different forms on the faces of a cube.
Just a sexier, more fun way of doing what you can already do with tabs.

This particular effect may not be available on a cross-browser basis quite yet. Doing perspective transforms on a given DOM element is only possible in two ways that I know of:
1) Renderer-specific extensions, like Webkit's -webkit-transform
2) Rendering the DOM element inside of a Canvas element and then doing transforms on that
The problem with #1 is that it's clearly not going to be cross-browser. The problem with #2 is that you'd more or less have to write your own complete markup renderer for canvas to really get everything in an arbitrary DOM element in there.
(OTOH, I wouldn't put it past some ambitious and clever JavaScript ninja to have attempted #2, so though I haven't seen it yet, I wouldn't be totally surprised if someone else can point towards something like it...)

I would stick with the tab solution if you want to get your project done within a reasonable time. This does not exist for ExtJS - the one in Flex does a 3D effect. The only solution close is to just have content in 4 cells of a table that slides into view (according to the direction of the arrow you used), within a DIV, and have the overflow property set to hide, so you can mask out the other cells and show one cell at a time. Then use the animation (fx) functions to slide the content in and out of view, perhaps with some arrows you hover over or click.

Related

Setting position of an element with vanilla JavaScript

So, I've tried getClientBoundingRect().top, elem.style.top, and all sorts of other wacky combinations, and my ultimate goal is the set one element vertically or horizontally lined up with another. This should be a simple task, but it seems there are a lot of issues.
If the element is embedded in say, a shadow DOM, this appears to affect its location/position? Is this supposed to be the case? I'm using Polymer 3 if that makes any difference.

Best way to animate elements passing through viewport in infinite loop

I have a set of elements, set next to each each in a row. The number, scale, etc of these is dynamic. I would like them to pass from one side to the other on the screen in an infinite loop, so as one element leaves the one side it comes in again on the opposite, like this:
Here is a Codepen Illustrating the above example. Imagine the black box is the viewport, so you can't see outside of it.
What is the easiest way to implement this conveyor belt/treadmill approach?
I've tried several ways of implementing this but am stuck finding a reliable, smooth, and flexible solution to what seems like a very simple problem. I've hit a wall, how would you do this?
I'm just looking for the concept, library, etc.
Could a GreenSock library work well for this?
If this is too ambiguous could anyone point me toward a more appropriate place to ask?
Thanks.
I don't know what makes you say it "seems like a very simple problem", because (for me) it clearly isn't. Let's break it down:
Make the conveyor belt move (I'm assuming you move the belt container for this).
Trigger whenever an element completely left the screen.
Move that element in DOM at the other end of the belt and simultaneously adjust the belt position so the change in DOM is not visible in the belt animation, which should remain smooth.
This is how I'd go for it, but there are chances that the animation might stagger/flicker when the change in DOM is made, especially if you have other animations running in the page at the same time. If this happens, you might want to clone elements instead of moving them and only delete the originals after the rendering of the clone is finished. It might "seem" (sic) like the same thing, but the browser will do them one after the other instead of in the same time. It sometimes helps.
I'm a curious guy by nature so I'm already planning on making a fiddle with this at the end of the day. If I find anything notable or if I come up with another approach I'll update.

XPages client side: listen to and trigger an event (pure CSJS)

I'll try to describe what I'd like to have.
At the moment, I have custom control Desk with:
an Accordion Container (dojo)
several Accordion Panes, of which
one contains custom control Agenda
In custom control Agenda, there's nothing really special, expect for
custom control Tiles
In custom control Tiles, I display meeting info in a nice way, as tiles. There can be multiple tiles on one row. In order to make things looking perfect, I have to spread these tiles over the full line, justified, using CSS (that part works, 99%). What doesn't work is that when the accordion is hidden when the page loads, I have no details on the size of each tile so I can't do my calculations (i.e. offsetWidth==0).
So I have to delay the calculations to when the accordion is activated and onShow is triggered. But how to pass this on downwards, all the way to the custom control Tiles?
Tiles is used in other places too, so it cannot be a fixed reference. It doesn't even know that it's inside an accordion...
Question:
How can I call/trigger a function that's inside the Tiles custom control from the top custom control, Desk, in a transparent way?
NB A code example, even an illustrative one, would be very complicated to make (I think).
Could someone give me a push into the right direction? Events and triggers maybe? Pass accordion id down to the Tiles cc and then do something brilliant?
Thanks!!
I have a solution right now, but it isn't exactly a beautiful and transparent one.
I gave the Tiles a styleClass="Tiles", and then I can find these Tiles using getElementsByClassName. It's not the proper way, but it's a way, the pragmatic one.

Is it possible to create line between elements in CSS3?

I'm using jQuery Draggable in the application I create and I'm wondering if it would be possible to somehow create a line between dialog box and element on website? I want it to follow draggable box as you drag it.
I'm looking for CSS/HTML way and not jQuery/JS way. If there is no way to create it using pure CSS3/HTML5 then I'll start with JS approach - just wanted to know :)
Basically: no, there isn't a way to achieve this using CSS only.
But, if this is observed as a CSS riddle (I recommend you don't use the following solution in any real-world application whatsoever), you might be able to achieve something similar. Again, this is going to be completely abusive of both HTML and CSS.
You basically create a lot of divs, each stands for a 'pixel'. You change the divs' background-color on :hover, and maintain the background-color after :hover state is gone using a (yet another abusive) transition trick (pseudo-infinite delay).
Here's a demo: little link. Try hovering on the top parts to see the 'breadcrumbs' that get drawn as you move your mouse.
I, again, exaggerate this is completely abusive and shouldn't be used in any actual application.
This can be expanded to create a tiny painting program using CSS. I've made a little dabblet to illustrate: another little link (try drawing by clicking and moving your mouse!)
The bottom line: Use JavaScript -- it's the only resort in this case (you can't control a canvas without JavaScript).

Link Elements to Keep Their Appearance In Sync

I'm developing an iPad app using PhoneGap and jQuery Mobile and I'd like to create a preview pane in a carousel. The preview pane would include a smaller version of each of the other panes, scaled so they fit inside the single pane. The panes are not static and can be updated at any time using WebSockets, and the preview should be updated simultaneously. There can also be any number of panes (although to keep things simple, assume an upper limit of 9). For performance purposes, assume each pane can have upwards of 200 DOM objects attached to it. To make it slightly more complicated, the carousel can exist on more than one different page.
I've been contemplating the best way to go about implementing this preview pane, and, before inventing a pair of Complicator's Gloves, would like to hear back from the community on any possible better strategies.
A couple methods I have been considering include:
Cloning each pane and then using a CSS transform to scale it to an appropriate size, based on how many panes there are, and then attaching the clones to the preview pane.
Store each pane as a jQuery object in a variable and draw each pane and the preview pane using that object (possibly necessitating redrawing the entire carousel every time there is an update, depending on how much effort I want to make identifying and updating deltas).
Repositioning all the panes so that they exist inside the preview pane when the preview pane is active (this might break the carousel, or at least make it look slightly bizarre as a user swipes a pane over but hasn't actually moved on to that pane yet).
Is there anything I'm missing? It would be nice if there was an easy way to "link" two elements together to make one mirror the other, but apply different CSS to one or the other (for zooming). I suppose it might be possible to do this by creating an event that would fire and then adding a listener to its clone, which would then copy the html of the updated element to itself (probably wouldn't be too terribly to difficult to write a jquery plugin to manage this).
Any better suggestions?
I am not sure what phonegap allows for as far as rendering options go, but my first instinct would be to take a screen shot of the relevant pane. Perhaps phonegap has this built in?
Another option is a javascript library which will clone the DOM and create an HTML5 canvas element. You can either then display the canvas natively, or convert the canvas data in to image data.
Here is one such library: http://html2canvas.hertzen.com/
Given the large number of elements needed, I would hesitate to clone those over and over again. However, if live previews are a necessity, that might be more efficient than using image files or the canvas. You could fire off the canvas draw function after major changes, but probably wouldn't want to do it after the end of every frame of animation.

Categories

Resources