onmouseover issue - javascript

I have a a link that calls a onmouseover javascript function that makes a div below it visible. Now this all works.
Now the problem is I have a a href link and when I mouse over the top part of it, it works perfectly but when I move my mouse overtop of the "now visible" div it blinks because html seems to think it is not off the div and then on it again so it keeps turning it off and on.
How could I stop this from happening? (html below, javascript is a simple function to make it visible, no point in posting, it works)
<a style="text-decoration:none;display:block;" onmouseout="ShowStock(1,0);" onmouseover="ShowStock(1,1);" href="">50</a>
<div id="stock1" style="visibility: hidden;">
<a style=" background-color:#009933; text-align:center;" name="1">1</a>
</div>
VIDEO OF IT HAPPENING: http://screencast.com/t/qjxHN4wyIc

The problem demonstrated in your video is that the stock1 div is stealing focus, which is then firing the onmouseout, closing the stock1 div, which then fires the onmouseover of the A tag, shows the stock1 div, which then steals focus, fires onmouseout of the A tag, etc...
The easiest thing to do is apply the same ShowStock onmouseout/onmouseover to the stock1 div as well, so that it "shows" itself while moused over, but hides itself when not moused over, except when you mouse over an area within the A tag that shows it.
For instance, this works perfectly (on jsfiddle.net, which also demonstrates a separate version with the error demonstrated in video):
a.hover {
background-color: #ccc;
width: 200px;
height: 200px;
position: absolute;
top: 15px;
left: 15px;
}
#show1 {
display: none;
width: 200px;
height: 200px;
position: absolute;
top: 75px;
left: 75px;
background-color: #daa;
}
function showTarget(target, state) {
switch (state) {
case 1:
state = 'block';
break;
default:
state = 'none';
}
target = 'show'+target;
document.getElementById(target).style.display = state;
}
<a class="hover" onmouseover="showTarget(1,1)" onmouseout="showTarget(1,0)">Test</a>
<div id="show1" onmouseover="showTarget(1,1)" onmouseout="showTarget(1,0)">Test Show</div>

Try to put the onmouseout event on the stock outsider element just the same way it is on the element "a" that has the onmousein event, and remove the onmouseout event of the original element.
This way it will just close when you get the mouse out of the stock element that has just appeared.

Related

How to MouseOver behind an object?

I'm trying to mouseover an image which is behind an another image.
Is there any way to render the front image like it is not there, so I can mouseover the other image behind it?
Example can be seen here:
I can't mouseover the characters which are behind the logo boundingbox.
You can set the CSS property pointer-events: none on the obstructing object... but be aware that pointer events are all or nothing; mouseovers and hovers will pass right through, but so will clicks.
Here is a description of the value, from the Mozilla Developer's Network:
none: The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
I've put together a little example. In this example, I'm using onmouseover and onmouseout, since that's what you use on your website, but you could just as easily use the CSS :hover pseudo-selector. Here's a jsfiddle version of the example, and the stack snippet is below.
.hoverable {
width: 100px;
height: 100px;
background-color: blue;
}
.obscuring {
/* this first line is the important part */
pointer-events: none;
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
opacity: 0.5;
}
<div class="hoverable" onmouseover="this.style.backgroundColor = 'green'" onmouseout="this.style.backgroundColor = 'blue'"> </div>
<div class="obscuring"> </div>
You can create some invisible divs on top of the whole thing and put the hover behaviour on them. Then control the characters position with the position of the invisible divs.
Hope it makes sense.

Animating the "body" tag in jQuery does nothing

