Is there a simple cross-browser css3 solution to altering the mouse cursor to a clear right/ left graphic according to the mouse position within a div? Or is this a JQuery plugin job?
As in the mouse reaction in the carousel area in this http://themeforest.net/item/flamingo-agency-freelance-portfolio-theme/full_screen_preview/6077145
You can use the :hover selector with the cursor property to do this. Make two fixed, transparent elements for each half of the page to use with :hover, and specify a custom cursor image by assigning cursor a URL. No JS required...
With JS programatically make a div follow the hidden cursor.
See example:
<div class="main_area">
...
...
...
</div>
<!--
// The html:
-->
<div id="custom_cursor">HELLO</div>
<!--
// The script uses jQuery
-->
<script type="text/javascript">
$(document).ready(function(){
var $area = $('.main_area').css({
'cursor':'none'
}),
$myCursor = $('.custom_cursor').css({
'position': 'fixed',
'z-index': '999'
})
if ($myCursor.lenght){
$area
.on('mouseout.customCursor', function(){
$myCursor.hide()
})
.on('mousemove.customCursor', function(event){
$myCursor.show().css({
'left': event.clientX - 20,
'top': event.clientY + 7
})
})
}
});
</script>
Related
I want to change the position of div according to offset ie top, bottom, left, right is it possible ?
i have tried some jquery but it is not working
$(document).ready(function(){
var offset = $("#myPopup").offset();
$('#popup').css('left',offset.left);
$('#popup').css('top',offset.top);
});
<div id="myPopup"> popup</div>
I am guessing that you did not use a position type in your style. I've put it in your jQuery for easy test, but you better put that in a css...
$(document).ready(function(){
var offset = $("#myPopup").offset();
$('#popup').css('position','relative');//or absolute.
$('#popup').css('left',offset.left);
$('#popup').css('top',offset.top);
});
<div id="myPopup"> popup</div>
I am new in javascript. I am trying to add animation in my code. Something like, when I mouse hover on a section the ABC should appear and move from right to left and when I remove the mouse from the section it should disappear.
I have implemented the appear disappear part but how to add the animation? Please share with me if anyone has any idea.
My codes are below:
<head>
<script src="/assets/bootstrap.min.js"></script>
<script type="text/javascript">
window.onload=hide_fostering;
function show_fostering()
{
document.getElementById('fostering').style.visibility="visible";
}
function hide_fostering()
{
document.getElementById('fostering').style.visibility="hidden";
}
</script>
</head>
<html>
<body>
<section onMouseOver="show_fostering()" onMouseOut="hide_fostering()">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<h1><strong>CONNECTING</strong></h1>
</div>
</div>
<div class="col-sm-6">
<div class="row pad-top4" id="fostering">
<h3>ABC</h3>
</div>
</div>
</div>
</section>
</body>
</html>
Use a JavaScript animation library such as TweenJs, alternatively use the jquery animate() method.
$('#selector').on('click', function(){
$('div').animate({
height : 500px;
});
});
This will animate all divs when #selector will be clicked.
See http://www.w3schools.com/jquery/eff_animate.asp for a tutorial on jqueryanimate() method.
To do this on mouse hover, use this :
$('div').on('mouseover', function(){
$(this).animate({
height : 500px;
});
});
This will animate the div which is being hovered on by mouse.
Jquery animate() method is used to animate any CSS animation. So you can animate any CSS property. If you want to animate other properties of CSS, then just replace height : 500px with those CSS rules.
For your purpose, use this :
(I have written for visibility part as well, because the code written by you will not work properly. It will check whether your mouse pointer is on top of #fostering, immediately when the page loads. So delete that part.)
$('#fostering').on('mouseover', function(){
$(this).animate({
visibility : "visible",
left : "500px"
});
});
$('#fostering').on('mouseout', function(){
$(this).animate({
visibility : "hidden",
left : "-=500px"
});
});
You will have to change the value of position property of CSS in order to animate left property in the above code, otherwise it won't work. To do this, use the following CSS :
#fostering {
position : relative;
}
This question already has answers here:
jQuery/JavaScript collision detection
(7 answers)
Closed 8 years ago.
I have a button, and two HTML elements. After pressing the button, i called animate function from j query to start moving the first element to right and let two HTML elements get touched.
How i will detect that two HTML elements get touched?
Need Help. Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").animate({
left:'250px',
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<div id = "div1" style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
<div id = "div2" style="background:#98bf21;height:100px;width:100px;position:absolute;left:50%;right:50%">
</div>
</body>
</html>
Your elements won't ever touch, because your selector $('div') which you are animating will animate both divs and move them both by the same amount. They will end up the same distance apart.
Also, you can't use <div2> as a tag name. Instead, use an id attribute to assign them a unique name, like this:
<div id="div1"></div>
<div id="div2"></div>
Then instead of animating $('div'), animate $('#div1').
You can first get the `left` position of `#div2` in pixels and use that value to animate the `right` position of `#div1` to exactly that spot, like this:
$(document).ready(function(){
// when the buttom is clicked
$('button').click(function(){
// get the left position of div2
var div2Left = $('#div2').position().left
// animate so that the right side of div1 matches div2's left
$('#div1').animate({
'right': div2Left + 'px',
});
});
});
--EDIT--
I misread your question, I thought you were asking how to get them to touch. If you want to detect that they have overlapped, you can use the step function of the animation to check if the right side of div1 crosses the left side of div2. Try this:
$(document).ready(function(){
// when the buttom is clicked
$('button').click(function(){
// get the left position of div2
var div2Left = $('#div2').position().left
// animate so that the right side of div1 matches div2's left
$('#div1').animate({
'right': '250px',
}, {
// this is called every step of the animation
step: function(currentRightPos) {
// check if collision occurs
if (currentRightPos >= div2Left) {
console.log('The divs collided!');
}
}
});
});
});
I'm making a web application that uses Kinetic.js for some fancy
graphical functions, and I want to show a tooltip with some information about each element when the users hovers over it.
I've already figured out how to invoke a function on hover with Kinetic.js:
myKineticObject.on("mousemove", function() {
// Change content of tooltip depending on myKineticObject
// Set position of tooltip to cursor position
// Show tooltip
});
myKineticObject.on("mouseout", function() {
// Hide tooltip
}
I've decided to use the seemingly nice Opentip to show the tooltip.
The only problem is that Kinetic.js doesn't create any usable DOM elements to use as a target for opentip.
This is (roughly) what my HTML looks like:
<html>
<head><!-- Styles --></head>
<body>
<div id="container">
<canvas class = "kineticjs-buffer-layer">
<canvas class = "kineticjs-path-layer">
<canvas class = "myLayer1">
<canvas class = "myLayer2">
<!-- ... more layers -->
</div>
<!-- Scripts -->
</body>
</html>
Important to know is that these canvas elements all have the same width and height and stack on eachother. So they're unusable as targets.
So instead of using a DOM element to use as the target for my tooltip, I need to
manually show/hide and position the tooltip.
I've figured out how to do the showing and hiding like this:
var tooltip = new Opentip(
"div#container", //target element
"DummyContent", // will be replaced
"My Title", // title
{
showOn: null, // I'll manually manage the showOn effect
});
I now do the following:
myKineticObject.on("mousemove", function() {
tooltip.show();
});
myKineticObject.on("mouseout", function() {
tooltip.hide();
}
The only problem is that it just shows up at the top left of the page, and I can't find anything in the docs on how to position this thing manually.
Suggestions or ideas welcome. I'm also open to using a different tooltip library, if necessary.
Thanks!
It appears (with no knowledge of Opentip, besides a quick look at the docs) that you can set 'fixed' to true in the config. Since the target is null, the docs suggest fixed=true should make the tooltip appear at the mouse position, but not follow it once the mouse is moved around.
How does that sound?
I managed to solve the problem like this, for those of you who are looking for a solution too:
group.on("mousemove", function(event) {
tooltip.content = //change content
tooltip.show();
$("#opentip-1").offset({ left: event.offsetX, top: event.offsetY });
});
I am trying to make a custom jQuery drag and drop function for a project of mine.
The problem I'm having is that when dragging on element it is put between the mouse and the drop region and I can't find a decent way of detecting the hover over the drop region through the dragging element without it being offset slightly.
$(window).mousemove(function (event) {
$('.element').css({
'left' : event.pageX-30 + 'px',
'top' : event.pageY-30 + 'px'
});
});
The above code moves a simple <span> to match the mouse position.
$('.dropregion').hover(function () {
console.log('hover');
}, function () {
console.log('unhover');
});
This is the simple hover detection that I am used to with jQuery.
You could try disabling mouse events on the span using css which should render it transparent to the mouse and allow hover to activate under the span
CSS:
.element {pointer-events:none}
Reference:
https://developer.mozilla.org/en-US/docs/CSS/pointer-events