Søg
Avatar billede pvtsommer Nybegynder
10. august 2005 - 00:07 Der er 31 kommentarer og
1 løsning

Gennemsigtig boks, som fortæller afstand fra venstre side

Hey alle,

Ja, overskriften fortæller ikke det vilde, så her lidt om hvad jeg ønsker. Men det er egentlig ikke et spørgsmål, nok snarere et ønske om en ændring, eller kodning af noget nyt.

Mit ønske:
Jeg har en slags stribe, hvor jeg ønsker at jeg vha. af en trækbar boks kan finde afstanden fra venstre side af striben, til boksens venstre side. Boksen skal køre ovenpå billedet, og skal være 180 høj, og have en bredde den henter fra database. Den bredde er kort sagt bredden på det objekt den skal sætte ind.

Det er vigtigt at bemærke at det ikke er indsættelsen af objektet jeg skal bruge, for det har jeg rigeligt styr på (foregår via PHP), men blot en værdi fra venstre side af striben, til venstre side af den herunder forklarede boks, så jeg ved hvor jeg skal sætte objektet ind henne.

Det nemmeste vil nok være et eksempel, og da jeg fik noget kode fra en ven, som egentlig kan klare det, vil jeg da lige vise det:

http://businet.dk/stribe/

Det er som sagt et script jeg har fået af en ven, men da jeg ganske simpelt ikke forstår helt hvad der gør hvad, og hvorfor, og hvad jeg kan slette yderligere ønsker jeg nu en ekspert kan hjælpe mig. I øvrigt virker overstående kun i Internet Explorer, og jeg vil gerne have det virker MINDST i IE og i Firefox.

Den boks man kan trække er altså det objekt, som jeg vil indsætte. Objektet vil altid blive indsat oppe i toppen, og være 180px's højt. Bredden variere som sagt, men skønt den viste stribe er 666pxs bred må det kun vandre fra 0 til 650. Altså ikke overskride  650 med sin højre side. Med andre ord skal det objekt jeg indsætter vha. et andet system være 100% synligt hele vejen igennem.

Mine lidt mindre vigtige ønsker:
- Det ville være dejligt hvis jeg simpelt kunne ændre alle værdier, såsom højde, bredde m.v.
- Det ville være dejligt med kommentarer i selve koden, så jeg selv kan lære lidt.

Er der nogen der kan ordne det for mig? Jeg er helt ny herinde, men vil gerne tilbyde en 100 krone (kontooverførsel) til den, hvis kode jeg accepterer.

Jeg håber der er nogen der kan hjælpe mig!

Mvh PvtSommer
Avatar billede pvtsommer Nybegynder
10. august 2005 - 00:07 #1
Som sidebemærkning skal overstående bruges i et XHTML dokument, hvorfor det ville være dejligt, hvis det var skrevet i dette. Dog ikke et krav.

Den værdi som bliver udskrevet (altså den fra venstre side af billedet, til venstre side af boksen) skal kunne læses af PHP. Derfor gerne noget jeg kan "poste" med en formular, eller lign.

Tak :)
Avatar billede olebole Juniormester
10. august 2005 - 00:11 #2
<ole>

Det, du viser, er hverken et HTML- eller et XHTML-dokument. Skal du have noget somhelst DHTML til at virke, må det være det første punkt, du skal have ordnet  :)

/mvh
</bole>
Avatar billede olebole Juniormester
10. august 2005 - 00:15 #3
- hvad er det for et 'objekt', du skal indsætte? Hvad består det af?
Avatar billede pvtsommer Nybegynder
10. august 2005 - 00:15 #4
Hej Ole ;) - Nej, det ved jeg godt. Det er fordi det normalt kører som include på min side. :-) Men kan da godt lide smide det "manglende" kode på. :)
Avatar billede pvtsommer Nybegynder
10. august 2005 - 00:16 #5
olebole: Det objekt er et billede. Ville gerne vise dig det helt præcist, men det er egentlig ikke det væsentlige - har du MSN eller anden IM vil jeg gerne vise dig det, men da jeg ikke har tilladelse til at offentliggøre det endnu kan jeg ikke poste det her :-) - Systemet skal være færdigt før jeg kan få lov... Rettigheder ;)
Avatar billede pvtsommer Nybegynder
10. august 2005 - 00:20 #6
Endnu en sidebemærkning: Koden er på ingen måde parsed til XHTML. Endnu en grund til at jeg gerne vil have lavet den om ;)
Avatar billede olebole Juniormester
10. august 2005 - 00:32 #7
Nu har jeg lige lavet en café latte og havde planer om at rulle en ... hmmm ... smøg  *-/