So one of the buttons on my site's nav bar brings down a small grey tab from the top which tells you about the site. Here is the code I'm using for the animations:
var aboutMenu = function(){
$(".aboutButton").click(function(){
$("body").animate({top: "42px"}, 200);
$(".about").animate({top: "0px"}, 200);
});
}
$(document).ready(aboutMenu);
The idea is that the body of my website, along with all its content, moves down 42 pixels. This is whilst the content in the "about" class moves down so that it's visible on the screen. If you do click on the "About" button, all that happens is the grey tab moves down, but the body stays where it is. This would not usually be a problem, except the tab obscures the rest of the nav bar.
Here is some more relevant code (if needed):
HTML:
<div class = "about">
<p align = "center">placeholder text</p>
</div>
and the actual link:
<li> <a class = "aboutButton">About this website</a></li>
CSS:
.about{
background-color: gray;
top: -42px;
height: 42px;
position: fixed;
}
.about p{
color: white;
}
.aboutButton{
cursor: pointer;
}
As mentioned in my comment, to be able to animate top (or other positions for that matter), you need to set a position: ... (e.g. position: relative;.
You could try using a different way to call your function, e.g. add this attribute to your link: `onClick(aboutMenu())
Also try putting an allcontent div around everything and animating that, body tags aren't that good for animations

Font-Awesome icon preventing click in parent button

I'm having a problem where the left two pixels of a Font-Awesome icon I've placed inside of a button element do not trigger the click event of the button.
Here's an example button:
<button class="btn btn-mini">
<i class="icon-edit"></i>
</button>
And here's what it looks like with bootstrap
Any ideas for why those left two pixels don't trigger a click event?
Edit: Here's a test site where I've managed to recreate the issue: http://ace.cwserve.com
I know this post is 4 years old but it might help people understand why a font-awesome "icon" inside a button prevents the click event.
When rendered, the icon class adds a ::before pseudo-element to the icon tag that prevents the button's click event.
Given this situation, we should definitly take a look at the CSS pointer-events Property
The pointer-events property defines whether or not an element reacts
to pointer events.
So we just need to add this css declaration for the "icon" which is inside a button:
button > i {
pointer-events: none;
}
Outline
The outline isn't part of the CSS box, which means it won't fire click events. This is perhaps slightly counter-intuitive, but that's how it works ...
Your page sets an outline on .btn:focus, but this doesn't seem to be the problem, since it has an offset of -2 (meaning it's displayed inside the box, rather than outside of it).
Moving the box on :active
You can move the box on :active, which can cause neat effect, but first the box is moved, and then will the click event be fired, which will use the moved position.
You can see this in action by keeping the mouse button pressed; the box will move, but the event won't be fired until you release the button. So if you move your box to the right by then pixels, then the left 10 pixels won't do anything.
This is according to spec, from the DOM spec:
click
The click event occurs when the pointing device button is clicked over an element. A click is defined as a mousedown and mouseup
over the same screen location. The sequence of these events is:
mousedown
mouseup
click
This seems to be the problem, this following CSS seems to solve it:
button.btn:active {
left: 1px;
top: 1px;
}
Example
Here's a script to demonstrate both issues:
<!DOCTYPE html>
<html><head><style>
body { margin-left: 30px; }
div {
background-color: red;
border: 20px solid green;
outline: 20px solid blue;
width: 100px;
height: 100px;
position: relative;
}
div:active {
left: 20px;
top: 20px;
}
</style></head> <body>
<div></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('div').on('click', function(e) {
alert('click!');
});
</script></body></html>

Centering text over an IMAGE BUTTON, while driving the text hover effect from hovering over the image- not the text

I have a set of buttons in which I need the text to - eventually - change based on country.
This means that I have to use a text element to be part of the button. Since the button has hover effect, I need the text to be contained inside the image div.
By using the "", I get the text to be position correctly, but the problems are:
A: the text responds to the pointer way outside the image boundary (which actually causing the click to activate a different button.
B: if the pointer is placed directly over the text, only the text get highlighted (through the hover effect), but not the button.
I am looking for a solution (either via CSS or JavaScript) that will make the button perform correctly e.g. the button will respond pointer hover over to the image only, but will still highlight the text (as if the text was part of the - and not separate as it actually is).
Note that since the text and image elements are screen-size adaptive, all distances and sizes must be percentage based)
See Fiddle HERE:
Note what happens when you hover just on top of the image. Also note what happens when you touch the edges of the image VS the center...
<div id="main_positioning_container">
<div id="my_account_dashboard_container">
<div id="contact_information_icon"
style="color:#292726"
onMouseOver="this.style.color = '#f48325'"
onMouseOut="this,style.color = '#292726'" >
<img src="../icons/icon_ContactInforrmation_inactive.png"
img onMouseOver="this.src='../icons/icon_ContactInforrmation_hover.png'"
onMouseOut="this.src='../icons/icon_ContactInforrmation_inactive.png'"
alt="icon_ContactInforrmation_inactive"
width="100%"
hight="auto"
style="margin-bottom: -20%;">
<p align="center">Contact Information</p>
</div>
</div>
</div>
#main_positioning_container {
position:relative;
width: 100%;
top: 75px;
left: 0px;
}
#my_account_dashboard_container {
visibility:visible;
}
#contact_information_icon {
position: absolute;
width: 25%;
z-index: 3;
color: #292726;
font: Kalinga;
font-size: 100%;
margin-top: 13.75%;
margin-left: 7.5%;
height: 20px;
}

jQuery fadeIn making page scroll to top / jump

jQuery is destroying me this week. I'm using fadeIn via jQuery on my portfolio site (http://www.codeisdna.com) to open up a section once it's clicked. Here's the HTML code I'm using:
<div class="project first project_name">
<div class="title">
Project Title!
<div class="date">2012</div>
</div>
<a class="expand" title="Click to expand the project." href="#project_1">Project Title!</a>
</div>
Which opens up a tab:
<div id="project_1" class="project_full pname"></div>
Using this js:
$(document).ready(function(){
$(".project").click(function() {
$("a.expand").removeClass("hovered");
$(this).find("a.expand").addClass("hovered");
$(".project_full").hide();
var selected_tab = $(this).find("a").attr("href");
$(selected_tab).fadeIn();
return false;
});
});
EDIT: Here is the CSS code for .project_full (the expanded tab -- the CSS code for .project is irrelevant):
.project_full {
display: none;
margin-top: 20px;
width: 100%;
max-height: 450px;
padding: 20px 0px;
text-align: center;
background: url(../img/code.jpg) top center no-repeat fixed #293134;
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
color: #fff;
overflow: hidden;}
.project_full .wrapper {position: relative;}
I've tried assigning a fixed height to a parent div, e.PreventDefault() doesn't work (I'm using anchor based tabs, so nothing of that sort will work), and so on. The page jumps on the first click and with each successive click. I know it jumps due to the missing content once the div is unhidden and "rehidden."
I'm wondering if HTML5 data attributes would remedy this? But then again, why would it as the anchor would still exist, albeit it being blank (#).
Hopefully someone with a lot more JS experience can help me!
Either change your handler adding preventDefault
$(".project").click(function(e) {
e.preventDefault();
$("a.expand").removeClass("hovered");
$(this).find("a.expand").addClass("hovered");
$(".project_full").hide();
var selected_tab = $(this).find("a").attr("href");
$(selected_tab).fadeIn();
return false;
});
Or change your a tag href attribute to be something like 'javascript:'
Or replace a tag with say span and let your click handler remain unchanged.
Or add name attribute to a tag (<a name='project_1'></a>) in right place as it is scrolling to this tag or beginning of the page as there is no ancor with corresponding name

Categories

Resources