JSF and rotated components? (Specifically, buttons) - jsf

I'm trying to implement in jsf something that will serve sort of a 3 way pick list:
I can do this pretty easily.
My only problem is making the buttons rotate as they are in the image.
Is it even possible? (Other than doing some clickable image that will only appear rotated)

It is possible, but the solution is not JSF-related. You should be able to do it with javascript. Pick one rotation plugin for jQuery and try using it. The only thing that you have to take in mind is the ID if the controls. Perhaps you won't be able to specify it, so either use the generated one, or use a more complex jQuery selector.

Related

modify katex output html/css?

I've been pretty impressed with Katex's performance. It seems like a good fit as a rendering engine for a WYSIWIG latex editor. However, with MathJax, I can easily inject HTML/CSS in arbitrary locations using the \class directive. I can then use these injected classes for blinking cursors, gray boxes, and what not. For example:
Is there a way to do the same thing with Katex? In particular, I need the ability to inject HTML/CSS in arbitrary locations in the equation.
This is not currently supported. There is an open issue on the Github page.

Draw flowchart on webpage as navigation menu

I need to draw a simple "flow chart" that is used to navigation on my site. What I have been doing now is that I've drawn this MSPaint, then I add pixelmaps so that it navigate the user to different pages according to where in the pictures he clicks.
What I also want is that the page the user is on, changes colour (for instance, if user clicks on step 3, he navigates to page 3, and the page 3 changes colour to to green).
What is the best method to implement this? SVG? Canvas? JavaScript? CSS?
All answers that can point me to the right direction is very welcome.
Your first mistake here, I'd say, is that you're using pixelmaps; for something as simple as this, I'd recommend just making it a pure HTML/CSS entity, then giving a .active class or some equivalent to whatever page you're actually on. This is the easiest way of doing things in my books, and it has the benefit of degrading gracefully if the image fails to load for whatever reason.
That said, if you don't want to do it that way and are really attached to the static image for whatever reason, you could have variants of that image where the specific step is highlighted, and display whatever image is appropriate for that page. That would accomplish what you're looking for, but I wouldn't recommend it--it's very heavy in terms of network usage when compared with an HTML solution.
Now, bear in mind you could draw this with canvas, but that seems like overkill in this situation if you're basically just drawing a navbar; if you were drawing a full flowchart already and just wanted to reuse that code, well, that would be a different story; but in this case, with static imagery, just use HTML--it's just faster and easier.

Interacting with a SVG in Pharo?

I want to get a very basic interaction with a SVG loaded through Athens in Pharo using Morphic. This example shows what I'm looking for. I have used
(ASVGMorph fromFile: 'lion.svg') drawOn: Display getCanvas
but clicking the SVG makes the picture dissapear. However all examples I have seen were using a web browser. Is this possible using Athens? There is any other work in this area?
That's because you are drawing it in display canvas, which is refreshed every time... so is natural that you lost it...
What you need to do is:
(ASVGMorph fromFile: 'lion.svg') openInWorld.
or better, you probably want to put it in a window:
(ASVGMorph fromFile: 'lion.svg') openInWindow.
at the end, you will probably want it inside some other morph that you create, but debugging anyone of the solutions above with show you how to proceed :)
Yes, as Esteban pointed, to keep morph on desktop, you should add it to world, i.e. use
openInWorld, or #openInWindow.
ASVGMorph is very basic, however, and not intended to serve all possible use cases.
For more advanced uses, it is preferred to use ASVGRoot instance and draw it in own morph or compose with other drawings.

How to draw a map on a webpage that have links inside some area defined by the map?

I need to put a map in a webpage and I need that when the users clicks on certain area inside city limits on the map the user is redirected.
Wich is the best way without using Flash?
Define Hover polingons on a image.
SVG on the browser.
Some sort of Javascript, jQuery magical plugin out there?
Google Maps?
And example could be this but It's flash.
You should check this jquery plugin , I think that is exactly what you need
http://plugins.jquery.com/project/maphilight
Well, for the basic functionality, a good ol' fashioned client side image map (http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.6.1 ) would do the job nicely.
I'm not sure that there's any built-in way to get them to display hover behaviors, though. The cursor will definitely change, but I don't think you can style <area> elements.
With Google maps: what you're looking for is KML (http://code.google.com/apis/kml/documentation/whatiskml.html ).
You could use the HTML map tag.
http://www.w3schools.com/tags/tag_map.asp

How do you alter the 'page_load' for DotNetNuke

For the main menu, I want the first four links to be blue, and specifically the last four links to be yellow. There will only be eight menu items.
I was thinking of hard coding the yellow links into the menu div, and that way when the page loads the first four menu items (default colour blue) they will be blue, and then my hard-coded links of yellow would load up.
My question is, where can I add the "yellow" code? Where can I hard code my yellow menu items? Or is there a different, better, approach to this?
My first question would be which men u are you implementing? A lot of them have a menuitem_x sort of id that is applied to the menu markup so with the CSS you can do what you want
As for where to place the markup there are a few places
You can do it directly in the skin files (not suggested since you may have to edit a few files)
in the skin .css files (much better place to do it and more maintainable and portable)
in the admin go to Site Settings and use the stylesheet editor to add the classes to the portal stylesheet (better than #1 but not as good as #2 since its now specific to the portal and not the skin so it wont be as portable)
Number 3 - works good if you dont have access to the skin or dont want to change it for other reasons
You could use Javascript within the skin.
We have done simular in the past for DNN menus but i keep away from the skinning side so dont have any examples, sorry.
Google does though :)
I would use one of the specific SEO friendly DNN menu modules that generate clean code that can be followed by search engines. I usually use one of them, except for projects where I don't have SEO concerns. When you have a menu with clean markup, like a list, you can change the colors using jQuery and specifying the first four items. You can probably do it like this, one by one. There may be a better selector for grabbing the first four items which is something I have never used.
Solved it, not as dynamic as I'd like, but it works.
The way I've done it is I'm playing with id tags, rather than class tags. Using ID, I can pick out the individual menu items and apply CSS to them.
Essentially, it looks like I've done what 'codemypantsoff' suggested. Thanks!

Resources