My question is - Writing a page containing a small square,every time user brings the cursor close to the box, the box must move away from the mouse pointer. Finally when the box reaches the corner of the page, it should display a message.
So far, I have animated the box from INITIAL to last position on the screen. How to revert it back to original position, with an alert message??
$(document).ready(function() {
var x = $(window).width();
var y = $("#div2").width();
$("#div2").mouseover(function(){
for (var i = y ; i <= x ; i++) {
$("#div2").animate({
left: 100 + "px"
});
}
});
});
#div2 {
top: 100px;
/*left: 100px;*/
height: 100px;
width: 100px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div2" style="position: relative;"></div><br>
$(document).ready(function() {
var x = $(window).width();
var y = $("#div2").width();
var left = 0;
$("#div2").mouseover(function(){
left+= 100;
if(left <= x ){
$("#div2").animate({
left: left + "px"
});
} else {
alert('Back to original');
$(this).css('left', '0');
left=0; //this should be their else it will alert many times...
}
});
});
#div2 {
top: 100px;
/*left: 100px;*/
height: 100px;
width: 100px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div2" style="position: relative;"></div><br>
i i=529(window width=531) for quick out put initialize i=y then if it reaches end it will be moved to left:opx
you said you already made it to move to last and your mistake is you didn't assign i in left.
$(document).ready(function() {
var x = $(window).width();
var y = $("#div2").width();
$("#div2").mouseover(function(){
for (var i = 529 ; i <= x ; i++) {
$("#div2").animate({
left: i+"px"
});
}
alert("reached");
$("#div2").animate({
left: "0px"
});
});
});
#div2 {
top: 100px;
/*left: 100px;*/
height: 100px;
width: 100px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div2" style="position: relative;"></div><br>
Is this what you wanted?
$(document).ready(function() {
var x = $(window).width();
var y = $("#div2").width();
var left = 0;
$("#div2").mouseover(function(){
left+= 100;
if(left <= x ){
$("#div2").animate({
left: left + "px"
});
} else {
alert('Back to original');
$(this).css('left', '0');
left = 0;
}
});
});
#div2 {
top: 100px;
/*left: 100px;*/
height: 100px;
width: 100px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div2" style="position: relative;"></div><br>
First of all you don't need a loop to animate element to relative position, just use '+=100px' notation. You could also calculate element's next position to prevent if from overflow the window. Check this snippet.
$(document).ready(function() {
var vw = $(window).width();
var $el = $('#div2');
var width = $el.width();
var direction = 1;
var defaultAmount = 100; // Default travel distance
var amount = defaultAmount;
$el.mouseover(function() {
var changeDir = false;
// Check if element will be out of range
if (isOutOfRange() && direction === 1) {
alert('Will be at the end, will reverse')
amount = vw - $el.offset().left - width;
changeDir = true;
}
if (isAtBeginning() && direction === -1) {
alert('Will be at the beginning, will reverse')
amount = $el.offset().left;
changeDir = true;
}
$el.animate({
left: direction === 1 ? '+=' + amount + 'px' : '-='+ amount + 'px'
});
// Change direction to opposite if ellement is at the edge
if (changeDir) direction = direction * -1;
// Return to default
amount = defaultAmount;
});
function isOutOfRange() {
return width + amount + $el.offset().left >= vw;
}
function isAtBeginning(){
return $el.offset().left - amount <= 0;
}
});
#div2 {
top: 100px;
/*left: 100px;*/
height: 100px;
width: 100px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div2" style="position: relative;"></div><br>
Final Solution
$(document).ready(function() {
var direction=1;
var x = $(window).width();
var y = $("#div2").width();
var left = 0;
$("#div2").mouseover(function(){
if(left + y <= x )
{
left = left + direction*100;
$("#div2").animate({
left: left + "px"
});
}
else
{
alert("Moving Back!");
direction = -1;
left = left + direction*100;
$("#div2").animate({
left: left + "px"
});
}
if(left <= 0)
{
direction = 1;
left = left + direction*100;
alert("Moving Forward!!");
$("#div2").animate({
left: left + "px"
});
}
//$(this).css("left", "0");
});
});
Related
<html>
<div id="my_box_realtime" style="background-color: red; position: absolute; min-width: 100px; min-height: 100px"></div>
<script type="text/javascript">
var x = bottom
var y = right
var d = document.getElementById('my_box_realtime');
var position = 0;
setInterval(function() {}, 500)
position += 1;
d.style.top = position + 'px';
d.style.left = position + 'px';
function my_box_realtime() {
if (position)
}
</script>
</html>
The box needs to move smoothly and slowly to a set coordinate of bottom 0 and right 0.
Any help would be great. Very new to this and it's an assignment I have.
For your problem, we need to:
maintain top & left values separately
Check on Every Interval if the Boxes Bottom & Right have reached the Target Distance in relation to the window
Update the Top & Left Values if necessary
Finally, when the Box is at the Target Location, Clear the Interval.
var d = document.getElementById('my_box_realtime');
var x = 0; // Bottom Target in px
var y = 0; // Right Target in px
var positionTop = 0;
var positionLeft = 0;
let interval = setInterval(function() {
const {
bottom,
right
} = d.getBoundingClientRect();
const clientW = window.innerWidth;
const clientH = window.innerHeight;
if (clientH - bottom !== x) {
positionTop += 1;
d.style.top = positionTop + 'px';
}
if (clientW - right !== y) {
positionLeft += 1;
d.style.left = positionLeft + 'px';
}
if (right === clientW && bottom === clientH) {
clearInterval(interval);
}
}, 50);
<div id="my_box_realtime" style="background-color: red; position: absolute; min-width: 100px; min-height: 100px"></div>
I have an sticky footer which contains a clickable arrow that lets me click through the sections on my website, my only issue is that it does not disappear when the last section has been reached. I'm quite new to jQuery and JS and not sure how to execute something like this.
I've done some research and tried this with no luck:
document.onscroll = function() {
if (window.innerHeight + window.scrollY > document.body.clientHeight) {
document.getElementById('arrow').style.display='none';
}
}
Here is the rest of what I have:
<div class="scroller animated pulse infinite" id="arrow">
<i class="ion-md-arrow-dropdown"></i>
</div>
CSS:
.scroller {
height: 80px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: transparent;
box-shadow: 0 2px 2px #ddd;
z-index: 1;
}
.scroller i {
color: #fff;
-webkit-text-stroke: 1px #555;
font-size: 70px;
margin: 0 48.5%;
}
JS:
$(function(){
var pagePositon = -1,
sectionsSeclector = '.scrolling_section',
$scrollItems = $(sectionsSeclector),
offsetTolorence = 30,
pageMaxPosition = $scrollItems.length - 1;
//Map the sections:
$scrollItems.each(function(index,ele) { $(ele).attr("debog",index).data("pos",index); });
// Bind to scroll
$(window).bind('scroll',upPos);
//Move on click:
$('#arrow i').click(function(e){
if ($(this).hasClass('ion-md-arrow-dropdown') && pagePositon+0 <= pageMaxPosition) {
pagePositon++;
$('html, body').stop().animate({
scrollTop: $scrollItems.eq(pagePositon).offset().top - $('nav').height()
}, 2000);
}
});
//Update position func:
function upPos(){
var fromTop = $(this).scrollTop();
var $cur = null;
$scrollItems.each(function(index,ele){
if ($(ele).offset().top < fromTop + offsetTolorence) $cur = $(ele);
});
if ($cur != null && pagePositon != $cur.data('pos')) {
pagePositon = $cur.data('pos');
}
}
});
According to what I understand - you should first see iכ the footer section is visible and if so - hide the arrow, else - show the arrow
For that, this code should do the trick
$(window).scroll(function() {
var top_of_element = $('.footer-nav').offset().top;
var bottom_of_element = $('.footer-nav').offset().top + $('.footer-nav').outerHeight();
var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
var top_of_screen = $(window).scrollTop();
if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
$('#arrow').hide();
} else {
$('#arrow').show();
}
});
based on Jquery check if element is visible in viewport
So basically... as I scroll down a page, when it hits a certain point on the scroll, I want my button to scroll down the page to the bottom. Here is what I have so far.
I know the detection of when to do the action works because un-commenting out the alert works at the correct position. I need help with the button being scrolled down.
$(document).ready(function() {
$(window).scroll(function() {
var height = $(window).scrollTop();
if(height > 1000) {
//alert("hit part of page i want... works!");
$('#<%= btnFinish.ClientID %>').animate({ scrollTop: $(document).height() }, 500);
}
});
EDIT: HOW TO DO:
$(window).scroll(function() {
var d;
var i;
var top = $(window).scrollTop();
var windowHeight = $(window).height();
var docHeight = $(document).height()
var obj = $('#<%= btnFinish.ClientID %>');
var bottom = obj.position().top + obj.height();
if (top + windowHeight == docHeight && bottom <= 800) {
d = 0;
for(i = 410; i>=85; i=i-.1){
d += .15;
(function(ii,dd){
setTimeout(function(){
$('#<%= btnFinish.ClientID %>').css({ bottom: ii, right: 460 });
}, dd);
})(i,d);
}
} else if (top == 0 && bottom >= 801) {
d = 0;
for(i = 85; i<=410; i=i+.1){
d += .15;
(function(ii,dd){
setTimeout(function(){
$('#<%= btnFinish.ClientID %>').css({ bottom: ii, right: 460 });
}, dd);
})(i,d);
}
}
});
You can fix its position with CSS style.
style="position: fixed; bottom: 10px; right: 10px;"
And if you want to make it display after specific scroll then just show/hide that button after some scroll as per your convenient.
You can use CSS transition:
$( document ).ready( function () {
$( window ).scroll( function () {
var height = $( window ).scrollTop();
if ( height < 500 ) {}
if ( height > 1000 ) {
$('#test').css({ bottom: 10, right: 10 });
} else {
$('#test').css({ bottom: 170, right: 10 });
}
} );
} );
body {
position: relative;
height: 2000px
}
#test {
position: fixed;
bottom: 170px;
right: 10px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="test">Button</button>
$(window).scroll(function() {
var d;
var i;
var top = $(window).scrollTop();
var windowHeight = $(window).height();
var docHeight = $(document).height()
var obj = $('#<%= btnFinish.ClientID %>');
var bottom = obj.position().top + obj.height();
if (top + windowHeight == docHeight && bottom <= 800) {
d = 0;
for(i = 410; i>=85; i=i-.1){
d += .15;
(function(ii,dd){
setTimeout(function(){
$('#<%= btnFinish.ClientID %>').css({ bottom: ii, right: 460 });
}, dd);
})(i,d);
}
} else if (top == 0 && bottom >= 801) {
d = 0;
for(i = 85; i<=410; i=i+.1){
d += .15;
(function(ii,dd){
setTimeout(function(){
$('#<%= btnFinish.ClientID %>').css({ bottom: ii, right: 460 });
}, dd);
})(i,d);
}
}
});
I need to stop a div which gets a fixed position on scroll before it touches another element, basically make it go back to absolute position at a certain position, and this should be working at any size of the screen. I have a jsfiddle with code and there are two elements, please see the example and help if you know the answer thanks!
var navTop = $('#nav').offset().top;
var lastMode = "absolute";
$(window).scroll(function(){
var mode;
if ($(this).scrollTop() >= navTop) {
mode = 'fixed';
} else {
mode = 'absolute';
}
if(lastMode !== mode) {
if (mode == 'fixed') {
$('#nav').css('position', 'fixed');
$('#nav').css('top', '0');
} else {
$('#nav').css('position', 'absolute');
$('#nav').css('top', navTop);
}
lastMode = mode;
}
});
https://jsfiddle.net/Zygimantas10/vro3LLu9/
let me know if this is not clear.
Like this ?
var navTop = $('#nav').offset().top;
var navStop = $('#stop').offset().top;
var lastMode = "absolute";
$(window).scroll(function() {
var mode;
if ($(this).scrollTop() >= navTop) {
if ($(this).scrollTop() - navStop + $('#nav').height() > 0)
mode = 'absolute';
else
mode = 'fixed';
} else {
mode = 'absolute';
}
if (lastMode !== mode) {
if (mode == 'fixed') {
$('#nav').css('position', 'fixed');
$('#nav').css('top', '0');
} else {
$('#nav').css('position', 'absolute');
$('#nav').css('top', navTop);
}
lastMode = mode;
}
});
#nav {
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 200px;
width: 100px;
height: 50px;
}
#stop {
width: 100%;
background: blue;
height: 300px;
position: absolute;
top: 900px;
margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body style="height:5000px;">
<div id="nav"></div>
<div id="stop"></div>
</body>
I have a problem with animation, when you start scrolling down the picture going with you until offset().top = 960px but when you scroll up this picture have to go with you to the top - and this is a problem then i don't know how to return it to the top. Here is my site, this animation on the top
//scroll cicada
var x = true;
$(window).scroll(function() {
var item = $("#cicada").offset().top;
var place = $("#circles").offset().top;
if (item >= 950 && x) {
$("#cicada").css("position", "absolute");
$("#cicada").css("top", "950px");
x = false;
} else if (item <= 950 && !x) {
$("#cicada").css("top", "160px");
x = true;
}
});
css:
.cicada {
width: 340px;
height: 380px;
background: url("../includes/images/main-item-min.png") no-repeat center center;
background-size: contain;
position: fixed;
z-index: 5;
top: 160px;
right: 59%;
z-index: 8888;
}
I guess, you should make your header visible only, when you are at top of your scroll i.e. when currentTop is 0.
var currentTop = $(window).scrollTop();
if (currentTop == 0) {
$("header").css("display", "block");
} else {
$("header").css("display", "none");
if ($('.menu').hasClass("change")) {
$('.menu').removeClass("change");
}
}
I hope, It will help.