Litt forvirret med Overflow: hidden - kan noen hjelpe meg litt?

Mastiff · 22. april 2016

Jeg har slitt i noen uker (til og fra, ikke hele døgnet...) med å få en dynamisk tabell for styring av lyd rundt i huset til å låse den første kolonnen der det står hvilket rom jeg styrer, men det har jeg ikke klart med noen metoder (på grunn av måten det dynamiske blir hentet). Så jeg bestemte meg for å gjøre noe annet: Jeg har delt opp tabellene i to separate tabeller, og satt "position: fixed" i CSS på den første.

Dermed følger den med mot høyre hvis jeg scroller på siden. Det ser greit ut så lenge det ikke trengs å scrolle (problemet oppstår mest på mobiler og nettbrett, med litt lavere oppløsning - jeg kan ikke zoome nok ut, for da blir skrivten altfor liten). Og da er jeg iallfall halvveis. Problemet er at når jeg scroller og flytter siden, flyter jo kolonnen med navnene og den med resten av opplegget sammen, som i det andre bildet. Jeg har prøvd meg fram med overflow hidden, men jeg tror jeg er litt på jordet. Hva bruker jeg egentlig for å få det sånn at scrolling bare gjør at tabellen til høyre blir slukt av tabellen med én kolonne til høyre?

Mastiff · 22. april 2016

Å, det glemte jeg. I tillegg skulle jeg gjerne låst den høyre tabellen vertikalt, så når jeg scroller på siden, scroller både høyre og venstre tabell sammen! Ellers blir det jo bare knot.

Edit: Er dette kanskje noe som må ordnes med div inni div? Det har jeg aldri brukt, men jeg begynner å lure på om det kan være det som trengs.

Endret 22. april 2016 av Mastiff

Matsemann · 22. april 2016

Lagen JSFiddle https://jsfiddle.net/ med hva du har så langt.

Mastiff · 22. april 2016

Jeg er redd det ikke går. Jeg kan ikke fylle tabellen uten det systemet som ligger bak (automatiseringsprogram). Men jeg tror egentlig det kan erstattes med hva som helst av innhold som blir låst i den ene div-en og så et annet innhold til høyre for det.

Matsemann · 22. april 2016

Jo, du kan åpne systemet i nettleseren, åpne developer tools og så kopiere ut den genererte HTMLen og CSSen.

Høyreklikk på siden din, velg "inspect", velg <html>-elementet i toppen, høyreklikk på det og kopier.

Mastiff · 23. april 2016

Takk! Jøss, så tøft! :dribble: Aldri brukt noe sånt før, men det var skikkelig stilig! Det eneste det ikke klarer å vise, er knappene (som jo ligger lagret lokalt på automatiseringsserveren min). Alt annet er der virkelig. Der kan du se akkurat hva jeg mener med at den høyre tabellen sklir under den venstre tabellen på én kolonne, men ikke blir skjult.

https://jsfiddle.net/#&togetherjs=OQQiHsLAgg

Endret 23. april 2016 av Mastiff

Mastiff · 24. april 2016

Hjalp ikke det med å lage en jsfiddle?

Matsemann · 24. april 2016

Jo, skjønner endelig problemet.

Men som du er inne på, siden den html-biten egentlig blir generert av javascripten er det ikke rett frem å fikse, da man må tråle igjennom mye javascript.

Nå er fiddlen tom? Så da får jeg ikke sett mer på det.

Det jeg husker fra da jeg så på den i går, og som jeg lurer på, er hva alle disse "setTimeout"-greiene med bare ren tekst inni skal gjøre? De kjører vel ingen funksjoner?

Mastiff · 24. april 2016

Den har bare byttet navn, av en eller annen grunn:

https://jsfiddle.net/a9npops8/

Jeg forstår. Ikke så lett, altså. :hm: Og set timeout er LUA-kode som går til Girder, dette er ikke en HTML-fil, men en LHTML-fil (som kan parses av Girders webserver). Jeg har fått til en primitiv variant selv, ved å kjøre ulik Z-index på de to tabellene og så ha en ugjennomsiktig hvitfarge på den første, med titlene. Dermed forsvinner den andre, iallfall der den er under tittelkolonnen. Det er mulig at det er noe sånt jeg må nøye meg med. Neste problem er sånn som det er nå, flytter den seg vertikalt. Du kan se hva jeg mener her:

