Is their any jQuery plug-in for auto complete that allows our own styling?
Every library i see comes with a built in cascading style sheet.
Yes and no.
At http://jqueryui.com/download you can select "no theme", but you will still get an .css that you need to use. That css is used in the javascript code to open, close and interact with the autocomplete menu and text.
It is pretty easy to alter the .css to make it look like you want it to. Try some small changes and reload the page to see what happens!
I don't have a perfect script for you, but you can download the Jquery-ui library with the "No Theme" option.
In fact, there is a minimalist default theme, but you can easily override it in order to build your own theme.
jQuery UI Does indeed allows user-based styling. You can simply change the css file as if you'd do from scratch. Heck, just write down the class names and create your own...
Related
which one do I need to use?
https://www.bootstrapcdn.com/
CSS or JS or BUNDLE or all 3?
I want to use buttons styling, grid, card (and maybe dropdown but in the future)
<!-- which one? -->
https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js
https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js
TLDR:
if you want basic styling, use a CSS-only file.
if you need interactivity then use also javascript
CSS is mandatory
JS is optional
I suggest seeing the official docs https://getbootstrap.com/docs/4.4/getting-started/introduction/
"Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following s near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins."
they basically say if you want some extra functionality then go for javascript one (for example you want a tooltip, a dropdown that opens and close)
if you want instead of coloring, or changing size, then use only the CSS link. (buttons are one of this case)
however, if you use this only to learn, I suggest importing all the files there, for not have any import issues.
once you will learn it, then try to use one cdn link at the time.
if you want to use bootstrap in the production site, then maybe try using the npm package instead.
npm i bootstrap
(but first try to learn using CDN, the once you know the basics, then use npm)
also remember to use <link> tag to make HTML import the CSS file, by copy the first link appear you once you open the dropdown
If you are planning to use dropdowns, poppers and tooltips, use all. If you only need styles use bootstrap.min.css only.
One of the available themes in Dijit is Nihilo. I am using dijit/layout/.. for displaying some charts and graphs . I want to change some of the styles being used. Can any one tell me how to customize Nihilo.css and use the customized version?
Don't change nihilo.css, create another CSS file and put the link tag for the second file after the link tag for nihilo.css.
This way, if you upgrade Dojo, you will not have to merge your changes back in.
If you need to customize nihilo, I would suggest to have a look at this official guide Customizing a Theme.
Basically the idea is to build your theme, based on nihilo leaving the original nihilo untouched,.
Is there any Lightbox-live or overlay library out there that only provides the "basic cross-browser centered popup with a dark background" without attempting to perform requests and display images?
I would like to populate the contents myself using my own JS code which is non-trivial and all of these libraries expecting a link with something displayable inside it are unusable for my simple yet unusual (it would appear) use case...
I've gone over maybe 15 Lightbox clones today and for the life of me couldn't find a simple way to just get the basic overlay functionality without the added fluff. Is anyone familiar with something like that ?
Look into Colorbox. Check the Inline Examples. It works well.
http://jacklmoore.com/colorbox/
Look here: http://jacklmoore.com/colorbox/example1/ under "Other Content types"
Try jQuery UI dialog!
jQuery Dialog in jQuery UI might be an option to consider.
You can customize the download of the library to give you only the dialog.
Just de-select everything from here and select "Dialog" only (it will select the minimum dependencies for you):
http://jqueryui.com/download
I want to make a theme swither using jQuery, I see the example made in the docs of the jQuery mobile page, but it's exhaustive as it dublicates the same page but with different theme swatch as a result it affects only one page in the App, I want a theme switcher that affects all the pages of the App, thanks.
Perhaps storing the selected theme (local storage/cookie) and using jQuery to grab that value and add a style element to the page?
Consider using jQuery UI and their themeswitcher - http://jqueryui.com/docs/Theming/ThemeSwitcher
It works great on our internal site. If nothing else, look at the way they do it and you should be able to come up with your own customer solution rather easily.
Use a session variable to determine which CSS to include.
My Problem in a subject. For Example: how can i dev my own Alert Pop-ups
I think, its possible with overlays, but i dont know how.
My suggestion would be to use a combination of javascript and CSS. The key to the pop-up will be using a z-index in the CSS that puts it in front of the rest of the page content.
The javascript would just be used to activate and deactivate this section. You could also set up some other CSS classes to darken the rest of the page content, and apply those classes in the same javascript function.
What about ol'good?
<script type="text/javascript">
alert("Hello, I'm a pop-up!");
</script>
Eventually, you could use jQuery UI Dialog module: http://jqueryui.com/demos/dialog/
Edit: I think you should also say if you are interested in JavaSctipt OR XUL based solution.
Edit 2:
If you want to use XUL, check out this links:
https://developer.mozilla.org/en/XUL_Overlays
https://developer.mozilla.org/en/Building_an_Extension
http://www.gmacker.com/web/content/tutorial/firefox/firefoxtutorial.htm
I found them very useful when I was working on my own extensions.
Truly, all you need is a:
<box id="myBox"> content here </box>
plus some logic to open it.
My suggestion would be to use BlockUI , its light-weight and very easy to use.