What I'm trying to achieve:
I want few "scroll" listeners that will work smoothly (As smooth as it can be)
What I have so far works but I have noticed that it is not performing well.
I have good PC but when those functions fire all at once there is huge FPS drop that results in bad user experience (drops to about 1/3 of normal performance which results in slideshow on certain elements).
On page where the problem occurs there are in total 5 "scroll" listeners.
3 of them are pretty basic like:
watching if i'm scrolling upwards oraz downwards and applying class to element according to direction (show menu when scrolling up)
checking if element is visible in window and applying class according to it and then don't trigger on same element (triggering css animation).
again checking if element is visible but this time performs function if it is in window visible and then doesn't fire again (listener is removed when function performs).
and now there are 2 listeners that makes much more on scroll
both of them animate certain element according to how far user scroll from top of page
first one widen certain element when user scrolls into its section
const scaleContainer = () => {
const container = document.querySelector('#social-posts').parentElement;
const element = container.parentElement;
const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
container.style.width = window.getComputedStyle(container).width;
container.parentElement.style.margin = '0 auto';
window.addEventListener('scroll', () => {
if (window.innerWidth < 767) {
element.style.width = '100%';
return;
}
const bounding = element.getBoundingClientRect();
const fromScreenBottom = bounding.top - windowHeight;
let width = 0;
if (fromScreenBottom < 0) {
width = (-(Math.floor(fromScreenBottom)) / 5);
if (width > 100 || width < 0) {
return;
}
}
element.style.width = width + '%';
});
}
ready(scaleContainer);
window.addEventListener('resize', scaleContainer);
and the other one checks how far users scrolls and then prepare keyframes for animation function and then animate.
Adding whole class that have all options set will be a pain to read so I will explain briefly what every part that is not defined in this part do.
this.currentIndex is the index of element that is currently visible
this.prevIndex is the index of previously visible element
this.options.keyframes is an array of keyframes that function chooses from to perform animation.
eg:
keyFrames: {
0: {top: '5%',left: '90%',transform: 'rotate(-38deg)'},
5: {top: '16%',left: '86%',transform: 'rotate(-36deg)'},
10: {top: '27%',left: '82%',transform: 'rotate(-33deg)'},
15: {top: '36%',left: '78%',transform: 'rotate(-30deg)'},
//...
}
this.options.accordionsCount is count of element that needs to be taken into account when choosing how many keyframes needs to be used
this.options.objectContainer is parent element of whole section.
class TruckAccordions {
//...
animateTruck = () => {
if(this.currentIndex === this.prevIndex || window.innerWidth <= 992) {
return;
}
const previousPercent = Math.floor((100 / this.options.accordionsCount) * (this.prevIndex + 1));
const percent = Math.floor((100 / this.options.accordionsCount) * (this.currentIndex + 1));
const objectKeyFrames = Object.entries(this.options.keyFrames);
let keyFrames = [];
if (previousPercent < percent) {
objectKeyFrames.forEach(keyFrame => {
if ((keyFrame[0] <= percent && keyFrame[0] >= (previousPercent - 5))) {
keyFrames.push(keyFrame[1]);
}
});
} else {
objectKeyFrames.reverse().forEach(keyFrame => {
if ((keyFrame[0] >= percent && keyFrame[0] <= (previousPercent + 5))) {
keyFrames.push(keyFrame[1]);
}
});
}
const truck = this.options.objectContainer.querySelector('.truck');
truck.animate(
keyFrames,
{
duration: 1000,
fill: 'forwards',
easing: 'ease-in-out'
}
);
this.prevIndex = this.currentIndex;
}
}
(() => new TruckAccordions())();
I have been trying to implement this codepen [https://codepen.io/LokeshNagarajan/pen/apRmZe?editors=1111] on my website but like in the codepen the images do not load even if I assign an https src and i believe the issue stems from the javascript but not sure exactly what to do to fix it.
(function ($) {
'use strict';
$.fn.waterwheelCarousel = function (startingOptions) {
// Adds support for intializing multiple carousels from the same selector group
if (this.length > 1) {
this.each(function () {
$(this).waterwheelCarousel(startingOptions);
});
return this; // allow chaining
}
var carousel = this;
var options = {};
var data = {};
function initializeCarouselData() {
data = {
itemsContainer: $(carousel),
totalItems: $(carousel).children().length,
containerWidth: $(carousel).width(),
containerHeight: $(carousel).height(),
currentCenterItem: null,
previousCenterItem: null,
items: [],
calculations: [],
carouselRotationsLeft: 0,
currentlyMoving: false,
itemsAnimating: 0,
currentSpeed: options.speed,
intervalTimer: null,
currentDirection: 'forward',
leftItemsCount: 0,
rightItemsCount: 0,
performingSetup: true
};
data.itemsContainer.children().removeClass(options.activeClassName);
}
/**
* This function will set the autoplay for the carousel to
* automatically rotate it given the time in the options
* Can clear the autoplay by passing in true
*/
function autoPlay(stop) {
// clear timer
clearTimeout(data.autoPlayTimer);
// as long as no stop command, and autoplay isn't zeroed...
if (!stop && options.autoPlay !== 0) {
// set timer...
data.autoPlayTimer = setTimeout(function () {
// to move the carousl in either direction...
if (options.autoPlay > 0) {
moveOnce('forward');
} else {
moveOnce('backward');
}
}, Math.abs(options.autoPlay));
}
}
/**
* This function will preload all the images in the carousel before
* calling the passed in callback function. This is only used so we can
* properly determine the width and height of the items. This is not needed
* if a user instead manually specifies that information.
*/
function preload(callback) {
var $imageElements = data.itemsContainer.find('img'),
totalImages = $imageElements.length,
loadedImages = 0;
if (options.preloadImages === false || $imageElements.length === 0) {
callback();
return;
}
$imageElements.each(function () {
$(this).bind('load', function () {
// Add to number of images loaded and see if they are all done yet
loadedImages += 1;
if (loadedImages === totalImages) {
// All done, perform callback
callback();
return;
}
});
// May need to manually reset the src to get the load event to fire
// http://stackoverflow.com/questions/7137737/ie9-problems-with-jquery-load-event-not-firing
$(this).attr('src', $(this).attr('src'));
// If browser has cached the images, it may not call trigger a load. Detect this and do it ourselves
if (this.complete) {
$(this).trigger('load');
}
});
}
/**
* Makes a record of the original width and height of all the items in the carousel.
* If we re-intialize the carousel, these values can be used to re-establish their
* original dimensions.
*/
function setOriginalItemDimensions() {
data.itemsContainer.children().each(function () {
if ($(this).data('original_width') == undefined || options.forcedImageWidth > 0) {
$(this).data('original_width', $(this).width());
}
if ($(this).data('original_height') == undefined || options.forcedImageHeight > 0) {
$(this).data('original_height', $(this).height());
}
});
}
/**
* Users can pass in a specific width and height that should be applied to every image.
* While this option can be used in conjunction with the image preloader, the intended
* use case is for when the preloader is turned off and the images don't have defined
* dimensions in CSS. The carousel needs dimensions one way or another to work properly.
*/
function forceImageDimensionsIfEnabled() {
if (options.forcedImageWidth && options.forcedImageHeight) {
data.itemsContainer.children().each(function () {
$(this).width(options.forcedImageWidth);
$(this).height(options.forcedImageHeight);
});
}
}
/**
* For each "visible" item slot (# of flanking items plus the middle),
* we pre-calculate all of the properties that the item should possess while
* occupying that slot. This saves us some time during the actual animation.
*/
function preCalculatePositionProperties() {
// The 0 index is the center item in the carousel
var $firstItem = data.itemsContainer.children().eq(0);
data.calculations[0] = {
distance: 0,
offset: 0,
opacity: 1
}
// Then, for each number of flanking items (plus one more, see below), we
// perform the calcations based on our user options
var horizonOffset = options.horizonOffset;
var separation = options.separation;
for (var i = 1; i <= options.flankingItems + 2; i++) {
if (i > 1) {
horizonOffset *= options.horizonOffsetMultiplier;
separation *= options.separationMultiplier;
}
data.calculations[i] = {
distance: data.calculations[i - 1].distance + separation,
offset: data.calculations[i - 1].offset + horizonOffset,
opacity: data.calculations[i - 1].opacity * options.opacityMultiplier
}
}
// We performed 1 extra set of calculations above so that the items that
// are moving out of sight (based on # of flanking items) gracefully animate there
// However, we need them to animate to hidden, so we set the opacity to 0 for
// that last item
if (options.edgeFadeEnabled) {
data.calculations[options.flankingItems + 1].opacity = 0;
} else {
data.calculations[options.flankingItems + 1] = {
distance: 0,
offset: 0,
opacity: 0
}
}
}
/**
* Here we prep the carousel and its items, like setting default CSS
* attributes. All items start in the middle position by default
* and will "fan out" from there during the first animation
*/
function setupCarousel() {
// Fill in a data array with jQuery objects of all the images
data.items = data.itemsContainer.children();
for (var i = 0; i < data.totalItems; i++) {
data.items[i] = $(data.items[i]);
}
// May need to set the horizon if it was set to auto
if (options.horizon === 0) {
if (options.orientation === 'horizontal') {
options.horizon = data.containerHeight / 2;
} else {
options.horizon = data.containerWidth / 2;
}
}
// Default all the items to the center position
data.itemsContainer
.css('position', 'relative')
.children()
.each(function () {
// Figure out where the top and left positions for center should be
var centerPosLeft, centerPosTop;
if (options.orientation === 'horizontal') {
centerPosLeft = (data.containerWidth / 2) - ($(this).data('original_width') / 2);
centerPosTop = options.horizon - ($(this).data('original_height') / 2);
} else {
centerPosLeft = options.horizon - ($(this).data('original_width') / 2);
centerPosTop = (data.containerHeight / 2) - ($(this).data('original_height') / 2);
}
$(this)
// Apply positioning and layering to the images
.css({
'left': centerPosLeft,
'top': centerPosTop,
'visibility': 'visible',
'position': 'absolute',
'z-index': 0,
'opacity': 0
})
// Give each image a data object so it remembers specific data about
// it's original form
.data({
top: centerPosTop,
left: centerPosLeft,
oldPosition: 0,
currentPosition: 0,
depth: 0,
opacity: 0
})
// The image has been setup... Now we can show it
.show();
});
}
/**
* All the items to the left and right of the center item need to be
* animated to their starting positions. This function will
* figure out what items go where and will animate them there
*/
function setupStarterRotation() {
options.startingItem = (options.startingItem === 0) ? Math.round(data.totalItems / 2) : options.startingItem;
data.rightItemsCount = Math.ceil((data.totalItems - 1) / 2);
data.leftItemsCount = Math.floor((data.totalItems - 1) / 2);
// We are in effect rotating the carousel, so we need to set that
data.carouselRotationsLeft = 1;
// Center item
moveItem(data.items[options.startingItem - 1], 0);
data.items[options.startingItem - 1].css('opacity', 1);
// All the items to the right of center
var itemIndex = options.startingItem - 1;
for (var pos = 1; pos <= data.rightItemsCount; pos++) {
(itemIndex < data.totalItems - 1) ? itemIndex += 1 : itemIndex = 0;
data.items[itemIndex].css('opacity', 1);
moveItem(data.items[itemIndex], pos);
}
// All items to left of center
var itemIndex = options.startingItem - 1;
for (var pos = -1; pos >= data.leftItemsCount * -1; pos--) {
(itemIndex > 0) ? itemIndex -= 1 : itemIndex = data.totalItems - 1;
data.items[itemIndex].css('opacity', 1);
moveItem(data.items[itemIndex], pos);
}
}
/**
* Given the item and position, this function will calculate the new data
* for the item. One the calculations are done, it will store that data in
* the items data object
*/
function performCalculations($item, newPosition) {
var newDistanceFromCenter = Math.abs(newPosition);
// Distance to the center
if (newDistanceFromCenter < options.flankingItems + 1) {
var calculations = data.calculations[newDistanceFromCenter];
} else {
var calculations = data.calculations[options.flankingItems + 1];
}
var distanceFactor = Math.pow(options.sizeMultiplier, newDistanceFromCenter)
var newWidth = distanceFactor * $item.data('original_width');
var newHeight = distanceFactor * $item.data('original_height');
var widthDifference = Math.abs($item.width() - newWidth);
var heightDifference = Math.abs($item.height() - newHeight);
var newOffset = calculations.offset
var newDistance = calculations.distance;
if (newPosition < 0) {
newDistance *= -1;
}
if (options.orientation == 'horizontal') {
var center = data.containerWidth / 2;
var newLeft = center + newDistance - (newWidth / 2);
var newTop = options.horizon - newOffset - (newHeight / 2);
} else {
var center = data.containerHeight / 2;
var newLeft = options.horizon - newOffset - (newWidth / 2);
var newTop = center + newDistance - (newHeight / 2);
}
newTop -= heightDifference / 2;
newLeft -= widthDifference / 2;
var newOpacity;
if (newPosition === 0) {
newOpacity = 1;
} else {
newOpacity = calculations.opacity;
}
// Depth will be reverse distance from center
var newDepth = options.flankingItems + 2 - newDistanceFromCenter;
$item.data('width', newWidth);
$item.data('height', newHeight);
$item.data('top', newTop);
$item.data('left', newLeft);
$item.data('oldPosition', $item.data('currentPosition'));
$item.data('depth', newDepth);
$item.data('opacity', newOpacity);
$item.data('distanceFactor', distanceFactor);
}
function moveItem($item, newPosition) {
// Only want to physically move the item if it is within the boundaries
// or in the first position just outside either boundary
if (Math.abs(newPosition) <= options.flankingItems + 1) {
performCalculations($item, newPosition);
data.itemsAnimating++;
$item
.css('z-index', $item.data().depth)
// Animate the items to their new position values
.animate({
'left': $item.data().left,
'top': $item.data().top,
'opacity': $item.data().opacity
}, data.currentSpeed, options.animationEasing, function () {
// Animation for the item has completed, call method
itemAnimationComplete($item, newPosition);
});
TweenMax.to($item, data.currentSpeed / 1000, {
scaleX: $item.data('distanceFactor'),
scaleY: $item.data('distanceFactor'),
ease: options.animationEasing
});
} else {
$item.data('currentPosition', newPosition)
// Move the item to the 'hidden' position if hasn't been moved yet
// This is for the intitial setup
if ($item.data('oldPosition') === 0) {
$item
.css({
'left': $item.data().left,
'top': $item.data().top,
'opacity': $item.data().opacity,
'z-index': $item.data().depth
});
TweenMax.to($item, 0, {
scaleX: $item.data('distanceFactor'),
scaleY: $item.data('distanceFactor')
});
}
}
}
/**
* This function is called once an item has finished animating to its
* given position. Several different statements are executed here, such as
* dealing with the animation queue
*/
function itemAnimationComplete($item, newPosition) {
data.itemsAnimating--;
$item.data('currentPosition', newPosition);
// Keep track of what items came and left the center position,
// so we can fire callbacks when all the rotations are completed
if (newPosition === 0) {
data.currentCenterItem = $item;
}
// all items have finished their rotation, lets clean up
if (data.itemsAnimating === 0) {
data.carouselRotationsLeft -= 1;
data.currentlyMoving = false;
// If there are still rotations left in the queue, rotate the carousel again
// we pass in zero because we don't want to add any additional rotations
if (data.carouselRotationsLeft > 0) {
rotateCarousel(0);
// Otherwise there are no more rotations and...
} else {
// Reset the speed of the carousel to original
data.currentSpeed = options.speed;
data.currentCenterItem.addClass(options.activeClassName);
if (data.performingSetup === false) {
options.movedToCenter(data.currentCenterItem);
options.movedFromCenter(data.previousCenterItem);
}
data.performingSetup = false;
// reset & initate the autoPlay
autoPlay();
}
}
}
/**
* Function called to rotate the carousel the given number of rotations
* in the given direciton. Will check to make sure the carousel should
* be able to move, and then adjust speed and move items
*/
function rotateCarousel(rotations) {
// Check to see that a rotation is allowed
if (data.currentlyMoving === false) {
// Remove active class from the center item while we rotate
data.currentCenterItem.removeClass(options.activeClassName);
data.currentlyMoving = true;
data.itemsAnimating = 0;
data.carouselRotationsLeft += rotations;
if (options.quickerForFurther === true) {
// Figure out how fast the carousel should rotate
if (rotations > 1) {
data.currentSpeed = options.speed / rotations;
}
// Assure the speed is above the minimum to avoid weird results
data.currentSpeed = (data.currentSpeed < 100) ? 100 : data.currentSpeed;
}
// Iterate thru each item and move it
for (var i = 0; i < data.totalItems; i++) {
var $item = $(data.items[i]);
var currentPosition = $item.data('currentPosition');
var newPosition;
if (data.currentDirection == 'forward') {
newPosition = currentPosition - 1;
} else {
newPosition = currentPosition + 1;
}
// We keep both sides as even as possible to allow circular rotation to work.
// We will "wrap" the item arround to the other side by negating its current position
var flankingAllowance = (newPosition > 0) ? data.rightItemsCount : data.leftItemsCount;
if (Math.abs(newPosition) > flankingAllowance) {
newPosition = currentPosition * -1;
// If there's an uneven number of "flanking" items, we need to compenstate for that
// when we have an item switch sides. The right side will always have 1 more in that case
if (data.totalItems % 2 == 0) {
newPosition += 1;
}
}
moveItem($item, newPosition);
}
}
}
/**
* The event handler when an image within the carousel is clicked
* This function will rotate the carousel the correct number of rotations
* to get the clicked item to the center, or will fire the custom event
* the user passed in if the center item is clicked
*/
$(this).children().bind("click", function () {
var itemPosition = $(this).data().currentPosition;
if (options.imageNav == false) {
return;
}
// Don't allow hidden items to be clicked
if (Math.abs(itemPosition) >= options.flankingItems + 1) {
return;
}
// Do nothing if the carousel is already moving
if (data.currentlyMoving) {
return;
}
data.previousCenterItem = data.currentCenterItem;
// Remove autoplay
autoPlay(true);
options.autoPlay = 0;
var rotations = Math.abs(itemPosition);
if (itemPosition == 0) {
options.clickedCenter($(this));
} else {
// Fire the 'moving' callbacks
options.movingFromCenter(data.currentCenterItem);
options.movingToCenter($(this));
if (itemPosition < 0) {
data.currentDirection = 'backward';
rotateCarousel(rotations);
} else if (itemPosition > 0) {
data.currentDirection = 'forward';
rotateCarousel(rotations);
}
}
});
function nextItemFromCenter() {
var $next = data.currentCenterItem.next();
if ($next.length <= 0) {
$next = data.currentCenterItem.parent().children().first();
}
return $next;
}
function prevItemFromCenter() {
var $prev = data.currentCenterItem.prev();
if ($prev.length <= 0) {
$prev = data.currentCenterItem.parent().children().last();
}
return $prev;
}
/**
* Intiate a move of the carousel in either direction. Takes care of firing
* the 'moving' callbacks
*/
function moveOnce(direction) {
if (data.currentlyMoving === false) {
data.previousCenterItem = data.currentCenterItem;
options.movingFromCenter(data.currentCenterItem);
if (direction == 'backward') {
options.movingToCenter(prevItemFromCenter());
data.currentDirection = 'backward';
} else if (direction == 'forward') {
options.movingToCenter(nextItemFromCenter());
data.currentDirection = 'forward';
}
}
rotateCarousel(1);
}
/**
* Navigation with arrow keys
*/
$(document).keydown(function (e) {
if (options.keyboardNav) {
// arrow left or up
if ((e.which === 37 && options.orientation == 'horizontal') || (e.which === 38 && options.orientation == 'vertical')) {
autoPlay(true);
options.autoPlay = 0;
moveOnce('backward');
// arrow right or down
} else if ((e.which === 39 && options.orientation == 'horizontal') || (e.which === 40 && options.orientation == 'vertical')) {
autoPlay(true);
options.autoPlay = 0;
moveOnce('forward');
}
// should we override the normal functionality for the arrow keys?
if (options.keyboardNavOverride && (
(options.orientation == 'horizontal' && (e.which === 37 || e.which === 39)) ||
(options.orientation == 'vertical' && (e.which === 38 || e.which === 40))
)) {
e.preventDefault();
return false;
}
}
});
/**
* Public API methods
*/
this.reload = function (newOptions) {
if (typeof newOptions === "object") {
var combineDefaultWith = newOptions;
} else {
var combineDefaultWith = {};
}
options = $.extend({}, $.fn.waterwheelCarousel.defaults, newOptions);
initializeCarouselData();
data.itemsContainer.children().hide();
forceImageDimensionsIfEnabled();
preload(function () {
setOriginalItemDimensions();
preCalculatePositionProperties();
setupCarousel();
setupStarterRotation();
});
}
this.next = function () {
autoPlay(true);
options.autoPlay = 0;
moveOnce('forward');
}
this.prev = function () {
autoPlay(true);
options.autoPlay = 0;
moveOnce('backward');
}
this.reload(startingOptions);
return this;
};
$.fn.waterwheelCarousel.defaults = {
// number tweeks to change apperance
startingItem: 1, // item to place in the center of the carousel. Set to 0 for auto
separation: 175, // distance between items in carousel
separationMultiplier: 0.6, // multipled by separation distance to increase/decrease distance for each additional item
horizonOffset: 0, // offset each item from the "horizon" by this amount (causes arching)
horizonOffsetMultiplier: 1, // multipled by horizon offset to increase/decrease offset for each additional item
sizeMultiplier: 0.7, // determines how drastically the size of each item changes
opacityMultiplier: 0.8, // determines how drastically the opacity of each item changes
horizon: 0, // how "far in" the horizontal/vertical horizon should be set from the container wall. 0 for auto
flankingItems: 3, // the number of items visible on either side of the center
// animation
speed: 300, // speed in milliseconds it will take to rotate from one to the next
animationEasing: 'linear', // the easing effect to use when animating
quickerForFurther: true, // set to true to make animations faster when clicking an item that is far away from the center
edgeFadeEnabled: false, // when true, items fade off into nothingness when reaching the edge. false to have them move behind the center image
// misc
linkHandling: 2, // 1 to disable all (used for facebox), 2 to disable all but center (to link images out)
autoPlay: 0, // indicate the speed in milliseconds to wait before autorotating. 0 to turn off. Can be negative
orientation: 'horizontal', // indicate if the carousel should be 'horizontal' or 'vertical'
activeClassName: 'carousel-center', // the name of the class given to the current item in the center
keyboardNav: false, // set to true to move the carousel with the arrow keys
keyboardNavOverride: true, // set to true to override the normal functionality of the arrow keys (prevents scrolling)
imageNav: true, // clicking a non-center image will rotate that image to the center
// preloader
preloadImages: true, // disable/enable the image preloader.
forcedImageWidth: 0, // specify width of all images; otherwise the carousel tries to calculate it
forcedImageHeight: 0, // specify height of all images; otherwise the carousel tries to calculate it
// callback functions
movingToCenter: $.noop, // fired when an item is about to move to the center position
movedToCenter: $.noop, // fired when an item has finished moving to the center
clickedCenter: $.noop, // fired when the center item has been clicked
movingFromCenter: $.noop, // fired when an item is about to leave the center position
movedFromCenter: $.noop // fired when an item has finished moving from the center
};
})(jQuery);
/*--water_wheel_carousel--*/
var carousel = $("#carousel").waterwheelCarousel({
flankingItems: 2,
separation:200,
sizeMultiplier:0.8,
separationMultiplier:0.9,
speed:250,
});
$("#carousel").swipe( {
swipeStatus:function(event, phase, direction, distance)
{
if (phase=="end"){
if(direction == "right") {
carousel.prev();
}
else if(direction =="left") {
carousel.next();
}else { return false;}
}
},
triggerOnTouchEnd:false,
threshold:100
});
$('#prev').on('click', function (){
carousel.prev();
return false;
});
$('#next').on('click', function (){
carousel.next();
return false;
});
/*--water_wheel carousel_script_end--*/
Kindly help me fix the javascript so as to apply the solution to my code. Thanks
Your images are loading, but there are DIVs with a white background on top of them that are visually blocking the images. If you remove the background-color CSS declaration on those DIVs, then your images will show up. Just update this:
#carousel .caption {
position: absolute;
background-color:#FFF;
top: 0px;
left: 0px;
height:100%;
width:100%;
}
to this:
#carousel .caption {
position: absolute;
top: 0px;
left: 0px;
height:100%;
width:100%;
}
I'm attempting to make it, so that when the mouse is within the boundaries set by var play, it changes image. I used the same method I've used for changing images on click, but mouseover and mouseout don't want to work here.
var play = {
x: 650,
y: 360,
width: 200,
height: 100
}
var playUpButton = new Image();
playUpButton.src = "images/PlayUp.png";
var playDownButton = new Image();
playDownButton.src = "images/PlayDown.png";
var playHovering = false;
thisCanvas.addEventListener('click', checkPlay);
thisCanvas.addEventListener('mouseover', hoverPlay, false);
thisCanvas.addEventListener('mouseout', hoverPlay, false);
function seen_move(e)
{
var bounding_box = thisCanvas.getBoundingClientRect();
mouseX = ((e.clientX-bounding_box.left) *(thisCanvas.width/bounding_box.width));
mouseY = ((e.clientY-bounding_box.top) * (thisCanvas.height/bounding_box.height));
}
function draw_start()
{
context.drawImage(menubg, menubg.x, menubg.y, menubg.width, menubg.height);
if(playHovering)
{
context.drawImage(playDownButton, play.x, play.y, play.width, play.height);
}
}
function mouseInArea(top, right, bottom, left)
{
if(mouseX >= left && mouseX < right && mouseY >= top && mouseY < bottom)
{
return true;
}
else
{
return false;
}
}
function hoverPlay()
{
if(mouseInArea(play.y, play.x + play.width, play.y + play.height, play.x))
{
console.log("Hovering");
if(playHovering)
{
playHovering = false;
}
else
{
playHovering = true;
}
}
}
It looks like the following is missing from your code.
var thisCanvas = document.getElementById("thisCanvas");
The function checkPlay also seems to be missing.
Take a look at these articles:
http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
http://www.informit.com/articles/article.aspx?p=1903884&seqNum=6
You must call function seen_move(e) to get the mouse position.
BTW, I'm confused about what the extra code in seen_move is. I'm guessing you're making the mouse position relative to the bounding box. I just mention it in case that's also a problem:
// this usually get the mouse position
var bounding_box = thisCanvas.getBoundingClientRect();
mouseX = e.clientX-bounding_box.left;
mouseY = e.clientY-bounding_box.top;
// and you have this extra bit:
// *(thisCanvas.width/bounding_box.width)); and
// * (thisCanvas.height/bounding_box.height));
mouseX = ((e.clientX-bounding_box.left) *(thisCanvas.width/bounding_box.width));
mouseY = ((e.clientY-bounding_box.top) * (thisCanvas.height/bounding_box.height));
I have to repair bottom slider on http://rhemapress.pl/www_wopr/ . If you see when you click right arrow twice, then animation back to start and animate again. Here when i click one on right arrow time this should be blocked and not possible to click second time.
Numer of moves right is created dynamicly by checkWidth();
function checkWidth() {
var elements = $('.items').children().length;
var width = Math.ceil(elements / 5) * 820;
return width;
}
This return realWidth witch is something like limit of offset. Variable offset is setted to 0 at start. So, if i click right, then in method moveRight() is checked if element can be moved and it's move. At end offset is increment by 820px (one page of slider), so if we've got 2 pages, then next move can't be called. But it is and this is problem! :/
My code
<script type="text/javascript">
$(document).ready(function() {
$('a.prev').bind('click',moveLeft);
$('a.next').bind('click',moveRight);
var realWidth = checkWidth();
realWidth -= 820;
var offset = 0;
function moveLeft(e) {
var position = $('.items').position();
var elements = $('.items').children().length;
if ((elements > 5) && ((offset - 820) >= 0) ) {
$('.items').animate({
'left': (position.left + 820)
}, 300, function() {
offset -= 820;
});
}
}
function moveRight(e) {
var position = $('.items').position();
var elements = $('.items').children().length;
if ((elements > 5) && ((offset + 820) <= realWidth)) {
$('.items').animate({
'left': (position.left - 820)
}, 300, function() {
offset += 820;
});
}
}
function checkWidth() {
var elements = $('.items').children().length;
var width = Math.ceil(elements / 5) * 820;
return width;
}
});
</script>
How can i do this correctly?
It seems like you want to prevent the click event from firing before the current animation is complete. You can do this by preventing the rest of the function from executing if the element is currently being animated:
function moveLeft(e) {
if ($(this).is(":animated")) {
return false;
}
I'm working on a portal/dashboard type interface which has panels/widgets that can be freely dragged around the dashboard space as long as they don't overlay any other panels. New panels can be added to the dashboard via a menu containing all available panels, and when a menu item is clicked, the panel is placed into the dashboard. The panels currently occupying the dashboard space are all represented in an object like this:
{
'panel_1': { top: 0, left: 0, width: 300, height: 350 },
'panel_2': { top: 0, left: 370, width: 200, height: 275 },
'panel_3': { top: 370, left: 0, width: 275, height: 400 },
...
}
My question is, what is a valid algorithm that would, when the user clicks one in the menu, correctly place a new panel (of a given width and height) in unoccupied space that is closest to a left and top (x and y) value of 0, 0, without overlapping any of the existing panels?
I think, simple bruteforce algorithm will fit you. As I remember, fit rectangle solve another problem
Iterate over your dashboard axis to find out, whether you can place your rectangle, until X < rectangle.widh + dashboard.width, same for Y.
Foreach X,Y on dashboard iterate over every panel to find whether they overlap. You can apply some optimization, to decrease amount of iteration. If panel overlap rectangle, you can increase X or Y(which is in nested loop) not by 1, but by width or height of panel.
In most cases, you will not make dashboard.width*dashboard.height*panel.count iteration. With some optimization, it will find best fit rather quick
I know this is an old question but if anyone wants a proof of concept then it looks like this:
function findSpace(width, height) {
var $ul = $('.snap-layout>ul');
var widthOfContainer = $ul.width();
var heightOfContainer = $ul.height();
var $lis = $ul.children('.setup-widget'); // The li is on the page and we dont want it to collide with itself
for (var y = 0; y < heightOfContainer - height + 1; y++) {
var heightOfShortestInRow = 1;
for (var x = 0; x < widthOfContainer - width + 1; x++) {
//console.log(x + '/' + y);
var pos = { 'left': x, 'top': y };
var $collider = $(isOverlapping($lis, pos, width, height));
if ($collider.length == 0) {
// Found a space
return pos;
}
var colliderPos = $collider.position();
// We have collided with something, there is no point testing the points within this widget so lets skip them
var newX = colliderPos.left + $collider.width() - 1; // -1 to account for the ++ in the for loop
x = newX > x ? newX : x; // Make sure that we are not some how going backwards and looping forever
var colliderBottom = colliderPos.top + $collider.height();
if (heightOfShortestInRow == 1 || colliderBottom - y < heightOfShortestInRow) {
heightOfShortestInRow = colliderBottom - y; // This isn't actually the height its just the distance from y to the bottom of the widget, y is normally at the top of the widget tho
}
}
y += heightOfShortestInRow - 1;
}
//TODO: Add the widget to the bottom
}
function isOverlapping($obsticles, tAxis, width, height) {
var t_x, t_y;
if (typeof (width) == 'undefined') {
// Existing element passed in
var $target = $(tAxis);
tAxis = $target.position();
t_x = [tAxis.left, tAxis.left + $target.outerWidth()];
t_y = [tAxis.top, tAxis.top + $target.outerHeight()];
} else {
// Coordinates and dimensions passed in
t_x = [tAxis.left, tAxis.left + width];
t_y = [tAxis.top, tAxis.top + height];
}
var overlap = false;
$obsticles.each(function () {
var $this = $(this);
var thisPos = $this.position();
var i_x = [thisPos.left, thisPos.left + $this.outerWidth()]
var i_y = [thisPos.top, thisPos.top + $this.outerHeight()];
if (t_x[0] < i_x[1] && t_x[1] > i_x[0] &&
t_y[0] < i_y[1] && t_y[1] > i_y[0]) {
overlap = this;
return false;
}
});
return overlap;
}