I have a List Item that on hover, changes its BG color and also makes the border right grow out from 0-7px. Within the list item there is a label for a radio input that is toggling content off and on when clicked. When the border grows, the label gets pushed over.
Is it possible to specify that on hover attributes X and Y happen to the list item, while triggering another css event to change the z-index of the label?
In general, if you want to hover over one element and this trigger an action on an adjacent element, just use plus sign. For example,
.hoverable:hover + .actionable {
Check out this codepen for a simple working example: http://codepen.io/Joi/pen/VKZqAX
Related
In my HTML table I am adding rows dynamically.
As can be seen in the above image, one of the columns (in each row) has a button (OpenPad) which I am using to increase the height of the textarea like this:
$('#'+ constructeIdQuesFld).height(65);
The aim of this arrangement is to conserve space. The result is as seen in the following image:
However, if I want to toggle the button action from the default textarea height to increased height and back to default, it is not happening. I have tried the toggle action using the following:
$('#'+ constructeIdQuesFld).toggle().height(65);
When the button OpenPad is clicked the 2nd time, the textarea is hidden completely, instead of reverting back to the default state. This is stated succinctly here:
The toggle() method toggles between hide() and show() for the selected
elements.
Under the circumtances, how do I toggle between two states of the textarea (from default size to the intended one and back)?
You can use textarea instead of input[type=text]. Then the toggle function is about changing the value of the rows attribute of the corresponding textarea.
$('thebutton').click(function(){
$('thetextarea').attr('rows', $('thetextarea').attr('rows')==1?5:1);
})
I have created a custom Polymer element which extends paper-fab.
The element contains other elements such as paper-button and paper-input within it. These elements are initially hidden meaning, you just see a FAB.
With the custom element implemented on a different page, when it is clicked it gains focus therefore the custom element changes shape from a circle to a rectangle and shows the paper-button and paper-input elements within it.
When you click away from the custom element such as on a different part of the page, the element changes back to a circle from a rectangle as it no longer has focus. However when interacting with the paper-buttons and paper-input, these elements gain focus and therefore the custom element loses focus and changes shape back to a circle which is not intended here. When interacting with the elements contained within the custom element, the custom element should remain a rectangle; showing and allow interaction with the elements contained within it. When clicking away from the entire custom element, it should change back to a circle and hide the elements within it.
Please see the JS Bin to see how I currently have this set up: http://jsbin.com/wuxuhowavi/1/edit?html,output
I'm attempting to implement a multi-level drop-down navigation menu in CSS only but there's one small part which I just can't seem to get working correctly.
What should happen is:
1) When hovering over a menu item, it should be highlighted by using a different image (this works fine).
2) When hovering over a sub-menu item, the parent menu item should be highlighted.
Point 2 works fine up until I have a class .bottom on the parent menu item (this class is used as the image is slightly different). If the parent menu item has class .bottom, the highlight simply doesn't happen.
A demo of this can be viewed here: http://jsfiddle.net/cZFtW/2/
The demo shows that when hovering over Menu 1 > Sub Menu 3 > Sub Sub Menu X, Sub Menu 3 is highlighted. However, when hovering over Menu 2 > Sub Menu 3 > Sub Sub Menu X there is no highlight.
Can anyone see what I'm missing? On a side note, there's no real reason for not using Javascript here, I'd just prefer to have it all handled by CSS if possible (only need to support IE7+).
TL;DR; version: this fiddle shows the answer.
I understand what you mean. And I am pretty sure that the styling to which you need an answer to, which works for all except for the one at the bottom, has arisen purely by accident. (Kind a nice one I must say). I am almost certain of this, because your code as well as the file names lack any form of consistancy. There is double code, there is superfluous code, and there are images missing.
Therefore I have rewritten your markup and style sheet, and came to the fiddle as mentioned above.
Now, how does it work?
The trick is to attach the background image to an element inside the list item. In this case I chose for an anchor element, since that is most the likely. The first step is to change the background image at hovering the anchor, that's basic.
The second step is to change the background again when you hover over the submenu. At that point, the anchor element isn't hovered any more, but the list item is. So you can still change the background of the anchor element.
Note: in my solution there is a small difference to what you wish: when you hover the arrow, the background if the list item is already changed instead of until the cursor is over the submenu. If you want to prevent that, then you have to add an extra element for every sub menu like you had done yourself. But I think this is pretty nice also.
I usually have no problems with making CSS sprites, but this one has got me stumped...and I'm not sure how to solve it. Basically I have a navigation sprite that looks like this:
I'm using the standard convention of laying them out in <li> tags such like:
<li class="welcome">welcome</li>
And then applying CSS to adjust the background position:
#navigation li.welcome a {
width:155px;
background-position:-0px -46.5px; }
Of course I didn't think of this, but the problem happens on hover. Since you can only define "square" areas, when you hover over an element, the "blue" hover state is being carried over to the next navigation item.
I then thought that I'd have to make individual images for each item... but that wouldn't work quite right either because of the overlapping arrow sections.
Maybe I have to seperate out the "in between" arrow seperators? I'm really not sure.
I'm stumped here. Any ideas?
I think you're right about having to cook up a 'clever' image which covers all your requirements.
It's difficult to explain in words, here's a link to an example: http://www.alistapart.com/d/sprites/ala-blobs2.html
Here's the link to how it's done (scroll down to 'Irregular shapes') : http://www.alistapart.com/articles/sprites
Could you recreate the sprite so that the navigation buttons are stacked vertically? Then it seems you could use negative left margins to fit the buttons together. This way, the negative space on the left side of the button would be empty, rather than have an arrow tip in it, so on hover, the cavity would remain transparent.
Instead of one row of "active" sprites, create two and activate them alternatively, i.e.:
active > inactive > active > inactive ...
inactive > active > inactive > active ...
This way, you can always cut a sprite; you just have to add to the Y value if the index of your element is "odd" (index & 1 == 1).
You could extend your sprite and replace the hover state with 5 separate lines of hover state, each one having only a single blue button with a separate hover state position for each item. The files size shouldn't be too much greater.
I have two components being absolutely positioned within a container (they are MapSymbols on an ILOG Elixir map, if that helps). Each component is a VBox with an Image and a Label. Images have functionality tied to the Click event; labels do not.
The problem is when 2 items are positioned so that the label of one is above the icon of another in the z-index, so that the label eats any mouseOver and mouseDown events. Bubbling doesn't help since it bubbles from the label to the vbox to the container, never hitting the lower element. I can't set the vbox to mouseChildren="false", since that keeps the image from getting clicked, as well.
Is there anything I can do with this? The positioning and number of components is data-driven, not something I have control over.
EDIT: some clarification. Each distinct component is structured like this:
<VBox>
<Image source="whatever" click="handleClick()"/>
<Label text="{item.label}/>
</VBox>
The problem is when two of these vboxes are placed close together -- the label of one box may be above the image of the other box, blocking you from interacting with the lower one.
(source: imnotpete.com)
In that example the second label blocks the lower icon -- mouse events are only passed when you interact with the lower half of that icon.
Setting the VBox to mouseEnabled="false" and the Label to mouseEnabled="false" mouseChildren="false" doesn't appear to have any effect - the label still blocks the lower image from receiving mouse events.
The z-index is determined by the display tree, with higher-indexed child DisplayObjects shown above their siblings, so this is how it works already.
What you should be doing is putting your label inside your button as a child, but if you just want to run with the hack, you want:
label.mouseEnabled=false;
label.mouseChildren=false;
label.mouseEnabled = false; would make the area behind the label clickable, isn't that what you need ?