Artifacts Gallery Guilds Search Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining?
a Summer night - @915.62
Activity rating: Four Stars Posts & Arts: 83/1k.beats Random | Recent Posts | Guild Recents
News: :ha: :pc: Hello Melonland! :pc: :happy: Guild Events: There are no events!

+  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 2673 times)
Memory
Guest
« on: a Summer night » 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:
You're a Star!Flinstone VitaminI got robbed by Dan Q on Melonland!Always working hard!Known Apple shillcoolest melon on the web!
« Reply #1 on: a Summer night » 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: Red TulipMellohi?
Memory
Guest
« Reply #2 on: a Summer night » 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:
You're a Star!Flinstone VitaminI got robbed by Dan Q on Melonland!Always working hard!Known Apple shillcoolest melon on the web!
« Reply #3 on: a Summer night » Embed
Quote from: MariBelle2002 on a Summer night
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: a Summer night by Melooon » Logged

everything lost will be recovered, when you drift into the arms of the undiscovered
Artifact Swap: Red TulipMellohi?
Memory
Guest
« Reply #4 on: a Summer night » 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:
You're a Star!Flinstone VitaminI got robbed by Dan Q on Melonland!Always working hard!Known Apple shillcoolest melon on the web!
« Reply #5 on: a Summer night » Embed
Quote from: MariBelle2002 on a Summer night
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: Red TulipMellohi?
Memory
Guest
« Reply #6 on: a Summer night » 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 | Supporters ♥ 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
@000 MelonLand Search Zap! Want to Login or Join ? Forum Art Hub Chat Webring Everyone Site Editor Recent Edits Tenement Arcade Linkz Web Guides Graphics Catalogue Wiki Newsletters Image Stream
Melon's Sites TamaNotchi Textures PixelSea GifyPet MoMG Ozwomp Online Loom Videos Leaky Webring Melonking
Tools Melon Software ArtHub Embed Maker ML Passports
Outlinks Webrings Internet Phone Book HTML Energy Declarations Hackers & Designers Frutiger Aero Forum m15o's Web Services 32Bit Cafe iMood
Minecraft: Online
Join: craft.melonking.net

Forum Theme Picker