I've had some experience in Swing and now I'm trying my hand at writing an ajax app in dojo. I'm particularly having a problem with layout. In Swing I'm used to putting widgets in containers with layout managers for simple things like left-to-right layout to more complicated things like 4 border regions and a center region.
After using Dojo for a bit I see there is a border type layout, but I don't see layouts for simpler things like left-to-right and top-to-bottom. There's a scrolling pane, but I don't want/need a scrollbar.
In my old-school web days, I used tables for layout, but after reading many posts about the "incorrectness" of such an approach I'm expecting the universe to explode if I employ this technique now =).
I've got to be missing something in Dojo... or maybe there's a general "web-way" of doing such things that is not specific to Dojo.
Dijit only provides a handful of layout widgets, and most of them are 'stack' based: StackContainer, AccordionContainer, and TabContainer are all about putting widgets on top of each other and switching between them. BorderContainer does what you describe and is generally the most useful layout widget in Dojo. dojox.layout has a few more.
The general philosophy of Dijit is to use HTML and the browser's native layout engine for anything HTML can do. Left to right is probably just putting widgets inline in HTML flow, top bottom would be separating them by block elements. Basic CSS can be applied for padding, etc. Absolute CSS positioning should be avoided. TABLEs are still your best bet for matrix layout to run well on all browsers -- nothing will blow up, just try not do nest them too much. There are fancier CSS layout techniques coming, but I don't think they're well supported yet.
Related
I am tying to create a UI in photoshop that will be used to render a full-width site. I have never used flexbox before and I've never created a full-width site before using it.
I'm wondering if I simply stick to the default bootstrap breakpoints or if I need to be doing something entirely different.
An example of the type of full-width layout:
Thou this is a very general question, I'd have following advice for you:
I would use both, grid & flexbox, since, grids are great for building the bigger picture and make it really easy to manage the overall layout of the page. They are also able to handle more unorthodox and asymmetrical designs.
Flexbox is great at aligning the content inside elements so you can use flexboxes to position the smaller details of a design.
You could use CSS grids for 2D layouts (rows AND columns) and Flexbox for one dimension only (rows OR columns).
There is no reason to use only CSS grids or only flexbox - they work well together in their respective field of usage.
For layouting and screencasts I can definitly recommend Adobe XD - quite fresh in the Adobe-family and free for now.
I hope that gave you some idea how to approach your project andf plan the layout according to your needs.
EDIT:
Have a look at this article - it should give you a fair understanding on how to set breakpoints according to your layout and the media/device.
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.
I am trying to find the best method in order to create a horizontal website, full screen and if possible responsive, minimum width to be for tablets. The thing is that I need also the horizontal scrolling with the mousewheel, and I saw that fullPage.js doesn't support that or at least i couldn't manage to make it work on this plugin.
Anyway, I need an idea on building the template, with full screen sections displayed inline - I will be very grateful for any tip. Thanks.
Making horizontally responsive is bit tricky and requires a lot of effort.. There can be many many design approaches for making it responsive. It can't just be described with JSFiddle snippets..
However, I have something for you that will definitely get you started with "Horizontal Responsive Layout designing"..
This is must guide / tutorial for people who want to get started with Horizontal Responsive approach
http://tympanus.net/codrops/2012/04/02/responsive-horizontal-layout/
you could use one of the tools listed in the following links
http://www.cssdesignawards.com/articles/15-excellent-jquery-plugins-to-spice-up-your-sites/44/
http://jquery-plugins.net/scrollit-js-jquery-plugin-for-scrolling-pages
or you could also mix raw js/jquery with anchor links and add animations when clicked. in taht case you can scroll down using mouse wheel and also have fancy animations when a link is clicked
regarding responsiveness use css media queries
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.
Here's a tricky one: has anybody seen a YUI dialog/panel implementation with nice OS X style shadows around the dialog, instead of the blocky shadow that is implemented by default with the "underlay" element?
You can see this type of shadow on Amazon.com popup windows. It requires quite a bit of PNGs but looks very nice.
I'm thinking of inserting extra DIVs or replacing the .underlay element, and hook into the dialog size event to adapt the dimensions. The latter would be required because YUI uses some CSS trickery to make the underlay element "snap" to the dialog dimensions with CSS only in modern browsers, and uses a manual dimension update for IE.
EDIT: Just checked YUI 3. The Panel widget is not available yet, only the Container and it's still beta. So I'm looking at solving this in YUI 2.
PS: Oh I guess I could include the PNG shadow as part of the Panel's header, body and footer (hd, bd, ft), as an extra padding. And use a css rule to hide YUI's underlay. Hmmmmmm I just wish I didn't have to do this because it changes calculations for the draggable area, it's not a great way to do it.