CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

inctor Nybegynder

05. juli 2010 - 23:27 Der er 12 kommentarer og
1 løsning

Positioner div efter background-position?

Hej alle!

Jeg sidder lidt med en tricky situation..
Jeg er kommet frem til det her:
http://inctor.dk/drag/

Ved at klikke på billedet, kan man "dragge" det rundt, altså trække i det, for at se mere af billedet..
Den måde dette sker på, er at den laver mit image om til at baggrundsbillede, og ved "drag" på billedet skifter den positionen på baggrundsbilledet, deraf "drag-effekten"..

Det jeg ønsker er at jeg kan tilføje et <div> eller lignende element, som i sig selv er "limet" fast til baggrundsbilledet..

Sådan så jeg kan sætte et <div> element ind på x: 120 y: 50..
Så jeg kan dragge rundt, og jeg så kan finde mit element på x,y positionen som jeg selv angiver..

Er der nogen som har en idé om hvordan jeg kan løse dette?

Vh,
Mads Jürgensen.

Synes godt om

majbom Novice

06. juli 2010 - 06:05 #1

kan du ikke sætte det hvor det skal være når du loader siden og så ændre dens positioner samtidig med baggrunden?

Synes godt om

Slettet bruger

06. juli 2010 - 09:42 #2

Jeg skal lige forstå:

* Du har en box med en fast størrelse.

* Déri viser du et billede som er for stort.

* Brugeren kan trække i billedet, og dermed få vist de dele som ligger udenfor boxen.

Nu vil du så lægge en div på billedet, som følger med når brugeren trække i billedet.

Er det korrekt ?

I givet fald... Ville jeg...

<div id='box'>
<div id='billede' style='position:absolute;size..' onmousedown='drag..'>
<img src='jaja.jpg'>
<div id='label' style='position:absolute;right:25px;bottom:25px;size..'>
</div>
</div>

Synes godt om

inctor Nybegynder

06. juli 2010 - 12:25 #3

Splazz,
Det har jeg prøvet.. Men kan ikke få den til at gøre det ordentligt..

Tanker,
Det er forstået korrekt ja..
Dog gør koden sådan så at billedet inde i den "draggable" div, bliver til en baggrundsbillede, og når man så dragger, så ændrer den positionen på baggrundsbilledet..

Alt magien sker i følgende fil:
http://www.inctor.dk/drag/drag.js

Det er for at man eventuelt kan ligge et div-element ind på "Bomb-site A" hvor man så kan få vist noget tekst eller beskrivelse :)
Er det ikke muligt at du kan lave et eksempel med udgangspunkt i den kode jeg har i forvejen?

Synes godt om

Slettet bruger

06. juli 2010 - 14:37 #4

Ikke rigtig, jeg har ikke kørekort til jQuery.

Jeg synes det er lidt, som at lave snebolde med lufferne på.
- Det virker. Er behageligt, og anbefalet af førende mødregrupper.
Men når det bliver alvor, liv-og-død, så falder handskerne.

Synes godt om

majbom Novice

06. juli 2010 - 18:38 #5

nu kender jeg heller ikke jquery (fed kommentar TANKER! :D ) men hvad med:

var org_x = 27; //fiktivt tal
var org_y = 32; //fiktivt tal
$(dit_img).css('background-position', parseInt(x)+parsInt(org_x)+ "px " + parseInt(y)+parseInt(org_y)+ "px");

efter:

$(drag_div).css('background-position', x+ "px " + y + "px");

er på ingen måde testet..

Synes godt om

wanze Nybegynder

06. juli 2010 - 21:09 #6

Har lavet et eksempel på http://derfor.dk/tests/js/drag.html

Det er rimelig buggy, men jeg tror, du forstår idéen. Istedet for at ændre på baggrundsbilledet, så skubber jeg istedet en div rundt vha. margins, hvori der er placeret nogle punkter.

Synes godt om

inctor Nybegynder

06. juli 2010 - 23:41 #7

Hej Wanze,

Jeg forstår udmærket dit udgangspunkt..
Men nu har jeg leget lidt rundt, og kan ikke få den til at stoppe med at rykke kortet enormt meget..

Kan jeg overtale dig til at hjælpe mig videre med det du har bygget? :)

Jeg er helt blank overfor hvordan jeg skal få det til at virke korrekt..

Synes godt om

wanze Nybegynder

07. juli 2010 - 02:00 #8

Ja, det var det mouseout der ødelagde det hele, men nu virker det da ellers. :)

Synes godt om

majbom Novice

07. juli 2010 - 06:25 #9

-> wanze - det virker da ikke helt optimalt? den flytter kortet mere end man flytter musen og hvis man først flytter til højre og vil flytte til venstre uden at slippe musen, virker det som om den først skal indhente det... ikke at jeg har en bedre løsning..

Synes godt om

wanze Nybegynder

07. juli 2010 - 16:16 #10

Sådan.

Synes godt om

inctor Nybegynder

07. juli 2010 - 17:07 #11

Det må jeg sku sige.. Det ser godt ud Wanze! :)

Hvis du smider et svar, og så jer andre som har budt ind med feedback, smid os lige et svar, så fordeler jeg pointene :)

Synes godt om

majbom Novice

07. juli 2010 - 19:04 #12

-> wanze - najs!

-> inctor - jeg hopper over :)

Synes godt om

wanze Nybegynder

07. juli 2010 - 19:23 #13

Svar! :)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS