how to put numbers next to pictures in css - javascript

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

Related

Center this text inside this special image slider

I need to get the text inside these images.
The overview of the problem -> I basically need to have text inside each image.
Link to codepen --> https://codepen.io/martispyc/pen/KKmjWZj?editors=1100
Appreciated if the slider would slide these kinds of divs, not the images and text, but whatever works!
<div class="slider__images--container">
<img src="" alt="" class="slider__images--container-img">
<h3 class="slider__images--container-h3">Example</h3>
</div>
So, for everyone wondering, I solved it myself! I did put text inside and I am proud of it. The basic way I did it was as follows:
I added the same amount of text blocks as my slider has images. After that,
I coded some javascript so the nth text block as the nth image has the class .active
2.5 text had absolute positioning so I can move it around and `a z-index of >1
.active == opacity 1, .unactive == opacity 0.
And then I made it so every time it slides it checks which one has to be active (text block) and add the class and remove active from the last one.
Added a transition and boom!
(Basic rundown of how I did it, won't share the code only because of the thrill coding it up yourself!) byebye!
PS. I won't accept my answer just so if there's someone willing to put a real answer, go for it!

How to Animate Some Text to a Random Place in a Circular Div

Hope So All Of You are Fine.
I have an assignment in which i have to animate some image to a circular div container at its any random place.
Right Now, I had done this Already.
jsfiddle.net/f4p6b/137
But The Problem is that the Container in jsfiddle is not Circular.
I want a Circular div container and image should drag/animate automatically on page load at some random place every time.
Kindly help me with the help of above jsfiddle code.
Thanks.
Add the following css property to make your container circular
border-radius: 50%;
As mentined above, you can add the border-radious:50% attirubute to make your Div circular.
Check out this JSFiddle:
http://jsfiddle.net/internetbird/f4p6b/139/
Check out this updated fiddle :
http://jsfiddle.net/internetbird/f4p6b/141/
I added a function which produces a random point inside the circle (with a little math, which you can find more explination here: Simplest way to plot points randomly inside a circle )

How to get this glass shatter effect to work on multiple divs?

Situation
I have this glass shatter effect simulation that involves some basic javacsript code and right now it works fine; When you click on the logo, the glass shatters accordingly and then a new unshattered logo re-appears in its place.
Take a look at the jSFiddle here:
https://fiddle.jshell.net/9n9ft9ks/3/
Problem
Right now, there's only one logo on the page. I need there to be more than one logo, probably like five (of the same Floyd's autoglass logos) all on the same page, all with the same onClick glass shatter effect. But when I try to do this myself - put more than one (of the same logo) on the page, the code just breaks.
How I tried to fix it
The logo with the glass shatter effect is a div called "#container". So since I want more than one of these logo's on the page, I tried just duplacting "<div id="container"></div>" a bunch of times in the HTML code. That didn't work:
https://fiddle.jshell.net/9n9ft9ks/5/
So I tried changing the div id into a div class and I edited all the appropriate javascript & CSS lines that needed to be changed like:
document.getElementById('container');
to:
document.getElementsByClassName('container');
and
#container: {} to .container{}
But that didn't seem to work for me either. The logo doesn't even show up on the page anymore after making these changes, take a look here: https://fiddle.jshell.net/9n9ft9ks/4/
Summary
I have a logo with an onClick glass shatter effect. There is only one logo on the page. I need there to be more than one on the page, but can't seem to get it to work myself... If anyone could take a look at the code and try to get it to work so there is more than one logo on the page, i would appreciate it so much! Here is the original jSfiddle one more time: https://fiddle.jshell.net/9n9ft9ks/3/
You cannot use a single ID multiple times on the same page.
Use a class instead:
CSS:
.className {
/* attributes: values; */
}
HTML:
<div class="className"></div>
In your attempt, try changing the getElementByClassName for $('.container') and then replace the appendChild by append.
I made it work, but it was a bit messy, it would need more CSS to make the logos not overlap one over each others.
(You can add a style on the second div to see the multiple logos, ex: <div class="container" style="left: 50px;"></div>)
Here's the jsfiddle: https://fiddle.jshell.net/9n9ft9ks/7/

Combine 7 images into one, one on top of each other and output as single image?

I've tried aligning all images on top of each other, it worked but because it was position:absolute; the final result was floating all around page. (It's in my other question I asked today on SO)
So I am thinking alternative ways,
I have a web page which dynamically loads images like this:
<div id="AvatarImgFrame">
<img src="http://chaterix.com/public/images/char_elements/base_dark.png">
<img src="http://chaterix.com/public/images/char_elements/eyes/blue.png">
<img src="http://chaterix.com/public/images/char_elements/hair/blond.png">
<img src="http://chaterix.com/public/images/char_elements/mouth/happy.png">
<img src="http://chaterix.com/public/images/char_elements/pants/patrick.png"><img src="http://chaterix.com/public/images/char_elements/shoes/bleu2.png">
<img src="http://chaterix.com/public/images/char_elements/torso/google.png"></div>
I am wondering - is it possible to use JavaScript (like PHP GD) to combine all 7 images into one image and output on page using javascript?
So say instead of printing out the above code, it would do something like this:
<div id="AvatarImgFrame">
<img src="http://chaterix.com/public/tempGenerated/character.png">
</div>
Is this possible? I am just sick of position absolute and stuff floating around, so if JS could combine 7 images and make it as 1 that would fix the problem.
This should be really simple with CSS and position absolute. I know you said you are looking for a different way, but this should be doable. Are you setting top, bottom, right and left position for the images? Don't forget that you need to add the px after the number. Also don't forget to set the position property on your parent element, or position absolute gets wonky.
if you use position: absolute correctly, things shouldn't be 'floating around the page'. Give the parent position: relative and they will be relative to this div. Give it a top and a left value, if you give it all 4 it will skew when you resize the page/div

Javascript - Change height in <div style> depending on the height of image(s) in the div or completely remove it?

Well as the title says.
Right now each signature (on a forum) div got:
<div style='height:Xpx;overflow:scroll'> (X = depends on each signature due to the image heights shifting)
And I want to change the height so I don't have to scroll through each signature, but showing all images directly.
Here is the right part of a signature:
http://puu.sh/4xOW7.jpg (couldn't use the website-image-feature due to not having 10 rep)
And I tested around and managed to make it like this:
http://puu.sh/4xPar.jpg (it's much more further down)
and like this..
http://puu.sh/4xPco.jpg (couldn't post more than 2 links -_-)
I also tried to remove the overflow:scroll, change it, and so on. (also tried removing height: etc)
But I just can't get it to simply remove the scrollbar - making all images show normally. I'd really appreciate help! :)
instead of style="height:250px;overflow: auto;"
you need style="display:inline;"

Categories