:active and :hover both active at the same time, padding stacks - javascript

I've got an issue with one of my designs at the moment, i'm creating a hover button using the :hover CSS element and then ensuring that it stays the same using the :active element.
However, both the :hover and :active have padding specified in their respective CSS rules which creates an issue when you click on the button whilst still hovering over it - the padding stacks and the button is completely misplaced.
What can I do to avoid this?

Is this what you mean (click the div to see hover/active).
HTML:
<div class="a">Some content</div>
CSS:
.a{
display:block;
padding:5px;
}
.a:hover{
padding:5px;
background:red;
}
.a:active{
padding:5px;
background:blue;
}
Example: http://jsfiddle.net/justincook/JsWCF/

Related

Expand hover area while keeping background color

I have a div that I want to expand the "hover area" of. (If your mouse is just outside of the element, the css :hover selector should still be in effect.)
I tried creating a transparent border: (border:10px solid transparent;) Unfortunately, my div has a background color, and the background "leaked" into the border area. (See fiddle for demonstration of the issue.)
I also tried using outline instead of border, but the outline doesn't seem to "count" as a part of the element when it comes to hovering. (It looks right, but won't detect the extra hover area.)
Is there any way to do this with plain CSS (preferably not many extra elements)? If not, is there a simple method using vanilla JS (no jQuery)?
$("#toggle").click(function(){
$("#attempt").toggleClass("border");
});
#attempt {
width:100px;
height:200px;
background:#aaa;
margin:50px;
}
#attempt.border {
margin:20px; /* Change margin to keep box in same place after border adds size */
border:30px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="attempt"></div>
<button id="toggle">Toggle Border</button>
<p>Border (in the ideal case) would not change the element's background. However, adding the 30px border (even when transparent), will cause the background to change size.</p>
All you need to prevent the background to leak is the box-sizing property. It's a very important one. Just add it to #attempt:
#attempt {
box-sizing: border-box;
}
Check out the updated fiddle here. You can learn more about box-sizing here.

loading indicator autocomplete

I have implemented an autocomplete functionality for a textbox in my web application.
The issue here is that my textbox is having width 100px. The loading indicator is a background css added to the textbox when user starts typing into it.
I want the loading indicator to be at the extreme right side of the page.
But since the indicated is appended to the text box(width = 100px), the loading indicator stays within it.
Please let me know how to place the loading indicator to the extreme right.
Demo Jsfiddle
One option is to wrap the elements in a wrapper div then use the :after pseudo selector to add in your loading indicator (simply the text image in the demo, replace this with '' and use a background-image along with height and width). The two examples show justifying within the input to the right, or all the way across the page to the right.
HTML
<div class='wrapper'><input type='text' /></div>
<br>
<div class='wrapper'><input type='text' /></div>
CSS
html, body{
position:relative;
width:100%;
padding:0;
margin:0;
}
input{
width:100px;
}
.wrapper{
display:inline-block;
}
.wrapper:first-child{
position:relative;
}
.wrapper:after{
position:absolute;
content:'Image';
right:0;
}

Making drop-down navigation menus not affect other element positioning

was wondering if there was a better way to handle what I'm trying to do. I've made a basic drop-down navigation menu where the menu bars are li and class elements with a set height with the overflow property set to hidden, which then animate in height to reveal the 'drop down' portion of the animation when hovered over with the mouse. I found however that other web page elements (like main content) would then be pushed around and re-positioned when the menu elements collided with them. I stop-gap fixed this by making the affected elements absolute positioning, but I can't help but feel there's a better, more effective way of fixing this.
Is there any way to make it so the navigation elements for lack of better word get 'ignored' positioning-wise?
Here it is in practice - the first 'article' area has been made to be absolute positioned - http://gamearticlesite.bbdesigns.ca/index.html
the code:
Jquery
//When mouse rolls over
$("li.extend").mouseover(function(){
$(this).stop().animate({height:'250px'},{queue:false, duration:500})
});
//When mouse is removed
$("li.extend").mouseout(function(){
$(this).stop().animate({height:'35px'},{queue:false, duration:500})
});
CSS:
#headerNav ul{
list-style-type: none;
color:#efefef;
margin:0;
margin-left:75px;
padding:0;
}
#headerNav ul li{
width:125px;
height:35px;
float:left;
color:#efefef;
text-align:center;
margin-left:10px;
margin-right:10px;
overflow:hidden;
}
The correct answer was that yes, Absolute Positioning is the way to solve this, but to use it on the navigation menu. In the example posted, on the ul element, not the individual li elements that would animate as that could cause issues with positioning of the li elements within the ul element.
Setting the position to position:absolute for the ul and giving a z-index property to make sure it's 'on top' of the elements it clashes with made everything work out just fine.
Use
float:left
or
position:absolute

