Develop Reference

HTML/CSS/JS Fixed position div is not fixed

Basically, I'm coding a site and I want to implement a JQuery progress bar, I can get it to appear in my site just perfectly, however if I start scrolling with the position:fixed; the position jumps to hover 1/7th of the way down my page, and therefore after 7 scroll clicks down, it has left the page by the bottom, when I apply the same CSS to an image that have used on this object, the image behaves properly.
Also if I scroll back up to the top, the progress bar will never quite reach where it originally started.
Here is a jsfiddle.
HTML
<div id="progressbar"></div>
CSS
#progressbar {
position: fixed;
top:0;
left:0;
z-index:999;
width:100%;
height:20px;
}
There is a fiddle of my code, however the jQuery script doesn't seem to appear and I haven't used fiddle enough to be able to get it to display properly, so if it is a basic thing I've missed, that would be awesome if it could be pointed out too.

The reason your progressbar doesn't come back to the same position is this:
if (scroll <= 28) {
progressbar.style.top = "30px";
}
You are telling it that once you scroll, if the distance from the top is less than 28px it should go to 30px from the top while it starts at 0. Even if you start by scrolling 1px down it'll jump to 30px.

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...

How to reduce width of div using JQuery, CSS so that the left section is reduced and not the right?

This sounds like a stupid question but I cannot figure an easy way of doing it. Let us say that I have a fixed-width Div with the string ABCDEFGHIJ as its content. If I reduce the width it will stop showing HIJ or whatever from the right side. I want the visibility of the content from the left side getting impacted. So, let's say that the div has a width of 100px, then
$(div).css('width':'50px');
should not impact the display of EFGHIJ, for example.
Yes, I could have an inner div and shift its position to the left, for example, by the amount of width reduced. Is there a shorter way of doing this?
Thanks

To Hide the beginning letters but not the last letters, you need to change the direction of the letters using css direction: rtl.
and also to hide the letters, you should mention overflow: hidden and some width to the container.
Working Fiddle

One solution is to use a wrapper and CSS positioning:
jsFiddle example
<div id="outer">
<div id="inner">ABCDEFGHIJ</div>
</div>
#outer {
position:relative;
overflow:hidden;
border:1px solid #999;
width:50px;
height:20px;
}
#inner {
position:absolute;
right:0;
}

jQuery Drag resize neighbouring DIVs

Please refer to this fiddle first:
http://jsfiddle.net/QhVNr/121/
I am writing a coding which enable user to drag the middle div[white color as in the fiddle.]
What i want originally is when dragging the white portion upward will make the height of green color div decreased while the blue color div's height will increase.
But it ends up like in the example, the draggable white div like lost control and just go upward/downward lightning fast and over the parent wrapper.
You may try to edit the code by comment out this 2 lines in javascript
$('#draggable_0').height(div1H);
$('#draggable_2').height(div3H);
Then the dragging function is acting like normal and will be contained within its parent.
How to solve this please anyone?
To make the dragging and also the the green and blue div acting normal.
Thank you.

The .draggable position is relative
So when you modify the #draggable_0 height, the position of .draggable will be relative to the #draggable_0.
change the css :
.draggable
{
height:20px;
width:130px;
cursor:pointer;
border:1px solid #000000;
background-color:#ffffff;
position:absolute;
}

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.