https://jsfiddle.net/0of5xkyj/

CSS-en blir ekstremt "dirty", for jeg blir nødt til å legge inn en egen plassering osv. for hver eneste oppløsning som kan brukes her. På en vanlig pc er brukes ikke scrollingen. På et nettbrett på 1280x800 i portrettmodus (som jeg har i stua som hovedkontroller for huset) er det plass til alt i høyden, men det scrolles sideveis. Da funker det greit. Det blir verre på mobiler, for da blir skriften for liten hvis det zoomes ut sånn at jeg ser hele høyden. Derfor skulle det der vært mulig å låse øverste rad (radiokanalnavnene) også, så det var mulig både å scrolle sideveis og i høyden, mens jeg beholdt sonekolonnen og radiokanalraden på samme plass. Det er ikke helt lett, er jeg redd...

Matsemann · 24. april 2016

Aha, derfor koden er litt uforståelig. Hva med noe sånt her? https://jsfiddle.net/nzwzfqco/1/

Har lagt til en javascript-snutt, som gjør at tittel-tabellen blir flyttet oppover når du scroller nedover, slik at det ser ut som at den scrolles.

$(window).scroll(function() {
    var currentScroll = $(window).scrollTop();
    $("#forsterkertabellTittel").css({
    	top: -currentScroll,
      left: 0
    })
});

På stylingen til tittel gjorde jeg slik:

#forsterkertabellTittel {
position: fixed;
border:6px solid red;
width: 110px;
z-index:1;
top: 0;
left: 0;
background: white;
}

som du kan se har den nå en bakgrunn, som gjør at man ikke ser teksten under. Også lagt til at den skal være klint oppi venstre hjørne, som så javascripten over justerer underveis når man scroller.

På selve tabellen er stylingen nå

#forsterkertabell {
border:6px solid red;
width: 845px;
margin-left: 112px;
overflow: hidden;
}

Største endringen her er at den har like mye venstre-margin som tittel-tabellen er bred, slik at det ikke blir overlapp.

Til slutt har jeg lagt til margin: 0; på body i toppen slik at ting havner likt.

I tillegg fjernet jeg all responsive styling da det kom i veien. Du kan legge tilbake det du trenger.

Fjernet javascript-delen din fra min fiddle, da den var i veien. Men tror det skal funke å putte min javascript-snutt her, nederst i din eksisterende fil på selve serveren.

Endret 24. april 2016 av Matsemann

Mastiff · 24. april 2016

Wow, den var pen! Tusen takk! :thumbs: Jeg må ut nå, men jeg skal prøve å legge den inn i koden min i kveld. Kan dette også brukes som utgangspunkt for noe som lar meg beholde kanalnavnene synlig, hvis jeg tar den første raden og skiller den ut i en egen tabell på én rad? For da har jeg alt jeg trenger!

Mastiff · 24. april 2016

Endring i planene, så jeg fikk tid til å fikle litt nå. Men jeg får den dessverre ikke til å scrolle sånn. Her er nederste del av JS-koden min (altså i selve HTML-fila), med ditt tillegg:


