Chat Artifacts Gallery Guilds Search Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
May 06, 2026 - @862.27 (what is this?)
Activity rating: Four Stars Posts & Arts: 65/1k.beats Random | Recent Posts | Guild Recents
News: :ha: :pc: Hello Melonland! :pc: :happy: Guild Events: Show Your Cool Virtual Gardens

+  MelonLand Forum
|-+  Life & The Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  Help: how do you reposition where a webamp player loads on a page?

 « previous next »
Pages: [1] Print Embed
Author Topic: Help: how do you reposition where a webamp player loads on a page?  (Read 2429 times)
Memory
Guest
« on: August 16, 2023 @919.33 » Embed
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 ⚓︎
*****
View Profile WWWArt


So many stars!
⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games
RSS: RSS

Guild Memberships:
Artifacts:
old-timey tunes~♪Flinstone VitaminAlways working hard!PoochKnown Apple shillcoolest melon on the web!
« Reply #1 on: August 16, 2023 @934.97 » Embed
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  :omg:
(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!  :ha: )
Logged

everything lost will be recovered, when you drift into the arms of the undiscovered
Artifact Swap: bonsaiCup o' JaneI met Dan Q on Melonland!poochLasagna
Memory
Guest
« Reply #2 on: August 17, 2023 @960.46 » Embed
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  :dunno: 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 ⚓︎
*****
View Profile WWWArt


So many stars!
⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games
RSS: RSS

Guild Memberships:
Artifacts:
old-timey tunes~♪Flinstone VitaminAlways working hard!PoochKnown Apple shillcoolest melon on the web!
« Reply #3 on: August 17, 2023 @979.71 » Embed
Quote from: MariBelle2002 on August 17, 2023 @960.46
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 :grin:

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 @981.93 by Melooon » Logged

everything lost will be recovered, when you drift into the arms of the undiscovered
Artifact Swap: bonsaiCup o' JaneI met Dan Q on Melonland!poochLasagna
Memory
Guest
« Reply #4 on: August 17, 2023 @993.54 » Embed
thank you, your solution worked!  :ha:
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 ⚓︎
*****
View Profile WWWArt


So many stars!
⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games
RSS: RSS

Guild Memberships:
Artifacts:
old-timey tunes~♪Flinstone VitaminAlways working hard!PoochKnown Apple shillcoolest melon on the web!
« Reply #5 on: August 17, 2023 @998.92 » Embed
Quote from: MariBelle2002 on August 17, 2023 @993.54
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
Artifact Swap: bonsaiCup o' JaneI met Dan Q on Melonland!poochLasagna
Memory
Guest
« Reply #6 on: August 17, 2023 @10.59 » Embed
alrighty, ill do that

thanks once more for the help!  :ha: webamp stuff seemed a bit confusing at first, but i have a better understanding of it now
Logged
Pages: [1] Print Embed 
« previous next »
 

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021 | Privacy Notice | ~ Send Feedback ~ Forum Guide | Rules | RSS | WAP | Mobile


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi

MelonLand Nav

@000

Search

Want to Login or Join ?

Minecraft: Online
Join: craft.melonking.net

Forum Theme Picker