[CSS][HTML] Site wil niet in fullscreen

[usain]

Hallo Tweakers!

Ik ben een havo-scholier en onderhoud in mijn vrije tijd een blogje voor mijzelf en mijn vrienden.
Ik heb een paar maanden geleden een thema gekocht en ben mijn site zo veel mogelijk aan het personaliseren door dingen die ik tegenkom op het web ook toe te passen op mijn blog. Ik vond het altijd wel tof als je op een site fullscreen kon gaan, maar was van mening dat dit niet mogelijk was met HTML en CSS. Totdat ik door een uitnodiging op Facebook op de site van Valhalla terecht kwam. Op de Valhalla site zit rechstonderin een button om in fullscreen mode te gaan. Ik heb het element geinspecteerd en alle code die nodig is in mijn eigen website verwerkt. De button staat er, de hover werkt, maar als er op geklikt word gebeurd er niks. bijgevoegd de code voor de button geplaatst in header-horizontal.php en het stukje CSS

HTML:

<button id="view-fullscreen" class="buttoncss"><img src="wp-content/themes/sideways/images/fs-but.png" /></button>
         <button id="cancel-fullscreen" class="buttoncss"><img src="wp-content/themes/sideways/images/fs-exit.png" /></button>

Cascading Stylesheet:

#view-fullscreen{
    background:none;
    border:none;
    position:fixed;
    right:10px;
    bottom:10px;
    transition: all 0.4s ease-in-out;
-moz-transition:  all 0.4s ease-in-out;
-webkit-transition:  all 0.4s ease-in-out;
-o-transition:  all 0.4s ease-in-out;
}
#view-fullscreen:hover{
    opacity:0.6;
}
#cancel-fullscreen{
    border:none;
    background:none;
    visibility:hidden;
    position:fixed;
    right:10px;
    bottom:10px;
    transition: all 0.4s ease-in-out;
-moz-transition:  all 0.4s ease-in-out;
-webkit-transition:  all 0.4s ease-in-out;
-o-transition:  all 0.4s ease-in-out;
}
#cancel-fullscreen:hover{
    opacity:0.6;
}

html:-moz-full-screen #view-fullscreen{
    background:none;
    border:none;
    visibility:hidden;
    position:fixed;
    right:10px;
    bottom:10px;
}
html:-webkitfull-screen #view-fullscreen{
    background:none;
    border:none;
    visibility:hidden;
    position:fixed;
    right:10px;
    bottom:10px;
}
html:fullscreen #view-fullscreen{
    background:none;
    border:none;
    visibility:hidden;
    position:fixed;
    right:10px;
    bottom:10px;
}
html:-moz-full-screen #cancel-fullscreen{
    background:none;
    border:none;
    visibility:visible;position:fixed;
    right:10px;
    bottom:10px;
}
html:-webkit-full-screen #cancel-fullscreen{
    background:none;
    border:none;
    visibility:visible;position:fixed;
    right:10px;
    bottom:10px;
}
html:fullscreen #cancel-fullscreen{
    background:none;
    border:none;
    visibility:visible;position:fixed;
    right:10px;
    bottom:10px;
}

Hoe is dit probleempje te fixen?

Bijvoorbaad dank!

[Raynman]

Je moet ook nog wat bijbehorende JS jatten lijkt me. Of [google=fullscreen api].

[zynex]

hier is bijvoorbeeld een tutorial te vinden. Ga dat soort dingen eerst maar eens lezen voordat je alles bij elkaar gaat knippen en plakken.

Offtopic: Mijn Nederlands is niet geweldig en dat is dan ook één van de redenen om geen blog te starten. Je hele blog staat vol met spellings fouten en dat leest alles behalve gemakkelijk. Ik neem aan dat je op school wel beter schrijft dan dat? (No offence)

[usain]

agh mijn vrienden merken die fouten nieteens op.

Maar bedankt voor de tips het is opgelost en werkt nu naar behoren!

[ Voor 42% gewijzigd door usain op 20-10-2012 15:25 ]