I have:
toastr.error("You've run out of guesses! Game over!")
toastr.options.timeOut = 0;
toastr.options.positionClass = 'toast-bottom-center';
toastr.info(`The right number was: "${rightGuessString}"`, 0);
However, the toast always shows on the top-right corner of the viewport.
Related
I have a problem with a specific use of javascript. On my development website https://famnabuurs.nl I prepared a simple page with three columns.
I manipulate the mousepointer... On the left and right side the cursor disappears by objective. When I move my mousepointer over the image in the center, the textblock should show up and then follow the mousepointer until the mousepointer leaves the image again.
The moving phase works fine as long as I move the mouse to the left side, but when I move the cursor from left to right over the image the mouse seems to get nervous. Also when I move from top to bottom it goes wrong. The textblock jumps from cursor-position to top of the image and back. I assume I made a mistake in the javascript, but no idea what causes this issue.
This is my relevant code, the part that follows the mousepointer:
function mousemovedimage(e) {
const imageItSelf = document.getElementById(objectnaam);
const titleblock = document.getElementById(objectnaam+'_id');
// on mouseover make the sheet visible
var imageOffset = imageItSelf.getBoundingClientRect();
let xpos = e.clientX - imageOffset.left ;
// do not shift too far to the right
if (xpos > imageItSelf.clientWidth) {
titleblock.style.setProperty('display','none', 'important');
} else {
if (xpos < 0) {
// do not shift too far to the left
titleblock.style.setProperty('display','none', 'important');
} else {
titleblock.style.setProperty('display','block', 'important');
titleblock.style.top = e.offsetY + 'px';
titleblock.style.left = (xpos) + 'px';
}
}
}
This function is added as an eventListener:
objectnaam = 'roel-image-twee-eiken-desktop-tablet';
document.addEventListener('mousemove', mousemovedimage);
The titleblock is the moving textblock.
Could someone give me a hint to solve this issue?
This is caused by the pointer going over the text. Try setting pointer-events: none to the title. Something like:
titleblock.style.setProperty('pointer-events','none');
I don't want to play animation,I want to chage sprite's frames by clicking right and left buttons.
var sprite = game.add.sprite(200, 100, 'mySprite');
sprite.frame = 3;
Now, if a right button is pressed I want this sprite goes to next frame
sprite.frame += 1;
If left button is pressed, sprites goes to the previous frame.
sprite.frame -= 1;
If left is pressed and current frame is 0 the sprite does not change it's frame, it stops on frame 0. I want the sprite goes from 0 to the last frame when I click left button.
For example, in Actionscript 3, I can do this:
sprite.gotoAndStop(sprite.totalFrames);
Is there "totalFrames" in Phaser/JS?
I did not find any answer, I have created a custom variable 'totalFrames' for all objects. The first frame is 0, then 1 and so on...
if (rightClick)
{
objects.frame += 1;
}
else if (leftClick)
{
if (objects.frame > 0)
{
objects.frame -= 1;
}
else
{
objects.frame = objects.totalFrames;
}
}
A bit late, buy you could try Phaser.GameObjects.Sprite.anims.getTotalFrames()
So imagine that you want to display a red block when the user scrolls down 600px, and when the user scrolls above 600px you want to display a blue box. That's fine; however, you only want to display the blue box, after the red box has been displayed once/or rather, after the user has scrolled passed 600px once. The obvious thing to do would be to display the red block when the "scrollTop" is greater than (>) 600px, and display the blue block when the "scrollTop" is less than (<) 600px; however, doing this displays the blue block as soon as "scrollTop" reaches 1px, since technically, scrollTop < 600px includes every pixel under 600.
So I need to display the blue block, only after the red block has been displayed once/600 px has been passed once.
jQuery:
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 600) {
$("#square").css("background-image", "url(images/comp_rel/red_block.gif)");
}
else {
$("#square").css("background-image", "url(images/comp_rel/blue_block.gif)");
}
});
In advance, thanks for any help.
Use this:
var shw = false;
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 600) {
shw=true;
$("#square").css("background-image", "url(images/comp_rel/red_block.gif)");
}
else {
if(shw)
$("#square").css("background-image", "url(images/comp_rel/blue_block.gif)");
}
});
I need to use Slider Revolution to animate content when the slider is scrolled into view. I already have working solution - http://www.themepunch.com/faq/start-animations-when-slider-scrolls-into-view/ but it has one serious bug.
When user already seen slider it start to animate again when user scrolling it again.
I want to make slide not to re-animate when user scroll to it after he already seen it.
Clarification: user scrolls down to slide - slide start to animate - (super!) - user go down to the end of the page - then go back - and slider start to animate from the beginning (bad (for me)). I want to make slider stop after he played the animation for first time.
Update with relevant code:
var win, slider, sliderHeight, sliderPaused = true, winHeight,
// Change the "revapi6" part here to whatever "revapi" name that your slider uses
slider = revapi6.on('revolution.slide.onloaded', function() {
win = jQuery(window).on('scroll', checkScroll).on('resize', sizer);
sizer();
});
function sizer() {
sliderHeight = slider.height();
winHeight = win.height();
checkScroll();
}
function checkScroll() {
var scrTop = win.scrollTop(),
offset = slider.offset().top;
if(offset <= scrTop + winHeight && offset + sliderHeight >= scrTop) {
if(sliderPaused) slider.revshowslide(2);
sliderPaused = false;
}
else {
if(!sliderPaused) slider.revshowslide(1);
sliderPaused = true;
}
}
It's in "Custom JavaScript" block in my slider settings. All just like here - http://www.themepunch.com/faq/start-animations-when-slider-scrolls-into-view/.
Site - uhhu.net
Resolve. Maybe it's not the best way, but it works and i don't know better
Comment this part
/*else {
if(!sliderPaused) slider.revshowslide(1);
sliderPaused = true;
}*/
I let you here my solution:
1- Go to Slider Revolution:
2- Select your slider:
3- Click on Slider Settings Tab:
4- In the right panel click on "Parallax and 3D" and compare with your current configuration:
5- In the right panel click on "Scroll Effects"(bellow of "Parallax and 3D") and compare with your current configuration:
6- To finish Save the configurations:
I have this :
<div id="randomp" style="position:absolute;top:3px;left:3px;width:165px;height:29px;background:url(/logo2.png) no-repeat;background-size: 165px;"></div>
I want that the propierty "top" and "left" change every time you enter into the page. I mean that some times it appear on the right top corner, right bottom corner, left top corner and left bottom corner..
Here it is what i have tryied:
http://redzer.com.mx/tabla.html
I would probably start with the div styled as position:fixed and with display:none:
<div id="randomp" style="display:none;position:fixed;width:165px;height:29px;background:url(/logo2.png) no-repeat;background-size: 165px;"></div>
Then use jQuery to determine the position CSS to set and turn on visibility
$(document).ready(function() {
// get jQuery object for the div
var $randomp = $('#randomp');
// determine whether to show top or bottom, left or right
var top = Math.round(Math.random()); // generate 0 or 1 value
if (top === 1) {
$randomp.css('top', '3px');
} else {
$randomp.css('bottom', '3px');
}
var left = Math.round(Math.random());
if (left === 1) {
$randomp.css('left', '3px');
} else {
$randomp.css('right', '3px');
}
// show the div
$randomp.show();
});
Of course, you could also use server-side code to do this, but since you asked specifically about javascript/jquery in your tags, I suggested this solution.
I think i got exactly what you need.
EXAMPLE
With javascript i am generating random numbers for the top and left positioning of your image every time you visit the page.
Right now i set them up to get a random number between 0 and 100 but you can change that to whatever you want.
var random1 = Math.ceil(Math.random() * 100);
var random2 = Math.ceil(Math.random() * 100);
$(document).ready(function () {
$('#randomp').css('top', random1);
$('#randomp').css('left', random2);
});