I have a very simple looking image of different coloured bars which 'fan' left to right, a bit like the choc bars here:
http://www.lifeafterbagels.com/blog/wp-content/uploads/2012/05/Fanned-Bars.jpg
I want to turn into each bar into individual buttons with tooltip 'pop-ups' and colour changes when the cursor hovers over them. Very much like this image map:
http://winstonwolf.pl/clickable-maps/europe.html
I have looked at the map source code and it doesn't really help me, but from searching on this forum it looks like I need to use x and y coordinates to determine the area that would be 'clickable'. Is this correct?
I found some code which allowed me to create a transition between 2 images, which is great, but when the image is not a simple square inside a square div I run into trouble. This is the code for the simple transition:
jQuery(document).ready(function(){
jQuery("img.a").hover(
function() {
jQuery(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
jQuery(this).stop().animate({"opacity": "1"}, "slow");
});
});
and the CSS:
![div.fadehover {
position:relative;
}
img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
img.b {
position: absolute;
left: 0;
top: 0;
}][2]
Any help to point me in the right direction would be much appreciated!
Thanks
J
To elaborate on the comment, this JS fiddle may be how you could rotate your images and set click/hover events for them.
http://jsfiddle.net/pSPX6/
Doing it this way will mean that you don't need to get into mouse coordinates yourself, just let jQuery/JavaScript sort them out for you! :)
As for the tooltip, you could always position it based on the parameters given to you in the hover event, the parameters passed to this events should contain the x and y coordinates of the mouse which you can then use to position the tooltip. For more info on the hover event I've used, see the jQuery documentation: http://api.jquery.com/hover/
Hope this helps!
Let me know if you want more clarification!
Related
I'm trying to offset a block with title and description above a picture by the height of the description content. Consider this picture:
Both titles should be visible by default but on hover description should slide up. I don't know the exact height of the slide, because the length of the content may change. I cannot find the correct offset even with js on page load because it seems incorrect, I assume due to fonts loading a little too slow, thus changing the height of content after page load complete.
I can change the HTML as I need, so I tried separating upper and lower content like so:
<div style="background-image: url(https://via.placeholder.com/175x175)">
<div class="wrapper">
<div class="team-meta">
<div class="block-title"><p>TITLE PRESIDENT</p></div>
<div class="team-name">TITLE PRESIDENT</div>
</div>
<div class="team-description">On Hover, darken overlay and add a brief one sentence description of the person if desired.</div>
</div>
</div>
And adding these styles:
.team-meta {
position: absolute;
bottom: 0; /*always at the very bottom of the block*/
}
.team-description {
position: absolute;
top: 100%; /*always right below the block*/
}
This way on page load the description is hidden by default, but now it is difficult to display it on hover. I have to calculate the following:
For description: top: [height of parent] - [height of the description]
For title: bottom: [height of the description]
Which is quite inconvenient. I have a feeling there should be a trick to make all this much easier and possibly in many less steps.
I achieved something with the following code, which is a disaster, by the way:
document.querySelectorAll('.team-container').forEach((e) => {
anime({
targets: e.querySelector(".team-description"),
top: e.querySelector('.wrapper').offsetHeight - e.querySelector('.team-description').offsetHeight + "px"
});
anime({
targets: e.querySelector(".team-meta"),
bottom: e.querySelector('.team-description').offsetHeight + "px"
});
});
I experience an issue here, because the animejs seems to incorrectly convert 100% into the PX value when animating the transition and the block seems to come from the top, instead of the bottom, where it originally was.
I feel like this issue can be trivially solved, but I don't see a way out yet.
I guess it was my fail, or I am not sure what happened. But the script below suddenly returns the correct value for offsetHeight. So using a container I managed to manipulate the whole block using a single animation of margin. Now it simply makes sense!
I still have a feeling this could be done without JS intrusion, but I couldn't figure it out.
(function () {
document.querySelectorAll('.team-container > div').forEach((e) => {
let offset = e.querySelector('.team-description').offsetHeight;
e.querySelector(".team-card").style.marginBottom = -offset + "px";
}
}());
I'm trying to implement script to have a div block follow my mouse, then animate it when hovering over certain links. The problem is when transforming it on hover of any objects, it starts to flash and become finicky.
Codepen: https://codepen.io/grayghostvisuals/pen/kepDb/
var $circle = $('.circle');
function moveCircle(e) {
TweenLite.to($circle, 0.7, {
css: {
left: e.pageX,
top: e.pageY
}
});
}
$(window).on('mousemove', moveCircle);
Any ideas?
It seems to be a z-index issue. Hover will try to check if your mouse is above your element, but it will be hovering the circle following your mouse. This pen shows how it works if you use a negative z-index for the circle, too.
You can however make your browser ignore the pointer events for the circle, removing the problem all together. I changed your pen to add the solution.
.element {
pointer-events: none;
}
I'm wanting to write my own image zoom JS code (similar to http://www.elevateweb.co.uk/image-zoom/examples#inner-zoom) but the issue with this and all the other plugins is that it's relying on img tags whereas I want to use background images to give the same effect.
I have created a jsFiddle of where I am up to but I'm having issues trying to re-create the mouse movement. I thought, when you hover, it could scale the background image (or replace the url src via JS with a larger image) but I can't work out how to follow the edges of the image/container rather than the image follow the pointer.
https://jsfiddle.net/x69tk48s/
$('.inner').mousemove(function(e) {
$('.each-image .bg').offset({
left: e.pageX,
top: e.pageY
});
});
$('.inner').on('mouseleave', function() {
$('.each-image .bg').css({
left: 0,
top: 0
});
});
Any thoughts?
The math isn't quite right (yet) but here is a rough idea of how you can accomplish it: https://jsfiddle.net/3cebzudv/2/ (start by mousing-in in the top left corner to get the rough idea).
Basically, just scale the background image up on mouseenter and then reposition it with the backgroundPosition property on mousemove.
I have Farbtastic in a form with many color inputs.
I want the color wheel to stay fixed in the window, son I can scroll through the form maintaining the wheel in the same place.
I tried css position:fixed, but it alters the coordinates system of the picker, so picking colors is impossible.
Any ideas? other color pickers pops from the click, but I do not know if it can be done with Farbtastic because of the coordinates system.
Regards:
Migue
You have the solution here : http://code.google.com/p/farbtastic/issues/detail?id=3
Line 163 your must add this with your #elementId:
pos.x -= + $('#elementId').scrollLeft();
pos.y -= + $('#elementId').scrollTop();
This problem has a solution. Just upload fixed and minified version (4kB) of the .js file:
http://image2love.com/js/farbtastic2.js
and put your colour picker where you like:
#picker {
z-index: 5; position: fixed; top: 100px; right: 100px;
}
I've been also searching for the solution for some time when I finally came across the solution.
im trying to move the div according to mouse event and direction, i mean to move the div in the same direction, in which moves the mouse, but for the movement of div there will be limits. so far i have this:
$("#foo").mousemove(function(event) {
$("#bee1").animate({"left": "150px"}, 2000)
});
and css:
#bee1 { position:absolute; top:200px; left:160px; }
now the div moves just in one direction, after the mouse is moved, and stops. but i want it to be moved in the way moves mouse, in the same direction )) how do i do it?!
Thank you all for help!
I think you are looking for this
Working demo
$("#foo").mousemove(function(event) {
$("#bee1").stop().animate({left: event.pageX, top: event.pageY}, 300)
});
See http://www.thinqlinq.com/Post.aspx/Title/Select-Many-with-Rx-and-RxJs for an example using RxJs.
You can extract event.pageX and event.pageY every time mousemove is triggered. By storing these as global variables and comparing them to subsequent values, you can compute exactly what direction the mouse has been moved in and how far.
http://api.jquery.com/event.pageX/
Take the difference between the new and old values and feed them back directly into .animate if you like.