so here is the code https://codepen.io/Dobrodeetel/pen/ZEaqVap.
This code partially repeats what I have on the site. therefore questions about why it is so - unnecessary.
It works like this - click on any line - an additional line appears with a table inside (you can remove it if you click again on the same line) in which there is a line when you click on which another internal table will appear (which is also removed when you click again).
Have a few questions:
1 - if you look at the third table, you can see the row overlap (css hover).
the question itself is how to do the same only for the first table (it is possible for the second one as well)?
i.e. write something like
.table_blur tbody:hover tr:hover td {
background: #8981ce85;
text-shadow: none;
}
as commented out in table_blur on line 32, the line with the second table will overlap. I need to make sure that such rows (with tables inside) are NOT repainted.
I was offered an option that is also at the end of table_blur (line 37) but it does not work
2 - there is this code https://codepen.io/Dobrodeetel/pen/ExXEemr.
It's about opening animation. how to apply such animation to my tables?
also found this code http://jsfiddle.net/1rnc9bbm/4/. which works without js at all? Well, of course I need when pressed.
So - how to attach a similar animation to the May version? that is, opening and closing until the disappearance?
I really don't care how it works. just because my table is built right away - the code with the active class does not work.
Also how to make animation relative to width? as you can see, the third table greatly stretches the ENTIRE table (on my site it’s the same and can’t be changed in any way, since the number of columns is different). how to make a stretch animation?
That's all. the answer to any question will greatly reduce my work)
I'm working with a jQuery message box like this. I would like to use this in my web application, but still I'm encountering one problem. This area of whole popup should be reserved. If you see this link you found if popup in closed conditions then when you move the cursor to the bottom then it's become handy cursor. This shows one bug.
However all I want to do is to make one jQuery notification box (just like our stack overflow) that list messages and when it goes closed no fixed area reservation problem.
Anyone know of a good plugin for this?
Could any one have solution for this ???
The problem was that the message box never was hidden per se, it just had an opacity value of 0, thus not visible but still taking place. What you need to do is change its display property value, just like StackOverflow does on its message box.
1. Remove these two lines from .notifications:
transition: .2s;
opacity:0;
2. Add this line to .notifications (if you want the message box to be hiddne by default):
display:none;
3. Change the jQuery code to:
$(document).ready(function () {
$(".notificationicon").click(function () {
$("#notificationMenu").fadeToggle(200);
});
});
codePen demo.
Customization
If you want to customize the easing you can change fadeToggle(200); to fadeToggle(200, 'EASING-TYPE'); where EASING-TYPE is a string value indicating which function to use for the transition (default is swing but can also be linear).
I have a group of jquery ui selectable things inside a div which expands to full size upon the hover event. The desired effect is that people can select/multi-select/lasso as many of the select-able objects as they would like. When they are done selecting, and the mouse goes to another part of the page, the div returns to its minimized size.
Basically I have it working, but when I lasso-select multiple objects, it seems that the :hover state is canceled or disabled. This leads to the div pre-maturely returning to its original size, and therefore destroying the user experience.
jsfiddle here: http://jsfiddle.net/Ty6RX/2/
The div in question contains the blue "All Customers". If you try lasso-selecting multiple objects you should see the problem. Any help is greatly appreciated!
when mouse is held down the element goes out of :hover and into the :active state w3schools reference. Fortunately, you can apply a CSS class to both states without interupting the user
try this
http://jsfiddle.net/Ty6RX/3/
#customer_picker:hover, #customer_picker:active {
...
height: 300px;
}
I have multiple buttons (as menu) as images on index page. I have rollover image on all of the buttons.
On click, result is show on iframe in the middle of the page. But i want also that button change and stay changed until next menu button is clicked.
Example for one button:
<img src="images/faq_b.jpg" alt="faq" name="faq" width="70" height="70" id="faq" />
There are much better ways to achieve what you are trying to do. I take it that you are using Dreamweaver. Generally the scripts that come with Dreamweaver are pretty poor and out dated.
For example, instead of using the "roll over" image changing ability that comes with Dreamweaver. You can just use plan old css.
For example if you created an image twice as wide as your button and added both states of your button side by side. By doing that you can now use css to simply move the visible area of your button from one side to the next, or as it will appear from your "normal state" to your "hover state"
Example css:
// button normally. Because we specify a width and height that is all that
// will be shown of our background. e.g. Our "normal state"
a.myButton {
display:block;
width:200px;
height:80px;
padding:10px;
cursor:pointer;
background:url(images/my-button-sprite.png) no-repeat top left;
}
// This will switch the button to our right side (or our "over state")
a:hover.myButton, a.myButton.active {
background:url(images/my-button-sprite.png) no-repeat top right;
}
In relation to your keeping the hover state over until another menu item is clicked.
Do a Google for "jQuery". It's a set of tools and plugins that use Javascript. JavaScript is what is currently doing the swapping of images for you.
There are 1,000's of tutorial on how to use css and jQuery to get the result you want.
Check out these resources:
http://www.w3schools.com/css/ << CSS is your friend.. Learn it..
http://api.jquery.com/toggleClass/ << this is what will allow you (using the code I have provided) to do what you're trying to do.
But I'm not going to tell you exactly how to do it.. Because that spoils half the fun!
I have this page that does some funky database stuff that takes a couple seconds to process, and in the meantime I'd like to set a "wait" cursor so the user doesn't flip out and keep clicking the button. I've looked at the
document.body.style.cursor = "wait"
thing, the problem with this is that it only works when the mouse is over the body of the page (i.e. still shows normal pointer if it's over a button). How can I set it so that no matter where the mouse is on the page, it shows a wait icon?
A second part to this question is, once it's done it's thing, how do I set it back? If I set it back to "default", this seems to override any "hover" cursor changes I had set in my CSS (so it no longer becomes a hand when over a specified object, etc.).
EDIT: the first answer works nicely, except in IE it doesn't refresh the cursor (so you notice the change of cursor type) until you actually move the cursor. Any fixes?
What I suggest is two things:
a) Better write a CSS like
body.waiting * { cursor: wait; }
b) Use the JS to handle the body class
/* when you need to wait */
document.body.className = 'waiting';
/* to remove the wait state */
document.body.className = ''; // could be empty or whatever you want
You might want to add the class instead of replace the whole class attribute, what I suggest is to use something like jQuery for that.
EDIT 2019: don't use jQuery for just this, use classList
The styling should be handled via CSS, as stated by W3C.com:
CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. ... The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.
As suggested by Tom Rogerro, add a line to your CSS file:
body.waiting * { cursor: wait; }
However, your script should not overwrite the entire list of class names. Tom suggested setting the class names via jQuery, but jQuery is unnecessary in this case. Simple Javascript can do this.
To add a class name 'waiting' to the document body:
document.body.classList.add('waiting');
To remove a class name 'waiting' from the document body:
document.body.classList.remove('waiting');
For your first problem, try using cursor: wait !important;.
For your second problem, the default cursor for elements is cursor: auto;, not cursor: default; or cursor: inherit;.
If you are happy using JQuery then a quick way to solve this would be to use:
$('*').css('cursor','wait')
I don't know how elegant this is but it has been working for me,
Not an answer to the question, but a way of achieving what is wanted.
Make a div (see class below) visible when you are loading.
ensures no element is accessible and dimmed display indicates this.
you can add an animated gif to indicate something is going on instead of the cursor.
.loading{
position:fixed;
height:100%;
width:100%;
left:0;
top:0;
cursor:wait;
background:#000;
opacity:.5;
z-index:999}
Any elements that don't inherit the cursor by default (such as buttons) will need to set the cursor to inherit:
someButton.style.cursor = 'inherit';
To go back to the default for an element (and not break things like :hover with a forced cursor), set it to an empty string:
document.body.style.cursor = '';
I tried everything but finally this jquery worked, especially if you want wait cursor over all elements including buttons and links.
define at the top of angular .ts file
declare var $: any;
and then where ever you want wait cursor:
$('*').css('cursor','wait');
and remove wait:
$('*').css('cursor','auto');
To fully replace the CSS toggling behaviour, we can simply use this inline:
<img
src=https://cdn.sstatic.net/Img/unified/sprites.svg
onmouseover="this.style.cursor = 'crosshair'"
>