I'm working on a web app that I want to operate more like a standard OS app. It is similar in layout to iTunes where I have a top header, a menubar beneath it, and then a left-sidebar and a main content area. The goal is that everything stays where it's at on the screen and only the main section scrolls (because it has a grid/table of content).
I can accomplish this by using absolute positioning, adding overflows, specifying top/left/top/bottom, and automatic scrolling when applicable. However, I'm not sure this is the best approach. I did some research here on SO and the web and didn't find a conclusive answer.
I know it works, but is it a valid or acceptable approach? My goal is to get it working but working using proper standards and acceptable approaches.
I could use a Javascript framework that accomplishes this as well (extjs, some jquery libraries, etc) but I think they do the same thing, they just do it dynamically at page load instead of specifying it up front.
CSS has pretty lousy support for web application-style UI layout. There are promising specifications on the way, like css3-grids and css3-flexbox. But the browser support is lacking, especially the css3-grid.
When I implement a web app today, position: absolute, seems like the least worst option. It's flexible enough and meets most of the requirements.
There is a good blog post that talks more about this: http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
Honestly, if it works it works, if it doesn't it doesn't. Standards, best practices, etc. are great and all, but only inasmuch as they help you to accomplish the actual goal. An app that's done the "wrong way" but is up-and-running is infinitely better than the "properly" built app that will be built eventually, once everybody's figured out what exactly the proper way is. That said, it sounds like your approach makes complete sense.
Related
I am trying to find a very neat, very stable alternative to the <marquee> element that supports both CSS and AngularJS. So far, I have incorporated jQuery-WebTicker (found here) which does work quite nicely but has a few flaws which is making my website look a little unprofessional (no disrespect, but I'm not sure if they're still providing support).
I also came across an Angular example (found here) but to be honest it's a little complicated for my new javascript skills so far. I need it to scroll left to right mainly and be configurable.
I am using a service to pull in an RSS feed from a News site and display all headlines in a continuous loop. I also need to be able to update the marquee with new content every 5 minutes or so. And it would be preferable if I could update the marquee at the end of the loop, so the content doesn't jump whilst someone is reading it.
Does anyone know of a good alternative, or could assist me in creating my own (maybe streamlined from the Angular demonstration mentioned above)?
I have looked at a 'lot' of jQuery demos but nothing seems to work 100%. Most of them don't seem to maintain consistency when scrolling large arrays of text.
This is probably a trivial question, but I feel like it would be useful toward web design. I really like the style of some of the Rainmeter widgets and I wanted to know if there was any way to maybe incorporate them into a website. To be honest, I don't really care for its practical purposes, otherwise I would have gone with the usual widgets you can find on the web which were developed for websites. I am more worried about its aesthetics, and frankly... The widgets I've seen for the web are not the easiest on the eyes (Maybe you know a place where there are some beautiful widgets). Perhaps this is no longer even a widget in a sense, but just an image. An animated image. Surely there is a way though to incorporate the resources you find for Rainmeter onto a website. I tried to answer it myself, and so far only came up with this: create the image on a photo editing program, and then animate it on the website (could be tricky). Perhaps there is a way to edit a widget's style? So my question is really, how would you create/incorporate the widgets you find in the Rainmeter libraries? For example, to recreate what you see on the link below. (With animation).
http://customize.org/rainmeter/skins/67189
Thanks!
You are probably searching for the wrong keywords. You should be looking for charts and/ or gauges and maybe graphs. The most examples/ libraries will be found including the keyword "javascript" or "css" and now "html5"
This will probably never have a concrete answer, as it seems new browsers introduce new inconsistencies in the way the process or integrate html standards. I've noticed this especially with JavaScript animation. The browsers that support them tend to be more consistent in the way they display CSS transformations. I, personally, haven't delved too much into HTML5 canvas, but that will most likely be the way to go in the near future.
Alternatively, search for dashboard themes.
Let me start by saying I have read plenty of questions and blog posts relating to the use of combinations of backbone/jQuery mobile and comparisons of backbone/Sencha, and have actually had my head in this space for some time but still haven't found quite what I'm looking for.
I'm very familiar with Sencha and have used it for wrapped (phonegap etc.) apps in the past, and I really like it. However for a smaller code base for web projects and more control over browser compatibility and various other reasons it's not quite appropriate for certain tasks.
When I start trying to engineer mobile (but also desktop and tablet) backbone webapps from scratch I find I miss three key things
General mobile 'init', filling the screen etc. (although this is the easiest to replicate)
Tabbed, iOS-style, navigation (of course I can roll my own, but it seems silly)
Scrolling - both scrolling a piece of content, but especially the carousel and how the carousel is linked to the tabbed interface
I'm not massively bothered about mimicking each device's native OS style throughout the app, and in fact would prefer to (whilst following some sensible conventions) make them look a bit different.
Ember has flame and I've used that before, that's kind of the thing I'm looking for.
I know I can build up a toolkit of jQuery mobile, custom script, jQ plugins/iSroll, CSS libraries, backbone UI etc. and do like the idea of compiling my own 'stack' but for some reason it just doesn't feel right.
So, to bring this back around to more of an actual question. I guess I'm looking for ideally a single project that isn't specifically linked to a library - and in theory could run on it's own on a statically coded page if needs be (even though that wouldn't be the case for me now). Or perhaps some words from others who have been on a similar journey and perhaps ended up on the mix of libraries I mentioned earlier with why they decided this was the best solution.
I'm not looking to do anything too crazy, say something a bit like the old sencha oreilly example but using some carousels, and I'd cover the multiple devices and browsers with a mix of Responsive CSS and a bit of JS.
I'm going to continue looking at this myself too and report back if I find anything interesting
Cheers
EDIT
While looking into this, I realised its only really the carousel and scrolling that I really wanted from Sencha. I noticed that Cubiq has a nice slideview component that handles the carousel very neatly and with a small footprint. I found a stackoverflow answer about using this with the original iscroll for vertical scrolling. See my answer below for successfully using the two together
How to use iScroll4 with SwipeView?
This would need some tweaking to work appropriately on desktop. and I'd like to control it from a tabbed UI too. Anyway, I'm not near answering my own question but given this has had a couple of upvotes I'd post some of my thinking.
Quick edit
You can attach events for tabs to the slideview https://dl.dropbox.com/u/81328343/scroll/1.html but at the moment, it only animates for next/prev and not direct page (tab) access
Webix
Very big library of components.
I've used Twitter Boostrap with Backbone...
http://twitter.github.com/bootstrap/
I've just learned javascript and jquery a few weeks ago, since then I always use it to position all my divs and stuff in the screen by knowing the size of the screen and the window which I find extremely useful, but now I don't know if is this a good practice, cause it makes my web-pages fully dependant on jquery which I don't know if it may cause some troubles with different browsers.
I would really like to find answers like "Sure is a good practice, use all the scripts you want" cause I'm really loving this javascript stuff but well just tell what you think.
Use JavaScript for behaviors and CSS for styling.
Styling with JavaScript is slower and difficult for another developer/designer to figure out what you did.
Also if you use Firebug or Chrome Web Inspector you can not see where your styling is coming from.
Optionally set classes from JavaScript and not specific styling. You can transition between classes to create a nice effect. But at least your colleague can see where the styles are defined and change it.
I'm sorry, but I'm going to burst your bubble, somewhat.
It's somewhat OK to do it - as long as the page looks OK if you disable Javascript, as well. I would say it should look even better than OK. I would also say that you should only do that if the functionality of your site really demands Javascript, as well.
Keep in mind that a certain percentage of users will have Javascript disabled. I've seen sites that look horrible this way (I use NoScript on Firefox, and selectively enable Javascript as I browser), and a couple where nothing at all appears without JS enabled.
Bad.
As Darin notes, you can (and should!) use CSS for positioning and styling. That is what it was made for! Feel free to enhance the page with Javascript, but keep in mind what I say above!
You could use CSS for positioning and styling of elements. That's what it was designed for.
It's okay to use it for positioning in some cases, but using CSS is the better practice whenever applicable.
Well, In my opinion you should avoid it as often as possible. But I know sometime you don't have the choice.
And yea you can make great web apps using scripts.
It depends what you're positioning.
CSS should be your first choice for positioning standard, run-of-the-mill sections and elements of a webpage. To opt for JavaScript in these cases suggests a lack of understanding of CSS.
Likewise if you find yourself using JS to position things for different devices. Again, CSS has evolved; media queries came along for that. Rule: always exhaust CSS possibilities first.
That said, it would be oversimplification to suggest that JavaScript never be used for positioning. All of us, rightly or wrongly, have resorted (and it is just that, resorting) to JS in order to get things to look right cross-browser, particularly where support for older IEs is concerned.
But by far the biggest use case for JS positioning is for modern web aps and games. If you're building a game with random asteroids dotted around, JS is absolutely the choice for that, since the positions are based on calculation and computation.
Finally, bear in mind that when you position in JS, you are of course still using CSS. JS doesn't have its own, concurrent styling/positioning system - it simply sets CSS properties. It is simply able to do so more dynamically and conditionally than flat CSS.
It is almost certainly bad practise. Use CSS for styling - JavaScript to do this is slower, more work, and more prone to breaking.
If you're positioning everything absolutely (fixed coordinates) it won't look good on screens of different resolutions. There's no real answer to this question.. scripts have their place, and you can use all the scripts you want... Positioning all of the elements of your layout, however, is not a job for JS. Use CSS for that.
I'd start here: Starting with HTML + CSS
There is not one method for all situations. Each web application needs to employ the right tools and practices to achieve its goals. This varies so much between applications that there is not a "correct" answer to your question.
I'm looking for a simple Flex or JavaScript based image editing component which can be embedded in a web application. It shouldn't be a web service but rather a component that I can download and customize (i18n etc.).
I only need some basic features: most important is cropping, optional features would be rotating and adjusting brightness/contrast.
Basically something like splashup.com, but as an open source application rather than a web-service.
Thanks a lot in advance for any hints!
-- Andreas
There is pixastic.
Pixastic is a JavaScript library which allows you to perform a variety of operations, filters and fancy effects on images using just a bit of JavaScript.
Be sure to read the documentation to make sure the operations you are looking to perform are supported by all browsers. There are some issues with IE.
They have a editor you can try. It shows off some of the features.
Your question suggests you want an out of the box solution, or at least a base to stand on.
Quick Google search reveals editImage. This doesn't look polished or bug free, however building on this or rolling your own should not be difficult.
Here is a good article on Image Manipulation in Flex. Towards the end of it read "Cropping, Panning and Zooming", your basically looking at 5 lines of code. I think you might even be happier building this yourself.
Thanks for your answers!
I ended up customizing and extending this component:
http://blog.mediablur.com/2008/02/20/flex-image-cropping-component/