JavaScript issue with bouncing on windows' edges - javascript

I'm trying to add on my website a script making a picture bouncing on the edges of the web browser, like the old DVD logo. At first it works, but when you reload the page, the limits are broken and the picture goes out of the frame.
Can't explain what's wrong, could anyone help me with this? Thanks :)
```JavaScript
(function ($, window, undefined) {
$.fn.headgaelify = function (options) {
var settings = $.extend({
horizontal: true,
vertical: true,
speed: 100, // In pixels per second
container: $(this).parent(),
bumpEdge: function () {}
}, options);
return this.each(function () {
var containerWidth, containerHeight, elWidth, elHeight, move, getSizes,
$el = $(this);
getSizes = function () {
containerWidth = settings.container.outerWidth();
containerHeight = settings.container.outerHeight();
elWidth = $el.outerWidth();
elHeight = $el.outerHeight();
};
move = {
right: function () {
$el.animate({left: (containerWidth - elWidth)}, {duration: ((containerWidth/settings.speed) * 1000), queue: false, easing: "linear", complete: function () {
settings.bumpEdge();
move.left();
}});
},
left: function () {
$el.animate({left: 0}, {duration: ((containerWidth/settings.speed) * 1000), queue: false, easing: "linear", complete: function () {
settings.bumpEdge();
move.right();
}});
},
down: function () {
$el.animate({top: (containerHeight - elHeight)}, {duration: ((containerHeight/settings.speed) * 1000), queue: false, easing: "linear", complete: function () {
settings.bumpEdge();
move.up();
}});
},
up: function () {
$el.animate({top: 0}, {duration: ((containerHeight/settings.speed) * 1000), queue: false, easing: "linear", complete: function () {
settings.bumpEdge();
move.down();
}});
}
};
getSizes();
if (settings.horizontal) {
move.right();
}
if (settings.vertical) {
move.down();
}
// Make that shit responsive!
$(window).resize( function() {
getSizes();
});
});
};
})(jQuery, window);
$(document).ready( function() {
$('.headgael').headgaelify({
speed: 300,
bumpEdge: function () {
var newColor = "hsl(" + Math.floor(Math.random()*360) + ", 100%, 100%)";
$('.headgael .logo').css('fill', newColor);
}
});
});

Related

Muuri multiple grid data

How i can draw data-id for each column item in my function updateIndices simillar to updateColumnIndices?
I want to make my grid more dynamic.
I using only javascript and Muuri lib for drag and drop.
Thank you for help.
Muuri is a JavaScript layout engine that allows you to build all kinds of layouts and make them responsive, sortable, filterable, draggable and/or animated. Comparing to what's out there Muuri is a combination of Packery, Masonry, Isotope and Sortable. Wanna see it in action? Check out the demo on the website.
My code for this task under spoiler
function setupItemContainer() {
let itemContentContainer = document.querySelectorAll('.board-column-content');
for(let i = 0; i < itemContentContainer.length; i++)
{
if(!itemContentContainer[i].classList.contains('muuri'))
{
itemContainers.push(itemContentContainer[i]);
muuriItems = new Muuri(itemContentContainer[i], {
itemDraggingClass: 'muuri-item-default-dragging',
dragSortHeuristics: {
sortInterval: 10,
minDragDistance: 5,
minBounceBackAngle: Math.PI / 2
},
dragPlaceholder: {
enabled: true,
duration: 100,
easing: 'ease',
createElement: null,
onCreate: null,
onRemove: null
},
items: '.board-item',
layoutDuration: 400,
layoutEasing: 'ease',
dragEnabled: true,
dragSort: function () {
return columnGrids;
},
dragSortInterval: 0,
dragContainer: document.body,
dragReleaseDuration: 400,
dragReleaseEasing: 'ease',
itemPlaceholderClass: 'muuri-item-placeholder'
})
.on('dragStart', function (item) {
item.getElement().style.width = item.getWidth() + 'px';
item.getElement().style.height = item.getHeight() + 'px';
})
.on('dragReleaseEnd', function (item) {
item.getElement().style.width = '';
item.getElement().style.height = '';
columnGrids.forEach(function (muuriItems) {
muuriItems.refreshItems();
});
})
.on('layoutStart', function () {
muuriColumns.refreshItems().layout();
})
.on('move', updateIndices)
.on('sort', updateIndices);
columnGrids.push(muuriItems);
}
}
}
function setupColumnsContainer() {
muuriColumns = new Muuri(gridElement, {
itemDraggingClass: 'muuri-item-column-dragging',
layoutDuration: 400,
layoutEasing: 'ease',
dragEnabled: true,
dragSortInterval: 0,
dragStartPredicate: {
handle: '.board-column-header'
},
dragReleaseDuration: 400,
dragReleaseEasing: 'ease',
})
.on('move', updateColumnIndices)
.on('sort', updateColumnIndices);
}
function updateColumnIndices() {
muuriColumns.getItems().forEach(function (item, i) {
item.getElement().setAttribute('data-id', i);
});
}
function updateIndices() {
muuriItems.getItems().forEach(function (item, i) {
item.getElement().setAttribute('data-id', i);
});
}

How to reuse assets in multiple scenes

I want to reuse assets in multiple scenes, but I get this error:
Texture key already in use
Here is the relevant code. Notice that I want to use the same spritesheet in both scenes. How do I do that without getting this error?
class InventoryScene extends Phaser.Scene {
constructor() {
super({ key: 'InventoryScene', active: true });
}
preload() {
this.load.spritesheet('sheet1', 'assets/sheet1.png',
{ frameWidth: 16, frameHeight: 16 });
}
create() {
this.add.sprite(this.game.canvas.width * .50,
this.game.canvas.height * .50, 'sheet1')
.setFrame(0)
.setInteractive()
.on('pointerdown', () => this.zoomIn())
.setScale(6);
}
}
class GameScene extends Phaser.Scene {
constructor() {
super({ key: 'GameScene', active: true });
}
preload() {
this.load.spritesheet('sheet1', 'assets/sheet1.png',
{ frameWidth: 16, frameHeight: 16 });
}
create() {
this.add.sprite(this.game.canvas.width * .50, this
.game.canvas.height * .50, 'sheet1')
.setFrame(0)
.setVisible(false);
}
}
Here is my game config:
var config = {
...
// Order here matters. The first scene is listed last.
scene: [DebugScene, InventoryScene, GameScene, HowToPlayScene, TitleScene]
};
Then I use this.scene.bringToTop('HowToPlayScene') to activate a scene.
PS: I am using Phaser 3
I created for you modified example with Phaser v3.17.
Copy Paste the code below and replace exist one in the page.
Click on 'Run Code' button on the top of the screen and may be have to wait 5-10 seconds:
https://labs.phaser.io/edit.html?src=src/scenes/changing%20scene.js
Scenes will be changed by click on first scene and others in loop.
Pay attention on "face" and "balls" spritesheet that was loaded only in first scene and this.scene.start('sceneB');
var SceneA = new Phaser.Class({
Extends: Phaser.Scene,
initialize:
function SceneA() {
Phaser.Scene.call(this, { key: 'sceneA' });
},
preload: function () {
this.load.image('face', 'assets/pics/bw-face.png');
this.load.spritesheet('balls', 'assets/sprites/balls.png', { frameWidth: 17, frameHeight: 17 });
},
create: function () {
this.add.sprite(400, 300, 'face').setAlpha(0.2);
this.add.sprite(400, 300, 'balls', 3);
this.input.once('pointerdown', function () {
console.log('From SceneA to SceneB');
this.scene.start('sceneB');
}, this);
}
});
var SceneB = new Phaser.Class({
Extends: Phaser.Scene,
initialize:
function SceneB() {
Phaser.Scene.call(this, { key: 'sceneB' });
},
preload: function () {
this.load.image('arrow', 'assets/sprites/longarrow.png');
},
create: function () {
this.add.sprite(400, 300, 'face').setAlpha(1);
this.arrow = this.add.sprite(400, 300, 'arrow').setOrigin(0, 0.5);
this.add.sprite(400, 300, 'balls', 3);
this.input.once('pointerdown', function (event) {
console.log('From SceneB to SceneC');
this.scene.start('sceneC');
}, this);
},
update: function (time, delta) {
this.arrow.rotation += 0.01;
}
});
var SceneC = new Phaser.Class({
Extends: Phaser.Scene,
initialize:
function SceneC() {
Phaser.Scene.call(this, { key: 'sceneC' });
},
preload: function () {
this.load.image('mech', 'assets/pics/titan-mech.png');
},
create: function () {
this.add.sprite(Phaser.Math.Between(0, 800), 300, 'mech');
this.add.sprite(400, 300, 'balls', 3);
this.input.once('pointerdown', function (event) {
console.log('From SceneC to SceneA');
this.scene.start('sceneA');
}, this);
}
});
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#000000',
parent: 'phaser-example',
scene: [SceneA, SceneB, SceneC]
};
var game = new Phaser.Game(config);

jQuery on click not working every other time

I have a few sliding screens that are triggered by clicking on images. The first time the image is clicked it seems to work fine but the third time the click is not working for some reason.
JS:
$(document).ready(function () {
var sliding = false;
var introButtons = anime({
targets: '.introButtons',
scale: 0.95,
duration: 800,
easing: 'easeInOutQuart',
direction: 'alternate',
elasticity: 200,
loop: true
});
//Energy Track
$('#for-energy').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#screen1').fadeOut('slow', function () {
$('#screen2').toggle('slide', {
direction: 'right'
}, 800, function () {
var twoRotation = anime({
targets: 'td img',
delay: 300,
opacity: 1,
rotate: '2turn'
});
sliding = false;
});
});
}
});
//Energy back
$('.energy .backButton').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#screen2').toggle('slide', {
direction: 'left'
}, 800, function () {
$('#screen1').toggle('slide', {
direction: 'right'
}, 800);
//Remove Anime
var removeAnime = anime({
targets: 'td img',
delay: 100,
opacity: 0,
rotate: '0'
});
sliding = false;
});
}
});
//For health
$('#for-health').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#screen1').fadeOut('slow', function () {
$('#health').toggle('slide', {
direction: 'right'
}, 800, function () {
var twoRotation = anime({
targets: 'td img',
delay: 300,
opacity: 1,
rotate: '2turn'
});
sliding = false;
});
});
}
});
//Health back
$('.health .backButton').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#health').toggle('slide', {
direction: 'left'
}, 800, function () {
$('#screen1').toggle('slide', {
direction: 'right'
}, 800);
//Remove Anime
var removeAnime = anime({
targets: 'td img',
delay: 100,
opacity: 0,
rotate: '0'
});
sliding = false;
});
}
});
//For fun
$('#for-fun').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#screen1').fadeOut('slow', function () {
$('#fun').toggle('slide', {
direction: 'right'
}, 800, function () {
var twoRotation = anime({
targets: 'td img',
delay: 300,
opacity: 1,
rotate: '2turn'
});
sliding = false;
});
});
}
});
//For fun back
$('.fun .backButton').on('click dblclick', function () {
if (!sliding) {
sliding = true;
$('#fun').toggle('slide', {
direction: 'left'
}, 800, function () {
$('#screen1').toggle('slide', {
direction: 'right'
}, 800);
//Remove Anime
var removeAnime = anime({
targets: 'td img',
delay: 100,
opacity: 0,
rotate: '0'
});
sliding = false;
});
}
});
});
I believe the issue is with the sliding variable, I just can't figure out which instance of the variable is causing the issue.
When clicking back and forth from bowls to smoothies to juices and selecting a few options it works the first few times you select a new product and then every third or so time it seems to stop working, i.e. it won't let you select any image. Clicking on the image does nothing.
You can see it in action here: http://ameliarthompson.com/development-works/Jamba-Juice-Nutrition-Facts%202/
I'm currently using the sliding variable to keep the toggle from being toggled twice if a user double clicks. See this question for more on what I'm talking about: jQuery slide toggle fires twice on double click
in some function you miss to make sliding = false
and i think you need to put it outside the toggle for example in #island you shoud write it like this and put sliding =false out side the toggle
$('#island').on('click dblclick', function(){
if(!sliding){
sliding = true;
$('.guide').fadeOut('slow', function(){
$('#islandFacts').toggle('slide', {direction: 'right'}, 800, function(){
sliding = false;
});
});
}
});

How to get random number in the jQuery Plugin

I am using the jQuery plugin located at https://github.com/tombruijn/counter.js
but I want to show random number in this.The demo is located at
http://yipi.in
My code is as :
<script type="text/javascript">
var counterUp = $("#counter-up");
counterUp.counter({
autoStart: true,
duration: 21000,
countFrom: 10,
countTo: 2024,
placeholder: 0,
easing: "easeOutCubic",
onStart: function() {
document.getElementById("trigger").innerHTML = "Result"
},
onComplete: function() {
document.getElementById("trigger").innerHTML = "Result"
}
});
var counterDown = $("#counter-down");
counterDown.counter({
autoStart: true,
countTo: 0,
duration: 7000,
easing: "easeOutCubic"
});
$(document).on("click", "button", function() {
counterUp.counter("start");
counterDown.counter("start");
});
</script>
You can use the Math.random function
var randNumber = Math.random() * 2013;
it will give return number between 1 to 1000;
var start = 10;
var end = Math.ceil(Math.random() * 2013) + 10;
var counterUp = $("#counter-up");
counterUp.counter({
autoStart: true,
duration: 21000,
countFrom: start,
countTo: end,
placeholder: 0,
easing: "easeOutCubic",
onStart: function() {
document.getElementById("trigger").innerHTML = "Result"
},
onComplete: function() {
document.getElementById("trigger").innerHTML = "Result"
}
});
var counterDown = $("#counter-down");
counterDown.counter({
autoStart: true,
countTo: 0,
duration: 7000,
easing: "easeOutCubic"
});
$(document).on("click", "button", function(){
counterUp.counter("start");
counterDown.counter("start");
});

jQuery Knob update value with animate

I'm trying to build clock using jQuery Knob.
My clock is working (http://jsfiddle.net/Misiu/9Whck/1/), but right now I'm trying to add some extras to it.
At beginning I want to have all knobs set to 0, then using animate I want to animate their value to current time and then start normal timer update.
My code looks like this (demo here: http://jsfiddle.net/Misiu/cvQED/81/):
$.when(
$('.h').animate({
value: h
}, {
duration: 1000,
easing: 'swing',
progress: function () {
$(this).val(Math.round(this.value)).trigger('change');
}
}),
$('.m').animate({
value: m
}, {
duration: 1000,
easing: 'swing',
progress: function () {
$(this).val(Math.round(this.value)).trigger('change');
}
}),
$('.s').animate({
value: s
}, {
duration: 1000,
easing: 'swing',
progress: function () {
$(this).val(Math.round(this.value)).trigger('change');
}
})).then(function () {
myDelay();
});
function myDelay() {
var d = new Date(),
s = d.getSeconds(),
m = d.getMinutes(),
h = d.getHours();
$('.h').val(h).trigger("change");
$('.m').val(m).trigger("change");
$('.s').val(s).trigger("change");
setTimeout(myDelay, 1000)
}
In when I must call animate for every knob separately, but I would like to use data-targetValue and to have only one animate inside when.
Can this be done?
if you want to use data-targetValue you need to change your js like this
$('.h').data('targetValue', h);//$('.h').attr('targetValue', h);
$('.m').data('targetValue', m);
$('.s').data('targetValue', s);
//...
$.when(
$('.knob').each(function(){//each .knob
$(this).animate({//animate to data targetValue
value: $(this).data('targetValue')
}, {
duration: 1000,
easing: 'swing',
progress: function () {
$(this).val(Math.round(this.value)).trigger('change')
}
});
})
).then(function () {
myDelay();
});
http://jsfiddle.net/cvQED/83/
or without .each
$.when(
$('.knob').animate({
value: 100
}, {
duration: 1000,
easing: 'swing',
progress: function () {
$(this).val(Math.round(this.value/100*$(this).data('targetValue'))).trigger('change')
}
})
).then(function () {
myDelay();
});
http://jsfiddle.net/cvQED/84/

Categories

Resources