Home Entrance Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
December 01, 2023, 06:19:40 pm - @763.66
Forum activity rating: Two Star Posts: 22/24hrs Unread Topics | Unread Replies | Own Posts | Own Topics | Recent Posts
News: Art will save the world!

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ Help & Tutorials
| | | |-+  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 219 times)
MariBelle2002
Casual Poster
*


she/her


View Profile

First 1000 Members!Joined 2023!
« 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: Melonking
Itch.io: My Games

View Profile WWW

First 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 ManBug!
« 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  :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, 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  :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

First 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 ManBug!
« Reply #3 on: August 17, 2023, 12:30:47 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 :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, 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


View Profile

First 1000 Members!Joined 2023!
« Reply #4 on: August 17, 2023, 12:50:42 am »

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

First 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 ManBug!
« Reply #5 on: August 17, 2023, 12:58:27 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


View Profile

First 1000 Members!Joined 2023!
« Reply #6 on: August 17, 2023, 01:15:15 am »

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: 20
Views: 1975
Last post August 09, 2023, 05:10:22 pm
by wygolvillage
What are some of your favorite 404 pages?

Started by Icey!Board ✁ ∙ Web Crafting

Replies: 13
Views: 2616
Last post November 11, 2023, 08:19:24 pm
by wetnoodle
Website example page

Started by Icey!Board ☆ ∙ Showcase & Links

Replies: 3
Views: 1559
Last post December 16, 2021, 06:50:33 am
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