Home Events! Entrance Everyone Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
November 21, 2024 - @699.71 (what is this?)
Forum activity rating: Three Stars Posts: 36/1k.beats Unread Topics | Unread Replies | My Stuff | Random Topic | Recent Posts    Start New Topic
News: :4u: Love is not possession  :4u:

+  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 720 times)
Memory
Guest
« 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!

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

View Profile WWW

Thanks for being rad!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!...
« 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
Memory
Guest
« 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!

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

View Profile WWW

Thanks for being rad!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!...
« Reply #3 on: August 17, 2023 @979.71 »
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
Memory
Guest
« 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!

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

View Profile WWW

Thanks for being rad!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!...
« Reply #5 on: August 17, 2023 @998.92 »
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
Memory
Guest
« 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: 10199 		Last post March 21, 2024 @26.45
by konamiesque
Website example page

Started by Icey!Board ☆ ∙ Showcase & Links

 Replies: 3
Views: 2346 		Last post December 16, 2021 @285.10
by cinni
Making a landing page?

Started by DoctorDizzyBoard ☔︎ ∙ I need Help!

 Replies: 2
Views: 980 		Last post November 03, 2022 @13.65
by DoctorDizzy

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines | Terms and Policies 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