I make a jquery tooltip but have problem with it, when mouse enter on linke "ToolTip" box tooltip don't show in next to link "ToolTip" it show in above linke "ToolTip" , how can set it?
Demo: http://jsfiddle.net/uUwuD/1/
function setOffset(ele, e) {
$(ele).prev().css({
right: ($(window).width() - e.pageX) + 10,
top: ($(window).height() - e.pageY),
opacity: 1
}).show();
}
function tool_tip() {
$('.tool_tip .tooltip_hover').mouseenter(function (e) {
setOffset(this, e);
}).mousemove(function (e) {
setOffset(this, e);
}).mouseout(function () {
$(this).prev().fadeOut();
});
}
tool_tip();
Something like this works, you've still got a bug where the tooltip sometimes fades away on the hover of a new anchor. I'll leave you to fix that, or for another question.
function setOffset(ele, e) {
var tooltip = $(ele).prev();
var element = $(ele);
tooltip.css({
left: element.offset().left - element.width() - tooltip.width(),
top: element.offset().top - tooltip.height(),
opacity: 1
}).show();
}
And here's the jsFiddle for it: http://jsfiddle.net/uUwuD/4/
you need to calculate the window width and minus it with the width of your tooltip and offset
if(winwidth - (offset *2) >= tooltipwidth + e.pageX){
leftpos = e.pageX+offset;
} else{
leftpos = winwidth-tooltipwidth-offset;
}
if you want more detail please refer :)
Related
The code should display an alert when an image is clicked and then the movement buttons should move the image. The problem occurs when you click on the next image. The movement buttons now operate on the images that were previously clicked as well. Note: I need to do this without setting up id's on each image
Also, why doesn't the fiddle work when I place my js in the js box? It seems to only work when added as a script to the html
jsfiddle farm animals
$(document).ready(function() {
$("img").click(function() {
alert("a " + this.alt + " was clicked on!");
var image = $(this);
$("#up").click(function() {
var offset = image.offset();
$(image).offset({
top: offset.top - 5,
left: offset.left
})
});
$("#down").click(function() {
var offset = image.offset();
$(image).offset({
top: offset.top + 5,
left: offset.left
})
});
$("#left").click(function() {
var offset = image.offset();
$(image).offset({
top: offset.top,
left: offset.left - 5
})
});
$("#right").click(function() {
var offset = image.offset();
$(image).offset({
top: offset.top,
left: offset.left + 5
})
});
});
});
You're defining additional button click handlers every time an image is clicked. That means that you can click multiple images and move them at once, but also that you can click the same image multiple times, and the buttons will be moving the image a greater distance each time.
You should define button click handlers only once, and let the image click handler just reassign the value of image.
var image;
$("img").click(function() {
alert("a " + this.alt + " was clicked on!");
image = $(this);
});
$("#up").click(function() {
var offset = image.offset();
$(image).offset({
top: offset.top - 5,
left: offset.left
})
});
$("#down").click(function() {
var offset = image.offset();
$(image).offset({
top: offset.top + 5,
left: offset.left
})
});
...
See a working example
You were almost there. The problem is that you were redefining the image variable inside your click handler, and it should be outside. See the modified code (partial)
//this is the variable you will use in all your click handlers
var image;
$("img").click(function() {
//here you assign a specic image to it
image = $(this);
$("#up").click(function() {
//in every handler, just to be sure, check if ANY image has been clicked
if(!image) return;
var offset = image.offset();
...
I can't change tooltip bootstrap position with jQuery.
Example on http://jsfiddle.net/2cast8g8/
If I enter a bigger value in text1 my function ck() need to change the position of tooltip.
Also it is possible to change the color of tooltip in red with jQuery?
<input type="text" id="text1" name="title" value="" data-toggle="tooltip" data-placement="top"title="this need to be less">
<input type="text" id="text2" name="title" value="" data-toggle="tooltip" data-placement="bottom"title="bigger ">
$('#text1').change(function () {
ck()
});
$('#text2').change(function () {
ck()
});
function ck() {
text1 = document.getElementById("text1").value;
text2 = document.getElementById("text2").value;
if (Number(text1) > Number(text2)) {
$("#text2").attr("data-original-title", "This value need to be bigger than ");
$("#text1").attr("data-placement", "top");
$(function () {
$('#text2').tooltip('hide').tooltip('show');
});
} else {
$("#text2").attr("data-original-title", "bigger");
}
}
$(function () {
$('[data-toggle="tooltip"]').tooltip('show')
})
$('body').tooltip({
placement: function(tip, element) {
//code to calculate the position here, return values: "left", "right", "top", "bottom"
},
selector: '[data-toggle="tooltip"]'
});
The Bootstrap tooltip plugin has a 'placement' option which controls the general position (top,bottom,left,right) of the tooltip, but it calculates the exact position in this function:
Tooltip.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {
return placement == 'bottom' ? { top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2 } :
placement == 'top' ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2 } :
placement == 'left' ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
/* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width }
}
You could override this function to provide your own logic (perhaps by adding a 'custom' placement type. Note that the plugin applies the position type as a class to the element in addition to setting the css position properties. These classes are removed in the setContent function so you'd have to adjust that function to remove your new custom placement type class. It's likely there are other issues/considerations you'd have to account for as well - this wouldn't be a simple option. But it would be an interesting project and might even be worthy of a pull request :)
An alternative would be to simply move/override the position after the bootstrap plugin was done. There is a 'shown' event made available, but it is only triggered after the css transitions have been applied, so it may not suitable.
An example might be something like this (untested code):
$('#text2').on('shown.bs.tooltip', function () {
var left = $(this).css('left');
$(this).css({
left: left + 50
});
})
You might want to look at the jQueryUI tooltip widget - it has more features for positioning the tooltip (including adding custom offsets). http://api.jqueryui.com/tooltip/#option-position
I made a little function that allows to click on a text element which then flys (animated top/left offset with absolute position) to a specific location and disappears.
Here is a fiddle of the problem.
Here is my code from the click handler (in coffescript):
var hoveringSelection = $ "<div class='flying cm-variable'>#{selection}</div>"
var dropdownToggle = $ '#watchlist-dropdown'
hoveringSelection.css({
position: 'absolute'
top: window.mouse.y
left: window.mouse.x
display: 'block'
opacity: 1
})
.appendTo('body')
.animate({
top: dropdownToggle.offset().top
left: dropdownToggle.offset().left
opacity: 0.0
},
{
duration: 1500
easing: 'easeOutCubic'
complete: () ->
hoveringSelection.remove()
updateQueueSize()
}
as you can see it should be at opacity 0 and then removed. The problem is that it shows for a split second (with a ~50% chance) before it gets removed.
I tested it with alerts before the .remove() is called so that the javascript execution halts, but it still did it before the alert was executed. Therefore the issue has to appear right before the completion callback of animate() is called.
I could not observe such behaviour in Firefox.
How can I avoid it?
I have seen that this is a bug (http://www.brycecorkins.com/blog/jquery-fadein-opacity-bug-in-chrome-and-ie-8/). The problem is the opacity. I made a few changes to your script to get your goal. At the end of animation I set opacity to 0.01 and then on complete I execute function that remove the element. I hope that this help you.
http://jsfiddle.net/XjesX/1/
$(function () {
$.extend($.easing, {
easeOutCubic: function (x, t, b, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + b;
}
});
var mouseListener = function (event) {
if (!window.mouse) window.mouse = {
x: 0,
y: 0
};
window.mouse.x = event.clientX || event.pageX;
window.mouse.y = event.clientY || event.pageY;
};
document.addEventListener('mousemove', mouseListener, false);
var fly = function() {
var hoveringSelection = $("<div class='flying'>A word</div>");
var dropdownToggle = $('#flytome');
hoveringSelection.css({
position: 'absolute',
top: window.mouse.y,
left: window.mouse.x,
display: 'block',
opacity: 1.0
})
.appendTo('body')
.animate({
top: dropdownToggle.offset().top,
left: dropdownToggle.offset().left,
opacity: 0.01
}, 1500, 'easeOutCubic' ,function(){
alert($('.flying').length);
$('.flying').remove();
alert($('.flying').length);
});
};
$('#flyBtn').click(fly);
});
I have added alert($('.flying').length); before and after remove to show that that element is removed from the DOM. If you remove that 2 lines you'll see in a better way that there is no flickering effect.
I'm trying to make a sub navigation menu animate a fixed position change after a user has scrolled down 200 pixels from the top. It works but it's very buggy, like when the user scrolls back to the top it doesn't always return to the original position, etc. I'm not strong with javascript / jquery, but I thought this would be simple to do. What am I missing?
Here's my fidde:
http://jsfiddle.net/visevo/bx67Z/
and a code snippet:
(function() {
console.log( "hello" );
var target = $('#side-nav');
var scrollDis = 200;
var reset = 20;
var speed = 500;
$(window).scroll(function() {
console.log( $(window).scrollTop() );
if( $(window).scrollTop() > scrollDis ) {
$(target).animate({
top: reset + 'px'
}, speed);
} else {
$(target).animate({
top: scrollDis + 'px'
}, speed);
}
});
})();
How about a little bit of css and jquery both ??
What I did is added transition to side-nav to animate it and rectified your js to just change it's css. You can set how fast it moves by changing the time in transition.
FIDDLE
#side-nav {
position: fixed;
top: 100px;
left: 10px;
width: 100px;
background: #ccc;
-webkit-transition:all 0.5s ease-in-out;
}
(function () {
var target = $('#side-nav');
var scrollDis = 100;
var reset = 20;
var speed = 500;
$(window).scroll(function () {
if ($(this).scrollTop() >= scrollDis) {
target.css("top", reset);
} else {
target.css("top", scrollDis);
}
});
})();
NOTE: When you cache a jQuery object like this
var target = $("#side-nav");
You don't need to use $ again around the variable.
Since I am commenting all over the place I should probably actually contribute an answer.
The issue is that you are adding scroll events every time a scroll occurs, which is causing more scrolling to occur, which causes more scroll events, hence infinite loop. While cancelling previous events will fix the problem, it's cleaner to only fire the event when you pass the threshold, IE:
(function () {
console.log("hello");
var target = $('#side-nav');
var scrollDis = 200;
var reset = 20;
var speed = 500;
var passedPosition = false;
var bolMoving = false;
$(window).scroll(function () {
if (bolMoving) return; // Cancel double calls.
console.log($(window).scrollTop());
if (($(window).scrollTop() > scrollDis) && !passedPosition) {
bolMoving = true; //
$(target).animate({
top: reset + 'px'
}, speed, function() { bolMoving = false; passedPosition = true; });
} else if (passedPosition && $(window).scrollTop() <= scrollDis) {
bolMoving = true;
$(target).animate({
top: scrollDis + 'px'
}, speed, function() { bolMoving = false; passedPosition = false; });
}
});
})();
http://jsfiddle.net/bx67Z/12/
http://jsfiddle.net/bx67Z/3/
I just added .stop() in front of the .animate() , and it works a lot better already.
$(target).stop().animate({
top: reset + 'px'
}, speed);
} else {
$(target).stop().animate({
top: scrollDis + 'px'
}, speed);
You can also use .stop(true)
http://jsfiddle.net/bx67Z/5/
$(target).stop(true).animate({
top: reset + 'px'
}, speed);
} else {
$(target).stop(true).animate({
top: scrollDis + 'px'
}, speed);
You can also use .stop(true, true)
http://jsfiddle.net/bx67Z/4/
$(target).stop(true, true).animate({
top: reset + 'px'
}, speed);
} else {
$(target).stop(true, true).animate({
top: scrollDis + 'px'
}, speed);
So the reason .stop(true) works so well, is that it clears the animation queue. The reason yours was being "buggy" is because on every scroll the animation queue was "bubbling up" , thus it took a long time for it to reach the point where it would scroll back to the original position.
For information about .stop() , see here http://api.jquery.com/stop
this function is supoused to work in iphone,
$(document).ready(function() {
$('#head').css('position','fixed');
window.onscroll = function() {
document.getElementById('head').style.top =
(window.pageYOffset + window.innerHeight + 25) + 'px';
// alert((window.pageYOffset + window.innerHeight - 25) + 'px');
};
});
but it's supoused to keep the div (25px) at the bottom of the page, i need it on top of the page no matter how much i scroll
i'm tring like this
$(document).ready(function() {
$('#head').css('position','fixed');
var height = $('#head').height();
window.onscroll = function() {
document.getElementById('head').style.top =
(window.pageYOffset) - height + 'px';
// alert(window.pageYOffset); alert(window.innerHeight);
};
});
but it seems that the #head div is not following properly the scroll (it seems like it bounces), any idea what i'm missing??
Position fixed do not work in iPhone. So it is bound to bounce whenever you scroll the page until the scroll handler set its new position.
$(document).ready(function() {
$('#head').css('position','absolute');
$(window).scroll(function() {
$('#head').css({
top: window.pageYOffset
});
});
});
Try a little more jQuery:
window.onscroll = function() { $('#head').offset(0,0); }