I would like to know if it's possible to keep another element open upon clicking span or link. Here is an example of what I am trying to do, if you click on the + sign, the form display, but soon as i get off the span, the form goes away. http://jsfiddle.net/robx/68jmY/
I know it's possible with the help of JQuery, but is it possible to do without any javascript?
Demo: http://jsfiddle.net/68jmY/3/
Something along these lines could work. Here is what I changed...
<span id="expand">+</span>
...
#contact:target { display: block; }
#expand a { text-decoration: none; }
Try the :target pseudo-class: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-mimic-a-click-event-with-css/
Related
I am working on designing a form with angularJS. I am facing this issue from a long time. Whenever I use a text field (md-input-container) and drop down (md-select), this causes a height difference.
When I inspect the code, I find out that the md-input-container has an extra md-error div tag.
I want to get rid of this div tag <div class="md-errors-spacer"></div>. Any suggestion?
Thank you
You could do something like .hide-validation-error .md-errors-spacer { display: none; }, and then you would just need to add the class hide-validation-error to any of the <md-input-container>'s that you know won't need validation.
use this css:
md-input-container:not(.md-input-invalid) .md-errors-spacer {
display: none;
}
It's just a simple question. I made a button using <a> with background image. It should use different image when it is clicked. I use :active property in its css. But the thing is even after the button is not pressed (release), the :active class is still there. So it is still using the image for the status.
How come? And how I should do it, when I only want to apply the class when the button is pressed?
Thank you. I hope I have explained it well enough.
catwoman, if you just want it while pressed active should work. if you're looking for toggle, then you need what's below.
CSS doesn't have a selector that toggles, except for :checked on checked inputs.
You need Javascript:
<a href="#" onclick="toggle_class('foo');"
or to use jQuery Toggle: http://api.jquery.com/toggle/
--
then again, if you are actually looking for button pressed, active should work. paste your code here and we can check it out. if you're doing something that can't be performed solely with css :active pseudoclass, look at the mousedown event: http://api.jquery.com/mousedown/
works fine for me: Demo
button {
background-color: blue;
border: none;
color: #FFF;
}
button:hover {
background-color: green
}
button:active {
background-color: red
}
Can you provide a Demo to have a look in to it?
To help protect users, you can't really style upload's with CSS. So, the solution then is to hide the real upload and show the user some other element that looks how you want.
I started a JSFiddle that shows how you could mask an invisiable real upload over a simple button or something so that you could style the button - but still get the user to click the upload input.
However, the problem is that I can't get the hover states to work since the real input is floating above the button.
Am I approaching this problem wrong? How do you style upload inputs?
After playing around some more I finally got it working by making the input a child of the Upload button element. I had to make the upload button a div also since it's not correct to have an input as the child of a button.
See it in action here
If I understand the question, this is what you want to achieve
jsfiddle.net/yVFWJ/1/
.button {
width: 47px;
height: 19px;
cursor: pointer;
text-indent: -9999px;
border: none;
background-image: url(http://www.hudson-realestate.com/us/images/uploadButton.gif);
}
Hm... You could use document.onmousemove event. In there you can check if your mouse position is inside the button area. If it is, simply change the class of button to eg "send_button_hover". If it's not, change the class to just eg "send_button".
You can do it using pure JavaScript. It's not very difficult.
But it's a lot easier if you use jQuery. You have mousemove() function for handeling event; height() and width() functions to calculate button dimmension; offset functions to calculate position of the button and toggleClass() to change the class of the button.
Ignoring internet explorer 6 and latter, how do I script the css to achieve the following results:
It would hide the information until UpgradeI, UpgradeII or UpgradeIII is hovered. Site link is Here
There is around 500 pages like that, so tweaking or adding javascript in the html is not feasible. I think CSS is the way to go to do this, but I've tried:
div.UpgradeI {display:none;}
div.UpgradeI:hover {display:inline;}
but it just hides everything and doesn't show the information when hovered. Anyway, if its not possible to achieve the same result using css only, please show me what code to add. Thanks!
Okay, it's possible to do this with CSS. First of all, those styles you suggest don't work because if it starts out with display:none, there is nothing to hover on for the next style to kick in.
I was able to add this to your site with Firebug:
div.UpgradeI,
div.UpgradeII,
div.UpgradeIII {
height:20px;
overflow:hidden;
}
div.UpgradeI:hover,
div.UpgradeII:hover,
div.UpgradeIII:hover {
height:auto;
}
That is the ugliest hack in history, but it achieves the desired effect without changing the HTML or adding Javascript. The paragraph below doesn't slide up because everything is positioned absolutely. If you start using float styles for everything else, though, it'll work.
Obviously, you can edit the height to show more/less of the div as necessary.
It would be hard to do it with only css. Because once you set the element style to display:none, it's not possible to catch the :hover event by the element.
I would suggest to use jquery to create a place holder element at the empty place. When the mouse hover over this element, then display the alternative "real" element.
you can try this plug in to see if you like it.
http://cherne.net/brian/resources/jquery.hoverIntent.html
UpgradeI table, UpgradeII table, UpgradeIII table {
display: none;
}
UpgradeI table:first-child, UpgradeII table:first-child, UpgradeIII table:first-child {
display: inline;
}
UpgradeI:hover table, UpgradeII:hover table, UpgradeIII:hover table {
display: inline;
}
By the way: Your markup is painfully.
This works on Firefox 4.0 (and probably Firefox 3.0, Chrome, Safari, etc; though I did not test on them). This definitely won't work on IE6, because IE6 does not support :hover on arbitrary element, :nth-child() selector, and the sibling selector (~):
div.UpgradeI table:first-child ~ *:nth-child(n+3), div.UpgradeII table:first-child ~ *:nth-child(n+3), div.UpgradeIII table:first-child ~ *:nth-child(n+3) {
display: none;
}
div.UpgradeI table:first-child:hover ~ *, div.UpgradeII table:first-child:hover ~ *, div.UpgradeIII table:first-child:hover ~ * {
display: block;
}
When I click on a link, most browsers draw a dotted box around it. It's easiest to see if the link is opened in a new window, since the original page sticks around.
Can this be stopped?
Put this in your CSS
-moz-outline: none;
outline: none;
Here's a more detailed breakdown and a related question
http://css-tricks.com/removing-the-dotted-outline/
better use:
a:active {
outline: none;
}
or
a {
outline: none;
}
it's more specific. otherwise you might suppress too many things at once. and if you care for accessibility make sure to give the users who can't use a mouse some other way of knowing which link is active or focused.
One option is to use the javascript blur function on the link after it's been clicked. The blur function removes focus off the link so it won't be drawn with that dotted box around it.
If you're using jQuery, then you could implement such a solution like this:
$(function() {
$('a').click(function() {
$(this).blur();
});
});