I know that transitions for the display property don't work, but I was wondering if there is a work around for this. I tried the visibility property but it doesn't seem to suit the task I am trying to achieve, or maybe I did it wrong. As you can see, I am displaying different text when you hover over the anchor tag by setting the span to display: none;. Animating the opacity won't be a good solution because the element being animated will still occupy the space it held. Is there maybe a workaround in Javascript or jQuery? Here is the code. I left out the transition property and its prefixes for brevity. The animation I want is for it to switch slowly between the two, i.e. One fades out, the other fades in. There doesn't have to be an overlap, but it doesn't matter if there is.
HTML
<div class="navbar">
<ul>
<li><a id="menu1" href="index.html"><i class="fa fa-home"></i><span> Home</span><span class="show"> Welcome Home</span></a></li>
</ul>
</div>
CSS
.show, a:hover span {
display: none;
}
a:hover .show {
display: inline;
}
You could try using jquery slide transitions when you hover over the anchor element. Check out http://api.jquery.com/slideToggle/
An example is
$("#menu1").hover(function () { $("#menu1 span").slideToggle("slow"); }, function(){ $("#menu1 span").slideToggle("slow"); });
You can try that on hover the object floats and animate the opacity. Making it float wont make him occupy the space.
Cheers J
Related
I have a list of items that on hover show a few options below each item in a div. I would like to show these options only when the user hovers on the list item and when they move away reclaim the space that the div occupies. Hence I've used display: none; on the div and on hover set it to display: block;.
A demo of this is here
This works as intended but the transition is way too fast and gives a sort of jarring effect. Is there a nicer way to fade in and out this div (preferably with CSS only)? Or do I need to resort to using JavaScript for this? (I've developed the app without jQuery so far and would prefer not having to include it only for this).
Also the height of the list items vary so using an opacity transition from 0 to some height is not a viable option.
One can not transition on display property and property with auto value.
This can be achieved by using max-height property.
Instead of display: none, use max-height: 0 and instead of display: block, use max-height: <some value which you expect to be maximum>.
Please note the caveat, the transition speed depends on the value of the max-height.
For example, if the computed height of container1 is 200px and of container2 is 400px; setting the max-height to 500px from 0 will exhibit different transition speed for both the container for the same timer function.
Hope this helps, Working code here
HTML:
<div class="item">
Item 1.....more text here
<div class="actions">
Opt 1 Opt 2
</div>
</div>
<div class="item">
Item 2
<div class="actions">
Opt 1 Opt 2
</div>
</div>
CSS:
.actions{display:none;}
.item{margin:30px;}
jQuery:
$(document).on({
mouseenter: function () {
$(this).children('.actions').stop().fadeIn('fast');
},
mouseleave: function () {
$(this).children('.actions').stop().fadeOut('fast');
}
}, '.item');
I need such a scenario at where if anyone hover on a div, another div will be hovered. Just like:
HTML
<div class="box"></div>
<div class="link-box">
Touch the Grey Box and I get hovered!
</div>
CSS:
.link-box a:hover {
color: red;
}
Foddle Work
If anyone hover on the div.box, div.link-box will get hovered I mean get the red color. Is it possible? Please, don't tell it like this CSS way:
.box:hover .link-box a {
color: red;
}
My scenario is not like this. I've more complex scenario. So, it's only possible with jQuery. As I ain't good at jQuery, I can't write the script. That's why I need your help. What's the jQuery for it? May be, something like this?
$('.box').hover(function(){
$('.link-box').hover();
});
..............................................Update..................................
All the answer is related with CSS. Basically, div.link-box is such a complex div at my webpage that if anyone hover on the div.link-box many action happened, like pop-up box coming, multiple child elements of div.link-boxwill change. All happened with jQuery + CSS. And I need all the hover action of div.link-box when anyone hover on div.box. I just make here div.link-box as a link to make you understand my problem. But, basically it's not just css change. So, is it possible to bring all div.link-box hover action by hover on another div/button/link just like div.box by jQuery ?
As long as they stay in the same layout you can use the adjacent selector (+) in css.
Updated Fiddle
.link-box a:hover, .box:hover + .link-box a{
color: red;
}
The important thing to remember about the adject selector is that the two divs have to have the same parent, and the box has to immediately precede the second div.
More information on the adjacent selector
Edit:
Another option would be to wrap both divs in another div, and use the hover of the wrapper div.
This second option doesn't have the drawbacks of using the adjacent selector. As long as the anchor is anywhere inside of the wrapper, it will be styled when any part of the wrapper is hovered.
FIDDLE
Like so:
<div class='box-wrapper'>
<div class="box"></div>
<div class="link-box"> Touch the Grey Box and I get hovered!
</div>
</div>
with the following style:
.box-wrapper:hover a {
color: red;
}
Create a CSS class called "hover" (to affect you a make it .hover a)
.hover a
{
color: red;
}
Then your JQuery would read:
$('.box').hover(function(){
$(".link-box").toggleClass("hover");
});
Instead of the :hover css selector, I would use classes.
CSS:
.hover{
color:red;
}
JS:
$('.box').hover(
function(){
$('.link-box').addClass('.hover');
},
function(){
$('.link-box').removeClass('hover');
}
);
I'm not really sure where to start on this, but I have a menu done in jquery. When you hover over right now, it does some fade in/out effects to the text, and links are manually handeled.
I wanted to add a simple line, maybe done in css? to go under each li a item when you are hovering as well, sliding to the li you hover over, not just appearing.
I just have no idea where to start with something like that, as I've never really done it before without an image (preferrably). It would of coarse need to start somewhere and move alone the ul and stop wherever it is when you leave the div with your mouse, and I'd like to keep it on when you click a link. I'm not asking anyone to make this for me though (unless you feel like it), just to get pointed on the right direction. I've seen some free codes with menus that do this, and attempted to use them, or model off them, but it woulnd't work with my menu.
Fiddle
I did this a while ago, maybe it is what you need. It will calculate the width of the anchor element you are hovering and grow an underliner element (a div) to both its width and position
//underliner
$('#menu a').hover(function(){
var position = $(this).position(); var width = $(this).width();
$('#underliner', '#menu').animate({width: width,left: position.left}, 200 );
});
$('#menu').hover(function(){
$('#underliner', '#menu').animate({opacity: 1}, 200).show();
}, function () {
$('#underliner', '#menu').animate({opacity: 0}, 200).hide();
});
CSS for the underline-element (change height and bg color as you seem fit)
#underliner {
display: none;
position: relative;
height: 5px;
line-height: 5px;
font-size: 1px;
background-color: #44c8f5;
width: 1px;
opacity: 0;
filter: alpha(opacity=0);
}
HTML
<div id="menu">
<ul>
list items with <a href>'s
</ul>
<div id="underliner"></div>
</div>
edit: I tried merging it with your code, but as you did not include the html, I had to guess how your 'navibar' was laid out. Anyway, try this fiddle: http://jsfiddle.net/c_kick/DuWcz/
I have a row of evenly-spaced navigation items, which looks like this:
The currently selected menu item is bold-italic. The designer wants the others to turn bold-italic on hover. When this happens, it makes the text of that item wider, which nudges all the other items over because they are displayed inline with a fixed margin. I have to get rid of the nudging.
What's the right way to fix this behavior? I have a couple ideas using javascript:
Onload, wrap the text up in divs and set the width of each div to the width of the text.
Onload, take the positions of each of the menu items relative to the div, then set their positions to absolute with the resulting coordinates (this would be okay because they are always in the same absolute position within the nav div).
These both seem a little hackish, and it's a pretty simple problem so I thought there must be an easier way.
I'm using jQuery if it makes a difference.
The following is a fairly minimal HTML page that will reproduce the issue:
<head>
<style type="text/css">
body {
background: black;
font-family: sans-serif;
}
a {
margin: 0px 20px;
font-size: 16px;
color: white;
text-decoration: none;
}
a:hover {
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<a id="projectslink" href="#projects">Projects</a>
<a id="innovationslink" href="#innovations">Innovations</a>
<a id="newslink" href="#news">News</a>
<a id="aboutlink" href="#about">About</a>
<a id="contactlink" href="#contact">Contact</a>
<a id="breathlink" href="#">Breath*</a>
</body>
I don't think there is an elegant solution to this time-old CSS problem... I can think of two "hackish" CSS solutions to choose from:
Give the items display: block-inline and a fixed width (in em, of course, to prevent font scaling / zoom problems). Width will differ from item to item if the padding should look consistent.
Hide the text and replace replace it with images.
In my opinion, your first solution (setting fixed width onload) isn't that bad. It "feels right" not to mess with position and is, at the very least, much less hackish than the alternatives.
To clarify, this is how I would implement your first solution:
HTML: no change
CSS: no change
JavaScript:
$(function() {
$('a').each(function() {
var menuItem = $(this);
menuItem.css({
'display': 'inline-block',
'width': menuItem.outerWidth(true),
'margin': 0,
'text-align': 'center'
});
});
});
As you can see:
There is no need to wrap the menu items in a div (just set display: block-inline from JS);
Each separate item can be kept centered by setting the width to the computed outerWidth() (which includes margin, padding and border width), clearing the margin and setting text-align to center.
Live example on JSFiddle.
Here's my solution:
http://jsfiddle.net/pRhKF/10/
Obviously you would have to adapt that to make it fit in to your own code. It makes all the as have the width they will have when the text is made bold by momentarily bolding them and then un-bolding them. Unfortunately I also had to use the hover event binder to achieve the mouse over effect, but maybe you can find a way around doing that...
Personally I like to give my nav some list markup, then give the anchor elements block display with a width:
http://jsfiddle.net/9AEnv/
I float the li, but you can also give them a display: inline-block if you want to avoid floats.
For posterity, this is the solution I ended up with: http://jsfiddle.net/jmcdon10/UdJZ5/
Mostly based on #Max's answer (which itself was a reworking of my first proposed solution), but using css hover instead of jQuery's hover event binder.
I've got a little HTML/CSS/JQuery drop down menu working. My pseudo code for it is:
function closeMenus() {
$('.subMenu').css('display', 'none');
}
#mainMenu ul li .subMenu {
display: none;
position: absolute;
}
#mainMenu ul li:hover .subMenu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainMenu">
<ul>
<li>
Menu Header
<div class="subMenu" onClick="closeMenus();">Menu Content</div>
</li>
</ul>
</div>
The CSS works so when someone hovers over Menu Header, the subMenu appears below it and disappears when the mouse leaves the menu. My problem comes when a user clicks an item in the menu; I'd like to hide the menu. The JavaScript hides the menu fine but when the user mouses over the menu header again, it doesn't reappear. It appears that CSS won't override the JavaScript display property. Most, if not all, of the links won't be going to other pages, just calling more JavaScript.
Anyone have any ideas how to hide the sub menu on click so that it will be again visible, or do I need more Javascript to show the menu every time someone hovers?
Use JQuery more fully -- look into the .toggle() command and bind it via click:
$('.subMenu').click(function() {$(this).toggle();});
Then you can eliminate most of your other code.
You're trying to do half of it with CSS and half of it with jQuery. Just do it all with jQuery: http://jsfiddle.net/hw5qr/
$('.subMenu').click(function() {
$(this).hide();
});
$('#mainMenu').hover(function() {
$(this).find('.subMenu').show();
}, function() {
$(this).find('.subMenu').hide();
});
Stryle attribute has highest priority.
$('.ftpBrowseSubMenu').css('display','none');
make
<div style="display:none">
, so rule
#mainMenu ul li:hover
has lower priority against style attribute. So, you have to do everything with javascript.
Like you already said are element styles stronger than css styles (unless you use !important). So you have to to do everything with Javascript what shouldn't be to hard. You have just to register two more event listener: onmouseover and onmouseout. With them you can set the display property to the correct value and it will work this way.