Develop Reference

Div1 covers Div2: how to check if the mouse is over the covered Div2?

I'm a bit lost. I try to check if my mouse is over a Div which is covered by another Div. I search a vanilla js solution if possible.
I tried to use the elementFromPoint method, but it only seems to give me the top Div.
I also tried to mess around with the "onmouseover" Event, but I didn't found a solution either. Maybe I just overlooked something.
Any ideas how to solve this? I want a method to check if my mouse is over the smaller Div2 or not. I made a jsFiddle to show the situation. I made the covering Div
translucent for easier understanding from the setup.
http://jsfiddle.net/y2L5C/
<div id="div1"></div>
<div id="div2"></div>
#div1 {
width:300px;
height:300px;
background:red;
position:absolute;
top:0px;
z-index:1;
opacity: 0.5;
}
#div2 {
width:200px;
height:200px;
background:blue;
position:absolute;
top:0px;
}

if you want to check if your mouse is over a <div> that is covered by another <div>, you can achieve this by declaring this code: pointer-events: none; to the css of the covering <div>.
For example:
<div id="under"></div>
<div id="over"></div>
Add this to your css file:
#over{ pointer-events: none; }
In that case, all pointer events for the div having the id=over will be ignored. You can now then add this code to test if its working.
Add this JavaSCript code:
$('#under').mouseover(function() {
alert("Mouse is over the div having the id='under'");
});
Give it a try! Good luck!

Here's a quick and dirty solution. I'll leave it up to you to optimize it. Here's the fiddle: http://jsfiddle.net/y2L5C/1/
var div2 = $("#div2"),
width = div2.outerWidth(true),
height = div2.outerHeight(true),
offset = div2.offset(),
top = offset.top,
left = offset.left;
$(document).mousemove(function(evt) {
if(evt.pageX <= (left + width) && evt.pageX >= left &&
evt.pageY <= (top + height) && evt.pageY >= top) {
$("#indicator").text("Over the div #2");
} else {
$("#indicator").text("NOT over the div #2");
}
});

Interesting concept. I do want to bring up that for plain CSS events there are plain CSS solutions such as here. However, if what you are looking to do is initiate Javascript events then the trouble is that onMouseOver is not going to trigger for #div1 if #div2 is on top of it.
One potential, very simple solution, is to create a script to copy the position of your #div2 element and change the style to be a higher z-index. While JQuery might be "easier" to create this, you could certainly create a vanilla JS solution. This script may give you a little guidance as to how you can find positioning. You can use element.style values in order to assign CSS values. If your element positions are declared by CSS then you can do something like this:
var div1 = getElementById('div1');
var div2 = getElementById('div2');
var newElem = document.createElement('div');
newElem.id = 'div2makefacade';
Now you can either utilize newElem.style.top etc. and assign div2.style.top's value, or you can even assign a custom class which has the correct position values. When you initiate onMouseOver, you can do so on #div2makefacade rather than #div2, and perform actions on #div2

well i made a function that perhaps it help you in some way, first in your view you have to load jquery librarie like this
<script type="text/javascript" src="Scripts/jquery-1.6.2.js"></script>
and your css you have this
.visiblepanel{
display: none;
}
.visiblepanela{
display: none;
}
your script this, you have to add the hover function
$('#quickstart').hover(function() {
$('#visiblepanel').toggle();
});
$('#quickstarta').hover(function() {
$('#visiblepanela').toggle();
});
and your html body
<div id="quickstart">Div 1</div>
<div id="quickstarta">Div 2</div>
<div id="visiblepanel" class="visiblepanel">mouse encima div 1</div>
<div id="visiblepanela" class="visiblepanel">mouse encima div 2</div>
so it consist that when the mouse is over the DIV 1 it will show an advice that your mouse is there, and so on with DIV 2...i hope i could helped you...

CSS :hover works only when mouse moves

I created a very basic sample:
HTML
<div id="bla"></div>
CSS
#bla {
width:400px;
height:400px;
background-color:green;
display:none;
}
#bla:hover{
background-color:red;
}
As you can see it's a DIV that is initially hidden and changes color when mouse hovers over it.
This JavaScript unhides it after 2 seconds
setTimeout(function() {
document.getElementById('bla').style.display="block";
},2000)
But if you place your mouse over location where the DIV is about to appear - when it appears - it appears in unhovered state. Only when you actually move the mouse - hover effect takes place.
Here's a demo. Run it and immediately place mouse over result pane.
Is this by design? Is there a way (without JS preferable) to detect that DIV is hovered?

