What is the proper way to focus a material design lite TextField?
This works:
$("#myTextField").focus();
This does not work:
document.getElementById('myTextField').parentNode.MaterialTextfield.focus();
However, this very similar code works to disable a TextField:
document.getElementById('myTextField').parentNode.MaterialTextfield.disable();
You don't need jQuery.
input.focus();
input.parentNode.classList.add('is-dirty');
Related
I am testing the tooltip component in the Angular component library below:
https://ngx-ndbx.frameworks.allianz.io/documentation/tooltip/overview
I want to leverage Chrome's Devtool's :hover functionality, which means that I want to use the functionality below
But when I tried it on the tooltip element mentioned in the link above, it doesn't work. Could anybody tell me why?
I found out that the event bound to the element is "mouseenter" instead of "hover", so I did the following to make it work
var evt = document.createEvent("HTMLEvents");
evt.initEvent("mouseenter", false, true);
element.dispatchEvent(evt);
I'm learning React with styled components and I have a button with a simple hover-effect.
This hover-effect can be created in the styled components file with &:hover, and in my jsx file, I can use onMouseEnter. Both will work.
I have searched google to find what is considered as best practice, but no luck, so I try here. Anyone?
It's very simple choice.
If you need change styles then use ":hover". You can pass props to styled component for change styles in depend of some condition.
If you need realize some logic on hover then use event handler for onMouseLeave, onMouseEnter, onClick and other events.
Use event handler for realize some logic. As example when you have some element and you handle "onMouseLeave", in mouseleave event handler you change something, from what depend other components. For this need use onMouseLeave.
I recommend use styles for simple styling things. Don't use javascript for simple styling thing as example for make blue color on hover, for that simple thing use CSS.
I'm searching for a way to style input after selection an item from autocomplete. Here is an example (Google Chrome):
I have already changed default styles for the input, but it seems like they were overridden after selection from autocomplete.
I'm searching for crossbrowser way to style it.
Thanks in advance
Does anyone know how do I specify that jQuery UI's datepicker will have my own CSS class?
I'm not talking about the div\input that the datepicker is "made on", rather about the pop-up that comes up when you open up the datepicker.
This div's id is: ui-datepicker-div
I can define my own styles for that pop-up using
.ui-datepicker { blah }
but, what if I have several datepickers, and want different styles for each?
I can't even do something like
.myContainer .ui-datepicker { blah }
Since the datepicker's div is added by jQuery such that it is right under "body" in the DOM. That's why I'm asking if there is a way to specify to jQuery UI to add my own class to that div, sort of like the "dialogClass" option that exists with jQuery UI's dialog ...
Thanks
You are correct that there is only one actual datepicker UI element on the page, but you could use the beforeShow event to add a class or change a theme for different elements. I added a small demo here that changes the border for different datepickers. You could add in other styles as you need. Might even be possible to swap to different jquery themes with enough effort :-)
I don't think it is possible with a simple option, but it is possible i think, the code can be seen here.
You should be able to see where the classes are set, I'm no javascript guru, but it should be possible to do something like this:
Datepicker.prototype._currentClass = Datepicker.prototype._currentClass + '-theme1';
then define a class as ui-datepicker-current-day-theme1
Somebody may correct me though!
By default JQuery UI doesn't support multiple calendar styles on 1 page. It could be possible to alter the datepicker component to include it, but you would have to take the time to figure out how to modify the javascript.
Im a complete beginner with jquery and need some help please.
Im using jqueryui, Im using the modal form: http://jqueryui.com/demos/dialog/#modal-form
Ive got this working fine, However I want it so that a regular looking hyperlink can invoke this dialog. Anything I use just appears as the "create new user" like from the example above.
How can I remove all this styling, and just make a regular unstyled hyperlink invoke the dialog
The button's classes are as follows:
.ui-state-default, .ui-widget-content .ui-state-default
You can find these in CSS and change the styles to fit your design :)
OR you can override them by putting them further down teh cascade (Nearer the bottom of teh CSS file) and this will override any default CSS styles.
I found it actually much easier to do something like this:
Login