Søg
Avatar billede Christian_Bundgaard Nybegynder
21. september 2011 - 20:35 Der er 23 kommentarer og
1 løsning

Hjælp til en simpel tilføjelse til et script

Hej

Jeg har været ved at finde et script, der gør det muligt at style select bokse - og efter lidt besvær er det lykkedes at få det til at virke. På en af mine oprindelige select bokse havde jeg dog brugt onchange til at kalde en js function - men den virker ikke ved dette. Hvis jeg bruger onclick på options i stedet for, virker det i alt andet end Chrome - men det er vist ikke så smart at bruge det, har jeg læst.

Derfor er mit spørgsmål ganske enkelt: er der en, der kan tilføje lidt til dette script, så onchange og eventhandlers får effekt, eller er der en anden måde at gøre det på?

Det, scriptet gør, er, at det laver en span i stedet for select men med samme egenskaber; men eventhandlers virker så tilsyndeladende ikke.

Scriptet er hentet herfra, hvor der står lidt om det:
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Og her er js filen: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/custom-form-elements.js

- det der har relevans starter cirka 30 linjer nede i scriptet, hvis man antager at linje 1 er det med "document.write".

Jeg håber nogen har en løsning. Jeg vil blive meget taknemmelig.

Med venlig hilsen
Christian Bundgaard
Avatar billede kjeldsted Novice
21. september 2011 - 21:23 #1
Altså skulle hele denne JS fil (www.ryanfait.com/resources/custom-checkboxes-and-radio-buttons/custom-form-elements.js) være nødvendig blot for at ændre style på en select?

Det mest simple ville vel noget noget i stil med
function change_style()
{
document.getElementById("select").style = "select_onmouseover";
}

<select id="select" style="select_normal">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>


Burde det ikke virke?
Avatar billede kjeldsted Novice
21. september 2011 - 21:24 #2
Hov... Der skulle selvfølgelig stå:

function change_style()
{
document.getElementById("select").style = "select_onmouseover";
}

<select onmouseover="change_style()" id="select" style="select_normal">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Avatar billede kjeldsted Novice
21. september 2011 - 21:33 #3
Jeg beklager den store mængde fejl i aften. Er vist for træt. Her kommer en sidste rettelse og SÅ burde den være dér:
function change_style()
{
document.getElementById("select").className = "select_onmouseover";
}

<select onmouseover="change_style()" id="select" style="select_normal">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Avatar billede Christian_Bundgaard Nybegynder
21. september 2011 - 21:43 #4
Det er sådan, at du kan ikke kan ændre på, hvordan select ser ud - i hvert fald ikke særligt meget. Dette script giver muligheden for at ændre meget mere på på checkboxes, radiobuttons og select bokse. Det vil sige, at man kan bruge ens eget billede som grundlag for select boksen, så det hele bliver, som man vil have det.
Avatar billede Christian_Bundgaard Nybegynder
21. september 2011 - 21:46 #5
Ups glemte lige det sidste. Med hensyn til det script der, hvad mener du så med det? Jeg kunne ikke helt forstå det...
Avatar billede olebole Juniormester
21. september 2011 - 22:19 #6
<ole>

Du skriver noget om, hvad der ikke virker - eller hvordan noget opfører sig - i Chrome.

Så vidt, jeg kan se, er der tale om helt almindelige select elementer med et billede hen over. Derfor burde deres event handlers også virke helt fint

/mvh
</bole>
Avatar billede olebole Juniormester
21. september 2011 - 22:20 #7
Ups ... "Du skriver ikke noget om, hvad der ikke virker - eller hvordan noget opfører sig - i Chrome."
Avatar billede Christian_Bundgaard Nybegynder
21. september 2011 - 22:50 #8
Det er muligt ole/bole. Jeg forstår bare ikke, hvorfor event handlerne virkede før dette script blev sat på - samt de virker stadig hvis man sætter dem på options - men nu virker onchange ikke derpå.

Det der ikke virke i Chrome er onclick på options.
Avatar billede kjeldsted Novice
21. september 2011 - 22:53 #9
#4:

Nu er jeg pt. ikke i nærheden af en PC. Så kan ikke tjekke med IE. Men har ligt prøvet at oprette én med lidt forskellige properties. Indstillingerne er som følger, og alle virker fint i FF og Safari.

.select_onmouseover {
        font-size:50px;
        background-color:#00FF00;
        border-radius:10px;
        width:1000px;
        text-shadow: 5px 5px 5px #882222;
    }

Så forstår ikke at du siger man ikke kan lave noget om på den.
Avatar billede Christian_Bundgaard Nybegynder
21. september 2011 - 22:59 #10
Ja kjeldsted, men kan du fx ændre pilen?

@ ole/bole
Jeg er helt tabt nu. Før virkede det med onclick på options, nu ved blot at ændre på koden og ændre tilbage til nøjagtigt det samme, virker det ikke. Og det blev ændret tilbage vha. "fortryd"...
- Så det kan tyde på, at der er opstået en fejl i scriptet, da jeg indsatte det andet. Det må jeg lige tjekke i morgen.

Tak for svarene.
Avatar billede olebole Juniormester
21. september 2011 - 23:09 #11
@Christian_Bundgaard: Det har aldrig givet mening at bruge onclick. Det er onchange, du skal bruge - og sådan har det alle dage været  =)

@kjeldsted: Det nytter ikke at udvikle til sidste nye browserversion. Derudover er det lidt et tilfælde, at nogle af dine properties overhovedet fungerer. De tilhører en standard, som endnu ikke er officiel.

