I'm trying to use this method to get a div to fadeIn when a user mouses over a text field that tells them what sort of information goes into the field. I've got the <div> to follow the cursor while in the text field if the user moves the mouse up or left, but when I move the mouse down or right the <div> disappears during the motion to reappear when the mouse stops. Here is a JSFiddle showing my relevant code and the odd behavior it's yeilding.
$(document).ready(function() {
$(document).bind("mousemove", function(e) {
$(".hover").css({
"left" : e.pageX,
"top" : e.pageY
});
});
$(".num").hover(function() {
$(".hover").stop().html("Enter a number").delay(500).fadeIn(150);
}, function() {
$(".hover").stop().hide();
});
});
.hover {
display: none;
position: absolute;
float: left;
font-family: Calibri, sans-serif;
font-size: 0.7em;
background-color: rgb(255,255,230);
border: 1px solid black;
-webkit-box-shadow: 0 0 2px rgba(0,0,0,0.4);
box-shadow: 0 0 2px rgba(0,0,0,0.4);
padding: 1px 3px;
z-index: 50;
}
input {
margin: 30px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class='hover'></div>
<input type="text" class="num" size="2">
I have tried applying the same .hover() JQuery method to other elements in my web page to see if it's a problem with applying it to a text field, but the down/right vanishing behavior persisted.
In my full code, the hovering <div> is created dynamically when the user first mouse-overs an element which produces the effect, but I couldn't get that aspect to work is JSFiddle.
Since this effect seems easily-produced by others I'd like to know not only how to achieve the correct behavior but also understand why my attempt came out so wonky.
Basically if your mouse moves over the .hover overlay, it generates a hover "out" on the item underneath your mouse. Moving the mouse left/right causes the cursor to move on and off the overlaid div.
Add pointer-events: none; to your .hover style. This will stop it being visible to the mouse and avoid generating any events on the .hover:
http://jsfiddle.net/4ba70vy3/6/
.hover {
pointer-events: none;
display: none;
position: absolute;
float: left;
font-family: Calibri, sans-serif;
font-size: 0.7em;
background-color: rgb(255, 255, 230);
border: 1px solid black;
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
padding: 1px 3px;
z-index: 50;
}
Update: If the .hover was below the mouse, vertical movement would cause the same problem.
http://jsfiddle.net/4ba70vy3/7/
Also, as DevlshOne suggests, you might as well use the title= attribute on the controls and maybe just do yours for older browsers?
Just add a pointer-event:none to the .hover class
Working example: http://jsfiddle.net/4ba70vy3/
Related
I have a button with javascript attached. When you click the button a hidden box will appear, when you click another one, the first box gets replaced with the second and so on. When my button is active, when the box is visible, it gets a shadow around. And i don´t want that! I tried to use the following css codes:
.nav > button{
width: auto;
font-family: 'OpenSansBold';
color: #000;
padding: 3px;
border: none;
margin-right: 10px;
margin-top: 5px;
font-size: 15px;
text-align: left;
background-color: #fff;
}
button:hover{
cursor: pointer;
border: none;
color: #7b1a2c;
}
button:visited{
font-family: 'OpenSansBold';
box-shadow: none;
}
button:active{
box-shadow: none;
}
But with no luck. Is there another CSS code for buttons when its active?
I have no clue about javascript, just copy pasted this thing. Maybe this is something that can be fixed in the js code? Just in case, I can show you guys:
$('div.box').slice(1).addClass('hidden');
$('.nav').children('button').on('click', function(){
// console.log('klikk');
$(this).data('content');
$('.box').not('hidden').addClass('hidden');
$( $(this).data('content')).removeClass('hidden');
});
Maybe you talk about outline property or :focus pseudo-class?
Try this one:
button:active, button:focus {
box-shadow: none;
outline: 0;
}
To give you a working example, play around with the following snippet, I think this behaves like you would want it to.
To completely remove the shadow, just remove the second JS rule.
// :active rules
$('button').on('mousedown', function () {
$(this).css('box-shadow', 'none');
});
// :visited rules
$('button').on('mouseup', function () {
$(this).css('box-shadow', '10px 10px 5px #888888');
});
button {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 10px 10px 5px #888888;
}
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<body>
<button>test</button>
</body>
This jsfiddle..
https://jsfiddle.net/9e1wd245/12/
..demonstrates a browser behavior I'd like to understand better than I do.
If you remove the positioning from the crumbtray and the crumb, the hover- selected CSS is applied when the crumb is hovered and mouseover events are triggered when the mouse enters the crumb.
With the positioning in place, neither of those things happen; but if you hover over the top border, the hover CSS is applied and the mouseover event is triggered.
(In this situation, the approach used uses positioning to enable z-indexing so that the curved right border will appear over the left side of the adjacent elements.)
Note that you can take the negative right margin off the crumb, and the problem persists, so it isn't being caused by the negative margin.
I realize I could use an svg for a crumb, or maybe use a couple of separator elements over a shared background rather than using positioning and z-indexing, but why doesn't this work? Is there something in the spec that says hover and mouseover events aren't expected to work for positioned elements? Is there something else entirely that I'm overlooking?
html:
<div class="crumbtray">
<span class="crumb">USA</span>
<span class="crumb">California</span>
<span class="crumb">Sacremento</span>
</div>
css:
.crumbtray {
position: relative;
top: 0px;
left: 0px;
display: inline;
z-index: -10;
font-family: ariel, sansserif
font-size: 12px;
}
.crumb {
position: relative;
top: 0px;
left: 0px;
display: inline;
border: solid 1px gray;
border-left: none;
border-radius: 0px 10px 10px 0px;
padding: 0px 8px 0 12px;
margin-right: -10px;
cursor: pointer;
background: #c3f4c6;
background: -moz-linear-gradient(top, #c3f4c6 0%, #96f788 8%, #98e0a4 92%, #419330 96%, #188700 100%);
background: -webkit-linear-gradient(top, #c3f4c6 0%,#96f788 8%,#98e0a4 92%,#419330 96%,#188700 100%);
background: linear-gradient(to bottom, #c3f4c6 0%,#96f788 8%,#98e0a4 92%,#419330 96%,#188700 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3f4c6', endColorstr='#188700',GradientType=0 );
}
.crumb:hover {
background: none;
background-color: yellow;
}
.crumb:first-child {
border-left: solid 1px gray;
z-index: 60;
padding-left: 2px;
}
.crumb:nth-child(2) {
z-index: 50;
}
.crumb:nth-child(3){
z-index: 40;
}
JavaScript:
var ViewModel = {
init: function(){
console.log("ViewModel.init called");
$('.crumbtray').on('mouseover','span',function(){
console.log('mouseover crumb: ', this);
});
}
};
$(ViewModel.init);
Your problem is here:
z-index: -10;
This puts the element behind the background, which means although you can see it, the mouse can't "see" it because it is behind the (transparent) background, so it does not recieve mouseover events.
Now, it should still work, because the .crumbs have a positive z-index, above the background. It's likely that there is simply a bug, I do not believe this behaviour is documented anywhere.
It doesn't work, because you've set a negative z-index to parent element (Why did you do that?). Just remove it from there or change it to some positive value, like 1, for example.
When you set a negative z-index to element, it creates negative stacking context of all children element, so z-index width 40, 50, 60 just make sense inside it's parent, but main z-index will be negative (under body element).
So the main problem is negative z-index, you can cut it and search some information with 'negative z-index hover' keywords to clear the situation
.crumbtray {
position: relative;
top: 0px;
left: 0px;
display: inline;
z-index: -10;
font-family: ariel, sansserif
font-size: 12px;
}
I am adding a class to an image.
.bbbLink img {
outline: 1px solid #ddd;
border-top: 1px solid #fff;
padding: 10px;
background: #f0f0f0;
}
On hover I add this,
.bbbLink img:hover {
background-color: rgba(0, 0, 0, 0.1);
outline: 1px solid #ddd;
border-top: 1px solid #fff;
padding: 10px;
background: #f0f0f0;
}
For active I am doing this,
.bbbLink img:active {
outline: 1px solid #111 !important;
border-top: 1px solid #555 !important;
padding: 10px !important;
background: #333 !important;
}
Since I am adding the active class to an image and you cannot do this because it is a self closing element I am using jquery to handle adding the active state like this,
<script>
(function($) {
$('.bbbLink').click(function() {
$(this).toggleClass('active');
});
})( jQuery );
</script>
Everything works perfectly, even when checking the dom after clicking the element my active class appears.
<a id="wrapbbb" class="bbbLink active" href="img.jpg" target="_blank">
<img src="content/uploads/-2-018.jpg" alt="BBB">
</a>
The problem is that when I press the mouse down and click, active state shows and the styling takes effect but when I release the click the active state styling goes away...
The active class is still in the dom but the styling effects revert back to the class without the active state.
Why is this happening?
Er... You need to give CSS like this:
.bbbLink img.active {
When you have :active, it is a state, active / mousedown state, not a class. Hope this is not a typo.
I want some css code and javascript to my textbox and a button, For First time my button is hide
when my mouse goes to the text box it height should be increased and then i remove my mouse on another place that that increased size should be kept.
when my mouse goes to the textbox a button should be visible and then i remove my mouse on another place that button should be visible.
This is CSS file now i am using, but i want to make some changes for this if i want to get upper things.
#TextBox1 {
background: #FFFFFF;
color: #000000;
height: 30px;
width:510px;
padding: 6px 15px 6px 35px;
border-radius: 5px;
box-shadow: 0 1px 0 #ccc inset;
transition: 500ms all ease;
outline: 0;
}
#TextBox1:hover {
height: 100px;
}
Post button css
#Post {
background: rgb(66, 184, 221); /* this is a light blue */
border-radius: 20px;
}
how to change this css files as i want? I think I need a javascript file also to hide and visible post button
Put the textbox and the post button in one div and use the following CSS.
First HTML
<div class="textBoxWrapper" >
<textarea class="textbox_1" id="TextBox1" ></textarea>
<input type="button" id="post" value="Post me"></input>
</div>
Now the CSS
#TextBox1 {
background: #FFFFFF;
color: #000000;
height: 30px;
width:510px;
padding: 6px 15px 6px 35px;
border-radius: 5px;
box-shadow: 0 1px 0 #ccc inset;
transition: 500ms all ease;
outline: 0;
}
#TextBox1:hover {
height: 100px;
}
#Post {
background: rgb(66, 184, 221); /* this is a light blue */
border-radius: 20px;
display: none;
}
.textBoxWrapper:hover > #Post {
display: block;
}
Pure CSS-solution for question number 2.
For number 1 I would use JavaScript
.TextBox1Large {
height: 100px;
}
<asp:textbox ID="TextBox1" runat="server"></asp:textbox>
<script>
document.getElementById("<%=TextBox1.ClientID %>").addEventListener("mouseover", changeHeightOfTextBox, false);
function changeHeightOfTextBox() {
document.getElementById("<%=TextBox1.ClientID %>").className = "TextBox1Large";
//Delete the event, since it is needed only once.
document.getElementById("<%=TextBox1.ClientID %>").removeEventListener("mouseover", changeHeightOfTextBox, false);
}
</script>
I would say instead of using the css hover try adding a class to the textbox1 when you detect the focus event for the the textbox1 using jquery. Then at the same time use jQuery to make the button visible.
Example code below:
//CSS
#TextBox1Clicked{
Height: 100px;
}
//jQuery
$(document).on('focus', '#TextBox1', function(){
//Show the button
$('#yourButtonId').show();
//Add the css class to the text box to make it taller
$('#TextBox1').addClass('TextBox1Clicked');
});
Resources:
jQuery '.On':
http://api.jquery.com/on/
jQuery 'addClass':
http://api.jquery.com/addclass/
I have the basic idea of my JavaScript operational.
The point of my JavaScript is to make an image of id 'player' move to the position that I click with the mouse, only when I click on the div with the id of 'stage' with the animation lasting 3 seconds.
At the same time, when the animation is running the head should change to 'player is moving' as opposed to when it is still and displaying 'player is still'.
Right now, in Chrome (maybe its a bug with Chrome) the basic functionality of the JS works. However, it seems to overshoot the position of where I click the mouse on the first round and then barely move when I click again in the 'stage' div.
If anyone sees where I might be running into a problem please let me know!
Here's my EDITED JQuery:
$(document).ready(function(){
$('#stage').click(function(e){
$('#header h1').html('Player is moving!');
$('#player').animate({
top: e.pageY + 'px',
left: e.pageX + 'px'
}, 3000, function(){
$('#header h1').html('Player is standing still...');
});
});
});
I have fixed my CSS issue, so don't worry about that but the code is located below for the CSS in case anyone thinks the issue may lie within.
Thanks!
EDIT:
Here's the CSS. The issue has been solved but it has been provided for convenience if you think the issue of the image overshooting the image may lie within for any reason:
#header {
width: 600px;
margin: 20px auto 10px;
padding: 5px;
background-color: whiteSmoke;
border: 1px solid #aaa;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
box-shadow: 0 0 5px #ccc;
}
#header h1 {
text-align: center;
margin: 0;
}
#stage {
overflow: hidden;
width: 600px;
height: 400px;
margin: 0 auto;
padding: 5px;
background-color: whiteSmoke;
border: 1px solid #aaa;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 0 0 5px #ccc;
position: relative;
}
#player {
position: absolute;
width: 36px;
}
Poor man's example : jsfiddle but it works in FF and Chrome.
Also, I'm curious what styles you lose, simple color style is always applied.
So more information is needed, can you share the complete css?
Update: I'm still not seeing an issue in chrome (with the fiddle example)
Change #stage to something like
#stage {width:600px;height:600px;background-color:#333;position:fixed;top:20;left:0;}
Your player vs page is lying about it's position or where you can click. I wanted the stage to be a fixed item on the page, non-moving. I don't see any other reason (in your CSS or jQuery) why it'd overshoot.