this is working fine with left animate div cannot goes outside from left side but it is not working with right side div goes outside of window screen.
my html code:
<body>
<div class="block"></div>
</body>
my css code:
div {
position: absolute;
background-color: #abc;
left: 50px;
top:50px;
width: 90px;
height: 90px;
margin: 5px;
}
my jquery code
$("body").keydown(function(e) {
var width = $(window).width();
var heigth = $(window).height();
if(e.keyCode == 37) { // left
if (parseInt($('.block').css('left')) >= 50) {
$('.block').animate({left: '-=50'},"slow");
}
}
else if(e.keyCode == 39) { // right
if (parseInt($('.block').css('left')) <= width) {
$(".block").animate({left: "+=50px"},'slow');
}
}
});
thanks in advance.
When comparing the current left value to window width, you're not adding the 50px that will be added as the result of the function, thus you will go outside the width of the window.
You should also account for the width of the .block element itself
//...
else if(e.keyCode == 39) { // right
if ((parseInt($('.block').css('left')) + 50 + $('.block').width()) <= width) {
$(".block").animate({left: "+=50px"},'slow');
}
}
//...
Improve some code to #lukiffer's answer.
//...
else if(e.keyCode == 39) { // right
if (parseInt($('.block').css('left')) <= (width-150) ) {
$(".block").animate({left: "+=50px"},'slow');
}
}
//...
Related
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 want to make an image moving on the screen up down right and left.
it only moves up and down
I can't fix my code
here is what I was working on so far
frame.on ("keydown", function(e) {
zog(e.keyCode); // e is an event object
if (e.keyCode == 38) {
dir = -1;
} else if(e.keyCode == 40){
dir = 1;
} else if (e.keyCode == 37){ //left
dir = 0;
} else if (e.keyCode == 39){ //right
dir = 0;
}
});
frame.on ("keyup", function() {
dir = 0;
});
The following will update the box position every time you press the arrow buttons on your keyboard. Keep in mind up/down will make the page scroll up/down. But that's a diff problem to solve ;)
(function($){$(function(){
var box = $('.box');
$('body').on('keyup', function(e){
if (e.keyCode == 38) {
box.css('top', box.offset().top - 1);
} else if(e.keyCode == 40){
box.css('top', box.offset().top + 1);
} else if (e.keyCode == 37){ //left
box.css('left', box.offset().left - 1);
} else if (e.keyCode == 39){ //right
box.css('left', box.offset().left + 1);
}
});
})})(jQuery);
.box {
width: 100px;
height: 100px;
border: 1px solid #000;
position: absolute;
top: 0px;
left: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
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.
So I basically want the script to start at the top of "mini" div but can't get it to work right.
#mini {
width: 100%;
padding-top: 300px;}
var tTop = $("#mini").outerHeight(true);
Full script:
$(window).scroll(checkY);
function checkY() {
//save this value so we dont have to call the function everytime
var top = $(window).scrollTop();
$(".title").each(function () {
var target = $(this).closest(".content");
var tTop = $("#mini").outerHeight(true);
var tBottom = target.offset().top + target.outerHeight();
if (top >= tTop && top <= tBottom) {
console.log("Show");
$(this).show();
} else {
console.log("Hide");
$(this).hide();
}
});
}
checkY();
Why not setting the mini style to
position:relative;
and the inner div to
position: absolute;
top:0
this is working fine with left,right and top animate div move from left side, right side and top side but it is not working with bottom side div can not move bottom. and also when i press key more than ten time or more quikly it goes outside from my window screen from every side and if i press key after one animation finish it can not goes out side.
my html code:
<body>
<div class="block"></div>
</body>
my css code:
div {
position: absolute;
background-color: #abc;
left: 50px;
top:50px;
width: 100px;
height: 100px;
}
my jquery code:
$(window).load(function(e) {
$("body").keydown(function(e) {
var width1 = $(window).width();
var heigth1 = $(window).height();
if(e.keyCode == 37) { // left
if (parseInt($('.block').css('left')) >= 50) {
$('.block').animate({left: '-=50'},"slow");
}
}
else if(e.keyCode == 39) { // right
if (parseInt($('.block').css('left')) <= (width1 - 150)){
$(".block").animate({left: "+=50px"},'slow');
}
}
else if(e.keyCode == 40){ // bottom
if (parseInt($('.block').css('top')) <= (height1 - 150)) {
$(".block").animate({'top':'+=50px'},'slow');
}
}
else if(e.keyCode == 38){ // top
if (parseInt($('.block').css('top')) >= 50) {
$(".block").animate({'top':'-=50px'},'slow');
}
}
});
});
there is my example, hope i help you :)
example
:)
Typo!
var heigth1 = $(window).height();
should be
var height1 = $(window).height();