While you can use opacity, #BrianPhillips mentioned, it doesn't work in IE 8. I don't know of a pure CSS solution, but here's a concise enough Javascript workaround:
window.onmousemove=function(event){
ev = event || window.event;
if (event.pageX <= 400 && event.pageY <= 400){
document.getElementById('bla').style.backgroundColor= "red";
} else {
document.getElementById('bla').style.backgroundColor= "green";
}
}
setTimeout(function() {
document.getElementById('bla').style.display="block";
},2000)
Demo

When you set display to none the image takes up no space meaining there is nowhere to hover over.
I would set the background-image in you css to rgba(0 0 0 0); making it invisible but still in the dom. You can then change your javascript to
setTimeout(function() {
document.getElementById('bla').style.backgroundColor="green";
},2000);
http://jsfiddle.net/euT7k/3

You could try using CSS opacity along with setting it to position: absolute to prevent it from taking up flow on the page. This appears to work properly:
CSS:
#bla {
width:400px;
height:400px;
background-color:green;
opacity: 0;
position: absolute;
}
JS:
setTimeout(function() {
document.getElementById('bla').style.opacity="1";
document.getElementById('bla').style.position="relative";
},2000)
Demo
The key here is that elements with opacity respond to events (click, hover, etc), while elements with visibility: hidden and display:none do not. (source)
Note that opacity isn't available in IE 8 and below.

jquery slide down effect - without moving inner contents

I am trying to achieve a simple slide up/down effect similar to the 'more' link on www.bbc.co.uk
YOu can see that the inner contents do not move up and down, instead it is like a screen is being pulled over them.
Using jquery slideUp slideDown does not achieve this, instead the whole div is moved up and down so the text looks like it moves.
How can a similar effect be achieved using jquery?

Just put your sliding div between the menu and the content:
<div id="menu">Menu example. Click here!</div>
<div id="slide">Whoa! sliding div<br>See how it moves the content down</div>
<div>Content here</div>
See fiddle: http://jsfiddle.net/2hZme/1/

slideUp/slideDown uses the top position when it animates, when you want to use the height. So I'd suggest to animate it manually:
// Initial variables
var panel = $('#panel');
var panelHeight = panel.height();
// Set the height to 0
panel.height('0px');
// Animate it to its initial size
$('a').click(function() {
$('#panel').animate({'height' : panelHeight});
});
... and of course the CSS:
#panel {
overflow: hidden;
height: 300px; /* or whatever */
}
Fiddle: http://jsfiddle.net/3fsQr/

Interactive HTML webpage

EDIT: Thanks for a lot of great examples on how to solve these. I cant decide between who to accept yet, but I will go though all examples and see which I like the most. Great feedback guys! =D
I normally do these kind of things in flash, but this time it has to be compatible with mac, iPads and all those units too.
So, what do I need help with?
I've got a picture, with some "hotspots" on. I want to be able to click any of those hotspots to show some information.
This should be fairly basic and easy to achieve, but since I've never done this in html before I have to ask you guys =)
So, what would be the best way to do this? It have to be compatible with any browser and device, and it doesnt need to be very advanced. If it's possible to add effects to the box (sliding out, fading in, or anything like that) then thats a nice bonus, but not something I need.
Any help would be great!
BREAKDOWN:
I have a background image with some "hotspots" (numbers 1 and 2 in my example). The users should be able to either hover the mouse over any of these or click it to get more information, as seen in picture #2
This is that happens when you hover/click any of these hotspots.
Text and image is displayed inside a nice little info box.
If the user clicks "more information" it will open up even further to display more information if available. Like in this img:

I don't think the Javascript approach is really necessary here. I created a little CSS-only mock-up for you on JSBin.
Basically the point is that you enclose the image in a relatively positioned div, then absolute position the hotspots inside the same div. Inside the hotspots divs you will have the more info elements, showing only on :hover of their parents.
This makes it simple, and far more accessible.
Update: cropping the image equally from both sides
If you want to keep the image centered and still not use any javascript, you could set the required image as a background-image of the container, and setting its background-position parameters to center center.
You would have to make sure that the width of this div is set to the width of your image, and the max-width to 100%, so that when the window gets resized below the image width it stays at the center.
Now, a problem that I encountered here is how to make the hotspots stay center relatively to the image. I solved it this way:
I created a wrapper div for the hotspots with these characteristics:
margin: 0 auto;
position: relative;
width: 0px;
This basically makes sure that the wrapper div finds the center of our image. Then, you would position the hotspots relatively to the top-center position of the image, instead of the top-left as a starting point.
Then you have what you are looking for.
Working demo