//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");
    }
    }
}
//list of variables split by a comma (CSV)
if (DataType == 'csv')
{
//alert('type is csv');
var seperator = ",";
var DataStringSplit = DataString.toString().split(seperator);
//alert(DataStringSplit);
for (var i = 0; i < DataStringSplit.length; i++)
    {
    $("#" + LocalVariable + "ID" + i).text(DataStringSplit[i]);
    if (SetButton == 'true')
    {
        //alert(DataString[i]);
        if (DataStringSplit[i]=='true' || DataStringSplit[i]==1 || DataStringSplit[i]=='2') SetImage(LocalVariable + "Button" + i, "img/button_green_up.jpg");
        if (DataStringSplit[i]=='false' || DataStringSplit[i]==0 || DataStringSplit[i]=='1') SetImage(LocalVariable + "Button" + i, "img/button_lyd_av.gif");
    }
    }
}
if(DataType == 'key')
{
//alert("Key");
for (var key in jsonOBJ[GirderVariable])
{
    for (var subkey in jsonOBJ[GirderVariable][key])
    {
        //alert("Sub key found: key: "+key+" subkey:"+subkey+" Contains:"+jsonOBJ[GirderVariable][key][subkey]);
        $("#" + LocalVariable + "ID_" + key + "_" + subkey).text(jsonOBJ[GirderVariable][key][subkey]);
        //$("#" + LocalVariable + "ID_key_"+ key + "_subkey_" + subkey).text(key + "_" + subkey);
    }
    if (jsonOBJ[GirderVariable].hasOwnProperty(key))
    {
    //alert(key);
    $("#" + LocalVariable + key).text(jsonOBJ[GirderVariable][key]);
    $("#" + LocalVariable + "key"+ key).text(key);
    if (SetButton == 'true')
        {
        if (jsonOBJ[GirderVariable][key]=='true' || jsonOBJ[GirderVariable][key]==2 || jsonOBJ[GirderVariable][key]=='1') SetImage(LocalVariable + "Button" + key, "img/button_green_up.jpg");
        if (jsonOBJ[GirderVariable][key]=='false' || jsonOBJ[GirderVariable][key]==1 || jsonOBJ[GirderVariable][key]=='0') SetImage(LocalVariable + "Button" + key, "img/button_lyd_av.gif");
        }
    }
}
}
}
catch(err) { $("#jsondata").text(data);
$("#error").append(" INCORRECTLY FORMED JSON DATA...");
}
};

$(window).scroll(function() {
    var currentScroll = $(window).scrollTop();
    $("#forsterkertabellTittel").css({
    	top: -currentScroll,
      left: 0
    })
});
</script>

Men spørsmålet er om jeg kanskje mangler noe som kaller opp denne koden? Kan det stemme, at det er der feilen ligger? Eller kan det ha noe med navnet på CSS-fila å gjøre?

Edit: Og da hadde jeg byttet ut hele min CSS med koden i din JSFiddle, så alt det andre var fjernet, for sikkerhets skyld.

Endret 24. april 2016 av Mastiff

Matsemann · 24. april 2016

Du kan legge en console.log("jeg scroller"); over linjen var currentScroll... og så åpne console i developer tools og se om det blir printa noe der når du scroller. Evt. kanskje du ser andre feil i consolen?

For å se console, høyreklikk på siden din og velg inspect element, i vinduet som popper opp er det en fane med konsoll.

Det kan hende du må ha en ready-greie rundt funksjonen jeg ga deg, litt avhengig av hvordan ting er satt opp. I så fall ala

$(document).ready(function(){
    $(window).scroll(function() {
        var currentScroll = $(window).scrollTop();
        $("#forsterkertabellTittel").css({
    	    top: -currentScroll,
            left: 0
        });
    });
});

Mastiff · 24. april 2016

Der fungerte den, takk igjen! :thumbs: Nå må jeg bare finne ut hvordan jeg skal plassere menyen og sidetittelen over dette, uten at det krøller til forholdet mellom de to. Jeg har en meny over, og tittelen på siden, jeg tenkte bare ikke på at de ville rote til noe. Jeg prøvde å legge det til som top margin på de to tabellene, men det fikk en morsom effekt fordi den til høyre sto feil helt til jeg begynte å scrolle. Da hoppet den plutselig på plass! :mrgreen: Det var det med venstre hjørne, forstår jeg.

Edit: Jeg prøvde div i div, og å sette marg over på den overordnede diven, men da så det bra ut først, og så spratt titteltabellen opp da jeg begynte å scrolle. Så motsatt virkning. Jeg som trodde en div i div forholdt seg til den overordnede diven som om det skulle være body.

Endret 24. april 2016 av Mastiff

Matsemann · 24. april 2016

Det løser vi greit, tror jeg. Noe slikt? https://jsfiddle.net/nzwzfqco/2/

