When a user hovers over the ? glyphicon, I want to display a information card which follows the mouse around.
I achieved this with the below code, but then hovering over the icon, the div flickers constantly like a strobe light when using Chrome.
In IE it works fine, and in Firefox the div doesn't appear at all
Why?
HTML
<span class="glyphicon glyphicon-info-sign"></span>
<div id="machinesInfo" class="infoCard">
some cool text
</div>
JQuery
$(document).on('mousemove', function(e){
$('.infoCard').css({
left: e.pageX,
top: e.pageY
});
});
CSS
.infoCard {
display: none;
position: absolute;
}
.glyphicon-info-sign:hover + .infoCard {
display: block;
}
Adjusted my JS to
$(document).on('mousemove', function(e){
$('.infoCard').css({
left: e.pageX + 20,
top: e.pageY + 20
});
});
and it now works great
Related
I have a div that is supposed to follow the pointer, but it stays very far from the pointer right now, though it follows it.
I've tried some different codes, both written by me, suggested on here, or found online, but nothing helped.
Right now the one that works best is this..
var currentMousePos = { x: -1, y: -1 };
$(document).mousemove(function(event) {
currentMousePos.x = event.pageX;
currentMousePos.y = event.pageY;
$(".hidden-img").css('top', currentMousePos.y);
$(".hidden-img").css('left', currentMousePos.x);
});
I've also tried this http://jsfiddle.net/BfLAh/1/ but it doesn't work as in the fiddle
It follows the pointer but it's very far from the top left of the pointer.
I have managed to go with this code and make it work, at least the positioning
$(document).ready(function() {
$(".list-item").mousemove(function(e) {
var offset = $(".list-item").offset();
$("#hoverDisplay").animate({
left: e.pageX - offset.left,
top: e.pageY - offset.top
}, 1);
});
});
Now the only problem that stays is, I have 20+ "li" items that have to get hovered and show their own hidden div.
Here is the code of just 2 "li" elements.
<li class="list-item" style="background-color: #03C0A4;">
<div class="small-title" style="color:#E07354">nevaly</div>
<a href="a-project-called/nevaly/index.html" style="color:#E07354" class="project-title" onmouseenter=toggleHiddenDisplay("hoverDisplay") onmouseout=toggleHiddenDisplay("hoverDisplay")>Connecting brands and influencers - no limits.</a>
<div class="hidden-img" id="hoverDisplay" style="display:none;">
<img src='a-project-called/nevaly/thumb.gif'>
</div>
</li>
<li class="list-item" style="background-color: #f8e975;">
<div class="small-title" style="color:#e32e1d">Kulturhavn</div>
<a href="a-project-called/kulturhavn/index.html" style="color:#e32e1d" class="project-title" onmouseenter=toggleHiddenDisplay("hoverDisplay") onmouseout=toggleHiddenDisplay("hoverDisplay")>Ahoy! From the cultural harbour of Copenaghen.</a>
<div class="hidden-img" id="hoverDisplay" style="display:none;">
<img src='a-project-called/kulturhavn/thumb.gif'>
</div>
</li>
Now when I hover just the first hidden div content gets shown.
How can I take the hoverDisplay of the hovered "li" element using the JS that I wrote (thanks to you also guys!)?!
Thanks
If you want to match the position of image's top left corner and mouse pointer, then jsut set negative margin-top, and margin-left for you image like below:
$(document).ready(function () {
$("body").mousemove(function (e) {
$("#image").animate({
left: e.pageX,
top: e.pageY
}, 1);
});
});
body {
overflow:hidden;
position:absolute;
height:100%;
width:100%;
background:#efefef;
}
#image {
height:50px;
width:50px;
margin-top:-10px;
margin-left:-10px;
position:absolute;
}
<div id="container">
<img id="image"></img>
</div>
Here is its link to check it online in fiddle.
UPDATE
If your only reason for detecting mouse position is to show and hide the content of list items, then you don't need to detect mouse position manually, you can do it using jQuery with ease. First add this selector to your CSS file:
li.list-item div {
display: none;
}
And then you can show child of each .small-item using mouseover and children like below:
$(document).ready(function() {
$('.list-item').mouseover(function() {
$(this).children('.small-title').show();
}).mouseout(function() {
$(this).children('.small-title').hide();
});
})
We can get rid of this because as you mentioned in your comment you just want to fix the child state.
.mouseout(function() {
$(this).children('.small-title').hide();
})
As the title says I want to show a hidden span "box" when hovering an image, but I can't get it to work, so I was hoping you guys could figure out my mistake.
HTML
<span class="DDAA__bg">
<h1 class="DDAA__headline">DANSK DYREVÆRN ÅRHUS</h1>
</span>
<span class="DDAA__pic">
<img src="img/DDAA-Logo.png" width="980" height="200" alt="Dansk Dyreværn Århus"/>
</span>
CSS
span.DDAA__bg{
height: 200px;
width: 980px;
background-color: #666;
position: absolute;
display: none;
}
span.DDAA__pic{
display:block;
visibility: visible;
}
span.DDAA__pic:hover{
visibility: hidden;
transition-delay: 2s;
}
span.DDAA__pic:hover + span.DDAA__bg{
display:block;
}
You can see here how it works now, not as good :/
http://jsfiddle.net/ary3bt83/3/
element:hover > other_element {
display: block;
}
this is equal to the jQuery code
$(element).on('hover', function() { $(this).css("display", "block"); });
But doing hover on css sometimes is really buggy...
First you need to have jQuery installed ( look for jquery.js / jquery.min.js in source code or google for w3c jquery install )
After this you write following :
<script>
$(document).ready(function() {
// everything here is done once the page is loaded
// define hover event handler for a specific element
$(".the_hovered_element").on('hover', function() {
// show the element
$(".the_element_to_be_shown").css("display","block");
});
});
</script>
Don't forget that you must initially set display: none to the div that is first hidden and then shown. Also instead of .css("display","block") you can have simple animation like .fadeIn("slow");
I have:
Single Page App
CSS mega menu that opens on hover
When the user clicks a link, the menu doesn't go away in IE 10/9/8 when I click on the text of the link. If I click on the spacing around the text it goes away.
Pulling my hair out trying to figure this out... it works fine in Chrome/IE11
here is the code that makes it work for Chrome/IE11:
var $a = _i.$(jqEvent.target);
var $menu = $a.closest('.areaNav');
var $tempBlockOut = _i.$('<div class="tempBlockOut"></div>');
$tempBlockOut.appendTo($menu.parent());
var z = $a.closest('.megamenu').css('z-index');
$tempBlockOut.css({ width: '50px', height: '50px', background: 'transparent', position: 'absolute', 'z-index': z }).position({
of: jqEvent
});
setTimeout(function () {
$tempBlockOut.remove();
}, 100);
I'm placing a transparent div where the cursor is so that hover gets reset and the CSS menu disappears when the user selects a link.
the following code fixes this issue for IE10/9/8
$tempBlockOut.css({ width: '50px', height: '50px', background: '#fff', opacity: 0, position: 'absolute', 'z-index': z }).position({
of: jqEvent
});
changed the background to #fff, and set opacity to zero. apparently IE10/9/8 does not register hover on transparent elements.
When having two html elements positioned on top of each other and the element behind is containing an anchor tag, IE on WP7 and 8 "clicks through" the top element and clicks the anchor.
Desktop browsers including IE and other mobile devices like Android browser and Mobile Safari doesn't have this behaviour.
html
<div class="back">
Min sida<br />
Min sida<br />
Min sida<br />
Min sida<br />
Min sida<br />
</div>
<div class="front">
</div>
css
.back
{
position: absolute;
top:0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
}
.front{
position: absolute;
top:0;
left: 0;
bottom: 0;
right: 0;
z-index: 2;
background-color: rgba(255, 0, 0, 0.5);
}
The following jsfiddle displays the problem: http://jsfiddle.net/BSunW/6/
Is this the expected behaviour? Is there some way to change this behaviour?
I had same problem while customizing Foundation 4 select boxes.
What I did is I have catched all clicks for element below dropdown list (it was a .footer-ul div) like this:
wp8fix: function() {
$('.dropdown').click(function(){
$('.foooter-ul').bind('click',function(e){
e.stopPropagation();
return false;
});
});
}
you have to remember to unbind this after you dont need it anymore
$('.foooter-ul').unbind('click');
$('.element_on_the_overlay').click(function(e){
$('.overlay').preventDefault();
});
$('.overlay').click(function (event) {
event.preventDefault();
event.stopPropagation();
});
Hi, I've found this solution.
Hope you enjoy. :D
Only thing that worked for me in WP8 was this:
$("input").prop("disabled", true);
$("option").prop("disabled", true);
$("div").prop("disabled", true);
I'm wondering if there is a way to have a div, absolutely positioned, hover over the border of the iframe that div is in. Can this be done?
My case:
I have an iframe with a list of files in it, on the right end of each file there is a button. I want to have a div-popup with some functions like a contextmenu. But because this button is at the edge of the iframe the absolutely positioned div is put behind/outside the iframe viewport. I want it to overlay in the rest of my document, outside the iframe.
<iframe width="100" height="100">
div would be in here, say 300 x 100 px.
</iframe>
overlayed div should be visible here as well, basically the div should overlay the iframe.
Well, technically you can't do that. However, if you hijack the events in the iframe, you can recreate the context menu in the main window and use the relative position of the div within the iframe + the absolute position of the iframe itself.
So, to sum up, the context menu can be outside the iframe, and manipulated by the events from within the iframe.
Let me show you how it can be done. I don't have your code, so I'm just making a very crude proof of concept. :)
Example | Code
HTML
<iframe id='my_frame'></iframe>
<div id='copy_to_frame'>
<ul id='files_list'>
<li>data.dat</li>
<li>manual.html</li>
<li>readme.txt</li>
<li>model1.obj</li>
<li>human_model.obj</li>
</ul>
</div>
<div class='context_menu'>
<ul>
<li>Delete</li><li>Open</li><li>Move</li><li>Copy</li>
</ul>
</div>
Javascript
//Declare the necessary variables, good practice
var frame = $("#my_frame"),
frame_contents = frame.contents(),
frame_body = frame_contents .find("body"),
copy_list = $("#copy_to_frame"),
context_menu = $(".context_menu");
var bInside = false;
//Fill the iframe with a list
frame_body.html(copy_list.html());
copy_list.hide();
paint();
//Attach event handler for context menu popup etc.
$("#files_list li", frame_body).click(function(e){
var $this = $(this);
var rel_x = $this.position().left + $this.outerWidth() + 5,
rel_y = $this.position().top + $this.outerHeight()/2 - context_menu.outerHeight()/2 - frame_body.scrollTop(),
abs_x = frame.offset().left,
abs_y = frame.offset().top;
e.stopPropagation();
context_menu.css({
top: rel_y + abs_y,
left: rel_x + abs_x
});
//Show the context menu in this window
context_menu.show();
paint($this);
});
//Hide when clicking outside the context menu
$(document).add(frame_body).click(function(){
if(!bInside){
context_menu.hide();
paint();
}
});
//Determine if mouse is inside context menu
context_menu.mouseenter(function(){
bInside = true;
}).mouseleave(function(){
bInside = false;
});
function paint(el){
$("#files_list li", frame_body).css({
"background-color": "white",
"border": "1px solid transparent"
});
if(el){
el.css({
"background-color": "#ddecfd",
"border": "1px solid #7da2ce"
});
}
}
CSS
#my_frame{
position: absolute;
border: 1px solid gray;
width: 200px;
height: 100px;
top: 50%; left: 50%;
margin-top: -62.5px;
margin-left: -100px;
z-index: 1;
}
.context_menu{
display: none;
position: absolute;
top: 0;
left: 0;
background-color: white;
z-index: 2;
}
.context_menu ul{
border: 1px solid black;
border-right: 0;
display: inline-block;
}
.context_menu li{
display: inline-block;
border-right: 1px solid black;
padding: 2px;
text-align: center;
margin: 0px;
cursor: default;
}
.context_menu li:hover{
background-color: lightgray;
}
This is a bit of a guess based on the minimal information that was provided, but...
You can manipulate the contents of an <iframe> from within the parent document using jQuery, like so:
$('#myFrame').contents().find('a').click(function() { /*...*/ });
This allows you to detect when the user has clicked inside the <iframe>. Then you can work out where to position your overlay <div>.
Your overlay <div> will need to have position: fixed set. You can use jQuery's .offset() method to get the coordinates of the <iframe> and the link that was clicked inside the <iframe>. You can use these two values to calculate where to position the overlay <div> in the parent document. For example, to position the overlay to the left of the <iframe> and on the same vertical level as the link that was clicked you can do this:
$('#overlayDiv')
.offset({
left: $('#myFrame').offset().left - $('#overlayDiv').width(),
top: $('#myFrame').offset().top + $(this).offset().top
})
See this fiddle for a basic example of how it could work: http://jsfiddle.net/Gxd3M/2/
(Note that this assumes that the contents of the parent document and the iframe both come from the same server, i.e. they have the same origin.)