I am essentially trying to implement a DOM object that contains many different html templates and can be navigated using different options. I am comfortable with the AngularJS / controller side of this, but unsure about bootstrap and utilizing existing classes/directives.
My project is currently using angularjs, bootstrap, and angular ui-boostrap. The functionality I want is pretty similar to ui-bootstrap's accordion functionality but rotated sideways. But all the other options get hidden away when one is selected. Does something like this already exist? Also is there existing code/directive can I use to make the creation of this easier?
I plan for the menu's width and height to be mostly static so my only concern is creating this menu while giving it a clean 'bootstrap' feel.
I think I used this before and was happy with it:
http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3
See issue in angular-ui/bootstrap also:
https://github.com/angular-ui/bootstrap/issues/2421
Related
I am in the process of replacing a few JQueryUI components with ExtJS. The issue I am currently facing is how to apply our JQuery theme in ExtJS.
For example, my popup windows use .ui-icon-close-thick. However, to override this in ExtJS I need to set the .x-tool-close class to the same background-image & background-position. Does anyone know an easy way to accomplish this?
There is no easy way to do that — like there is no easy way to take the exterior off a car and seamlessly attach it onto the frame body of another car made by other vendor. Ext JS components are represented by certain distinctive DOM structures which your CSS rules should fit to.
The right way to do that (not very easy though) would be to create your own Ext JS theme that will mimic your jQuery theme.
So, I've built a responsive site with Twitter Bootstrap. The problem is that I've done this using visible-phone, visible-tablet, and visible-desktop. This means that when someone views my source code, I have whole sections that are included twice or three times, in order to get around problems with differences in span amounts, or, for instance, because a carousel on the tablet should have 2 items, while on the desktop it should have 4.
I'm wondering if I'm doing this right. Should I be injecting (or adding? Not sure of the right name) code to the DOM dynamically using Javascript, based on screen size? Or should I be editing around with my custom, very simple .php files based on screen size? I don't know, and I can't find an answer about good practice anywhere. I've tried looking at sites I like for this, but I never find a javascript script that specifically adds stuff in this situation. Given, I'm not sure what I'd be looking for.
Any pointers?
I would avoid using script to dynamically add the content; as a fellow developer that just makes it less intuitive (in my opinion) and I always aim to produce intuitive code for the chap after me.
If your requirements state that a carousel should have four items on the desktop and two on mobile, then I think your solution is completely valid.
I'm rather new with BackboneJS.
it is exciting stuff for somebody who worked with plain JSONs until now. :)
I am used to design JQuery Widgets and plugins to encapsulate logic / presentation.
Backbone seems much more flexible with its MV* approach.
I am redesigning a "mini-photoshop" project for work. a javascript/html page which you can add elements like labels, images, buttons, change their properties, drag&drop them around and change their z-index, etc.
I took an approach of having a Backbone collection of elements that represents the drawing.
I thought of using a jquery plugin to be able to create this workspace in everypage i'd like.
so i could do something like:
$('.wrapper').miniPhotoshop({
elements:elements, // BB collection
painter:painter // an object that knows how to draw
});
the painter is seperated from plugin so i could easily change the way the collection is drawn.
So the objects here are:
miniPhotoshop - a jquery plugin that gets a BB collection
painter - an object consisting of methods that know how to draw the elements.
propertyBox - a jquery widget that when an element is clicked on shows its properties.
My question is does this jquery-backbone salad make any sence?
Apologies if this is an open-ended question, just hoping someone tried something similar before and be able to point me in the right direction.
Thanks!
I don't about others, but I wouldn't take jQuery for the structure of your app. I think Backbone is really good for structuring code, and jQuery is great for playing around with the dom.
My approach would be to use Backbone views to control the flow of your App and jQuery to play with/manipulate the dom inside Backbone views.
I am working in making an app around the 960.gs based system (although the grid framework isn't set in store yet).
What I would like to do is enable the user to drag and drop specific layout elements (DIVs), which would, theoretically, move the blocks of the design around. I know JQuery UI has a drag and drop system, which may be a component of this project, but what I want to do is make sure that the user can only drag, drop and stretch/expand divs according to the limitations of the defined css grid. And make sure that nothing will violate the boundaries of the grid, and generate the proper css classes to display correctly....
I have scoured the net and stack exchange for some examples along this line, but I haven't seen anything. Can someone point me in the right direction?
I'm looking into a similar problem, and I found a few options that are not based on 960.gs.
jQuery EasyUI (www.jeasyui.com/) has something like this; here is a direct link to their demo.
There's also iNettuts, which is something similar.
Since you said the grid framework choice isn't solid, I think these options might be useful.
I have a number of (Backbone.js) Controllers with a bunch of child elements.
When the browser is resized or the model changes, I'd like child elements of various controllers to be able to affect the layout of other elements.
Let's say for example that I change language in the model and that this results in my headerController => titleTextField growing from 1 to 2 rows. This should cause the container below to shrink to accomodate for the growth.
Somehow, I'd like a layout manager to be able to take this into account and reposition dependent elements accordingly.
Are there such layout managers? Alternatively how would you build one?
(Preferably one that works well with Backbone.js MVC principles)
this sounds like a CSS issue, not a javascript / mvc issue. there are plenty of css frameworks out there, such as 960grid, blueprint, and many many more, that handle this sort of layout change