Mastiff Skrevet 25. april 2016 Del Skrevet 25. april 2016 Går det an å sette bakgrunnsbilde for hver celle i en kolonne på en eller annen måte gjennomn css? Jeg har et oppsett for å velge nettradiostasjoner i huset, og da kan jeg bruke kanallogoene som bakgrunnsbilde og la selve knappen som trykkes på være gjennomsiktig. Problemet er scrolling, for særlig på en mobil kommer jeg langt utenfor overskriftene for kolonnene, men med en kanallogo bak kan jeg se se at "det er p1, det er P4" osv. Jeg har prøvd meg litt med td background="img/p2.png" og background-image: url("img/p2.png") i CSS, men det er visst ikke så lett. Lenke til kommentar
Matsemann Skrevet 25. april 2016 Del Skrevet 25. april 2016 Det letteste er nok at du i de forskjellige kallene som generer dine kolonner putter riktig bilde. Altså at når du kaller var minradiokanal4_REF = '<center><a href=\"\" onclick=\'return SendEventPayload(\"SettRadiokanal\", \"18\", \"4\" ,\"\" , \"'+RowID2+'\",\"FromWeb\");\' onmousedown=\'return SetImage(\"minradiokanal4Button'+RowID+'\", \"img/button_blue_down.jpg\");\' onmouseup=\'return SetImage(\"minradiokanal4Button'+RowID+'\", \"img/button_blue_up.jpg\");\'> <img src=\"img/button_blue_up.jpg\" id=\"minradiokanal4Button'+RowID+'\" border=\"1\"></a></center>' $('<td>'+minradiokanal4_REF+'</td>').appendTo(tr); Så bytter du ut <img src="... med et bilde som faktisk matcher radiokanal 4. Forøvrig kan onmousedown og onmouseup delene løses bedre med css. ( a:hover img { border: 2px solid red }), feks: https://jsfiddle.net/5z7nzb53/3/ Uansett, du kan også løse det å sette riktig bakgrunn med css, om du fjerner selve <img delen av koden over. Da må du i så fall bruke pseudo-selectoren nth:child, som velger det n-te elementet som skal styles. Se css-en i toppen her https://jsfiddle.net/5z7nzb53/4/ Lenke til kommentar
Mastiff Skrevet 25. april 2016 Forfatter Del Skrevet 25. april 2016 (endret) Takk, men det er nok dessverre ikke derfra de knappene kommer. Det er bare trykknappene (altså mousedown/up). Valget mellom gjennomsiktige og grønne knapper styres lenger nede: //function to recieve the data as a well formed JSON object from CheckGIRDER function and to parse it into variables to display on the web page function checkDATA(data,GirderVariable,LocalVariable,DataType,SetButton) { try { jsonOBJ = jQuery.parseJSON(data); //alert(data); var DataString = (jsonOBJ[GirderVariable]); //if datatype is array: if (DataType == 'array') { //alert('type is array'); var Stringlength = DataString.length; var arraymax = Stringlength + 1; for (var a = 0; a < arraymax; a++) { $("#" + LocalVariable + "ID" + a).text(DataString[a]); if (SetButton == 'true') { //alert(DataString[a]); if (DataString[a]=='true' || DataString[a]==1 || DataString[a]=='1') SetImage(LocalVariable + "Button" + a, "img/button_green_up.jpg"); if (DataString[a]=='false' || DataString[a]==0 || DataString[a]=='0') SetImage(LocalVariable + "Button" + a, "img/button_lyd_av.gif"); } } } Så det er de to nederste tekstlinjene som styrer hvilket bilde som blir vist, og ikke koden for hver kolonne. De blå knappene i selve linjen er egentlig bare når man trykker på knappene. Jeg vet ikke om det er mulig å legge inn en ekstra if for hver kolonne, men jeg har en anelse om at hvis jeg prøver på det, blir det bare rot! Men hvis det går med den andre versjonen, er det jo flott. Jeg ser at du har satt farge på kolonnene, men det jeg egentlig var ute etter, var å sette et bilde i hver celle i en kolonne. Går det an på tilsvarende måte? Jeg skal se på den mousedown/up greia, det ville være fint å rydde litt i koden. Endret 25. april 2016 av Mastiff Lenke til kommentar
Emancipate Skrevet 25. april 2016 Del Skrevet 25. april 2016 https://jsfiddle.net/oydjLr1v/2/ Lenke til kommentar
Mastiff Skrevet 25. april 2016 Forfatter Del Skrevet 25. april 2016 Takk! Det skal jeg se på i morgen, om jeg kan legge det inn i koden min! Forhåpentligvis kan det plasseres inn i den dynamiske genereringen på en eller annen måte, og i så fall er jeg så å si i mål med hele greia. Lenke til kommentar
Emancipate Skrevet 25. april 2016 Del Skrevet 25. april 2016 Legg dog merke til at bakgrunnsbildet "forskyves" når det ikke er akkurat størrelsen på en celle. Lenke til kommentar
Mastiff Skrevet 26. april 2016 Forfatter Del Skrevet 26. april 2016 (endret) Det funket dessverre ikke, den ødela tabellen. Antakeligvis fordi tabellen er laget i en LUA-funksjon, og ikke på vanlig måte. Men ved et rent tilfelle snublet jeg endelig over den riktige løsningen selv! #forsterkertabell tbody td:nth-child(6) { background-image: url("img/p1.png"); background-repeat: no-repeat; background-position: center; width: 43px; } #forsterkertabell tbody td:nth-child(7) { background-image: url("img/p2.png"); background-repeat: no-repeat; background-position: center; width: 43px; } Så dermed har vi bevist nok et gammelt ordtak: "En blind høne kan også finne korn." Må bare få passe logoer til resten av kanalene, så er denne greia omtrent ferdig! Endret 26. april 2016 av Mastiff Lenke til kommentar
Anbefalte innlegg
Opprett en konto eller logg inn for å kommentere
Du må være et medlem for å kunne skrive en kommentar
Opprett konto
Det er enkelt å melde seg inn for å starte en ny konto!
Start en kontoLogg inn
Har du allerede en konto? Logg inn her.
Logg inn nå