Here's another approach, and in my opinion far superior to using a map or excessive JS. Place <div> elements on top of the element with the background-image and have HTML and CSS do the heavy lifting for you.
See it on JSFiddle
HTML
The HTML should seem pretty each enough to understand, we create <div>s with the class hotspot and rely on certain things being present. Namely .text (to show digit), .hover-popup (to show on hover) and .click-popup (which is inside .hover-popup and is shown when clicked).
<div id="hotspot1" class="hotspot">
<div class="text">1</div>
<div class="hover-popup">
I was hovered!
<div class="click-popup">
I was clicked on!
</div>
</div>
</div>
<div id="hotspot2" class="hotspot">
<div class="text">2</div>
<div class="hover-popup">
I was hovered!
<div class="click-popup">
I was clicked on!
</div>
</div>
</div>
CSS
This is where most of the magic happens, see the comments for further explanation.
/* These two position each hotspot */
#hotspot1 {
left:15%; /* we could use px or position right or bottom also */
top:20%;
}
#hotspot2 {
left:35%;
top:25%;
}
/* General styles on the hotspot */
.hotspot {
border-radius:50%;
width:40px;
height:40px;
line-height:40px;
text-align:center;
background-color:#CCC;
position:absolute;
}
.hotspot .text {
width:40px;
height:40px;
}
/* Show the pointer on hover to signify a click event */
.hotspot .text:hover {
cursor:pointer;
}
/* hide them by default and bring them to the front */
.hover-popup,
.click-popup {
display:none;
z-index:1;
}
/* show when clicked */
.hotspot.clicked .click-popup {
display:block;
}
/* show and position when clicked */
.hotspot:hover .hover-popup {
display:block;
position:absolute;
left:100%;
top:0;
width:300px;
background-color:#BBB;
border:1px solid #000;
}
JavaScript (with jQuery)
Unfortunately you're going to have to use some JavaScript for the clicking part as CSS doesn't have a 'clicked' state (outside of hacks with checkboxes). I'm using jQuery because it's dead easy to do what I want.
$(document).ready(function () {
$('.hotspot').click(function () {
$(this).toggleClass('clicked');
});
});
Creating the arrow
Over at css-tricks you can find a tutorial for attaching an arrow to a element using the :before and/or :after pseudo-elements. You can even 'simulate' a border around them by placing the :after element on top of the :before. But yea, lots of resources on how to do this.

You should be able to use the onclick or OnMouseOver event in the map area (define the href as "").
An example using OnMouseOver is here: http://www.omegagrafix.com/mouseover/mousimap.html

Give a class for that image in html (Ex: imgclass). And in javascript(using jquery), build that hover box in html format and bind it to 'mouseover' event of that image.
For example:
function bindhtmltoimage() {
myimg = $('body').find('.imgclass');
divSlot.each(function (index) {
$(this).bind('mouseover', function () {
try {
//position the hover box on image. you can customize the y and x axis to place it left or right.
var x = $(this).offset().left;
var y = $(this).offset().top;
var position = $(window).height() - ($("#divHover").height() + y);
var widthposition = $(window).width() - ($("#divHover").width() + x);
if (position < 0 || widthposition < 0) {
if (position < 0) {
$("#divHover").css({
position: 'absolute',
left: x + 20,
top: y - $("#divHover").height() - 20
});
}
if (widthposition < 0) {
$("#divHover").css({
position: 'absolute',
left: x - $("#divHover").width(),
top: y + 20
});
}
}
//build your html string for that hover box and apply to it.
$('#divHover').html("your Html content for that box goes here");
$('#divHover').show();
//if you want the box dynamically generated. create the html content and append to the dom.
}
catch (e) {
alert(e)
}
});
});
}
it will work fine in desktop and mobile. if you face any problem in touch devices, bind the function to click event instead of 'mouseover'.
Also, for map approach, i strongly recommend SVG instead of images.

How do I get an IFRAME to occupy the right half of a web page?

I realize that there are many questions explaining how to get two DIVs to appear side-by-side, but I've tried most of what they recommend, and nothing seems to work.
On the page http://www.lastcalc.com/ I want the DIV with id "worksheet" (and all of its contents) to occupy the left half of the page, and the IFRAME with id "helpframe" to occupy the right half.
Currently I'm trying this:
DIV#worksheet {
float:left;
width:50%;
}
IFRAME#helpframe {
float:left;
width:50%;
}
But the result is that the #helpframe is underneath the #worksheet DIV.
I would also like to be able to use JQuery to hide the helpframe and when I do, the worksheet DIV will expand to occupy the entire page.
How can I achieve this?

Just absolutely position the iframe to the right-top:
#helpframe {
position : absolute;
top : 0;
right : 0;
height : 100%;
width : 50%;
}
You can hide the iframe using jQuery like this:
$(function () {
$('#some-button').click(function () {
$('#helpframe').hide();
$('#worksheet').width('100%');
});
});
There are also some pre-made animations you can use to show/hide elements: fadeIn/fadeOut/toggleFade/slideIn/slideOut/toggleSlide.