At kode til sidste nye browserversion og bruge ikke standardiseret kode er noget, man kan tillade sig, når man koder 'sitet om husets kat' - men ikke, når man beflitter sig med seriøs webudvikling  =)
Avatar billede Christian_Bundgaard Nybegynder
22. september 2011 - 08:49 #12
Ja det er jeg helt klar over ole. Men det virker bare ikke nu :/
Avatar billede olebole Juniormester
22. september 2011 - 09:21 #13
Nej, jeg har testet i Firebug - og scriptets select elementer er åbenbart ikke lavet til at fungere. Du må enten skrive scriptet om eller finde et andet
Avatar billede JensPeterSvensson Nybegynder
22. september 2011 - 09:22 #14
onchange virker fint nok, problemet er bare det samme som sidst.

Med direkte tildeling til events

Du har denne linje:
inputs[a].onchange = Custom.choose;

Prøv at skifte den ud med:
addListener(inputs[a], 'change', Custom.choose);
Avatar billede olebole Juniormester
22. september 2011 - 12:30 #15
Problemet er det samme som hvornår?
Avatar billede Christian_Bundgaard Nybegynder
22. september 2011 - 13:10 #16
Mange tak Jens! Ole, det var fordi han hjalp mig på udvikleren.dk, men jeg havde oprindeligt lukket tråden, det har han så nok set og tæntk nu er den færdig - siden genåbnede jeg den så.

http://www.udvikleren.dk/forum/35425/simpelt-problem-med-javascript-includes/

Men endnu en gang tak. Jeg havde helt glemt, der var noget med det i scriptet også :S Som tak for hjælpen Ole får du 50 point, hvis du ligger svar, Jens får 150.

Med venlig hilsen
Christian
Avatar billede Christian_Bundgaard Nybegynder
22. september 2011 - 13:11 #17
Nå man kan åbenbart kun give alle point, så Jens fik dem. Beklager Ole, men mange tak for hjælpen til jer begge.
Avatar billede Christian_Bundgaard Nybegynder
22. september 2011 - 13:17 #18
Jeg er dog så dum selvfølgelig at tro på det, før jeg har testet det... Så jeg ved godt, jeg har uddelt point, men hvis du gider se, hvad der kan være problemet, vil det være dejligt Jens.

Scripter er nu dette:
http://firstmandown.com/ress/formstyling.js
Avatar billede Christian_Bundgaard Nybegynder
22. september 2011 - 13:23 #19
Jeg fandt ud af det nu. Det er fordi, jeg har lavet et dårligt script til det.

<script type="text/javascript">
function showdiv(divid) {
    var div1 = document.getElementById('div1');
    div1.style.display='none';
    var div2 = document.getElementById('div2');
    div2.style.display='none';
    var div3 = document.getElementById('div3');
    div3.style.display='none';
    var div4 = document.getElementById('div4');
    div4.style.display='none';
    var div5 = document.getElementById('div5');
    div5.style.display='none';
   
    var thediv = document.getElementById(divid);
    thediv.style.display='block';
}
</script>

Det er forskelligt, hvor mange divs, der vil være, så hvis der ikke er div1, div2, div3, div4 og div5 kan den ikke udføre det korrekt; selvfølgelig. Jeg er meget nybegynder til JS, som I kan se, så hvordan vil det være smartest at lave dette?
Avatar billede Christian_Bundgaard Nybegynder
22. september 2011 - 13:35 #20
Nu har jeg vist haft rigeligt med indlæg - men nu virker det! :)

<script type="text/javascript">
function showdiv(divid) {
   
    if(document.getElementById('div1') !== null) document.getElementById('div1').style.display='none';
    if(document.getElementById('div2') !== null) document.getElementById('div2').style.display='none';
    if(document.getElementById('div3') !== null) document.getElementById('div3').style.display='none';
    if(document.getElementById('div4') !== null) document.getElementById('div4').style.display='none';
    if(document.getElementById('div5') !== null) document.getElementById('div5').style.display='none';
   
    document.getElementById(divid).style.display='block';
}
</script>
Avatar billede JensPeterSvensson Nybegynder
22. september 2011 - 14:32 #21
Det her burde gøre det samme som din funktions krop:
for(var i = 1; i < 6; i++){
  var d = document.getElementById('div'+i);
  if(d!==null){
    d.style.display = 'none'
  }
}
Avatar billede Christian_Bundgaard Nybegynder
22. september 2011 - 14:43 #22
Okay tak ;)
Avatar billede olebole Juniormester
22. september 2011 - 19:53 #23
- og så kan du nøjes med at oprette en enkelt variabel og genbruge den:


var d;
for(var i = 1; i < 6; i++){
  d = document.getElementById('div'+i);
  if(d!==null){
    d.style.display = 'none'
  }
}

Avatar billede Christian_Bundgaard Nybegynder
22. september 2011 - 21:22 #24
Okay tak :)
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
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 1 03/02/202614:19 03/02/202618:42
Å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
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
Opgavestyring Af ingeman i JavaScript 1 15/09/202416:06 15/09/202420:40
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
Seneste spørgsmål Seneste aktivitet
31/0310:22 Makro der gemmer vedhæftet fil fra Msg og omdøber filen Af lokesa i Excel
30/0313:45 Kablet forbindelse mellem android telefon og windows 11 pc Af 1Dorte i Android
30/0312:04 Elementtype vises - og ikke billedet? Af hkprofil i Billedbehandling
29/0312:08 Problemer med replay af købte kursusvideoer Af annam i Browsere
28/0311:18 DENVER DVB-tMPEG-4 HD TUNER Af ole falsted i Fjernsyn & projektorer
White papers
Flere white papers »