How to detect when CSS value has changed? - javascript

Imagine an icon embedded in text that should be perceived as its part and behave like a letter. To achieve this it should have the same color as the text around. Finding the right color is easy in jQuery.
The problem is that the color may change. Either a script may change the CSS value, or a different value may be set in the :hover pseudoclass, and so on. In the case I've run onto it's the :hover value of a div several levels above. The text color around the icon changes, but how can I detect this event in order to adjust the icon itself?

I might be mistaken but I am sure that there is no such thing than a "change event" for CSS styles. In some modern browsers there is a DOMSubtreeModified event, but I don't think that this will even be triggered merely by changing an attribute like this.
So the only way to determine changes here would be to set an interval (window.setInterval) and check for changes every x milliseconds (choose a suitable x here).

Related

How do you style and set animations for the cursor/caret inside of the input element

For clarity I am using react and mui
I want to change the style of the caret inside the input element and give it an animation. I can change color using caret-color, and I can give it a default blinking speed using autofocus. The blinking speed is some default value, and even if I assign the caret a blinking animation via keyframes and opacity, the default animation still persists causing overlap in blinking states.
Is there a way to disable the default blinking behaviors, or alternatively alter the blinking speed? Additionally in regards to changing the width of the cursor, would I replace the | symbol with some special character like ▌
I dont really have any example code to give since it's a general question
<input autocomplete/>
<TextField/>
For full control of style, you could keep the input but put it out of the viewport, keep the label in the viewport, and use a div to mirror the input value. Apply style and behaviour to the div.
However, users of any particular device are used to an input looking like an input on that device, and trying to redesign a wheel that has had huge effort put into it is not necessarily productive, also needs testing on a lot of browsers/devices.
Something similar to what you have asked for is at How can I change input blink caret style with easy css, js

Can you use a 'hidden' button to start something?

I am trying to have images appear on click of a button. I have that process working, but I'd like for the users/players to not see the buttons I will be clicking.
Is there a way to set a space where the button 'still lives' but isn't visible?
I'm pretty sure I'm going to need to get cute and hide the buttons on screen. However, if i can set them to specific spots and have them invisible, but clickable, that would be ideal.
Thanks in advance for the help.
I'm using HTML, CSS and Java. There's no JQuery in the code (for context)
The question itself is not clear but from what I understand you can do something like that in a various ways:
-- If the case is making them visible before click, you can set their z-index to "-1" and when you need to click them, change it to "1"
-- If the case is buttons are going to stay on the page and clickable but no one can visually see them, you can set their opacity to 0. Even they are invisible you can still click them via this method.
--> To position them on a specific area on your page you can use your CSS as the way you want. No need to worry about opacity change.

What happens first, CSS or JS events?

If, for example, you put a CSS hover effect on an element, and also put a JS mouseenter event on it, which one will happen first? Is there any variance with this? Can you control it somehow? Is it possible to force them to execute in a particular order?
which one will happen first?
Notice that there is no such thing as a "CSS event". However, the behaviour is undefined; you could consider the CSS change and the JS event to happen at the same time. The relevant specs CSS Selectors 4, DOM 3 Events and HTML 5 point out the similarities between hover and mouseenter, but do not specify an order. Mouse event order is specified, but does not refer to CSS user action pseudo classes.
Is there any variance with this?
Yes, browsers are free to implement it either way. They could change the layout and redraw the page before they fire the JS events, or they could not. It should however not make much difference.
Is it possible to force them to execute in a particular order?
I personally would expect in the CSS to be applied already when the JS event handler is executed. Even if it was not yet computed, when querying styles (e.g. getComputedStyle(this)) a CSS recomputation is done so that you should always get the dynamic styles - see also When does reflow happen in a DOM environment?.
Try it out at http://jsfiddle.net/n4Z8H/. While most major browsers will yield the expected value (rgb(0, 0, 255), the blue :hover style), older IEs don't seem to do.
Depends a lot on how the browser works, and shouldn't be relied on. Most browsers should run the two at almost exactly the same time. If you want one to execute before/after the other, just control the CSS styling via JavaScript, for example on hover add a class and on not hover remove the class.
Although, if this is an actual issue you have, you're probably doing something wrong.

IE8: Removing a node during CSS hover causes hover state to stick [duplicate]