En div forholder seg til første overordnede div som ikke har standard position (static). Så om man lager en div rundt, og setter den til position: relative forholder diven inni seg til den. Dessverre fungerer ikke det for position fixed, den er alltid i forhold til body.

Men da endrer vi bare tittel-tabellen til å være position:absolute, og så gjør vi litt om på omregninga:

$(window).scroll(function() {
    var currentScroll = $(window).scrollLeft();
    $("#forsterkertabellTittel").css({
    	top: 0,
        left: currentScroll
    })
});

Leser nå ut hvor langt vi har scrollet til venstre, og flytter tabellen tilsvarende inni sin parent.

Legg merke til at jeg har lagt en div rundt alt sammen med id "wrapper" og styling position:relative

Mastiff · 24. april 2016

Jepp, der satt den, takk! Da gjenstår bare å finne ut av det med den øvre raden som skal bli igjen. Men det er vel neppe like enkelt. Eller? Hvis jeg deler tabellen i to en gang til, altså, så den raden er en separat tabell?

Matsemann · 24. april 2016

Om du gjør det, så vil ikke nødvendigvis kolonnene matche opp lenger. Jeg anbefaler vel egentlig å bruke et bibliotek for det her om du får det til, da dette begynner å bli semi-avansert.
For slike bibliotek, må som regel de radene som er "overskriftsrader" være wrappet i en <thead>, og de andre radene i <tbody>

Som sagt, anbefaler å bruke et bibliotek, men her er en løsning https://jsfiddle.net/nzwzfqco/4/

$(window).scroll(function() {
  var tabell = $("#forsterkertabell thead");
  var headerRad = $("#forsterkertabell thead").first();
  var klone = $("#headerKlone");

  var currentScroll = $(window).scrollTop();
  var offset = $("#wrapper").offset();

  if (currentScroll > offset.top) {
    if (!klone.length) {
      var klone = headerRad.clone();
      klone.attr('id', 'headerKlone');
      headerRad.after(klone);
    }

    klone.css({
      position: 'absolute',
      top: (currentScroll - offset.top) + 'px',
      left: '118px',
      width: headerRad.width(),
      background: 'white'
    });
    
    var headers = headerRad.find('td');
    klone.find('td').each(function(index, el) {
    	$(el).css({
        width: headers.eq(index).width() + 'px'
      })
    });
    
    
  } else {
    if (klone.length) {
      klone.remove();
    }
  }

});

For at den skal virke, er det samme greia: overskriftsradene må ligge i en thead. Så du må modifisere javascriptkoden din som genererer tabellene til å lage noe på formen

<table>
  <thead>
    <tr><td>...masse overksriftsgreier</td></tr>
  </thead>
  <tbody>
    <tr><td>... de andre radene</td></tr>
    <tr><td>... de andre radene</td></tr>
    <tr><td>... de andre radene</td></tr>
    <tr><td>... de andre radene</td></tr>
    <tr><td>... de andre radene</td></tr>
  </tbody>
</table>

Skal du ha ting i bunn under tabellen må det litt kode til for å "deaktivere" at den følger etter lenger ned også.

Endret 24. april 2016 av Matsemann

Mastiff · 24. april 2016

Nydelig! Den løsningen er mer enn god nok, hvis jeg får den til. Dette skal jeg fikle med så snart jeg får tid (jeg har en kaosuke foran meg på jobb...) , så skal jeg si fra hvordan det gikk! Igjen tusen takk!

Mastiff · 25. april 2016

Edit: Glem det under foreløpig. Jeg tror jeg fikk en bedre idé: Vet du om det går an å sette bakgrunnsbilde for hver celle i en kolonne på en eller annen morsom måte gjennomn css? For da kan jeg bruke kanallogoene som bakgrunnsbilde og ha knappen gjennomsiktig. Det vil gjøre samme nytten, da kan man alltid se at "det er p1, det er P4" osv. Jeg tror det må være lettere enn å fikle med denne heller kompliserte kodesausen, hvis det går an. Jeg oppretter en ny tråd for det, det blir jo et stykke fra temaet i denne tråden.

