I have this markup.
<div class="row">
<div class="col-md-4">
<img src="imgsrc.jpg" />
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="imgsrc.jpg" />
</div>
</div>
With .col-md-4 has relative position, when I try to attach mouseover event to the .col-md-4 and get position of its offset it's return wrong offset for second .col-md-4 in second row. Here is the script
$('.col-md-4').hover(function(){
var offset = $(this).position();
var height = $(this).height();
console.log(offset); // this gives the wrong offset when hovering over second col-md-4 in second row
$('#shadow2').stop(true, true).animate({
'left': offset.left,
'top': offset.top + height + 10
});
}, function(){
$('#shadow2').animate({
'left': '-350px'
});
});
try using .offset(), it gives position of element relative to document, change
var offset = $(this).position();
to
var offset = $(this).offset();
Update::
$('.col-md-4').hover(function(){
var childPosition = $(this).offset();
var parentPosition = $(this).parent().offset();
var actualOffset = {
top: childPosition.top - parentPosition.top,
left: childPosition.left - parentPosition.left
}
var height = $(this).height();
console.log(offset);
$('#shadow2').stop(true, true).animate({
'left': actualOffset.left,
'top': actualOffset.top + height + 10
});
....
Related
Outline
My intention is for the user to hover over an image, and an overlaying div with reduced opacity will appear over the top of it. The overlaying laying div has a height of 0px and when hovered it should increase the height value to exactly half of the image height.
The hover function is working but I think this line is wrong:
EDIT
After trying to log the curHeight variable (which was 'undefined') i think this line must be creating the issue:
var curHeight = landingImg.clientHeight;
HTML:
<div id="landing-images">
<div class="leftLanding">
<div class="imageCover">
</div>
<img class="landingImage" src="assets/landingIMG1.png">
</div>
<div class="rightLanding">
<div class="imageCover">
</div>
<img class="landingImage" src="assets/landingIMG1.png">
</div>
</div>
JS:
$(".landingImage").hover(function () {
console.log("hover works");
var landingImg = $(this);
var curHeight = landingImg.clientHeight;
$(this).closest('.imageCover').css("height", curHeight / 2);
}, function () {
$(this).closest('.imageCover').css("height", "0px");
});
You should use .siblings() instead and you must add width to div or it won't show, and use .height() and .width() to get the height and the width of the image
$(".landingImage").hover(function () {
var landingImg = $(this);
var curHeight = landingImg.height();
var curWidth = landingImg.width();
$(this).siblings('.imageCover').css("height", curHeight / 2);
$(this).siblings('.imageCover').css("width", curWidth);
}, function () {
$(this).siblings('.imageCover').css("height", "0px");
$(this).siblings('.imageCover').css("width", "0px");
});
.leftLanding,
.rightLanding {
position: relative;
}
.imageCover {
background: green;
position: absolute;
top: 0;
z-index: 111;
opacity:.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="landing-images">
<div class="leftLanding">
<div class="imageCover">
</div>
<img class="landingImage" src="https://www.w3schools.com/css/img_fjords.jpg">
</div>
<div class="rightLanding">
<div class="imageCover">
</div>
<img class="landingImage" src="https://www.w3schools.com/css/img_fjords.jpg">
</div>
</div>
.clientHeight is a DOM property.
Change
var curHeight = landingImg.clientHeight;
To
var curHeight = landingImg.height();
Or
var curHeight = this.clientHeight;
I have been tring to set img at same position as another using jquery .position() and .css()
Here is the code:
function setImgsToSamePosition() {
var position = $('#img1').position();
$('#img2').css({ 'left': position.left + 'px', 'top': position.top + 'px' });
$('#img3').css({ 'left': position.left + 'px', 'top': position.top + 'px' });
}
$(document).ready(function () {
// Set imgs pos to be equal to img1 pos
setImgsToSamePosition();
})
Any thoughts?
You can overlap images this way. I set the position to fixed then set the left and top values for both other images. I'm not entirely sure why'd you want this; so, if it's not the desired result, just comment.
function setImgsToSamePosition() {
var position = $('#img1').position();
$('#img2, #img3').css({ 'left': position.left + 'px', 'top': position.top + 'px' });
}
$(document).ready(function () {
// Set imgs pos to be equal to img1 pos
setImgsToSamePosition();
})
img {
width:100px;
height:100px;
border:1px solid black;
}
#img1, #img2, #img3 {
position:fixed;
}
#img1 {
left:50px;
top:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="img1" src="http://neil.computer/stack/bg.jpg" />
<img id="img2" src="http://neil.computer/stack/bg2.jpg" />
<img id="img3" src="http://neil.computer/stack/bg3.jpg" />
For the translation of an element to work in this way
position: relative;
left: 20px;
I dont exactly know what ur upto but i just corrected your code.
$(function(){
var position = $('#img1').position();
var x = $("#img2").position();
$("#pos").text("top: "+x.top+" "+"left: "+x.left);
$('#img3').css({ 'left': x.left + 'px', 'top': x.top + 'px' });
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<img src="https://www.w3schools.com/css/img_fjords.jpg" id="img1" style="height:100px;width:100px;"/>
<img src="https://www.w3schools.com/howto/img_mountains.jpg" id="img2" style="height:100px;width:100px;"/>
<p id="pos"></p>
</body>
</html>
Im trying to make autoscroll when user cursor reach almost end of viewport.
I wrote the code below but it works only once, meaning the first time the user close to the bottom it autoscroll 300px down and stop.
how can I make it go down as long as the user is at the end of viewport?
and why it only works once?
$(window).mousemove(function (e) {
var currposition = currentYPosition() + 800;
var MouseY = event.clientY;
if (MouseY > currposition-100) {
//Down
$('html, body').animate({
scrollTop: 300 // adjust number of px to scroll down
}, 1000);
}
});
You can use this simple code
$(".autoScrollBox").mousemove(function(e){
var clientY = e.clientY;
var boxHeight = $(this).height();
var contentHeight = $(".autoScrollBox")[0].scrollHeight;
var mousePositionProportion = clientY / boxHeight;
var scrollTop = mousePositionProportion * (contentHeight - boxHeight);
//// Top
if (clientY < boxHeight / 2)
scrollTop -= 50;
//// Bottom
else if (clientY > boxHeight - (boxHeight / 2))
scrollTop += 50;
$(".autoScrollBox").scrollTop(scrollTop);
});
.autoScrollBox {
height: 150px;
overflow-y: hidden;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="autoScrollBox">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p>20</p>
</div>
See better example in JSFiddle
$(document).ready(function() {
var mouseX;
var mouseY;
$(document).mousemove(function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
$("#maincontainer").mousemove(function() {
// $('#DivToShow').css({'top':mouseY,'left':mouseX}).fadeIn('slow');
$('#DivToShow').html("Y " + mouseY + " --- " + "X " + mouseX);
if (mouseY > 230) {
$('html, body').animate({
scrollBottom: $elem.height()
}, 800);
}
});
});
pls help, I am trying to make a auto page up and down scroll based on pointer position. when pointer coming to bottom of browser, page need to scroll down 60px ++. not a single scroll to end of page.
Try this solution.
On mousemove, get the clientY and the window height. If the difference is less than 60, then scroll 60 more than the current scrollTop:
$(document).on('mousemove', function(e) {
var y = e.clientY;
var h = $(window).height();
var n = h - y;
if (n < 60) {
var t = parseFloat($(window).scrollTop());
console.log(t);
$('html,body').animate({scrollTop:t + 60 + 'px'},200);
} else {
$('html,body').stop();
}
});
#wrapper,
.section {
width:100%;
float:left;
}
.section {
height:80px;
border:1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
<script>
$(document).ready(function(e) {
$(function(){
$( "#draggable" ).draggable({
containment: "#box",
drag: function(){
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
$('#posX').val('x: ' + xPos);
$('#posY').val('y: ' + yPos);
}
});
});
});
</script>
<style>
body{margin:0;}
#draggable{width:100px; height:100px; background:red;}
#box{width:500px; height:500px; border:solid 1px #000; margin:100px;}
</style>
<div id="box">
<div id="draggable"></div>
</div>
<input id="posX" type="text" />
<input id="posY" type="text" />
I have a div use jQuery draggable and detect the position.
My question is how can I get the offset position according to the containment $('#box'), not according to the document?
As the draggable element is appended to the body, it's not really inside the #box element at all when dragged, so you have to subtract the position of the containing element, and in your case the border as well, to get the right values
$(function(){
var box = $('#box').offset(),
border = parseInt($('#box').css('border-width').replace(/\D/g,''), 10);
$( "#draggable" ).draggable({
containment: "#box",
drag: function(){
var offset = $(this).offset();
var xPos = offset.left - box.left - border;
var yPos = offset.top - box.top - border;
$('#posX').val('x: ' + xPos);
$('#posY').val('y: ' + yPos);
}
});
});
FIDDLE