I am implementing an AngularJS application that has a three-panel main view. The layout is a bit like a mail system, with a navigation bar on the left. The right pane is split in two; when you select something from the navigation bar, it populates the top-right pane, and when you select something there, it populates the bottom-right pane. The panes need to be resizeable and scrollable.
I can see three basic ways to implement this:
Use frames for panes
Use div elements for panes, with JavaScript controls for resizing and scrolling
A hybrid (perhaps divs with JavaScript resizing, but containing iframes with native scrolling)
There is very little info online on using AngularJS with frames, which leads me to think that (1) is not recommended. I'm just a bit worried with (2) that JavaScript resizing and scrolling will be inferior to native controls. In some cases the content may be large. And (3) seems to combine the worst of each approach.
So I'm looking for advice on which approach is likely to work best.
angular ui-router is good option for solving posted issue.
https://github.com/angular-ui/ui-router
for css - there are a lot of different framework, most famous is bootstrap.
or you can craft css by your own hands.
http://getbootstrap.com/
In my opinion its not recommended using frames because breaks generic functions of the browser like sharing urls, navigation between frames, default frameset, etc.
The best solution is using ui router plugin https://github.com/angular-ui/ui-router with nested views https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views. You should check the example at documentation
For Scrollable div you should use css property and for resize it probably would be nice to define a directive
I hope it helps
Related
I'm in a search for some jQuery resources or other things that will help me building a customizable start page for users.
I'm talking about tiles that have to be aligned reasonably in the screen (usually a parent div).
The tiles have equal size and if possible I want to let the user drag them for customization (Not a must).
The main issue is aligning the tiles in a rasonable way.
I found some jQuery plugins like freewall etc. but they usually try to fill an area and less appropriate for my cause...
When you using Freewall you can choice option for not fill by set:
fixSize: 0
even you can control the gaps too, by using method setHoles.
please check there links for know how to control the gaps:
http://vnjs.net/www/project/freewall/404.html
http://vnjs.net/www/project/freewall/
Best
I've found a very appropriate plugin:
http://masonry.desandro.com/
It's capaable of performing layout and placing the tiles centered in the given space.
Perfect for me.
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/
In the past I have used a lot of ExtJS to make dashboards. One of my favorite features is the full-screen viewport with border layout which helps you to split up a dashboard into panels on the left, right, top and bottom, without creating scrollbars everywhere. see e.g. these examples.
Is there a JS library or jQuery plugin that does just this? I am making a dashboard and want to split the screen into panels, but ExtJS is a bit bloated and overkill only to use for the boarder layout.
Ext JS is a great solution for this but if you are looking for something else then the jQuery UI Layout Plugin may be the option you want.
Example:
http://layout.jquery-dev.net/demos/simple.html
Project Home Page:
http://layout.jquery-dev.net/
Twitter Bootstrap provides help for the layout but you have to follow a certain design and am not sure it manages fullscreen apps with no scroll.
I think it's worth a look though.
You may look at Dojo which now integrates well with jquery and has nice widgets (tabs placed on the left for example, grids) and a good layout system.
I have been looking at http://www.nytimes.com/chrome and wondering how I can achieve a similar functionality to theirs. More specifically, notice that when you re-size your browser window, the amount of stories and their dimensions change dynamically.
In my case, I have a fluid-width <div> with an unordered list inside and I would like to dynamically adjust number of elements being displayed (<li>) based on the browser window dimensions.
Is there a Javascript library that can help me achieve this?
I use these three articles as references for this type of thing:
Responsive Web Design
Fluid Images
Fluid Grids
The two main techniques for really fluid websites are:
Different themes depending on the size of the browser (this can be implemented with CSS meda queries, JavaScript, etc.)
Each of those themes are defined with percentages/ems, not pixels. (This goes for everything in the theme: text, boxes, images, everything.)
Ethan Marcotte, the guy who wrote all those articles, has an example site employing these ideas.
It's called responsive design. There also css frameworks that supports this type of design like Less Framework 3 or Flaw{LESS} CSS Framework.
You also might want to check out this plugin: Smart Columns. I have used it and it is excellent for this type of layout.
I want to build a dynamic floating window with close button at corner. Is it possible, and also i want to add some content dynamically into that window.
Please help me.. It should be in javascript.. Better without AJAX..
Thanks in Advance
jQuery UI has an awesome floating window. What's cool about the jQuery UI version is that you can also package it with the UI theme manager, which means less time styling.
Check it out here : jQuery UI Dialog examples
All it takes is creating a container (probably a div), and one line of code. Something like this:
<div id="example">I'm in a dialog!</div>
$("#example").dialog();
Here's the documentation: jQuery UI Dialog documentation
What you are looking for is called a "lightbox" technique.
Here is a comparison of many lightbox techniques.
Many exist out there on the web, here are some for jquery and prototype libs:
Jquery: Thickbox, Lightbox
Plugin
Prototype: Lightbox 2,
Leightbox
Also, check out the
wikipedia article on lightbox.
My favourite has always been Scriptaculous, which lets you do all sorts of interesting visual things. The new kids on the block use jquery. One of these two should do the trick for you.
There are lots of samples on both sites that do what you want.
Well at the most basic just create a div and inject content by setting innerHTML to an HTML string. Positioning it can be tricky since you have to worry about scrolling and different browsers have different means of controlling this. You may also want to position relative to some originating element in the page which you can do by digging the element and it's position out of the event object your javascript function receives when the originating element is clicked.
Google hover popup - first link is http://www.calcaria.net/javascript/2006/09/javascript-hover-over-html-popup.html
There are lots of different libraries out there for making windows. I have found that Livepipes has a very well rounded and customizable javascript library that includes a window control along with a variety of others. http://livepipe.net/control
One that I haven't used but looks promising, is prototypeui. It is based on the prototype and scriptaculous javascript libraries. jqModal is another I have used that is based on JQuery.
take look at fancybox http://fancybox.net/