Jeg klarer som vanlig ikke å dy meg, så jeg måtte jo prøve litt... Med den løsningen over, skal da tabellen deles i to separate tabeller, en som thead og en som tbody, eller er det deler av samme tabellen? Jeg prøvde den siste løsningen og plasserte tagsene rundt forbi, men alt bare førte til at det ikke ble noe som helst på siden. Jeg vet ikke om dette sier deg noe, men her er koden som skaper tabellen:

jsonOBJ = {};
//
//Tving til å laste på nytt for å få med endringer
function now(){
window.location.reload(true);
}

//Variablene som bare lastes når siden åpnes
//Girder source variable, Local source variable, true if set buttons, array if table array
//
$(document).ready(function() { setTimeout('checkGIRDER(\'LydogBilde.SoneID\',\'myid\',\'csv\',\'false\')',200); });
$(document).ready(function() { setTimeout('checkGIRDER(\'LydogBilde.Sone\',\'myname\',\'csv\',\'false\')',200); });
$(document).ready(function() { setTimeout('checkGIRDER(\'LydogBilde.Sone\',\'myname2\',\'csv\',\'false\')',200); });
$(document).ready(function() { setTimeout('checkGIRDER(\'LydogBilde.Sone\',\'mynameTittel\',\'csv\',\'false\')',200); });


//variabler som oppdateres for hver sjekk
//Girder source variable, Local source variable, true if set buttons
//
$(document).ready(function() { setTimeout('ScanInputs()',200);});

function ScanInputs()
{
//$(document).ready(function() { setTimeout('checkGIRDER(\'girder_variable_path\',\'local name\',\'data type\',\'set button image\')',200); });
//where
//girder variable path is either to one table (e.g example LydogBilde.Nettside) or to a single path with nested tables (e.g example LydogBilde.myhtml)
//datatype is
$(document).ready(function() { setTimeout('checkGIRDER(\'LydogBilde.Forsterkere\',\'Forsterkere\',\'key\',\'true\')',200); });
$(document).ready(function() { setTimeout('checkGIRDER(\'LydogBilde.Forsterkere\',\'Volumopp\',\'key\',\'true\')',200); });
$(document).ready(function() { setTimeout('checkGIRDER(\'LydogBilde.Forsterkere\',\'Volumned\',\'key\',\'true\')',200); });
$(document).ready(function() { setTimeout('checkGIRDER(\'LydogBilde.Nettside.Radiokanal.0\',\'minradiokanal0\',\'key\',\'true\')',200); });
$(document).ready(function() { setTimeout('checkGIRDER(\'LydogBilde.Nettside.Radiokanal.1\',\'minradiokanal1\',\'key\',\'true\')',200); });
$(document).ready(function() { setTimeout('checkGIRDER(\'LydogBilde.Nettside.Radiokanal.2\',\'minradiokanal2\',\'key\',\'true\')',200); });
$(document).ready(function() { setTimeout('checkGIRDER(\'LydogBilde.Nettside.Radiokanal.3\',\'minradiokanal3\',\'key\',\'true\')',200); });
$(document).ready(function() { setTimeout('checkGIRDER(\'LydogBilde.Nettside.Radiokanal.4\',\'minradiokanal4\',\'key\',\'true\')',200); });
$(document).ready(function() { setTimeout('checkGIRDER(\'LydogBilde.Nettside.Radiokanal.5\',\'minradiokanal5\',\'key\',\'true\')',200); });
$(document).ready(function() { setTimeout('checkGIRDER(\'LydogBilde.Nettside.Radiokanal.6\',\'minradiokanal6\',\'key\',\'true\')',200); });
$(document).ready(function() { setTimeout('checkGIRDER(\'LydogBilde.Nettside.Radiokanal.7\',\'minradiokanal7\',\'key\',\'true\')',200); });
$(document).ready(function() { setTimeout('checkGIRDER(\'LydogBilde.Nettside.Radiokanal.8\',\'minradiokanal8\',\'key\',\'true\')',200); });
$(document).ready(function() { setTimeout('checkGIRDER(\'LydogBilde.Nettside.Radiokanal.9\',\'minradiokanal9\',\'key\',\'true\')',200); });

//set the number (default 1000) for the rescan time in milliseconds
setTimeout('ScanInputs()',1000);
}

