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.
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'm developing a jquery plugin today, and I found it is impossible to apply two css files without overlapping each other. In other words, the new plugin will destroy the original layout. Is there any way to make a plugin running in a dividual environment?
You may rebuild the original css code to clear the overlapping by more strict rules, or, you may want to switch the plugins you are using right now to different.
Another thing you could do is change the source code of the plugin.
You should avoid overwriting existing CSS without knowing what it could do. Try to add bit by bit of the CSS code to check which code does affect the original CSS. The bottom CSS will always overwrite top CSS.
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 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.
I was wondering is it possible to customize the tooltip that we get after setting the title attribute in an img tag? Now I get a standard rectangle with blue background with text on it and what I'd want to get is my own image (lets say something that looks like a cloud) with text on it. Is it possible with css or js?
You need javascript for that. try this here or here
Or you can roll your own. But basically there is no way to do it directly in html (dont know about htm5/css3).
Create your own! You can simply create a hidden div in your HTML, then when someone hovers over the image, show your div instead.
If you would like to create a custom tooltip, I would recommend this. It shows you, in detail, how to create your own tooltips in js, which are CSS driven and can be easily reused.
Additionally, if you are using a framework, things get even easier. For example there are numerous jQuery tooltip plugins. These allow you to make your tooltips appear on the mouseover of any element.
I'll recommend Tooltipster. Really easy to use, can be used on any element that supports the title attribute and has many cool features and looks.