Det gør jeg lige - så laver jeg en træk-ting til dig. Imens kan du så passende læse de her to:
  http://www.eksperten.dk/artikler/537
  http://www.eksperten.dk/artikler/538
- og finde udaf, hvorfor du bør vente med XHTML  ;o)
Avatar billede olebole Juniormester
10. august 2005 - 00:34 #8
PS: - og ingen penge. Points og et lille smil er rigeligt  ;o)
Avatar billede olebole Juniormester
10. august 2005 - 00:36 #9
PPS: Du vil gerne poste værdien til serveren - men ønsker du også svar tilbage, eller er det nok, at værdien bliver sendt til serveren?
Avatar billede welcro Nybegynder
10. august 2005 - 00:52 #10
Har ikke 100% forstået hvad du vil med boksen, men ligemeget!.
Jeg fandt engang et javascript der fortæller hvor curseren er, kan det bruges?,
se den her: http://eventur.dk/howto/cursorscript.htm
/welcro
Avatar billede pvtsommer Nybegynder
10. august 2005 - 07:50 #11
Ole: Jeps, har læst. Men har fundet ud af at hvis jeg bruger den nuværende XHTML syntaks leger den bedre med DIVs placeringer osv, ift. hvis den kører på HTML 4. Don't ask why. Kanske jeg er en slamkoder ;)

olebole: Du skal forestille dig at du kan trække den over lige hvor du vil som på det jeg allerede har fået lavet. Dvs. den skal ikke automatisk poste noget. Først når jeg trykker på submit knappen der skal være under :) Når man trykker på den skal man så kunne udskrive den værdi. HVis man har rykket den 100 px fra venstre kant, skal den dermed poste tallet 100. Altså fungerer som en almindelig formular med den her... slider, kan man vel kalde den. Det ville være optimalt hvis det blev ændret i et hidden input felt :-) - Tusind tak på forhånd, glæder mig til at se resultatet, så I også kan se hvad det skal bruges til.

welcro: Den er ikke hvad jeg søger, men ellers tak. :-)
Avatar billede pvtsommer Nybegynder
11. august 2005 - 16:52 #12
olebole: Gik du død? :-)

Er der andre der har lyst til at tjene 200 point, et karma samt 100 kroner?
Avatar billede olebole Juniormester
11. august 2005 - 17:31 #13
Nej, min forbindelse gik død, lige efter jeg havde skrevet mit seneste indlæg i denne tråd ... og jeg har ikke efterfølgende haft tid til at være på E. Jeg skal prøve at kikke på det i aften  ;o)
Avatar billede pvtsommer Nybegynder
11. august 2005 - 17:37 #14
olebole: Uff... lyder satme nice! :)
Avatar billede pvtsommer Nybegynder
31. august 2005 - 20:33 #15
Hej Ole...

Stadig frisk? Du kan eventuelt fikse mig på MSN eller mail: msn@businet.dk :-)

Mvh Lars Sommer
Avatar billede olebole Juniormester
31. august 2005 - 20:51 #16
Du må lige få dit dokument til at fungere - eller give mig en sti til grafikken
Avatar billede olebole Juniormester
31. august 2005 - 21:07 #17
- så funker svinet igen ... jeg kikker på det  :)
Avatar billede pvtsommer Nybegynder
31. august 2005 - 21:09 #18
Lyder super... - Hvis du vil droppe mig en mail, kan jeg sende dig en forklaring til hvordan og hvorledes systemet fungerer...
Avatar billede pvtsommer Nybegynder
31. august 2005 - 21:10 #19
I hvert fald med en lidt bedre forklaring, så du kan se det i live :-)
Avatar billede olebole Juniormester
31. august 2005 - 23:06 #20
Dette er rimelig veldokumenteret ... tror jeg nok  :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- Metas, der forhindrer toolbars ved mouseover på billeder -->
    <meta http-equiv="imagetoolbar" content="no">
    <meta http-equiv="imagetoolbar" content="false">
    <title>TITLE</title>
