Develop Reference

Mouse-Following Tooltip gets Farther Away the Smaller the Window

I've just revamped my tooltip code due to issues with the position altering depending on the size of it's parent (mostly due to using offsetX/Y instead of pageX/Y, but page was being weird, too). So I decided to just have one tooltip for each of my site's pages, parented to the main div, and just feed it different text depending on what the mouse is hovering over (I'll be dealing with the visibility part later).
And it's worked quite well so far, but the only issue is that, the smaller I make my window, the farther the tooltip is from my mouse, until it's not even in view anymore.
Here's the JavaScript coding I've done for it.
var body = document.getElementsByClassName("test");
var tooltip = document.getElementById("tooltip");
body[0].addEventListener("mousemove", tooltipMove)
function tooltipMove(event) {
var x = event.pageX;
var y = event.pageY;
tooltip.style.top = (y + -900) + "px";
tooltip.style.left = (x + -875) + "px";
}
The CSS coding for the tooltip:
.tooltip {
visibility: hidden;
width: 170px;
background-color: white;
background-image: url("images/tooltipbackground.png");
color: black;
text-align: center;
border-style: groove;
border-color: #f4bb4c #ffd966 #ffd966 #f4bb4c;
border-radius: 2px;
padding: 5px 5px;
position: absolute;
z-index: 1;
}
.notfound:hover .tooltip {
visibility: visible;
}
And the HTML:
<div class="test" style="top: 70px; position: relative; height: 100%; width: 100%;">
<h1>TEST</h1>
<img src="images/pagenotfound.png">
</div>
<div style="width: 1px; height: 1px; position: relative;">
<span class="tooltip" id="tooltip">testing</span>
</div>
I should mention the body's (which has the "notfound" class) height is 900px, and it's width 600px, in case that's one of the problems.
The 1 pixel div is just what I'm using to "host" the tooltip, not sure if it's causing any problems as well. I inspected the page in order to see it, and it never seemed to slide around with the window size.
Any sort of help would be greatly appreciated. I've tried to switch it from pageX/Y to clientX/Y, but it's the same issue. And using offset causes it's position to shift depending on what I'm hovering over, which is the reason I'm revamping the code in the first place.
I've also tried to change the tooltip's position from absolute to, well, anything else (after resizing it's parent so it doesn't get squashed), but that hasn't helped.
Another thing I should mention is that, for some reason, the shifting doesn't seem to happen in the Y axis, it's only when I squish the window horizontally that the tooltip shifts, at least from what I've noticed.

I had thought changing the tooltip's position to fixed had made it disappear, but I just couldn't see it due to the massive repositioning I had done to it. Once I deleted that it was visible and fine, and better yet, it stays in it's proper position no matter the screen size!
Also note: I had to change pageX/Y to clientX/Y, as using page made the tooltip shift vertically when squished.
<div style="height: 1px; width: 1px; position: relative;">
<span class="tooltip" id="tooltip" style="position: fixed;">Placeholder</span>
</div>
for (i = 0; i < tip.length; i++) {
tip[i].addEventListener("mousemove", tooltipMove)
tip[i].addEventListener("mouseleave", defaultVis)
}
function tooltipMove(event) {
var x = event.clientX;
var y = event.clientY;
tooltip.style.visibility = "visible";
tooltip.style.top = (y + -50) + "px";
tooltip.style.left = (x + -200) + "px";
}
function defaultVis() {
tooltip.style.visibility = "hidden";
}

On scroll up use the animate() and show the div

I have two navigation in my website. Both the navigation bars are fixed. Basically when I scroll up, I would like to use the animate() and show both the navigation bar in the page. How do I get the scroll up event and use that to animate the divs, like the Google search widget. I would really appreciate your help. Thank you.
html:
<div id="navbar_header">
some link
</div>
<div id="main_content">
<p>Some content...</p>
</div>
<div id="navbar_footer">
some link
</div>
css:
#navbar_header {
background: #22313F;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 40px;
}
#navbar_footer {
background: #22313F;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 40px;
}

