Home Entrance Everyone Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
May 28, 2024 - @521.37 (what is this?)
Unread Topics | Unread Replies | Own Posts | Own Topics | Random Topic | Recent Posts
News: :transport: :transport: More is More :transport: :transport:

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


« previous next »
Pages: [1] Print
Author Topic: Help: how do you reposition where a webamp player loads on a page?  (Read 401 times)
MariBelle2002
Casual Poster
*


she/her


View Profile

First 1000 Members!Joined 2023!
« on: August 16, 2023 @919.33 »

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: Melonking
Itch.io: My Games

View Profile WWW

a puppy for your travelsAlways My PalFirst 1000 Members!spring 2023!Squirtle!!!!MIDI WarriorMIDI Warrior1234 Posts!OzspeckCool Dude AwardRising Star of the Web AwardMessage BuddyPocket Icelogist!OG! Joined 2021!The Smallest Ozwomp Known To Man...
« Reply #1 on: August 16, 2023 @934.97 »

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
MariBelle2002
Casual Poster
*


she/her


View Profile

First 1000 Members!Joined 2023!
« Reply #2 on: August 17, 2023 @960.46 »

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 ⚓︎
*****


So many stars!

SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games

View Profile WWW

a puppy for your travelsAlways My PalFirst 1000 Members!spring 2023!Squirtle!!!!MIDI WarriorMIDI Warrior1234 Posts!OzspeckCool Dude AwardRising Star of the Web AwardMessage BuddyPocket Icelogist!OG! Joined 2021!The Smallest Ozwomp Known To Man...
« Reply #3 on: August 17, 2023 @979.71 »

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
MariBelle2002
Casual Poster
*


she/her


View Profile

First 1000 Members!Joined 2023!
« Reply #4 on: August 17, 2023 @993.54 »

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 ⚓︎
*****


So many stars!

SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games

View Profile WWW

a puppy for your travelsAlways My PalFirst 1000 Members!spring 2023!Squirtle!!!!MIDI WarriorMIDI Warrior1234 Posts!OzspeckCool Dude AwardRising Star of the Web AwardMessage BuddyPocket Icelogist!OG! Joined 2021!The Smallest Ozwomp Known To Man...
« Reply #5 on: August 17, 2023 @998.92 »

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


View Profile

First 1000 Members!Joined 2023!
« Reply #6 on: August 17, 2023 @10.59 »

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 
« previous next »
 

Vaguely similar topics! (3)

Iconic Video Game Songs [Player's Choice Award]

Started by NightdriftBoard © ∙ Music Room

Replies: 24
Views: 4230
Last post March 21, 2024 @26.45
by konamiesque
What are some of your favorite 404 pages?

Started by Icey!Board ✁ ∙ Web Crafting

Replies: 16
Views: 3784
Last post May 07, 2024 @217.47
by Icey!
Website example page

Started by Icey!Board ☆ ∙ Showcase & Links

Replies: 3
Views: 1944
Last post December 16, 2021 @285.10
by cinni

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines | Terms and Policies Forum Guide | Rules | RSS | WAP2


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