<style type="text/css">
body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}
#sliderCont {
    position: relative;
}
#alph_box {
    position: absolute;
    width: 200px;
    height: 180px;
    left: 0;
    top: 0;
    background-color: #EFEFEF;
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    opacity: 0.3;
}
</style>
<script type="text/JavaScript">
/*  Handy wrapper funktioner  */
var d=document;
function gE(id){return d.getElementById(id)};
function pI(s){return parseInt(s)};
function gXe(e){e=e||window.event;if(!e.srcElement)e.srcElement=e.target;
if(typeof e.clientX=="undefined"){e.clientX=e.pageX;e.clientY=e.pageY}
if(!e.preventDefault)e.preventDefault=function(){this.returnValue=false};
return e};
/********************************/

/*  Constructor for slider objektet  */
function SliderObject(sliderID, fieldID) {
// Opret reference til objektet selv.
// - nødvendig ved callback fra event-handlers
    var me = this;
    this.oSlid = gE(sliderID); // Slider elementet
    this.oField = gE(fieldID); // Feltet, der skal opdateres
    this.minValue = 0; // Default minimums værdi
    this.maxValue = 650; // Default maximums værdi
// Den samlede bredde af sliderens venstre- og højre-border
    this.borderOffset = pI(this.oSlid.style.borderLeftWidth) + pI(this.oSlid.style.borderLeftWidth);
    this.oDownX = null; // Indeholder senere X-værdien for brugerens klik
// Sæt event-handler på slideren
    this.oSlid.onmousedown = function(e){me.mDown(e)};
    return this; // returner objektet
}
var _p = SliderObject.prototype;
_p.mDown = function(e) {
    var me = this; // Reference til objektet selv
    e = gXe(e); // Skab et X-browser event-objekt
// Gem documentets event-handlers til senere brug
    this.docEventCache = {"move":d.onmousemove, "up":d.onmouseup};
// Sæt event-handelers på dokumentet
    d.onmouseup = function(e){me.mUp(e)};
    d.onmousemove = function(e){me.mMove(e)};
// Gem venstre-værdien for brugerens klik - minus sliderens venstre-offset
    this.oDownX = e.clientX - pI(this.oSlid.style.left);
}
_p.mMove = function(e) {
// Sæt max-værdien for sliderens left
    var x, maxL = this.maxValue-(this.oSlid.offsetWidth-this.borderOffset);
    e = gXe(e); // Skab et X-browser event-objekt
    x = e.clientX - this.oDownX; // Udregn den nye venstre-værdi
// Juster, hvis værdien er under min eller over max
// - sæt den nye værdi på slideren
    this.oSlid.style.left = ((x<this.minValue)? this.minValue : (x>maxL)? maxL : x) + "px";
}
_p.mUp = function() {
// Opdater elementet i formen
    this.oField.value = pI(this.oSlid.style.left);
// Retabler dokumentets event-handlers
    d.onmouseup = this.docEventCache.up;
    d.onmousemove = this.docEventCache.move;
}

var oSlider = null;
window.onload = function(){
    oSlider = new SliderObject("alph_box", "sliderX");
    oSlider.maxValue = 450;
}
</script>
</head>
<body>

<div style="margin:50px" onselectstart="return false">
<div id="sliderCont">
    <span id="alph_box" style="left:0;border: 1px solid black;">&nbsp;</span>
    <img id="img_galleripic" src="dostribe.jpg" style="width:666px;" class="imageborder" ondragstart="return false" onmousedown="return false">
</div>
</div>

<form>
    <input id="sliderX" type="text" name="kaldMigHvadDuVil" value="Bør være type='hidden'">
</form>

</body>
</html>
Avatar billede pvtsommer Nybegynder
31. august 2005 - 23:11 #21
Jeg forsøger straks! :P
Avatar billede olebole Juniormester
31. august 2005 - 23:11 #22
NB: Her kommer lige lidt vigtige kommentarer:

Det er vigtigt, du sætter disse styles på slider-elementet:
  <span id="alph_box" style="left:0;border: 1px solid black;">&nbsp;</span>
- da de aflæses af scriptet.

Hvis du indsætter et billede i spannet, skal du sætte disse to event-handlers på det:
  ondragstart="return false" onmousedown="return false"

Du kan vælge andre min-/max-værdie, som jeg har vist med:
  oSlider.maxValue = 450;
- når først objektet er instantieret
Avatar billede olebole Juniormester
31. august 2005 - 23:16 #23
Div'et, jeg har lagt udenom:
  <div style="margin:50px" onselectstart="return false">

- har jeg lagt der, dels for at få lidt luft om eksemplet og dels for at et område rundt om, indenfor hvilket der ikke kan selectes i Explorer (hvilket nemlig ligner lort og døde øgler)
Avatar billede pvtsommer Nybegynder
31. august 2005 - 23:16 #24
Jeg har lige en enkelt fejlrettelse... det er din sidste som du har sat til 450... den skal være 650, da den såvidt jeg kan se aflæser den på højre side af boksen!

Men jeg siger 10000000 gange tak! Du har lavet det PRÆCIS som det skulle være. Er du sikker på du ikke lige vil smide mig dit konto og reg nummer?
Avatar billede pvtsommer Nybegynder
31. august 2005 - 23:16 #25
Og drop lige et svar! :)
Avatar billede olebole Juniormester
31. august 2005 - 23:19 #26
Jeg har sat 650 som default-værdi inde i selve objekt-koden. De 450 er kun et eksempel på, du kan sætte værdien til, hvad du måtte ønske - og gøre det 'udefra', uden at skulle ind og rode i selve JS-objekt koden  ;o)

- og selvtak  :)
Avatar billede pvtsommer Nybegynder
31. august 2005 - 23:20 #27
Det her er bare super! Det er virkelig ALT hvad det skal kunne... virkelig! :)
Avatar billede olebole Juniormester
31. august 2005 - 23:27 #28
- og da skidtet er opbygget objektorienteret, kan du oprette flere objekter på siden. Du opretter bare to sæt HTML-elementer (og rette CSS) - og skriver dette i JS-koden:

var oSliderA = oSliderB = null;
window.onload = function(){
    oSliderA = new SliderObject("alph_boxA", "sliderXA");

    oSliderB = new SliderObject("alph_boxB", "sliderXB");
    oSliderB.maxValue = 1267;
}

- hvor du naturligvis tilpasser kaldene til de ID'er, du giver HTML-elementerne.
Den ene kan så flyttes 650px (default værdien) - og den anden 1267px ... uden de generer hinanden
Avatar billede olebole Juniormester
31. august 2005 - 23:29 #29
- og så må du zq undskylde, det tog lidt tid  ;o)
Avatar billede pvtsommer Nybegynder
31. august 2005 - 23:29 #30
Ahh... skidesmart! Det får jeg dog ikke brug for lige pt, men kan da ske jeg skal bruge det. :-)
Avatar billede pvtsommer Nybegynder
31. august 2005 - 23:30 #31
Hehe, tog lidt tid? Jeg har lige været 14 dage i Egypten, så det går nok :D - Du har leveret noget som gør at jeg kan komme videre med mit projekt... så du er bare super! :)
Avatar billede olebole Juniormester
31. august 2005 - 23:42 #32
Fint ... velkommen hjem og tak for points  :)
Avatar billede 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.

Loading billede Opret Preview
Kategori
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
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
IT-JOB
Seneste spørgsmål Seneste aktivitet
I går 20:19 DVB T2 tuner med optagefunktion Af ErikHg i Andet hardware
20/0716:00 Fildeling mellem 2 windows 11 systemer Af knudg i Windows
20/0714:16 Smartwatch med faldalarm og sos Af hkv i Fitness & Smartwatches
20/0711:23 System til bordreservation Af Strawberry i PHP
18/0720:34 Tidsbestemt Gendannelse - ny funktion i Windows Af Uvanga i Windows
White papers
Flere white papers »