We Keep Coding

how to put numbers next to pictures in css

So i'm currently making a simple strategy game in html using css and javascript too. I'm very new to this so this might seem obvious and simple to you all but i'm very confused.
So i have my picture, it's a little pixel battleship i made. I want to have a number show next to that ship to tell how many i have. How do i do that? I assume you have to use css for that right? In the end there are going to be 6 ship types.
Thanks in advance,
Lucas

You can put the image in a container with position set to relative. Then put some text inside some tag and position it absoutely
for example
<div style="position:relative">
<img src="your image here">
<p style=""position:absolute; right: 0"></p>
</div>

Use float property of CSS to display text next to an image.
This link might help https://www.w3schools.com/css/css_float.asp

How to change md-whiteframe value on scroll down in Material Angular

I am new to Material Angular, and just started using it around a month ago, so this might be a simple question. Anyway, I have a toolbar set to a white frame of 0. When I scroll down in my md-content I would like to have the white frame value change to 2 or 4 or just another number, hence giving it a shadow. I also would like to have it animate, not having the shadow just blink/appear. An example of that would be the Google Fonts website. If you look at the picture bellow you will see a line under the toolbar. Then the Picture under that shows that when you scroll it turns into a shadow. Outline above.
Shadow above.
I would try to invest time in inspecting their css, js, and html, but I am actually working on a project for school, which is due next Friday, and I have to type up a bunch of content, and gather information.
I was able to make a shadow appear at the bottom of the md-content, but that was by adding a css selector with a box-shadow when I scrolled down, I just can't figure out how to change the md-whiteframe value on scroll.
I have tried to use a variable. Like md-whiteframe="{{ctrl.elevation}}"
Then say something like
if(item.scrolltop > 0) {
this.elevation = 0;} else {
this.elevation = 4;}
I tried something like that in my js, but it just ended up as a mess. This isn't a really big deal I am just trying to give my project some nice touches. I would really appreciate any help though. Thank you in advance. Also I looked for questions similar to this, and didn't find any that were what I wanted, but if you find a question that answers this then please tell me.

Try to act on the class property of the md-whiteframe directive.
For instance:
<md-whiteframe class="{{ctrl.elevationClass}}">
<span>My content</span>
</md-whiteframe>
On your controller:
if(item.scrolltop > 0) {
this.elevationClass = 'md-whiteframe-1dp';
} else {
this.elevationClass = 'md-whiteframe-4dp';
}
https://material.angularjs.org/latest/demo/whiteframe

Move an image across the page a random amount

I am trying to move an image across the page using a random number that will affect how much the image will move. I got the random number to display so I know the number is generating but my image won't move at all.
Below is the html, javascript, and css that I have used:
http://jsbin.com/bodajisihu/1/edit?html,css,js,output

http://jsbin.com/begafabuya/1/edit?html,css,js,output
Please check this edited JSBin.
I made following changes:
1. You were trying to get left value as car1.style.left, which doesn't work for an image if you have defined left in external style. You needed to make it inline.
2. Now, you can use car1.style.left, but still it returns a string with 'px' appended to it, so I replaced that using .replace("px", ""). But I think parseInt alone could take care of truncating that bit, so this point may not matter
Please note here that car1 is reference to the car element i.e. var car1 = document.getElementById('car1');.

You misspelled the function name. There's an "s" in "moveCars"

Make my own custom timeline for a website

I'm a designer, but I also do some programming (javascript, html, css). I need to create a custom timeline for a website (Couldn't post a photo because of insufficient reputation on here, but here's a link to the design: http://postimg.org/image/5p92wkk8f/ Like you hover the mouse over a part of the timeline, and according to that the year changes) But I have no idea where to begin. (I tried looking it up on the internet, but there's no timeline code examples and I don't wanna generate a timeline from other websites, I wanna make a custom one that would be exactly like this design). Would anyone be able to give me hints, say anything useful, tell me where to start? Thanks!

Timeline JS is may be exactly what you are looking for. As it's open source tool, you can modify it as per your needs.