I am building an app that allows you to move list items from one list to another by simply clicking on them. However, in order for the user to know what the intended action for a clik is, I set up a :hover state in the CSS which shows an instruction such as "<< move"
The problem I have found however is that in Internet Explorer (tested versions 7-9), when I move a DOM element the :hover state of that element remains (becomes sticky), even when the mouse is moved around. The :hover state only disappears when a user hovers over the item in it's new location and then moves their mouse away. This is an Internet Explorer only issue it seems.
You can see the problem if you are using IE by going to http://jsfiddle.net/hc2Eu/32/
There is of course a workaround which is to not use CSS :hover state and use a JQuery hover event instead, but this is certainly not the best way of doing things, and keeping elements :hover state controlled in CSS is by far and away the most robust way of doing this. The workaround can be seen at http://jsfiddle.net/hc2Eu/29/
Has anyone figured out how I can tell Internet Explorer somehow that an element is no longer under the mouse, and it should release the :hover state?
Matt
Try cloning the element instead of appending it directly. When you append, you're taking the element from it's current position and state in the DOM and placing it in its new position - basically just moving it. IE is clearly not repainting the element when this happens, or resetting its state until you mouseover.
By cloning it, you force IE to create a new element, which, since it's not on the page, can't have the hover state applied to it anyway. Then just append it in its new container, remove the original, and you're done.
See an example in this fiddle: Two lines of code, cross-browser, and you'll remain concise and not pollute your code. :)
http://jsfiddle.net/hc2Eu/36/
this will handle your issue. clone the clicked item(add true if you want to save click event and other handlers) insert it after itself so it has the same place in the dom. then remove it. the clone will not be stuck with the hover state stuck. All references are relative (this) so it'll work anywhere without changing selectors.
$("#elementwithhover").click(function() {
// code that makes element or parent slide or
// otherwise move out from under mouse.
$(this).clone(true).insertAfter($(this));
$(this).remove();
});

expanding drop down area above instead of below with javascript

Ok so the story is my users need a multi-select dropdownlist, which doesn't exist in ASP.NET, so the simple solution I'm going with is I'm using listboxes with multiselect on and I start them off at size 1, and onmouseover I change the size to say 10, onmouseout sets it back to one. Simple enough and the users don't know the difference.
Now, my issue comes from the fact that since I have any number of controls on my web app, I've set these listboxes to higher z-index numbers than the other controls, which creates a problem: on my listboxes closer to the bottom of the page the list expands below and not above, and part of the listbox goes under the bottom of the page but since onmouseout resets the size of the listbox I can't scroll the page down.
Does anybody know what I need to set to make it expand up instead of down?
edit Also, some may ask "why don't you just rearrange the listbox to a higher position in the page," the reason this isn't a viable option is I have well over 40 controls on the page and it they're grouped cohesively, I didn't just randomly place them where they are.(ie. investment info in one section, account in another, suitability in another)
EDIT: It's worth noting that the jQuery version of the below will be more compact and, in my opinion, more easily understood.
Glo, the code you have currently would be helpful here, especially since it seems you will have difficulty changing anything we give, or implementing what we might describe. Anyway, this works as intended in IE7, Firefox, and Opera; Safari and Chrome go quirky with it: http://jsfiddle.net/bUFzq/35/ (modified from http://www.plus2net.com/html_tutorial/html_frmddl.php).
The CSS just makes the select position-able relative to its default placement. Elements can only be positioned relative to other positioned elements. `position: relative;' leaves the element where it was until you move it, unlike absolute and fixed. It also positions relative to the edges of its nearest positioned ancestor. (The IT industry has the unfortunate convention of increasing Y downward rather than upward; just a heads up - or down.)
element.offsetHeight is the computed height of the element - how big it appears on the screen. element.style.bottom (like its cousins top, left, and right) sets the element's offset from the corresponding edge, in the direction of the element's center. setAttribute is fairly self-explanatory; it acts as if you were actually editing the HTML. Most properties of element.style (that aren't on all other objects) represent and modify similarly named CSS properties. For example, element.style.backgroundColor sets the background-color property.
addEvent is a function copied from Dustin Diaz's Rock Solid addEvent() because the browsers don't agree very well on how to do events. However, I would have put his script in a separate file and mine in yet another if I weren't working within a single script area. I did the `var addEvent = init();' thing just so you wouldn't have to scroll through his source, even though it is a good example of good code.
mouseover & mouseout are the actual listeners, explicitly called using apply 1) because I needed that height value for later and 2) because for some reason (at least within jsFiddle) it doesn't start out in the correct position, and only if the listeners are called in that order will it get there.

Categories