Kjapp og trygg hosting for Wordpress

Styre animasjon fra annen side

mumrik

New Member
Hei!

Det jeg er ute etter er å ha to sider, f. eks: dashboard.html og page.html.
page.html
inneholder noen divs med basic style, og i dashboard.html ønsker jeg å kunne animere og redigere usteendet på page.html, LIVE.

For moroskyld tenkte jeg å prøve å lage en liten tjeneste for streamere som bruker obs og en browser-plugin. Da kan page.html være overlay på streamen og de kan kontrollere hvordan overlayen ser ut med dashboard.html.

Jeg har god/basic kunnskap i html, css, js(jquery) og php/mysql - ajax derimot har jeg såvidt begynt å snuse på, så jeg kunne trengt litt veiledning - et par stikkord jeg kan google på så jeg kan løse denne oppgaven på best mulig måte!

Takker på forhånd!
- mumrik
 

xdex

Medlem
Når det kommer til ajax, er det også viktig å forstå hvordan det fungerer. Du snakker om at du ønsker å gjennomføre dette "live", og det er forsåvidt greit. Det vil kreve at du f.eks. trykker "lagre" hver gang, eller at du sender en request, og prøver å motta en (på page.html) hvert sekund (eller mindre). Her ser du allerede begrensningene, og det kan fort bli mange spørringer som egentlig resulterer i 0, fordi du aldri vil få data til-sendt hele tiden uansett, med mindre du gjør en endring.

Dette blir litt som å lage en chat tjeneste i php/ajax, helt håpløst med andre ord. I hvert fall med tanke på resursene som brukes om flere er på nettsiden samtidig.

Du snakker ikke så mye om hvilken ting som skal endres, som tekst, bredder, postions etc. Du må uansett ha en database som kan kontrollere det du sender, og når du mottar dette, at du lager en css fil basert på endringene.

Prøv å lag ett eksempel selv først, før du begir deg ut på dette.

1) Lag en div blokk med fast høyde/bredde, rød.
2) Gjør denne bevegelig, slik at du kan styre hvor den skal stå. Se her, https://jqueryui.com/draggable/
3) Bruk JS til å finne posisjon.
4) Bruk callbacks fra draggable til å kjøre ajax oppdatering.

Oppdater databasen med posisjon, slik at dette skjer hver gang du gjør en endring på denne blokken.

På page.html

1) Bruk ajax til å hente posisjon, sjekk dette hver X sekund.
2) Bruk posisjonen til å endre hvor klossen skal stå ved hjelp av CSS etc.

Her spiller det jo ingen rolle om det er in-line css eller ei, med tanke på at dette skal brukes til OBS etc, ingen som ser koden til en overlay uansett.

Dette er som sagt resurskrevende, jo mer du legger til, jo mer er det å sjekke. Her ville jeg heller brukt NodeJS, men dette blir "veldig" annerledes, hvis du ikke har noe erfaring. Men du skriver du kan javascript, så det kan jo ikke være vanskelig å lære. NodeJS gjør dette langt mer sømløst, og da får du en skikkelig live effekt.

Det er tusenvis av eksempler på ajax/jquery, så er unødvendig og forklare dette noe nærmere. http://api.jquery.com/jquery.ajax/
 
Topp