Normally using the window for the scroll event should be sufficient, as it's big enough and the one element, that's being scrolled. If jQuery is loaded correctly, you could try something like this:
$(document).ready(function(){
var lastTopPosition = 0;
$(window).scroll(function(){
var topPosition = $(window).scrollTop();
if (topPosition > lastTopPosition ){
$("#navbar_header").stop(true).animate({'top':'-40px'}, 200);
$("#navbar_footer").stop(true).animate({'bottom':'-40px'}, 200);
} else {
$("#navbar_header").stop(true).animate({'top':'0px'}, 200);
$("#navbar_footer").stop(true).animate({'bottom':'0px'}, 200);
}
lastTopPosition = topPosition;
}
});
This piece of code gets the current position from the top everytime you scroll. If the distance gets bigger (scroll down) the two bars fadeout. If it's getting smaller (scroll up) it fades in. You can replace the FadeOut/In methods here with you animate() call too. A check, if the elements are displayed would be good here too, but I guess you can figure that one out ;-)

If I understood this right, something along the lines of:
$("#main_content").scroll(function(){
$('#navbar_header').show(300);
$('#navbar_footer').show(300);
});
Where show(300) will basically do a 300ms showing animation of your divs.

Imagemap with overlying div: Mouseover disappears on div

Could anyone give me a hint how to solve this?
Fiddle: http://jsfiddle.net/9Br6h/
Have a look at the part left under... with the flag. On the area the mouseover is visible.. but it disappears on the flag - that is the thing I want to remove. It should stay visible.
But please keep in mind that this is a very simple example. In real I've tons of areas and flags. ;o)
jQuery(document).ready(function($) {
// add div for showing dates
$('body').append('<div id="mo_termin"></div>');
// show div on mouseover
$('area').mouseover(function(event) {
var left = event.pageX + 30;
var top = event.pageY + 5;
display = '<div class="views-field-field-body">Keine Termine</div>';
$('#mo_termin').css({top: top,left: left}).html(display).show();
});
$('area').mouseout(function() {
$('#mo_termin').html('').hide();
});
});

you can use the css property pointer-events: none;as well.
#karte .flag {
pointer-events: none; /*Added line*/
position: absolute;
background: url('http://static.netzwelt.de/farcade/images/capturetheflag1.gif') no-repeat;
width: 50px;
height: 50px;
top: 200px;
left: 50px;
}
Here is the Demo http://jsfiddle.net/9Br6h/2/.

