How do I move the background position of the image so it stays between 2 elements as the page resizes?
I managed to get it working for the first one with some Javascript but that same function doesn't work for the second one.
This is what I'm getting. Here's the link.
The bottom leaf moves too much and I need it to stay between the cat and text
This is the Javascript I've got for the first leaf.
function bgPos(){
var w = $(window).width() - $('.container').width();
w = w*2;
$('.class2').css('background-position', w+'px 0')
}
$(window).on('resize', bgPos).trigger('resize');
Any ideas?
Your bgPos function fort .class2 should look very similar to bgPos function which you use for class1, but with with a horizontal delta (I've used value 500)
var w = $(window).width() - $('.container').width();
w = w/2-500;
$('.class2').css('background-position', w+'px 0')
This delta is a distance that should be kept between these "green" leaps on resize. You could find better value to keep it sharply perfect
Related
I've currently got a bunch of animals (".animalorb" divs) roaming around the screen, but I have a few problems:
1) I need all the divs (".animalorbs") to stay on the screen.
2) I want the random motion to be more elegant and less jerky.
3) The amount of processing required with my current solution makes the page hard to run.
Here's a codepen for what I've got:
http://codepen.io/Bassitenor/pen/KWeLLE (A snippet of the animating code is below)
function makeNewPosition(){
// Get viewport dimensions (remove the dimension of the div)
var h = $(window).height() - 50;
var w = $(window).width() - 50;
var nh = Math.floor(Math.random([3,4,5], [6,7,8]) * (h/2));
var nw = Math.floor(Math.random([3,4,5], [6,7,8]) * (w/2));
return [nh,nw];
}
function animateDiv(c){
var moveit = makeNewPosition();
$(c).animate({ top: moveit[0], left: moveit[1] }, 10000, "linear", function(){
animateDiv(c);
});
Here's a codepen with more elegant randomness and less "crashy" behavior by the page:
http://codepen.io/Bassitenor/pen/aJLmKV
The SECOND pen (the one with the manta rays) isn't using all the individual divs, though--it's just generating a single div over and over.
Can anyone help me either generate better code for the first page or help me merge the code on the first and second pages?
Thanks so much!
- Jake
You could greatly improve performance by scaling the images down in an image processing software. At the moment they are all Full HD, which is a lot of work to scale down and animate in real time for every image.
As the width and height of the animal orbs are 100px, an image size of 100x100px would be sufficient.
Here is a jsFiddle of your code from codepen 1 but with the image exchanged by placeholder images of a smaller size (with background: url("http://placehold.it/100x100");):
https://jsfiddle.net/t18rhz61/
Hey I have a "box" div which can move its position based on clicking of arrows. How can I keep the Box from going outside the window's bounds or in other words just go to the borders and not cross the boundaries.
Fiddle provided:
var elementStyle = document.getElementById("divId").style;
JSFiddle
I updated your fiddle basically you need to add checks and if your check doesn't pass then set the new position to 0.
if (newPosition < 0) {
elementStyle.top = 0;
} else {
elementStyle.top = newPosition + px;
}
Fiddle here:
https://jsfiddle.net/8t9cqyqd/7/
for bottom and right the window will keep scrolling. If that's not desirable then you need to get the window size and do the same kind of check and then set the right and bottom positions to the container size minus the size of your moving box. I can update the fiddle for that if you'd like.
updated fiddle to handle the "right" direction:
https://jsfiddle.net/8t9cqyqd/9/
Something along these lines:
var x = $("#divID").position();
if(x.left > $(window).width())
//disable up arrow movement
Just do that for all positions changing out width() with height() for the Y position
I really need some help.
I have this test-web: www.sfrpsicologia.com/inicio.html
As you can see, I have centered the green box in the middle of the screen. The problem is that when I resize the height of the window, this box is above the logo and the footer. And what I want is that ALWAYS this div respect the height of the logo and the footer. I need a margin top and bottom that this box never overpass.
Any help please? I dont know much about javascript. I have tried with css styles but as it is positioned absolutely I cant do it.
Thank you very much
Don't use absolute positioning in this case.
You are trying to solve poor design problem with javascript and that's not a good practise.
Use sticky footer approach http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
and overthink your page structure based on that technique.
OK I got what you meant.
Do this , however I don't guarantee it will work because I can't test it on your site but it's supposed to if any obstacles occure you should modify it to work.
I'm useing jQuery you should be familiar with it.
So step 1(get the div) <div id=wrapp> and take it's height
var wrapp = jQuery('#wrapp');
var h = wrapp.outerHeight();
step 2(Set some other variables)
var winH = 0;
var pos = null;
var footerH = 34;
var headerH = 74;
These heights are the elements besides your <div id=wrapp> in your case they might be a few more or less.
var footerH = 34;
var headerH = 74;
The idea is when there's no room for all of them on the screen stop <div id=wrapp> from going upwards.
step 3 (All this is bind to window resize event):
jQuery(window).resize(function(){
winH = jQuery(this).height();
pos = wrapp.position();
if(winH < h + headerH + footerH )
wrapp.css({'top' : pos.top});
else
wrapp.css({'top' : '50%'});
});
Update window height on resize, also get <div id=wrapp> position object
and if(there's no more room according to all the heights you put) fix the top position to current top position of <div id=wrapp> else put it back to percentage.
Here's an example: http://jsfiddle.net/F7mrf/44/
If you got the idea with very little modifications it should work, you'll just have to do the math and put the right numbers, good luck
Simple, I just would like to have it so when a user is dragging an item and they reach the very bottom or top of the viewport (10px or so), the page (about 3000px long) gently scrolls down or up, until they move their cursor (and thus the item being dragged) out of the region.
An item is an li tag which uses jquery to make the list items draggable. To be specific:
../jquery-ui-1.8.14.custom.min.js
http://code.jquery.com/jquery-1.6.2.min.js
I currently use window.scrollBy(x=0,y=3) to scroll the page and have the variables of:
e.pageY ... provides absolute Y-coordinates of cursor on page (not relative to screen)
$.scrollTop() ... provides offset from top of page (when scroll bar is all the way up, it is 0)
$.height()... provides the height of viewable area in the user's browser/viewport
body.offsetHeight ... height of the entire page
How can I achieve this and which event best accommodates this (currently its in mouseover)?
My ideas:
use a an if/else to check if it is in top region or bottom, scroll up if e.pageY is showing it is in the top, down if e.page& is in bottom, and then calling the $('li').mouseover() event to iterate through...
Use a do while loop... this has worked moderately well actually, but is hard to stop from scrolling to far. But I am not sure how to control the iterations....
My latest attempt:
('li').mouseover(function(e) {
totalHeight = document.body.offsetHeight;
cursor.y = e.pageY;
var papaWindow = window;
var $pxFromTop = $(papaWindow).scrollTop();
var $userScreenHeight = $(papaWindow).height();
var iterate = 0;
do {
papaWindow.scrollBy(0, 2);
iterate++;
console.log(cursor.y, $pxFromTop, $userScreenHeight);
}
while (iterate < 20);
});
Works pretty well now, user just needs to "jiggle" the mouse when dragging items sometimes to keep scrolling, but for scrolling just with mouse position its pretty solid. Here is what I finally ended up using:
$("li").mouseover(function(e) {
e = e || window.event; var cursor = { y: 0 }; cursor.y = e.pageY; //Cursor YPos
var papaWindow = parent.window;
var $pxFromTop = $(papaWindow).scrollTop();
var $userScreenHeight = $(papaWindow).height();
if (cursor.y > (($userScreenHeight + $pxFromTop) / 1.25)) {
if ($pxFromTop < ($userScreenHeight * 3.2)) {
papaWindow.scrollBy(0, ($userScreenHeight / 30));
}
}
else if (cursor.y < (($userScreenHeight + $pxFromTop) * .75)) {
papaWindow.scrollBy(0, -($userScreenHeight / 30));
}
}); //End mouseover()
This won't work as the event only fires while you're mouse is over the li.
('li').mouseover(function(e) { });
You need to be able to tell the position of the mouse relative to the viewport when an item is being dragged. When the users starts to drag an item attach an 'mousemove' event to the body and then in that check the mouse position and scroll when necessary.
$("body").on("mousemove", function(event) {
// Check mouse position - scroll if near bottom or top
});
Dont forget to remove your event when the user stops dragging.
$("body").off("mousemove", function(event) {
// Check mouse position - scroll if near bottom or top
});
This may not be exactly what you want, but it might help. It will auto-scroll when the mouse is over the 'border of the screen' (a user defined region). Say you have a 40px wide bar on the right of the screen, if the mouse reaches the first 1px, it will start scrolling. Each px you move into it, the speed will increase. It even has a nice easing animation.
http://www.smoothdivscroll.com/v1-2.htm
I get a weekly newsletter (email) from CodeProject, and it had some stuff that certainly looks like it will solve my problem... hopefully this can help others:
http://johnpolacek.github.com/scrollorama/ -- JQuery based and animates the scroll
https://github.com/IanLunn/jQuery-Parallax -- JQuery based, similar to above
http:// remysharp. com/2009/01/26/element-in-view-event-plugin/ -- JQuery, detects whether an element is currently in view of the user (super helpful for this issue!)
Also the site in #2 had some interesting code:
var windowHeight = $window.height();
var navHeight = $('#nav').height() / 2;
var windowCenter = (windowHeight / 2);
var newtop = windowCenter - navHeight;
//ToDo: Find a way to use these vars and my original ones to determine scroll regions
I'm trying to use the left variable to replace '1493' in this code. It works fine when it's a number but when I changed it over to use 'left' the if statement stops working.
$(document).scroll(function () {
var width = $(document).width();
var left = $(document).scrollLeft();
var postCount = $(".post").length;
var columnLength = ( width - ((postCount*743) - 1493)) - (width-(postCount*743));
if(left >= columnLength) {
$(".num").text(left);
}
});
Does anyone have any ideas where I'm going wrong with this? Any pointers would be great.
You may need to force it to be an integer:
var left = parseInt($(document).scrollLeft());
Lets take a look at the math you have really quick.
var columnLength = ( width - ((postCount*743) - 1493)) - (width-(postCount*743));
You are basically cancelling out width, and (postCount*743). It leaves you with --1493 which is positive 1493. The following would have the same effect:
var columnLength = 1493;
So, the reason the if statement fires when you put in the static value 1493, is because columnLength ALWAYS equals 1493 which, of course satisfies this condition:
if (1493 >= columnLength)
You could as easily write:
if (1493 >= 1493)
That said, it should still, theoretically fire when left becomes greater than or equal to 1493. But left is the current horizontal scroll position in pixels. It would be a HUGELY wide page to hit a scroll position of 1493.
Edit: Here's a fiddle to give an idea of how fast the scroll position increases: http://jsfiddle.net/vdQ7B/16/
EDIT 2:
Here is an update in response to your comment.
As I understand it, you were trying to get a horizontal scrollbar that would, essentially, scroll forever.
Please see the following fiddle for a demo: http://jsfiddle.net/vdQ7B/40/
The code is below:
$(document).scroll(function () {
var width = $(document).width();
var left = $(document).scrollLeft();
var viewportwidth = window.innerWidth;
// If our scrollbar gets to the end,
// add 50 more pixels. This could be set
// to anything.
if((left + viewportwidth) === width) {
$("body").css("width", width + 50);
}
});
Per the comments in the code, we simply increase the width of the body if we determine we've reached the end. scrollLeft() will only tell us the number of pixels that are currently not visible to the left of the viewable area. So, we need to know how much viewable area we have, and how much is hidden to the left to know if we've scrolled all the way to the end.
If you have a scroll bar on an inner element, like a div, you'd need to update with width of the div, not the body.
Note: You may also need to use $(window) instead of $(document) to get scrollLeft() to work across all browsers.
Note: See here about using "innerWidth". There are some compatibility issues, and you may need to expand it a bit to handle other cases (IE6).