I'm using the chessboardjs JavaScript library.
I load the position with the following code:
var board = new ChessBoard('board');
board.start(false);
var currentPosition = FENSTRING; //'r1bqkbnr/pppp1ppp/2n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R';
board.position(currentPosition, false);
Now I want black to move first.
How can I do this ? I read all the documentation on http://www.chessboardjs.com and can not find a way to tell the board so black must move first.
chessboardjs is "just a board" and has no knowledge of the game of chess. ie: who's turn it is, what moves are legal, etc
(disclaimer: I am the author of chessboardjs)
That's against the very rule of the game, Chess. Only white makes the first move, and that is how it should be, because that's how it is designed to be.
Black never makes the first move.
You could however alter the images of the pieces as it is how they're managed in the link you've given, and try to make it look like Black is making the first move.
Related
I am trying to add an image/blank rectangle on top of/overlaid on the top and bottom of every image on an html page. I plan to do this via a user-script, but I could not find any information on how to append an image on another at a specified PX x PX. I am slightly familiar with js. I have done two small hobby projects (an image parser and a poker game) this being the third, and assume I will have to achieve following:
Create a blank image to cover the top and bottom part of the image.
This can be done by creating a simple rectangle I think. I can play with the parameters of the size to make it fit.
get every image on the site
I can probably do this by parsing the DOM (I'm not sure if I need to do this if I am using a user-script) and doing a forEach(img), and within the forEach(img => I can add the rectangle to the top and bottom thereby adding it to every image on the page.
somehow append the blank image from above on top of the top and bottom of each image.
This is where I am lost. I have appended images to the DOM before, but I don't know how to do it through a user-script and I also don't know have to append an image on another image. I have thought of doing the following, but I am unsure how to continue:
I also have linked an example where I would use this user-script. What I am trying to do is remove a watermark. (I am only doing this locally on my computer as to not steal the translators work, which is why I am using JavaScript.) So to recap I am looking for how to solve number 3, and if possible/optionally an explanation of how to do this in grease-monkey or any other user-script manager. Let me know if anything was unclear and thanks to anybody who comments/answers this problem. edit:clarity
here is a link to an example use case
If you just need these two balnk space on each img on the page, just using this css:
img{
height: 945px;
object-fit:cover;
}
Or js:
var x = document.querySelectorAll("img");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.height = "954px";
x[i].style.objectFit = "cover";
}
I am trying to animate a line on scroll but I am at a loss at the moment. The final result should be similar to how the lines animate on this site, http://www.teslamotors.com/goelectric#range (you have to scroll a little bit to get to the lines).
There is a static gray line, and then a red line that gets height when the user scrolls down. If the user scrolls up while part, or all of the red line is visible, height will be subtracted from the red line. BUT nothing should happen to the red line until the user has scrolled 200px down the page.
I have created a fiddle for this problem and I am pretty sure I know where my problem lies, but I do not have an answer for how to fix it. I think it is because my variables currentScrollPosition and lastScrollPosition in function countUp135 are always equal to each other.
Any help would be greatly appreciated. Here is my fiddle:
http://jsfiddle.net/tripstar22/2HDVA/5/
Thanks in advance!
Although there is many ways to do this in JS, I'll offer an alternative css method. Instead of animating a line on scroll you can just give the illusion that the line is animating. Check out this fiddle here. As you can see The fixed red element will follow the window on scroll and fill in the transparent area between the divs, making it seem like a red line is being drawn.
You can overlay an image with a transparent line running through it instead of grey divs to minimize the code even more, or you can add js to make the animation more fancy.
There are a lot of functions in your fiddle, where I do not understand why you should need them nor what they do. An updated version of your fiddle, seems to do what you want. There was no need for all thoses methods.
This seems to be enough:
var scrollTop = getScrollTop();
if (scrollTop > 200) {
addHeightPath1(scrollTop - 150);
} else {
addHeightPath1(0);
}
I'm also wondering about the function stoppedScrolling, where an asynchronous time function is beeing started, but you try to get an result from the stoppedSrolling() function, that is never passed as a return.
Long-time lurker here. This is my first post (and I'm an electrical engineer, not a programmer).
I would like to have an element in HTML for which I can detect a click on its upper-half and its lower-half. Specifically, suppose I have a large numeric digit, and if you click above its "waist" it increments, and if you click below its waist it decrements. I then need to put several of these next to one another, like a "split-flap display" at a train station.
I already have all the javascript working for increment-only, but I want to make it easier to decrement instead of having to wrap all the way around with many clicks. I have so far avoided using jquery, so if you can think of an HTML-only way to do this I would love to hear about it.
I realize I will probably have to wrap two smaller containers (an upper and a lower one) into a larger container, but how do I get the text to cover the height of both internal containers? I probably want to avoid cutting a font in half and updating upper and lower separately.
Thanks,
Paul
This should work:
element.addEventListener('click',function(e){
//here's the bounding rect
var bound=element.getBoundingClientRect();
var height=bound.height;
var mid=bound.bottom-(height/2);
//if we're above the middle increment, below decrement
if(e.clientY<mid)
;//we're above the middle, so put some code here that increments
else
;//we're below the middle, so put some code here that decrements
},false);
element is the element that you wish to apply this effect on
I want to display a thin rounded corner border around my game. Can I leverage the RoundedRect for this, or do I have to do something else? I see it doesn't come natively, so I was wondering how it's done.
Thanks.
You can put the entire game into a lime.RoundedRect and add a border to it.
// requirements
goog.require('lime.RoundedRect');
// in your main function
var gameContainer = new lime.RoundedRect();
gameContainer.setStroke(12,'#000000');
gameContainer.appendChild(/* the rest of your code here */);
I'm not familiar with LimeJS but you could try using border-radius as a CSS property on the element the game renders to.
So I have this page here:
http://www.eminentmedia.com/development/powercity/
As you can see when you mouse over the images the div slides up and down to show more information. Unfortunately I have 2 problems that i can't figure out and I've searched but haven't found quite the right answer through google and was hoping someone could point me in the direction of a tutorial.
The first problem is that when you mouse over an image it changes to color (loads a new image), but there's a short delay when the image is loading for the first time so the user sees white. Do I have to preload the images or something in order to fix that?
My second problem is that when you move your mouse over the 'additional content area' it goes crazy and starts going up and down a bunch of times. I just don't have any idea what would cause this but i hope one of you will!
All my code is directly in the source of that page if you would like to view the source.
Thanks in advance for your help!
Yes, you have to preload the images. Thankfully, this is simple:
var images_to_preload = ['myimage.jpg', 'myimage2.jpg', ...];
$.each(images_to_preload, function(i) {
$('<img/>').attr({src: images_to_preload[i]});
});
The other thing you have to understand is that when you use jQuery you have to truly embrace it or you will end up doing things the wrong way. For example, as soon as you find yourself repeating the same piece of code in different places, you are probably doing something wrong. Right now you have this all over the place:
<div id="service" onmouseover="javascript:mouseEnter(this.id);" onmouseout="javascript:mouseLeave(this.id);">
Get that out of your head. Now. Forever. Always. Inline javascript events are not proper, especially when you have a library like jQuery at your disposal. The proper way to do what you want is this:
$(function() {
$('div.box').hover(function() {
$(this).addClass('active');
$(this).find('div.slideup').slideDown('slow');
}, function() {
$(this).removeClass('active');
$(this).find('div.slideup').slideUp('slow');
});
});
(You have to give all the #industrial, #sustainable, etc elements a class of 'box' for the above to work)
These changes will also fix your sliding problem.
I can see your images (the ones that are changing) are set in the background of a div. Here is a jquery script that preloads every image found in a css file. I have had the same problem in the past and this script solves it. It is also very easy to use:
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
I will take a look at your other problem...
1) You should be using the jquery events to drive your mouseovers. Give each div a class to indicate that its a category container and use the hover function to produce the mouseover/mouseout action you're after.
html
<div id="industrial" class="category"></div>
Javascript
$(".category").hover(
function () {
$(this).find('.container').show();
},
function () {
$(this).find('.container').hide();
}
);
I simplified the code to just do show and hide, you'll need to use your additional code to slide up and slide down.
2) Yes, you need to preload your images. Another option would be "sprite" the images. This would involve combining both the black and white and colour versions of each image into a single image. You then set it as the div's background image and simply use CSS to adjust the background-position offset. Essentially, sliding instantly from the black and white to colour images as you rollover. This technique guarentees that both images are fully loaded.