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.
Related
I already have html/css website. Is it possible to insert bootstrap into it and use it only for some features , for example making this website responsive on all devices etc?
Not really.
Bootstrap sets CSS properties on many elements. Simply adding it will create a great many side effects.
Its effects are not limited to elements that you specify.
It also won't magically make things responsible. The responsive features in it require specific HTML structures which you won't have.
If you want to make an existing site responsive, you are best off writing your own media queries.
If you just want the responsive helper utilities and the grid, then you can import the grid only, so that bootstrap styles don't clash with you own existing styles.
So instead of importing bootstrap.css you just import bootstrap-grid.css.
If you use SCSS compiler you can do the same thing just with the .scss extension.
https://getbootstrap.com/docs/5.1/getting-started/contents/#css-files
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
I've seen this image slider on the front page of http://www.ibm.com/us/en/ and I want to have one like that for my site. (After a timeout, the first image slides out of the screen, then the second image flies out after it, and then a new pair fly in).
I've seen that IBM uses Dojo not jQuery. Is this built in effect in dojo?
I have knowledge in javascript (but not any library like jQuery/dojo) and I can make it myself the hard-way. But I wanted to know first if there is anything built in to do it?
I think you might be better off with dojox.widget.Rotator or even dojox.widget.AutoRotator.
The image slider on the IBM.com front page is built using Dojo, but not a out-of-box component of Dojo library. It's a customized component.
If you want to create image sliders using Dojo, take a look at existing out-of-box components in DojoX library (dojox.image). dojox.image.SlideShow is a good starting point.
I got a datepicker set up for my main page and now I wanna set it up for some of my other stuff. The problem is that I need it smaller than what I'm using on the main page. Is there a way to have different sizes for different instances of the datepicker?
jQueryUI uses CSS to style all of it's widgets, and those are typically stored in a CSS file as theme. Depending on the theme you're using it may or may not be possible.
If the theme you're using uses ems or % for the width and font-size, then you could easily create a new style that would alter the look of all of its children.
For example:
.someClassNotOnTheMainPage .datepicker {
font-size:.75em;
...
}
If you're looking for a pure Javascript solution or an option to pass to the datepicker widget, unfortunately, there isn't one.
You can design and load a different css than the default jQueryUI theme. Although the themes usually have the same size for the calendar, you can choose to personalize this feature to your needs.
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