I have a menu with a lava-lamp like underline that looks like this:
The underline slides between links when clicking on them. Try a jsfiddle HERE.
My only problem is that if you click outside the menu the underline reverts back to it's original state (18%). But I want the underline to stay on the last clicked link when you click outside the menu.
I've tried :visited but it doesn't do anything.
You can actually do this with pure css using The :target pseudo class.
Here is an updated working fiddle
Note: You'll need a modern browser to use this method. (IE9+)
Also, take a look at this article which shows some clever ways to simulate click events with css (one of them being the :target pseudo class.
You may be able to do this through CSS, I really don't know.
But why don't you just use these 3 lines of JS (jQuery) and replace the Style-definition by this:
$('.ph-line-nav').on('click', 'a', function() {
$('.ph-line-nav a').removeClass('active');
$(this).addClass('active');
});
nav a:nth-child(1).active ~ .effect {
left: 18%;
/* the middle of the first <a> */
}
nav a:nth-child(2).active ~ .effect {
left: 43.5%;
/* the middle of the second <a> */
}
Seen in this jsFiddle: Click me!
Related
I have a jQuery dialog on two different pages. For some reason the radio buttons look different (one page is pure HTML/Javascript and the other is created by some internal framework created by the customer I'm working for).
I'm trying to figure out what to look for in the css that causes the difference in radio button presentation.
The two scenarios look like this:
Wrong:
Right:
Can anyone help with some clues as to what to look for?
Maybe I should add that both pictures are from IE8.
Styling (EDIT: borders, colors, background of) a radio button itself is not possible in css. But you can hack a bit around with hidden radio buttons and overlaid images like described here
http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/
http://www.andreapinchi.it/how-to-style-radio-buttons-with-pure-css/
Essentially you hide your radio button and put a span right at its place that, when clicked, changes its styling:
html
<label><input type="radio"><span class="overlay"></span> radio button</label>
css
input[type=radio] {
opacity: 0;
z-index: 9999;
}
/* default radio button style: unchecked */
.overlay {
display: inline-block;
position: relative;
left: -1em; /* or whatever length you need here */
height: 1em;
width: 1em;
background-color: red;
}
/* changed style when checked */
input[type=radio]:checked + .overlay {
background-color: green;
}
Try it in this jsFiddle
Inspect both elements with Web Developer Tool. Press F12 in IE8 then click on the cursor icon top left (or press Ctrl+B). Click on the radio button to inspect it.
It is recommended use Google Chrome's WDT, 'cause it can tell you more (eg. related CSS file) plus easier and faster to use. You can right click on the radio button and click 'Inspect Element' to see more (DOM, CSS).
I found the culprit:
<meta name="MSThemeCompatible" content="no">
This bit is in one page and not the other. So either I have to remove it in one page or add it to the other to make them look alike.
Styling of radio buttons is very limited, especially in older browsers. I wrote a tutorial about how to customize checkboxes and radios with CSS only, as well as create on/off switches via styling the label and using it's :before and :after pseudoclasses. It has an IE8 fallback. Maybe this helps :) Read it here: http://blog.felixhagspiel.de/index.php/posts/custom-inputs
I am using MVC3.
I have a table and an Html.ActionLink inside of it.
I have already set the text decoration for none, but the link is still blue. I change the table:hover background-color and the color(of the text), and when I put the mouse over the row, the text that are not a link gets white, but the link still blue. If I change the a:hover, the link gets white just when I put the mouse over it, and not just over the row.
Is there a way to do that with css?
Typically, to cover all the anchors when you are hovering over the row.
#tableid tr:hover a {
/* Your Styles */
}
But this does not work on all IE browser so, use JS to catch the event and apply styles to anchors in it.
use the following css:
#yourTableId:hover a {
color: #FFF;
}
you can replace #yourTableId also with table and / or .yourTablesClass depending on where the css should be used ;)
this works also for child elements e.g.:
#yourTableId div:hover a
#yourTableId tr:hover a
so in general we can say you can use the following:
#yourTableId *:hover a
where * is a tagname, classname or id (dont forget class and id prefixes -> .classname and #idname)
here a jsfiddle example
I'm currently styling a webpage for user interaction based on tabbing through the page.
Is there a way to style an element one way if the user focuses that element by clicking the mouse, and another way if they tab to it?
I would like to have different styles because I want the elements that get tabbed to bolder than the ones they click on. Trying to make it easier to see where they are on the page.
I know how to accomplish this with javascript, just wondering if anyone has a CSS solution up their sleeve.
Many thanks!
I don't think you can, since the CSS code isn't aware of the way you focused an element, but just know that it has focus in that moment. I guess you have to use a javascript code to accomplish it.
You could use pseudo-classes like this:
a:hover { color: green; } /* hover */
a:active { color: blue; } /* click and hold */
a:focus { color: red; } /* tab to it */
I am adapting a website in order to make it feel native on the iPad.
This website has navigation that shows a drop-down with the sub-navigation on hover.
This works like a charm on the iPad. When you touch it the subnav, it opens and closes again when you click/touch somewhere else.
Now i have the requirement to make it close again when the navigation point is touched again.
I was thinking, i could just set the pointer-events:none on hover & active for the iPad, but this makes the sub-navigation flicker and it does not work...
i have also tried to cover the navigation point with element set with the before selector and setting its pointer events to none, but this does not work...
Any idea, how i could solve this problem using CSS only. (I can not modify the HTML nor the JS)
PS: you can reproduce this on www.macprime.ch for example... (click the main navigation on the top, and try to close the dropdown again)
edit ok i tried almost everything that was possible with CSS only. I don't think its possible. If anyone can tell me why, he/she will get the bounty reward.
You could have a second transparent element that appears above the one you tapped. That way, when the user taps again, they will be selecting the other element and the first will lose its hover status:
<div class="blocker" onclick="void()"></div>
<div class="menuItem" onclick="void()"></div>
<style>
.blocker, .menuItem {
/* use the same position, width, height, etc */
}
.menuItem {
/* make it look pretty */
z-index: 100;
}
.blocker {
z-index: 99;
}
.menuItem:hover {
z-index: 98;
}
</style>
Of course, this will have a negative effect on the desktop, so you will want to do something like:
<style>
.blocker { display: none; }
.touchevents .blocker { display: block; }
</style>
<script>
if('ontouchstart' in document)
document.body.className += ' touchevents';
</script>
UPDATE Added onclick events to make them clickable.
You can see a working demo here: http://fiddle.jshell.net/vfkqS/6/
Unfortunately, I could not find a solution that does not require HTML or JavaScript changes, but I was able to keep them to a minimum.
You would need to make two non-CSS changes total:
Add a JavaScript mechanism for identifying if touch events are supported. See two line example above.
Add one div per menu which is clickable (onclick="void()") and has a unique identifier that can link it to the menu.
You may be able to do those two things with CSS but I'm not sure. Tablet detection would be a little sketchy in CSS and I don't think you can make something that sophisticated with a :before or :after pseudo-selector.
This is an interesting question and similar to one I've had come up recently. How do you marry a standard navigation dropdown that displays on hover with a touch event interface. Using the hover event as a trigger works really well on a desktop. In a world without hover events (tablets and smart phones), not so much.
In my case I landed on the idea of defining the behaviors: click/touch event would do the triggering, hover event would do subtle indications. For more details on this line of thinking see: http://www.markdotto.com/2012/02/27/bootstrap-explained-dropdowns/
For the issue you're trying to overcome I'm wondering if using #media queries in your CSS is a better solution...
#media (max-width: 979px) {
/*
New CSS declarations to show the sub navigation lists
in a more compact way that fits nicely on the iPad.
Something like...
*/
section.nav-overlay {
display: block;
height: 60px;
visibility: visible;
width: 979px; /* Or the max container width */
}
section.nav-overlay ul li {
float: left;
}
/*
Etc. etc. with the additional exceptions.
You get the idea.
*/
}
By doing this you would create more of a native interface on the iPad. However, if going this route is off the table, something like what Brian has above is better. Just wanted to give you an alternative.
Set pointer-events: none on the active state:
nav#mainnavi > ul > li > a:active {
pointer-events: none
}
I'm having an annoying issue with IE that involves social media sharing buttons. When each list item is hovered I reveal the pink bar below the item using simple CSS:
li:hover .pinkBar{display:block;}
Unfortunately in IE when if then hover any of the share button iframes the hover seems to cancel and the pink bar in hidden again. Even though the share buttons are contained within the <li> being hovered. IE behaves as though I have hovered off the <li> when my mouse enters the iframe of one of the share buttons.
Does anyone have any ideas or solutions regarding this IE only issue?
UPDATE:
Problem fixed by using javascript to manually add and remove a class named 'hover' on mouseIn and mouseOut. I applied the same style this .hover class.
Problem fixed by using javascript to manually add and remove a class named 'hover' on mouseOver and mouseOut. I applied the same style to .hover class instead of :hover
JS:
var articleOver = function(){
$(this).addClass('hover');
}
var articleOut = function(){
$(this).removeClass('hover');
}
$('li').hover(articleOver, articleOut);
CSS:
li:hover .pinkBar{display:block;}//old method
li.hover .pinkBar{display:block;}//new method