i have used this tooltip in my project its working great but the problem is that i need the tooltip appear where ever i hover and not fixed location.currently its appearing in fixed location.i need to appear the tooltip where i hover.
how can i retouch this code to do so
/* Position the tooltip relative to the class
associated with the tooltip */
setTip = function(top, left){
var topOffset = tip.height();
var xTip = (left-30)+"px";
var yTip = (top-topOffset-60)+"px";
tip.css({'top' : yTip, 'left' : xTip});
}
the full code is here
$.fn.betterTooltip = function(options){
/* Setup the options for the tooltip that can be
accessed from outside the plugin */
var defaults = {
speed: 200,
delay: 300
};
var options = $.extend(defaults, options);
/* Create a function that builds the tooltip
markup. Then, prepend the tooltip to the body */
getTip = function() {
var tTip =
"<div class='tip'>" +
"<div class='tipMid'>" +
"</div>" +
"<div class='tipBtm'></div>" +
"</div>";
return tTip;
}
$("body").prepend(getTip());
/* Give each item with the class associated with
the plugin the ability to call the tooltip */
$(this).each(function(){
var $this = $(this);
var tip = $('.tip');
var tipInner = $('.tip .tipMid');
var tTitle = (this.title);
this.title = "";
var offset = $(this).offset();
var tLeft = offset.left;
var tTop = offset.top;
var tWidth = $this.width();
var tHeight = $this.height();
/* Mouse over and out functions*/
$this.hover(
function() {
tipInner.html(tTitle);
setTip(tTop, tLeft);
setTimer();
},
function() {
stopTimer();
tip.hide();
}
);
/* Delay the fade-in animation of the tooltip */
setTimer = function() {
$this.showTipTimer = setInterval("showTip()", defaults.delay);
}
stopTimer = function() {
clearInterval($this.showTipTimer);
}
/* Position the tooltip relative to the class
associated with the tooltip */
setTip = function(top, left){
var topOffset = tip.height();
var xTip = (left-30)+"px";
var yTip = (top-topOffset-60)+"px";
tip.css({'top' : yTip, 'left' : xTip});
}
/* This function stops the timer and creates the
fade-in animation */
showTip = function(){
stopTimer();
tip.animate({"top": "+=20px", "opacity": "toggle"}, defaults.speed);
}
});
};
.hover(handlerIn, handlerOut) is short for .mouseenter(handlerIn).mouseleave(handlerOut). That means you have access to the mouse coords of the mousenter().
Change your .hover binding to use mouse coordinates of hover entry point:
/* Mouse over and out functions*/
$this.hover(
function(e) {
tipInner.html(tTitle);
setTip(e.clientY, e.clientX); //<--- using mouseenter coords here
setTimer();
},
function() {
stopTimer();
tip.hide();
}
).mousemove (function(e) {
setTip(e.pageY, e.pageX);
});
Give it mouse coordinates instead of static div coordinates:
$(document).mousemove (function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
jQuery docs: http://docs.jquery.com/Tutorials:Mouse_Position
Related
Currently I have a script which starts a progress bar the moment a user starts scrolling.
Is it possible to change this to when the user gets to 340px from the top of the page?
Here is a demo of my site: http://pixsols.com/test/wordpress/reading-progress/
Here is my current code:
(function ( $ ) {
$.fn.progressScroll = function(options) {
var settings = $.extend({
fontSize : 20,
color : '#009ACF',
height : '5px',
textArea : 'dark',
}, options);
// element state info
var docOffset = $(this).offset().top,
elmHeight = $(this).height(),
winHeight = $(window).height();
// listen for scroll changes
$(window).on('scroll', function() {
var docScroll = $(window).scrollTop(),
windowOffset = docOffset - docScroll,
viewedPortion = winHeight + docScroll - docOffset;
if($(window).scrollTop() > 0) {
if($('.scrollWrapper').hasClass('hidden')) {
$('.scrollWrapper').removeClass('hidden').hide();
$('.scrollWrapper').slideDown('slow');
}
} else {
$('.scrollWrapper').slideUp('slow');
$('.scrollWrapper').addClass('hidden');
}
if(viewedPortion < 0) { viewedPortion = 0; }
if(viewedPortion > elmHeight) { viewedPortion = elmHeight; }
// calculate viewed percentage
var viewedPercentage = viewedPortion / elmHeight;
// set percent in progress element
$('.scroll-bar').css('width', (viewedPercentage*100)+'%' );
});
var self = this;
$(window).on('resize', function() {
docOffset = $(self).offset().top;
elmHeight = $(self).height();
winHeight = $(window).height();
$(window).trigger('scroll');
});
$(window).trigger('scroll');
var $el = $('.scroll-bar').css(settings);
return $el;
};
}( jQuery ));
My guess would be to manipulate this:
windowOffset = docOffset - docScroll,
Probably you should add or subtract 320px from windowOffset. So for example"
windowOffset = docOffset - docScroll + 320,
I made a bar chart only with CSS and a animation from low to up that works well, however I want to run only when trigged by scroll.
Somehow the animation after trigged by the scroll does not stop, it keeps running.
look in the inspect element the latest bar.
jquery
// Bar Chart Animation
function barChart(){
$("#demographicsBars li .bar").each( function( key, bar ) {
var percentage = $(this).data('percentage');
$(this).animate({
'height' : percentage + '%'
}, 1000, function() {
$('.viewerDemographics #demographicsBars li .bar').css('overflow','inherit');
});
});
};
// Scroll Call Animation
$(window).scroll(function () {
$('.viewerDemographics').each(function () {
var imagePos = $(this).offset().top;
var imageHeight = $(this).height();
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
barChart();
} else {
}
});
});
jsfiddle
It's because you're asking it to.
http://jsfiddle.net/g6r1vngh/1/
Tell JS it hasn't been drawn
// Bar Chart Animation
var barChartDrawn = false;
Set it to true when it runs
function barChart(){
barChartDrawn = true;
Don't do any of those calculations, or run the function, if it's true
$(window).scroll(function () {
if (barChartDrawn) return;
My question is if anybody knows what to change in the following js file to always show submenu on the vertical menu , meaning to show the submenu on page load and stay shown whether i hover on it or not, in clear make it part of the vertical menu and not an hidden sub menu that you have to hover on the parent category to access.
What do i need to change in the following code to acomplish that, :
Thanks in advance guys !
* DC Vertical Mega Menu - jQuery vertical mega menu
* Copyright (c) 2011 Design Chemical
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
(function($){
//define the new for the plugin ans how to call it
$.fn.dcVerticalMegaMenu = function(options){
//set default options
var defaults = {
classParent: 'dc-mega',
arrow: true,
classArrow: 'dc-mega-icon',
classContainer: 'sub-container',
classSubMenu: 'sub',
classMega: 'mega',
classSubParent: 'mega-hdr',
classSubLink: 'mega-hdr',
classRow: 'row',
rowItems: 3,
speed: 'fast',
effect: 'show',
direction: 'right',
menubg: '0',
menufixwidth: '0',
menufixheight: '0'
};
//call in the default otions
var options = $.extend(defaults, options);
var $dcVerticalMegaMenuObj = this;
//act upon the element that is passed into the design
return $dcVerticalMegaMenuObj.each(function(options){
$mega = $(this);
if(defaults.direction == 'left'){
$mega.addClass('left');
} else {
$mega.addClass('right');
}
// Get Menu Width
var megaWidth = $mega.width();
// Set up menu
$('> li',$mega).each(function(){
var $parent = $(this);
var $megaSub = $('> ul',$parent);
if($megaSub.length > 0){
$('> a',$parent).addClass(defaults.classParent).append('<span class="'+defaults.classArrow+'"></span>');
$megaSub.addClass(defaults.classSubMenu).wrap('<div class="'+defaults.classContainer+'" />');
var $container = $('.'+defaults.classContainer,$parent);
if($('ul',$megaSub).length > 0){
$parent.addClass(defaults.classParent+'-li');
$container.addClass(defaults.classMega);
// Set sub headers
$('> li',$megaSub).each(function(){
$(this).addClass('mega-unit');
if($('> ul',this).length){
$(this).addClass(defaults.classSubParent);
$('> a',this).addClass(defaults.classSubParent+'-a');
} else {
$(this).addClass(defaults.classSubLink);
$('> a',this).addClass(defaults.classSubLink+'-a');
}
});
$('> li li',$megaSub).each(function(){
if($('> ul',this).length){
$(this).addClass('mega-sub3'); //rajib
$('.mega-sub3 ul').addClass("show3div");
}
});
} else {
$container.addClass('non-'+defaults.classMega);
if(defaults.menubg==1){
var catimages =$('.non-'+defaults.classMega).closest("li").attr('id');
catimages = catimages.replace(/\s+/g, '-').toLowerCase();
$('.non-'+defaults.classMega).css('background','#333 url(modules/leftmegamenu/bgimages/'+catimages+'.gif) no-repeat right bottom');
}
}
}
var $container = $('.'+defaults.classContainer,$parent);
var subWidth = $megaSub.outerWidth(true);
var subHeight = $container.height();
if(defaults.menufixwidth>0){
var subWidth = defaults.menufixwidth;
}
if(defaults.menufixheight>0){
var subHeight = defaults.menufixheight;
}
var itemHeight = $parent.outerHeight(true);
// Set position to top of parent
$container.css({
height: subHeight+'px',
width: subWidth+'px',
zIndex: '1000'
}).hide();
});
// HoverIntent Configuration
var config = {
sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
interval: 10, // number = milliseconds for onMouseOver polling interval
over: megaOver, // function = onMouseOver callback (REQUIRED)
timeout: 0, // number = milliseconds delay before onMouseOut
out: megaOut // function = onMouseOut callback (REQUIRED)
};
$('li',$dcVerticalMegaMenuObj).hoverIntent(config);
function megaOver(){
$(this).addClass('mega-hover');
var $link = $('> a',this);
var $subNav = $('.sub',this);
var $container = $('.sub-container',this);
var width = defaults.menufixwidth;
var outerHeight = $container.outerHeight();
var height = defaults.menufixheight;
var itemHeight = $(this).outerHeight(true);
var offset = $link.offset();
var scrollTop = $(window).scrollTop();
var offset = offset.top - scrollTop
var bodyHeight = $(window).height();
var maxHeight = bodyHeight - offset;
var xsHeight = maxHeight - outerHeight;
if(defaults.menubg==1){
var catimages =$(this).closest("li").attr('id');
catimages = catimages.replace(/\s+/g, '-').toLowerCase();
$container.css({
background: '#333 url(modules/leftmegamenu/bgimages/'+catimages+'.gif) no-repeat right bottom'
});
}
if(xsHeight < 0){
var containerMargin = xsHeight - itemHeight;
$container.css({marginTop: containerMargin+'px'});
}
var containerPosition = {right: megaWidth};
if(defaults.direction == 'right'){
containerPosition = {left: megaWidth};
}
if(defaults.effect == 'fade'){
$container.css(containerPosition).fadeIn(defaults.speed);
}
if(defaults.effect == 'show'){
$container.css(containerPosition).show();
}
if(defaults.effect == 'slide'){
$container.css({
width: 0,
height: 0,
opacity: 0});
if(defaults.direction == 'right'){
$container.show().css({
left: megaWidth
});
} else {
$container.show().css({
right: megaWidth
});
}
$container.animate({
width: width,
height: height,
opacity: 1
}, defaults.speed);
}
}
function megaOut(){
$(this).removeClass('mega-hover');
var $container = $('.sub-container',this);
$container.hide();
}
});
};
})(jQuery);
$(document).ready(function($){
// menu slide hoverIntend
$('#rajbrowsecat').hoverIntent({
over: startHover,
out: endHover,
timeout: 1000
});
function startHover(e){
$('#rajdropdownmenu').slideDown(200)
}
function endHover(){
$('#rajdropdownmenu').slideUp(600)
}
// menu slide hoverIntend
$('#rajmegamenu').dcVerticalMegaMenu({
rowItems: '5',
speed: 'fast',
effect: 'slide',
direction: 'right',
menubg: '1',
menufixwidth: '236',
menufixheight: '155'
});
});
UPDATE:
So i managed to do it by diabling all the code (with /*) related to hover effect from the line "// HoverIntent Configuration" to "// menu slide hoverIntend" and by twicking the css a bit for presentation , seemed to do the trick to always showing submenus but for those who are interested i also found a way by adding to the css the line "height:auto", that also seemed to work fairly nicely.
Anyway thanks guys for yor answers anyway , it's always nice to to know that we have a place you can turn to when we are stuck !
on window scrolling the Tooltip should appear correctly above/below/left/right of its parent.
Once I scrolled down on my Demo the position of the Tooltip brakes.
How can I calculate the y-offset of the parent and display the tooltip in the right position?
I'm nearly there, not sure what is missing.
http://fiddle.jshell.net/j7MWE/
$.fn.tooltip = function () {
var $el = $(this);
var $w = $(window);
var timer;
var delay = 500;
$el.mouseenter(function (e) {
timer = setTimeout(function () {
var $c = $(e.currentTarget);
var $tt = $('<div class="tooltip fade right"><div class="arrow"></div><h3 class="popover-title" style="display: none;"></h3><div class="popover-content"><article class="default"><h1>Anchorman 2: The Legend Continues</h1><ul><button>£10.99 Buy</button><button>£3.49 Rent</button><p>Hilarious comedy sequel starring Will Ferrell and Steve Carell.</p></article></div></div>').appendTo($(e.currentTarget).closest('.item')).fadeIn(300);
$tt.toggleClass('horiz-offscreen', $w.width() < $tt.outerWidth() + $tt.offset().left);
if ($w.height() < $tt.outerHeight() + $tt.offset().top) {
$tt.css('top', $w.scrollTop() + $w.height() - $c.position().top - $tt.outerHeight());
}
}, delay);
});
$el.mouseleave(function (e) {
$('.tooltip', e.currentTarget).fadeOut(500, function () {
$(this).remove();
});
clearTimeout(timer);
});
};
$('.item').tooltip();
its old but it can helps,
to calculate that you can use this:
$tt.css('top', abs($c.position().top - $w.scrollTop() - $tt.outerHeight()) );
$c.position().top the element distance from top
$w.scrollTop() scrolled value
$tt.outerHeight() your tooltipheight
and than we do some Maths and get the absolute value
I am fairly new to Javascript and would like to create a div whereby it allows a person to define points on it by clicking on the area within the div. An image will be added to represent the point clicked. Thereafter, if the person wants to remove this point, upon clicking on the image, it should be remove.
I have done the part whereby it allows a person to define the points based on a minor modification to an existing fiddle: http://jsfiddle.net/uKkRh/1/
Reference: jquery how to add pin to image and save the position to SQL
I also manage to remove all the images by click on the button.
However, I am still short of how to remove the image from the div when the person clicks on the image.
I have tried the following:
$('#container >img').click(function() {
var selectedImg = $(this);
selectedImg.remove();
return;
});
but it works itermitently.
Please see my JSfiddle for my sample. http://jsfiddle.net/WindSaviour/rUNsJ/19/
var point = [];
var id = 0;
$(document).ready(function() {
var output = $('#container');
$("#container").click(function(e) {
e.preventDefault();
var isPointPresent = false;
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
console.log("Mouse Click Pos (x=" + x + ", y=" + y + ")");
for(var i=0; i< point.length; i++) {
if(x >= point[i].min_x && x<=point[i].max_x) {
if(y >= point[i].min_y && y<=point[i].max_y) {
isPointPresent = true;
point.splice(i,1);
break;
}
}
}
point[point.length] = { "x-pos": x, "y-pos":y, "min_x": x-25, "max_x": x+25, "min_y": y-83, "max_y": y};
if(isPointPresent) {
$('#container >img').click(function() {
var selectedImg = $(this);
selectedImg.remove();
return;
});
}
var img = $('<img>');
var left = x-25;
var top = y-83;
console.log("Img Start Pos (x=" + left + ", y=" + top + ")");
img.css('top', top);
img.css('left', left);
img.attr('src', 'http://www.clker.com/cliparts/P/w/G/0/N/o/google-map-th.png');
img.attr('id', id);
img.appendTo('#container');
/*
*/
id++;
})
});
$('#remove').click(function() {
$('#container > img').remove();
});
Try this http://jsfiddle.net/uKkRh/635/, but you need a newer verion of jQuery
$('#container').on('click', 'img', function (e) {
e.stopPropagation();
$(this).remove();
});