I'd make many divisions, one for each part (year in this case) of the timeline. So there'll be about 20 divs that together make the whole white line.
CSS would be something like:
.timeline { /*"timeline" is a class name that I made up.*/
background-color:#ffffff; /* This is white color, change it to the cream color of the timeline.*/
height: 30px; /*estimation*/
width: 30px; /*estimation*/
position:absolute;
}
.timeline:hover {
background-color:#000000; /* This is black color, change it to the brownish background color.*/
}
This is just a part of the CSS. You'll need to position each division with margins. With the CSS code done, you'll have the timeline change it's color for each div you hover on.
The harder part is actually changing the text, and for it we'll use javascript. In order to make the code not too long (and easier for me to write) I'm going to write it as if there were only 2 divisions in the timeline. Once you get what I do, you will be able to finish it off easily.
So first of all, add an id to the division in which the text is, "text" e.g. In html, add to the 2 timeline divisions the event onmouseover, then a function. The functions are numbered.
<div id="text">Here is some text</div>
<div class="timeline" onmouseover="changeText1()"></div>
<div class="timeline" onmouseover="changeText2()"></div>
Now we need to write the functions. We'll make a variable which will include the whole "text" id, then make 2 functions (one for each div) and make each function change the text according to the function's number.
var text_div=document.getElementById("text");
function changeText1()
{
text_div.innerHTML="Some Text"; //"Some Text" should be the text to be written when the user hovers his mouse on the FIRST part of the timeline.
}
function changeText2()
{
text_div.innerHTML="Some Text"; //"Some Text" should be the text to be written when the user hovers his mouse on the SECOND part of the timeline.
}
So let's review. The CSS makes the division change color when hovered on. Additionally, when a division of the timeline is hovered, it will trigger a function from the javascript code which will change the text, according to which division was hovered on.
Another thing you should notice: In the image you added, there isn't one paragraph only, for each paragraph a different CSS code. The javascript code I wrote will change the whole "text" division, making it's CSS be the affecting one for the whole text you entered in javascript ("Some Text" part). If you wish the CSS to stay different, you should:
make for each paragraph its own id (in html).
then make a new variable in javascript for each id.
and then add a new line to each function, which will change the inner HTML of the new paragraph separately.
If something is unclear, please ask.

onclick png background color change

I need to design a part of webpage like below the image. In the left side, there is color options. If the user pick any color from the left side and click on the image part, the part of the image should get filled by the picked color. I spent more time to google search. Most of the sites used flash only. But i do not know flash very well. Is it possible to achieve using jquery plugin?

You'll probably want to look into the <canvas> element. As for filling a particular bit of the image when clicked, you may want the floodfill algorithm.

Really this can be done simply, if you have strict control over what png files you use.
For example, you can make the png fully opaque with the exception of the area you want to colour.
Then you can load the image and just set the background colour of the element you are using when a colour is clicked.
Something like this:
$(".ColorOption").click(function(e){
e.preventDefault();
var color = $(this).data("color");
$("#MainImageBackground").css("background-color", color);
});
assuming you set up your colour options using the data attribute like so:
<a data-color="#F00"></a>
with your image something like:
<div id="MainImageBackground">
<img src="whatever"/>
</div>

You can solve this with Javascript, but therefore you need for every color a own image.
<script language="JavaScript" type="text/javascript">
function changePic(picColor)
{
if(picName == "btnRed")
{
document.getElementById(mainPic).src = "mainPicRed.jpg"
}
else if(picName == "btnYellow")
{
document.getElementById(mainPic).src = "mainPicYellow.jpg"
}
}
</script>
HTML for every color button:
<img src="red.jpg" name="btnRed" id="btnRed" onClick="changePic(this.name)">
<img src="mainPic.jpg" name="mainPic" id="mainPic">

Idea 1:
User the canvas element and look at fill methods, this is probably going to be more complex than flash.
Idea 2:
Create transparent PNG where the colourd area is the only part that is transparent.
Create 2 DIVS, 1 at z-index 10 and other at 20, same size, same position
Place image in top div which is z-index 20. Then change the colour of the background in div 1 which is at z-index 10.

To accept any png and fill the middle:
You can find information on the floodfill algorithm in javascript here:
http://jsfiddle.net/loktar/ZLw9m/
However your implementation will have to be more advanced as you need to convert the image to a format javascript understands (0's and 1's for example) and then run the algorithm on that
As #musefan pointed out if you can control the PNG's this is much easier