[HTML/JS] Element niet tonen zonder JavaScript *

dinsdag 30 juni 2009 11:23

Acties:

0 Henk 'm!

zij/haar

Topicstarter

Voor een website waar ik nu aan werk heb ik het volgende nodig:

Als javascript aan staat moet hij een linkje tonen als het uistaat moet hij een input-knop tonen. Dit laatste is natuurlijk makkelijk op te lossen met <noscript>.

Als JavaScript uitstaat moet hij echter alleen de input-knop tonen, en niet de link. Iemand enig idee hoe ik dit voor elkaar krijg?

Mijn Google-search leverde in ieder geval niks op.

dinsdag 30 juni 2009 11:24

Acties:

0 Henk 'm!

disjfa

be

Link tonen met javascript

Standaart uit dus.

disjfa - disj·fa (meneer)
disjfa.nl

dinsdag 30 juni 2009 11:27

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Javascript

Zet op je link een style display: none. En zet met JS de style op display inline bij onload. Voila.

Even uit de losse pols:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Untitled</title>
    <style type="text/css">
        a.js { display: none; }
    </style>
</head>

<body>
    <form name="foo" method="post" action="/">
        <input type="submit" value="knopje"> <a href="#" class="js">Linkje</a>  
    </form>
    <script type="text/javascript">
        var elems = document.getElementsByTagName('a');
        for (var i=0;i<elems.length;i++)
            if (elems[i].className=='js')
                elems[i].style.display='inline';
    </script>
</body>
</html>

[ Voor 103% gewijzigd door RobIII op 30-06-2009 11:34 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 30 juni 2009 11:28

Acties:

0 Henk 'm!

MoietyMe

zij/haar

Topicstarter

RobIII schreef op dinsdag 30 juni 2009 @ 11:27:
Zet op je link een style display: none. En zet met JS de style op display inline bij onload. Voila.

Waarom kom ik daar nou zelf niet op

Bedankt voor de tip en het scritp!

dinsdag 30 juni 2009 11:58

Acties:

0 Henk 'm!

chem

Reist de wereld rond

RobIII schreef op dinsdag 30 juni 2009 @ 11:27:
Zet op je link een style display: none. En zet met JS de style op display inline bij onload. Voila.

Even uit de losse pols:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Untitled</title>
    <style type="text/css">
        a.js { display: none; }
    </style>
</head>

<body>
    <form name="foo" method="post" action="/">
        <input type="submit" value="knopje"> <a href="#" class="js">Linkje</a>  
    </form>
    <script type="text/javascript">
        var elems = document.getElementsByTagName('a');
        for (var i=0;i<elems.length;i++)
            if (elems[i].className=='js')
                elems[i].style.display='inline';
    </script>
</body>
</html>

Of;

Cascading Stylesheet:

#foo .js {
    display: none;
}
body.javascript #foo .js {
    display: inline;
}

en dan

JavaScript:

1	document.body.className = 'javascript';

Da's sneller dan alle elementen afstruinen

Klaar voor een nieuwe uitdaging.

dinsdag 30 juni 2009 12:00

Acties:

0 Henk 'm!

Sebazzz

3dp

Iets met Rome en meerdere wegen enzo

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]

dinsdag 30 juni 2009 13:24

Acties:

0 Henk 'm!

MoietyMe

zij/haar

Topicstarter

@chem: dat is inderdaad korter. Heb nu jouw manier gebruikt, alleen dan andere classnamen.

dinsdag 30 juni 2009 13:35

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Javascript

chem schreef op dinsdag 30 juni 2009 @ 11:58:
[...]

Of;
Cascading Stylesheet:
1
2
3
4
5
6
#foo .js {
    display: none;
}
body.javascript #foo .js {
    display: inline;
}
en dan
JavaScript:
1
document.body.className = 'javascript';
Da's sneller dan alle elementen afstruinen

Oeh; die's creatief

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 30 juni 2009 13:48

Acties:

0 Henk 'm!

MoietyMe

zij/haar

Topicstarter

Bij mij staat het er nu zo:

JavaScript:

1
2
3

function jsStatus() {
    document.body.className = 'js-enabled';
}

HTML:

1
2
3

<body onload="jsStatus();">
    <a href="#" class="js-submit">Link</a>
</body>

Cascading Stylesheet:

1 2	.js-submit {display:none;} .js-enabled .js-submit {display:inline;}

Bedankt allemaal voor de reacties

Onderwerpen