CSS to Expand, Hide Content on Hover

Container div contains floated left boxes (equally sized) so it looks like grid. One box has a visible content and hidden one. I want to mouse over and see the hidden content expanded so it stays on top of any other box.
I almost got it working except for the last part - hidden content does not stay on top even with z-index applied.
Here is the sample: http://jsfiddle.net/ZQ63X/
you need the css to be like this;
.item .item-1, .item .item-2{
position:absolute;
background-color:white;
}
.item .item-2{
display:none;
}
.item:hover .item-2{display:block;}
hope I helped
/edit -> this way you dont even need javascript..
Change the styles for .item .item-2 as below.
.item .item-2{
display:none;
position:absolute;
top:0px;
}
Demo
I added background color and z-index for the hidden elements when revealed... Is this what you mean?
http://jsfiddle.net/kmacey1249/ZQ63X/3/

Dynamic jQuery Tooltip

I have a pretty specific request. I have been looking through some other posts, but can't find a definitive answer on this, so help is appreciated.
I'm looking to get a jQuery tooltip that when hovered is a normal tooltip with the text centered. However, when you click the element, the tooltip widens to the left (the text would remain centered so it'd be appear to be moving left as the tooltips center moved left) and a dropdown menu slides out beneath the tooltip. I am still on the fence on whether or not the widening is going to be necessary, but I want the ability to have the dropdown on click.
Any and all help with this would be greatly appreciated. Thanks!
EDIT*** I have written some code that I can't really get to work. Right now I'm just trying to work it out with divs, hoping I can replace the "toolTip" div with a tooltip shape instead of just a box, but I want to get things working before I worry about that. Any help on the following code is appreciated. Thanks!
I apologize in advance for the lack of some indentation and stuff, I don't know why my code doesn't ever copy/paste well into here.
HTML:
<div id="wrapper">
<div class="topIconNew">
</div>
<div class="topTip">
</div>
<div class="topDrop">
</div>
</div>
CSS:
div#wrapper {
margin:0 auto;
width:100%;
height:100%;
position:relative;
top:0;
left:0;
}
.topIconNew {
background-color:red;
border:solid 1px #444444;
width:20px;
height:20px;
position:fixed;
top:50px;
left:450px;
cursor:pointer
}
.topTip {
background-color:#d3d3d3;
border:solid 1px #444444;
width:80px;
height:20px;
position:fixed;
top:70px;
left:450px;
}
.topDrop {
background-color:#ffffff;
border:solid 1px #555555;
width:100px;
height:300px;
position:fixed;
top:90px;
left:450px;
}
jQuery
$(document).ready(function() {
// tooltip hover
$("div.topIconNew").hover(
function(){
$("div.topTip").show();
}
);
//tooltip widening and dropdown menu
$("div.topIconNew").click(
function(){
//permanent tooltip
$("div.topTip").show();
},
function(){
//widen tooltip
$("div.topTip").animate({width:200},"fast");
},
function() {
//show dropdown
$("div.topDrop").slideDown(300);
}
);
$("div.wrapper").click(
function(){
//hide dropdown (hide simultaneously)
$("div.topDrop").hide();
}
function(){
//hide tooltip (hide simultaneously)
$("div.topTip").hide();
{
);
});
Any and all help is greatly appreciated. Thanks!
Assuming from scratch I'd first build
A dropdown menu class that can be absolutely positioned
A tooltip class that can be absolutely positioned
It would be important for these classes to be self contained e.g. the dropdown should handle all bind events etc... First I'd hook up a hover element over whatever triggers the tooltip then position the tooltip and set the text. I'd then attach an onClick event to the same item and inside that I'd:
Flag the tooltip as "hover out no longer destroys it" (probably use an external click on the document instead)
Run an animate on the tooltip object that both sets the x position to x-200 (for instance) and also sets the width to with+200 (.animate({x: '-=200', width: '+=200'}))
I'd attach an event listener on animate so at the end of the animation I then attach the dropdown relative to the tooltip
If you code them separately it should be easy to tie them all together. You really just have to focus on the main evens in such a system:
Mouseover on item for tooltip
Mouseout on item for tooltip
Click on item to fly out tooltip and flag for permanence
Attaching the dropdown
Responding to dropdown events

Categories

Resources