I'm trying to implement some kind of very basic flow chart functionality in a div.
Basically I have some boxes which by default my be joined by a little AND bubble. If I click on the bubble it will change to an OR bubble which will result in the boxes (divs) splitting.
Not really to sure where to start on this any guidance much appreciated - eg links to something similar or advice in what to look into. I've attached a mockup to help explain what I mean.
Thanks as always SO
W
It should be pretty straightforward. Bind a click on the and/or button, which changes the CSS class of the lower box to a class which has a larger margin-top property and moves the background-position of the and/or image to show OR. You could use jQuery's toggle function for this, though I imagine you'll be storing the state in a separate data structure anyway.
Related
I need to create a word cloud that looks like the following,
The bordered element is a button, and the elements around are supposed to be a wordcloud.
I have been able to use a react-wordcloud library for the just the word cloud but putting an element in between has left me in a fix.
One method I can think of is using an div as overlay, but the clear downside I can think is that I will have no control over the what will lie beneath the button.
I am out of ideas as in how to achieve this, and any help will be appreciable
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.
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).
My first question here. Correct me if I've done anything wrong.
I've found a source here demonstrate how to paginate html using CSS multi-column.
http://groups.google.com/group/leaves-developers/browse_thread/thread/27e4bf5ff3c53113/f137dc01b6d853b7
My question is:
How to calculate the range / location of text in different column (page)?
For example, when changing the font size,
the text in current page will jump to another page.
To solve this, the program should save the current text location,
and move to the correct page (column) after reformatting the web page.
It is also useful for implementing bookmark function.
I think it should be done by javascript, but I'm new to javascript.
Any suggestions and tips are welcomed.
This is a bit of a general question, and very hard to answer, so I'll just try to point you in a direction I might try.
I have no idea how the layout of your page might look or function, but one way you could theoretically do this is by checking the text node of your 'column' whenever you change the font-size (presuming this font size change is implimented by a button click). So, for instance, say you have a div w/ the id #column_1, whenever someone clicks the button ui element you could evaluate the first several characters of #column_1, then search your string to find that text, and load whatever no. of characters you have defined as a 'page' around that text and call your render method to 'turn' to that page. So the flow of your function might look something like this:
zoomControl.click(click event){ //do something when you click the zoom control
var text = findTextofCurrentPage() //get the first bit of text of your current 'page'
renderLargerTextSize() //re-render your 'page' w/ larger text (for user feedback purposes)
renderPageWith(text) //render/navigate to the 'new' page wherein your the text in the variable 'text' can be found
}
Obviously this is a super generic 'idea' of what functions/methods you might use to make this happen, but I think if you dug into JS and say something like JQuery this sort of thing could be done relatively easily.
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.