// Build the table
function BuildTable()
{
//define the number of rows in the table here
var rows = 20;
rows = rows + 1;
//define the dynamic table name (must be unique if more than 1 table displayed on the page)
$('#forsterkertabell').append('<table></table>');
var table = $('#forsterkertabell').children();
var tr = $('<tr>');

//create the first row for titles, can change the widths as long as match widths of table below
$('<td>Sone</td>').appendTo(tr);
$('<td>Sonenr.</td>').appendTo(tr);
$('<td>Av/på</td>').appendTo(tr);
$('<td>Vol -</td>').appendTo(tr);
$('<td>Vol +</td>').appendTo(tr);
$('<td>P1</td>').appendTo(tr);
$('<td>P2</td>').appendTo(tr);
$('<td>P3</td>').appendTo(tr);
$('<td>P4</td>').appendTo(tr);
$('<td>MP3</td>').appendTo(tr);
$('<td>Alltid nyh.</td>').appendTo(tr);
$('<td>Jazz</td>').appendTo(tr);
$('<td>Sport</td>').appendTo(tr);
$('<td>P1+</td>').appendTo(tr);
$('<td>Av</td>').appendTo(tr);
$('<td>Sone</td>').appendTo(tr);
tr.appendTo(table);

//start a for next loop for each subsequent row
for(var r = 1; r < rows; r++)
{
var tr = $('<tr>');
var RowID = r - 1;
var RowID2 = r;


//as above, but with letters (does not update unless page is reloaded)
var myname_REF = '<center><Div><Span id=\"mynameID'+RowID+'\"></span></center>';
$('<td>'+myname_REF+'</td>').appendTo(tr);

//example of a dynamic string display, built from local variable name + ID + rowid (does not update unless page is reloaded)
var myid_REF = '<center><Div><Span id=\"myidID'+RowID+'\"></span></center>';
$('<td>'+myid_REF+'</td>').appendTo(tr);

//Slå av og på forsterkeren
var minforsterker_REF = '<center><a href=\"\" onclick=\'return SendEventPayload(\"SettForsterker\", \"18\", \"0\" ,\"\" ,\"'+RowID2+'\",\"FromWeb\");\' onmousedown=\'return SetImage(\"ForsterkereButton'+RowID+'\", \"img/button_blue_down.jpg\");\' onmouseup=\'return SetImage(\"ForsterkereButton'+RowID+'\", \"img/button_blue_up.jpg\");\'><img src=\"img/button_blue_up.jpg\" id=\"ForsterkereButton'+RowID+'\" border=\"1\"></a></center>'
$('<td>'+minforsterker_REF+'</td>').appendTo(tr);

//Volum ned på forsterkeren
var minvolumned_REF = '<center><a href=\"\" onclick=\'return SendEventPayload(\"Volumned\", \"18\", \"1\" ,\"\" ,\"'+RowID2+'\",\"FromWeb\");\' onmousedown=\'return SetImage(\"minvolumnedButton'+RowID+'\", \"img/button_blue_down.jpg\");\' onmouseup=\'return SetImage(\"minvolumnedButton'+RowID+'\", \"img/button_blue_up.jpg\");\'><img src=\"img/button_blue_up.jpg\" id=\"minvolumnedButton'+RowID+'\" border=\"1\"></a></center>'
$('<td>'+minvolumned_REF+'</td>').appendTo(tr);

//Volum opp på forsterkeren
var minvolumopp_REF = '<center><a href=\"\" onclick=\'return SendEventPayload(\"Volumopp\", \"18\", \"1\" ,\"\" ,\"'+RowID2+'\",\"FromWeb\");\' onmousedown=\'return SetImage(\"minvolumoppButton'+RowID+'\", \"img/button_blue_down.jpg\");\' onmouseup=\'return SetImage(\"minvolumoppButton'+RowID+'\", \"img/button_blue_up.jpg\");\'><img src=\"img/button_blue_up.jpg\" id=\"minvolumoppButton'+RowID+'\" border=\"1\"></a></center>'
$('<td>'+minvolumopp_REF+'</td>').appendTo(tr);

//Sett radiokanal 1 This is a button which calls a function SendEventPayload. Note, all 4 payloads are free to use
var minradiokanal1_REF = '<center><a href=\"\" onclick=\'return SendEventPayload(\"SettRadiokanal\", \"18\", \"1\" ,\"\" ,\"'+RowID2+'\",\"FromWeb\");\' onmousedown=\'return SetImage(\"minradiokanal1Button'+RowID+'\", \"img/button_blue_down.jpg\");\' onmouseup=\'return SetImage(\"minradiokanal1Button'+RowID+'\", \"img/button_blue_up.jpg\");\'><img src=\"img/button_blue_up.jpg\" id=\"minradiokanal1Button'+RowID+'\" border=\"1\"></a></center>'
$('<td>'+minradiokanal1_REF+'</td>').appendTo(tr);

//Sett radiokanal 2
var minradiokanal2_REF = '<center><a href=\"\" onclick=\'return SendEventPayload(\"SettRadiokanal\", \"18\", \"2\" ,\"\" ,\"'+RowID2+'\",\"FromWeb\");\' onmousedown=\'return SetImage(\"minradiokanal2Button'+RowID+'\", \"img/button_blue_down.jpg\");\' onmouseup=\'return SetImage(\"minradiokanal2Button'+RowID+'\", \"img/button_blue_up.jpg\");\'><img src=\"img/button_blue_up.jpg\" id=\"minradiokanal2Button'+RowID+'\" border=\"1\"></a></center>'
$('<td>'+minradiokanal2_REF+'</td>').appendTo(tr);

//Sett radiokanal 3
var minradiokanal3_REF = '<center><a href=\"\" onclick=\'return SendEventPayload(\"SettRadiokanal\", \"18\", \"3\" ,\"\" ,\"'+RowID2+'\",\"FromWeb\");\' onmousedown=\'return SetImage(\"minradiokanal3Button'+RowID+'\", \"img/button_blue_down.jpg\");\' onmouseup=\'return SetImage(\"minradiokanal3Button'+RowID+'\", \"img/button_blue_up.jpg\");\'><img src=\"img/button_blue_up.jpg\" id=\"minradiokanal3Button'+RowID+'\" border=\"1\"></a></center>'
$('<td>'+minradiokanal3_REF+'</td>').appendTo(tr);

//Sett radiokanal 4
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);

//Sett radiokanal 5
var minradiokanal5_REF = '<center><a href=\"\" onclick=\'return SendEventPayload(\"SettRadiokanal\", \"18\", \"5\" ,\"\" ,\"'+RowID2+'\",\"FromWeb\");\' onmousedown=\'return SetImage(\"minradiokanal5Button'+RowID+'\", \"img/button_blue_down.jpg\");\' onmouseup=\'return SetImage(\"minradiokanal5Button'+RowID+'\", \"img/button_blue_up.jpg\");\'><img src=\"img/button_blue_up.jpg\" id=\"minradiokanal5Button'+RowID+'\" border=\"1\"></a></center>'
$('<td>'+minradiokanal5_REF+'</td>').appendTo(tr);

//Sett radiokanal 6
var minradiokanal6_REF = '<center><a href=\"\" onclick=\'return SendEventPayload(\"SettRadiokanal\", \"18\", \"6\" ,\"\" ,\"'+RowID2+'\",\"FromWeb\");\' onmousedown=\'return SetImage(\"minradiokanal6Button'+RowID+'\", \"img/button_blue_down.jpg\");\' onmouseup=\'return SetImage(\"minradiokanal6Button'+RowID+'\", \"img/button_blue_up.jpg\");\'><img src=\"img/button_blue_up.jpg\" id=\"minradiokanal6Button'+RowID+'\" border=\"1\"></a></center>'
$('<td>'+minradiokanal6_REF+'</td>').appendTo(tr);

//Sett radiokanal 7
var minradiokanal7_REF = '<center><a href=\"\" onclick=\'return SendEventPayload(\"SettRadiokanal\", \"18\", \"7\" ,\"\" ,\"'+RowID2+'\",\"FromWeb\");\' onmousedown=\'return SetImage(\"minradiokanal7Button'+RowID+'\", \"img/button_blue_down.jpg\");\' onmouseup=\'return SetImage(\"minradiokanal7Button'+RowID+'\", \"img/button_blue_up.jpg\");\'><img src=\"img/button_blue_up.jpg\" id=\"minradiokanal7Button'+RowID+'\" border=\"1\"></a></center>'
$('<td>'+minradiokanal7_REF+'</td>').appendTo(tr);

//Sett radiokanal 8
var minradiokanal8_REF = '<center><a href=\"\" onclick=\'return SendEventPayload(\"SettRadiokanal\", \"18\", \"8\" ,\"\" ,\"'+RowID2+'\",\"FromWeb\");\' onmousedown=\'return SetImage(\"minradiokanal8Button'+RowID+'\", \"img/button_blue_down.jpg\");\' onmouseup=\'return SetImage(\"minradiokanal8Button'+RowID+'\", \"img/button_blue_up.jpg\");\'><img src=\"img/button_blue_up.jpg\" id=\"minradiokanal8Button'+RowID+'\" border=\"1\"></a></center>'
$('<td>'+minradiokanal8_REF+'</td>').appendTo(tr);

//Sett radiokanal 9
var minradiokanal9_REF = '<center><a href=\"\" onclick=\'return SendEventPayload(\"SettRadiokanal\", \"18\", \"9\" ,\"\" ,\"'+RowID2+'\",\"FromWeb\");\' onmousedown=\'return SetImage(\"minradiokanal9Button'+RowID+'\", \"img/button_blue_down.jpg\");\' onmouseup=\'return SetImage(\"minradiokanal9Button'+RowID+'\", \"img/button_blue_up.jpg\");\'><img src=\"img/button_blue_up.jpg\" id=\"minradiokanal9Button'+RowID+'\" border=\"1\"></a></center>'
$('<td>'+minradiokanal9_REF+'</td>').appendTo(tr);

//Slå av radioen
var minradiokanal0_REF = '<center><a href=\"\" onclick=\'return SendEventPayload(\"SettRadiokanal\", \"18\", \"0\" ,\"\" ,\"'+RowID2+'\",\"FromWeb\");\' onmousedown=\'return SetImage(\"minradiokanal0Button'+RowID+'\", \"img/button_blue_down.jpg\");\' onmouseup=\'return SetImage(\"minradiokanal0Button'+RowID+'\", \"img/button_blue_up.jpg\");\'><img src=\"img/button_blue_up.jpg\" id=\"minradiokanal0Button'+RowID+'\" border=\"1\"></a></center>'
$('<td>'+minradiokanal0_REF+'</td>').appendTo(tr);

//as above, but with letters (does not update unless page is reloaded)
var myname2_REF = '<center><Div><Span id=\"myname2ID'+RowID+'\"></span></center>';
$('<td>'+myname2_REF+'</td>').appendTo(tr);

tr.appendTo(table);
}

~~Det er da uten den tabellen som viser sonene, det er en egen tabell under:~~

//******************************************************************************************************
//define the dynamic table name (must be unique if more than 1 table displayed on the page)
$('#forsterkertabellTittel').append('<table></table>');
var table = $('#forsterkertabellTittel').children();
var tr = $('<tr>');

//create the first row for titles, can change the widths as long as match widths of table below
$('<td>Sone</td>').appendTo(tr);
tr.appendTo(table);

//start a for next loop for each subsequent row
for(var r = 1; r < rows; r++)
{
var tr = $('<tr>');
var RowID = r - 1;
var RowID2 = r;


//as above, but with letters (does not update unless page is reloaded)
var myname_REF = '<center><Div><Span id=\"mynameID'+RowID+'\"></span></center>';
$('<td>'+myname_REF+'</td>').appendTo(tr);

tr.appendTo(table);
}
//******************************************************************************************************

~~Så som du ser, er det ikke akkurat enkelt og greit opplegg... Iallfall ikke for meg.~~

Endret 25. april 2016 av Mastiff

Litt forvirret med Overflow: hidden - kan noen hjelpe meg litt?

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer