Help: how do you reposition where a webamp player loads on a page?

MariBelle2002
Casual Poster

she/her

Help: how do you reposition where a webamp player loads on a page?

« on: August 16, 2023, 11:03:50 pm »

hey there, had another question for a little problem ive been trying to solve. i added a webamp player to one of my pages, and couldnt figure out how to reposition it on said page. after seeing other sites, i noticed that webamp players can load anywhere on a page. what code would i need to do this?

here is the code for the page i mentioned :p : https://jsfiddle.net/anonredfox/Lh0xgodw/

im trying to reposition the webamp so it loads on the bottom left corner of the left box


	Logged

Melooon
Hero Member ⚓︎

So many stars!

SpaceHey: Friend Me!
StatusCafe: melon
iMood:

Itch.io: My Games

Re: Help: how do you reposition where a webamp player loads on a page?

« Reply #1 on: August 16, 2023, 11:26:21 pm »

Based on their GitHub info! https://github.com/captbaritone/webamp

This is the line that decides where webamp loads:

Code

webamp.renderWhenReady(document.getElementById('app'));

It will always load in the center of the object you put in here - you can chnage "app" to what ever div you want e.g.

Code

<div id="soup"></div>
<style>
  #soup {
    position: absolute;
    top: 500px;
    left: 500px;
  }
</style>

And then set winamp to:

Code

webamp.renderWhenReady(document.getElementById('soup'));

Maybe someone has a simpler trick than that; but I THINK that should work

(You can actually test by changing "app" to "top" in your example script; that moves it into your center top div and it does work!

)


	Logged

everything lost will be recovered, when you drift into the arms of the undiscovered

MariBelle2002
Casual Poster

she/her

Re: Help: how do you reposition where a webamp player loads on a page?

« Reply #2 on: August 17, 2023, 12:03:04 am »

ahh i see, thanks for the explanation!

i wondered why the code had 'app' in it.

okay so, i changed app to 'boxthree' to test and see if it would make the webamp player load in that div and it didnt seem to work for some reason

am i maybe writing the code wrong?

Code

  #boxthree {
             border: red 4px dotted;
             position: relative;
             width: 600px;
             height: 700px;
             right: -1280px;
             bottom: 30px;
             
             
         }

this is said div

Code

webamp.renderWhenReady(document.getElementById('boxthree'));

and this is what i put for the webamp, but it seems to load the player back in its regular position


	Logged

Melooon
Hero Member ⚓︎

So many stars!

SpaceHey: Friend Me!
StatusCafe: melon
iMood:

Itch.io: My Games

Re: Help: how do you reposition where a webamp player loads on a page?

« Reply #3 on: August 17, 2023, 12:30:47 am »

Quote from: MariBelle2002 on August 17, 2023, 12:03:04 am

am i maybe writing the code wrong?

Looking at your example I think I see your error;

HTML reads like a book, top to bottom; and computers are very literial!

You've put your styles UNDER the webamp script - so what your saying to the computer in english is:
"Make a div called boxthree; render webamp where the box is, then move the box to X position" - You're assuming that it will also move webamp with the box; but webamp is not actually in the box, its just rendered where the box was before you moved it

So the solution is just to move your <style> block into the <head> - that way all of the styles will be read before the HTML is read; and the computer will know to position the box where you want it, then render webamp where the box is.


« Last Edit: August 17, 2023, 12:33:59 am by Melooon »	Logged

everything lost will be recovered, when you drift into the arms of the undiscovered

MariBelle2002
Casual Poster

she/her

Re: Help: how do you reposition where a webamp player loads on a page?

« Reply #4 on: August 17, 2023, 12:50:42 am »

thank you, your solution worked!

the way html works is very interesting heh

now one more question if you dont mind; since the webamp is now in the middle of the div, what would i need to do to make it be positioned at the bottom left corner of that same div?


	Logged

Melooon
Hero Member ⚓︎

So many stars!

SpaceHey: Friend Me!
StatusCafe: melon
iMood:

Itch.io: My Games

Re: Help: how do you reposition where a webamp player loads on a page?

« Reply #5 on: August 17, 2023, 12:58:27 am »

Quote from: MariBelle2002 on August 17, 2023, 12:50:42 am

positioned at the bottom left corner of that same div?

It doesn't look like there is a simple way to do it in webamp: (Theres no "use the left corner instead of the center option)"

So what you'll have to do is make a very small div in the left corner of your box, then render webamp where that div is.

Something like

Code

<div id="boxthree">
  <div id="boxthree_baby"></div>
</div>

Code

#boxthree {
  border: red 4px dotted;
  position: relative;
  width: 600px;
  height: 700px;
  right: -1280px;
  bottom: 30px;
}

#boxthree_baby {
  position: relative;
  bottom: 0px;
  left: 0px;
}


	Logged

everything lost will be recovered, when you drift into the arms of the undiscovered

MariBelle2002
Casual Poster

she/her

Re: Help: how do you reposition where a webamp player loads on a page?

« Reply #6 on: August 17, 2023, 01:15:15 am »

alrighty, ill do that

thanks once more for the help!

webamp stuff seemed a bit confusing at first, but i have a better understanding of it now


	Logged

Pages: [1]

« previous next »

Vaguely similar topics! (3)