Assuming that the flag completely covers the 'hover' area underneath it, you can modify your code so that the line that sets the mouseover event reads as follows:
// show div on mouseover
$('area, .flag').mouseover(function(event) {
Here is an example: http://jsfiddle.net/9Br6h/1/

How to user controlled overlap images in JS

I'm desperately searching for solution for my client. I have graphic - something like that:
And I want to be able to take the line with circle in the center and drag it to right or left. And it will be hiding and unhiding my two full images. It's basically two images on the same place, just with another z-index I think.
I think it's possible to do it with JavaScript, but I don't know of any functions or methods for this option.

Here is my solution:
The HTML is pretty simple, just two divs for the images and one for the drag:
<div class="img" id="img1"></div>
<div class="img" id="img2"></div>
<div id="drag"></div>
For the CSS, the important part is to absolute position all the divs and give a background image.
As for the Javascript, with a little help from jQuery, we listen for the mouse events, make some calculations and adjust the CSS of the second image:
$('#drag').on('mousedown', function(e){
var $self = $(this),
dragPos = $self.position().left + $self.width()/2,
imgWidth = $('#img1').width();
$(document).on('mouseup', function(e){
$(document).off('mouseup').off('mousemove');
});
$(document).on('mousemove', function(me){
var mx = me.pageX - e.pageX + dragPos
$self.css({ left: mx });
$('#img2').css({
width: imgWidth - mx,
left: mx,
backgroundPosition: -mx + 'px 0px',
});
});
});
From there, I believe it's pretty easy to customize it and give it a unique look.
Hope this helps!
JsFiddle Demo

Something like this alphamask plugin may do the trick, though I'm not sure how simple it would be for you to implement in the manner of your slider example.

Actually quite simple. The first step is to make it work manually. I'd set it up as follows:
<div class="wrap" id="wrap1">
<div class="img-wrap img1"></div>
<div class="img-wrap img2"></div>
<div>
With CSS as follows:
.wrap {
position: relative;
width: 300px;
height: 300px;
}
.img-wrap {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
.img1 {
z-index: 1;
background: url(bg1.png) no-repeat 0px 0px;
}
.img2 {
z-index: 2;
background: url(bg1.png) no-repeat 0px 0px;
}
Now some JavaScript (with jQuery) to set a position (you can call this when you move a slider over the top later):
function setPosition(percentage){
// get the width of the container
var w = $('#wrap1').width();
// work out the width of left panel
var w1 = Math.floor(w * percentage);
// and the right panel
var w2 = w - w1;
// set the width of the right panel
// move it right by the width of the left panel
// and move the background back by the width of the left panel
$('#wrap1 .img2').css({
width: w2,
left: w1,
backgroundPosition: -w1 + 'px 0px',
});
}
You now just have to decide how to do the dragging. You could even just do it on mouseOver. Easy!

fix my jQuery highlight plugin

I just wrote a really simple jQuery plugin.. sort of, that I want some help with.
(function($){
$.fn.highlight = function(words){
return this.each(function(){
//Get text from within
var text = $(this).html();
//Replace with new text
$(this).html(text.replace(words,"<i class='highlight'></i><span class='word'>"+"$1"+"</span>"));
//Get the all the highlight classes within this
var highlights = $(this).find(".highlight");
//Go through all
return highlights.each(function(){
var $this = $(this);
//Get to the next word
var wordDiv = $this.nextAll(".word").eq(0);
//Set highlight span same height as word
$this.height(wordDiv.height()+2);
//Set highlight span same width +4 then positioning
var newWidth = wordDiv.width()+4;
wordDiv.replaceWith(function(){
return $(this).contents();
});
$this.width(newWidth+2).css({
left:(newWidth)+"px",
marginLeft: "-"+(newWidth)+"px"
});
$this.delay(Math.ceil(Math.random()*30)*200+2000).fadeOut("4000",function(){
$this.remove();
});
});
});
}
})(jQuery);
$(document).ready(function(){
$("div").highlight(/(simple|wrote|knowledge)/g);
});​
and the CSS:
.highlight{
background: #FBB829;
display: inline-block;
position: relative;
z-index: -1;
top: 5px;
-moz-border-radius: 4px;
border-radius: 4px;
}​
and is it better a better practice to put that CSS in the jQuery plugin?
Here's a jsFiddle:
http://jsfiddle.net/aVCtA/11/
and you see my text moves when the last .highlight span disappears. Why's that? Thought relative and z-index: -1 would fix that?
Should I instead use position absolute and calculate the positioning?

Made some changes to your code, check the test on jsfiddle
Changelog:
jQuery:
Removed the .css() from the following line,
$this.width(newWidth + 2);
CSS:
Changed the styling to,
.highlight{
background: #FBB829;
display: inline-block;
position: absolute;
z-index: -1;
top: 0px;
margin-left: -2px;
-moz-border-radius: 4px;
border-radius: 4px;
}

The simpelst solution would be to not remove the highlight element after fade out. You can achieve this by changing your fade to animating opacity:
$this.delay(Math.ceil(Math.random()*30)*200+2000).animate({opacity: 0},4000);
This is not the most beautiful solution, but for your purposes, I think it is OK.

Here is the another solution:
http://jsfiddle.net/aVCtA/20/
Removed CSS:
top:5px
JS changes:
Removed the line for height setting
Added a blank space to set height as of other chars.
remove extra width so it does not move on hide.