XGamePos - LAN-Party CAG-SNS 2014

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<link rel="shortcut icon" type="image/x-icon" href="icons/fertig.ico">
<html>
<head>
<title>LAN-Party CAG-SNS 2014</title>

<style type="text/css">
.cover{font-weight:bold; color:silver; text-decoration:none;}
a:link { font-weight:bold; color:blue; text-decoration:none;
  }
a:visited { font-weight:bold; color:silver; text-decoration:none; }
a:focus { font-weight:bold; color:red; text-decoration:underline; }
a:hover { font-weight:bold; color:green; text-decoration:none; }
a:active { font-weight:bold; color:lime; text-decoration:underline; }

h1:focus { background-color:red; }
h1:hover { background-color:silver; }
h1:active { background-color:green; }

#slider {
position: fixed;
height: 100%;
left: 0;
padding-top:10px;
border-left: 0;
border-radius: 20px;
left:0px;
width:90%;
background-color:white;
}

.xx{
position:fixed; top:45px; left:0px; width:25px; height:25px;
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}

.message_body{
font-weight:bold;
color:silver;
text-decoration:none;
background-color:red;
text-color:gree;
}

.message-input {
color:red;
}

.highlight {
font-weight:bold;
color:silver;
text-decoration:none;
background-color:red;
text-color:green;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
  }

.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;

border-top: 0;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
}

.stickyf {
position: fixed;
width: 100%;
left: 0;
bottom: 0;
border-top: 0;
}


#games {
margin-top:65px;
position: absolute;
left: 50%;
width: 800px;
margin-left: -400px;
}

.cat
{ 
text-align:center;
width:100%;
float:left;
}


.rahmen
{ 
margin:25px;
float:left;
margin-left:50px;
width:175px;
}

img
{

}

.icon{
height:92px;
width:92px;

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}


img:hover{
-moz-box-shadow: 0 0 15px 5px  #fff;
-webkit-box-shadow: 0 0 5px 5px  #fff;
box-shadow: 0 0 15px 5px  #fff;
}

body
{
text-align:center;
background-color:black;
}
</style>

<meta name="viewport" content="width=device-width, initial-scale=1  maximum-scale=1.0;
minimum-scale=1.0; user-scalable=no;">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<script src="http://malsup.github.io/jquery.blockUI.js">



</script>
</head>
<body>

<!-------------------------------------------------------------------------------------------------------------------------------->

<div class="toggle" style="width:100%;height:10000px;background-color:blue;">
<image class="" src="icons/sitzplan.jpg" style="width:70%;height:500px;background-color:blue;margin-top:80px"/>
</br>
<p><span style="color:red;font-size:150%;font-weight:bold">Ready To Go?   YES -> Klick  BIRD!</strong></span></p>
<onclick=<input class="" id="sss" class="sss"</input>
<img src="icons/bird.png" style="width:64px;height:64px"/>
</div>

<!--
<div class="toggle" style="width:100%;height:10000px;background-color:blue;">
<image class="" src="icons/sitzplan.jpg" style="width:70%;height:420px;background-color:blue;margin-top:112px"/>
<div class ="cover">Bitte Namen eingeben: </div>
<div class="asd">
<input type="text" size="60" id="ddd" style=""/>
<input class="" type="button" id="sss" class="sss"  style="width:27px;height:27px;"></input>
</div>
</div>
 -->
<div class="sticky" style="background-color:blue; font-weight:bold;z-index:100;">
<p><span style="color:red;font-size:200%">LAN-Party CAG-SNS 2014</strong></span></p>
</div>

<div id="games">
<div class="cat">

<div class="rahmen">
<a href="http://tlk.io/lantests"  target="game" >
<image class="button icon"  src="http://tlk.io/images/logo.png"/>
<div class="desc" style="text-align:center;">Chat</div>
</a>
</div>

<!--- Beginn WDR - Maus ..... -->
<div class="rahmen">
<a href="http://www.wdrmaus.de/"  target="lgame" >
<image class="lbutton icon"  src="http://www.wdrmaus.de/codebase/img/start/maus_hinter_schlitz.png"/>
<div class="desc" style="text-align:center;">Maus </div>
</a>
</div> <!-- ENDE WDR - Maus -->

<!--- Beginn Internet ABC ..... -->
<div class="rahmen">
<a href="http://www.internet-abc.de/kinder"  target="lgame" >
<image class="lbutton icon"  src="icons/internetabc.jpg"/>
<div class="desc" style="text-align:center;">Internet-ABC </div>
</a>
</div> <!-- ENDE Internet ABC -->
</div>

<div class="cat">

<div class="rahmen">
<a href="http://www.toniklix.de/maus.html"  target="game" >
<image class="button icon"  src="icons/Toni Klix Maus.jpg"/>
<div class="desc" style="text-align:center;">Maustraining</div>
</a>
</div>

<!--- Beginn WDR - Maus ..... -->
<div class="rahmen">
<a href="http://www.toniklix.de/tastatur.html"  target="lgame" >
<image class="lbutton icon"  src="icons/Toni Klix Tastatur.jpg"/>
<div class="desc" style="text-align:center;">Tastaturtraining </div>
</a>
</div> <!-- ENDE WDR - Maus -->

<!--- Beginn Internet ABC ..... -->
<div class="rahmen">
<a href="http://www.internet-abc.de/kinder/118255.php?SID=Xuh3jE3EWGtlpuBYRtnkvrvWAZvCld2j&flash=bin/132627-161933-1-baukasten_geburtstagsparty.swf&db_src=117685.php&titel=Zum%20Baukasten&width=800&height=600"  target="lgame" >
<image class="lbutton icon"  src="icons/baukasten.jpg"/>
<div class="desc" style="text-align:center;">Baukasten</div>
</a>
</div> <!-- ENDE Internet ABC -->
</div>

<div class="cat">

<!--- Beginn Internet ABC Spiele ..... -->
<div class="rahmen">
<a href="http://www.internet-abc.de/kinder/spiele.php?SID=HaI8BGfMpvkzDmg1IpiaR4EpfDR0ntk5"  target="lgame" >
<image class="lbutton icon"  src="http://www.internet-abc.de/pics/kinder/k_nav_flizzy_aktiv_over.gif"/>
<div class="desc" style="text-align:center;">Internet ABC Spiele </div>
</a>
</div> <!-- ENDE Internet ABC Spiele -->

<!--- Beginn Spielaffe ..... -->
<div class="rahmen">
<a href="http://www.spielaffe.de"  target="lgame" >
<image class="lbutton icon"  src="icons/spielaffe.jpg"/>
<div class="desc" style="text-align:center;">Spielaffe </div>
</a>
</div> <!-- ENDE Spielaffe -->

<!--- Beginn Silvergames ..... -->
<div class="rahmen">
<a href="http://de.silvergames.com"  target="lgame" >
<image class="lbutton icon"  src="icons/silvergames.jpg"/>
<div class="desc" style="text-align:center;">Silvergames </div>
</a>
</div> <!-- ENDE Silvergames -->

</div>

<div class="cat">
<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/game/15/15126/paintballracers.swf"  target="game" >
<image class="button icon"  src="http://cdn.kaisergames.de/images/portalgame/300/300966/listview/343720_paintballracers.jpg"/>
<div class="desc" style="text-align:center;">Paintball</br>Rennen</div>
</a>
</div>

<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/portalgame/271/271500/22349_renegade-racing-german.swf"  target="game" >
<image class="button icon"  src="http://cdn.kaisergames.de/images/portalgame/271/271500/listview/340917_317792_re.jpg"/>
<div class="desc" style="text-align:center;">Verr&uuml;cktes Stuntrennen</div>
</a>
</div>

<div class="rahmen">
<a href="http://www.toggo.de/upload/game/3/spiel.swf"  target="game" >
<image class="button icon"  src="http://cdn.kaisergames.de/images/portalgame/285/285358/listview/356347_angelosrekorde_118x89px.jpg"/>
<div class="desc" style="text-align:center;">Angelo </br> von Toggo</div>
</a>
</div>
</div>

<div class="cat">
<div class="rahmen">
<a href="http://cdn.kaisergames.de/games/KibaKumba/de/New_03/index.html"  target="game" >
<image class="button icon"  src="http://cdn.kaisergames.de/images/portalgame/266/266976/listview/299890_kk.jpg"/>
<div class="desc" style="text-align:center;">Kiba Kumba </div>
</a>
</div>
<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/game/15/15613/09616700014000568808248/spongebob_road_trip_loader.swf"  target="game" >
<image class="button icon"  src="http://images.mtvnn.com/2200da5a178ce7a295722a4cce5103d4/original"/>
<div class="desc" style="text-align:center;">Sponge Bob</div>
</a>
</div>
<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/game/13/13045/robots.swf"  target="game" >
<image class="button icon"  src="http://cdn.kaisergames.de/images/portalgame/260/260484/listview/339611_gorobots-thumb.jpg"/>
<div class="desc" style="text-align:center;">Roboter Logic</div>
</a>
</div>
</div>


<div class="cat">
    <div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/game/2/2524/6158_agyptenpuzzle.swf"  target="game" >
<image class="button icon"  src="http://cdn.kaisergames.de/images/portalgame/2/2524/listview/16896_agyptenpuzzle.jpg"/>
<div class="desc" style="text-align:center;">&Auml;gypten Puzzle</div>
</a>
</div>
<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/game/15/15429/2048flash.swf"  target="game" >
<image class="button icon"  src="http://cdn.kaisergames.de/images/portalgame/306/306772/listview/350251_2048flash.jpg"/>
<div class="desc" style="text-align:center;">2048</div>
</a>
</div>

<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/game/0/288/pckaputt.swf"  target="game" >
<image class="button icon"  src="http://cdn.kaisergames.de/images/portalgame/0/288/listview/14660_pckaputt.jpg"/>
<div class="desc" style="text-align:center;">PC H&auml;mmern</div>
</a>
</div>
</div>

<div class="cat">
    <div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/game/15/15600/footballheadspl.swf"  target="game" >
<image class="button icon"  src="http://cdn.kaisergames.de/images/portalgame/310/310036/listview/354015_footballheadspl.jpg"/>
<div class="desc" style="text-align:center;">Kickende K&ouml;pfe 2013-2014</div>
<!-- Fuer neue Sternchen name=chk10001 durch z.B. name=chk1002 tauschen -->
<!-- <iframe style="height:50px; width:100%;" id="pagechk10001" name="page" src="http://websynthesis.org/tools/stars/iframe.php?quantity=5&color=000000&img1=&img2=&name=chk10001" frameborder="0" scrolling="no"></iframe><script type="text/javascript" src="http://websynthesis.org/tools/stars/js.php?id=chk10001"></script>-->
  </a>
</div>

<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/game/14/14128/spl_2013_kaiser.swf"  target="game" >
<image class="button icon"  src="http://cdn.kaisergames.de/images/portalgame/282/282166/listview/320353_spl_2013_kaiser.jpg"/>
<div class="desc" style="text-align:center;">Kickende K&ouml;pfe </br> Meisterliga</div>
<!-- Fuer neue Sternchen name=chk10001 durch z.B. name=chk1002 tauschen -->
<!-- <iframe style="height:50px; width:100%;" id="pagechk10001" name="page" src="http://websynthesis.org/tools/stars/iframe.php?quantity=5&color=000000&img1=&img2=&name=chk10001" frameborder="0" scrolling="no"></iframe><script type="text/javascript" src="http://websynthesis.org/tools/stars/js.php?id=chk10001"></script>-->
  </a>
</div>

<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/game/9/9704/heavytruck.swf"  target="game" >
<image class="button icon"  src="http://cdn.kaisergames.de/images/portalgame/61/61978/listview/85088_heavytruck.jpg "/>
<div class="desc" style="text-align:center;">Monster Truck</div>
<!-- Fuer neue Sternchen name=chk10001 durch z.B. name=chk1002 tauschen -->
<!-- <iframe style="height:50px; width:100%;" id="pagechk10001" name="page" src="http://websynthesis.org/tools/stars/iframe.php?quantity=5&color=000000&img1=&img2=&name=chk10001" frameborder="0" scrolling="no"></iframe><script type="text/javascript" src="http://websynthesis.org/tools/stars/js.php?id=chk10001"></script>-->
  </a>
</div>

</div>

<div class="cat">
<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/game/12/12776/attiabano.swf"  target="game" >
<image class="button icon"  src="http://cdn.kaisergames.de/images/portalgame/254/254947/listview/286027_attiabano.jpg"/>
<div class="desc" style="text-align:center;">Attia Schminken</div>
</a>
</div>

<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/game/4/4816/verliebteprinzessin.swf"  target="game" >
<image class="button icon"  src="http://cdn.kaisergames.de/images/portalgame/310/310117/listview/354101_princessinlovemakeoverkiba.jpg"/>
<div class="desc" style="text-align:center;">Verliebte Prinzessin Stylen</div>
</a>
</div>

<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/game/5/5105/katzenmadchenanziehen.swf"  target="game" >
<image class="button icon"  src="http://cdn.kaisergames.de/images/portalgame/5/5105/listview/19477_katzenmadchenanziehen.jpg"/>
<div class="desc" style="text-align:center;">Katzenm&auml;dchen anziehen</div>
</a>
</div>

</div>

<div class="cat">

<div class="rahmen">
<a href="http://www8.agame.com/mirror/flash/m/mane_pony_dressup.swf"  target="game" >
<image class="button icon"  src="http://static1.spilcdn.com/gl/200x120/4/2/54442/mane_attraction_pony.gif"/>
<div class="desc" style="text-align:center;">Pony-Ankleidespiel</div>
</a>
</div>

<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/game/15/15169/sara_pizza_burger.swf"  target="game" >
<image class="button icon"  src="http://cdn.kaisergames.de/images/portalgame/301/301743/listview/344587_sara_pizza_burger.jpg"/>
<div class="desc" style="text-align:center;">Saras Pizzaburger</div>
</a>
</div>

<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/game/1/1313/katzevshund.swf"  target="game" >
<image class="button icon"  src="http://cdn.kaisergames.de/images/portalgame/1/1313/listview/15685_katzevshund.jpg"/>
<div class="desc" style="text-align:center;">Katze gegen Hund</div>
</a>
</div>
</div>

<div class="cat">
<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/portalgame/267/267840/19726_homeslackinggermany_secure.swf"  target="game" >
<image class="button icon"  src="http://cdn.girlsgames123.com/thumbs/home-slacking.jpg"/>
<div class="desc" style="text-align:center;">Faul sein - pass auf!</div>
</a>
</div>
<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/game/11/11247/glowspace.swf"  target="game" >
<image class="button icon"  src="http://cdn.kaisergames.de/images/portalgame/220/220369/listview/248239_glowspace.jpg"/>
<div class="desc" style="text-align:center;">Der Weltraum - 1 </div>
</a>
</div>
<div class="rahmen">
<a href="http://cdn.kaisergames.de/attachments/game/6/6744/spacetruck.swf"  target="game" >
<image class="button icon"  src="http://cdn.kaisergames.de/images/portalgame/44/44729/listview/64086_spacetruck.jpg"/>
<div class="desc" style="text-align:center;">Weltraum - Truck</div>
</a>
</div>
</div>

<!-- * ************************************************************ * -->
<!-- * Ab hier Kommentare und Beispiele                             * -->
<!-- * Ein div calss=cat entspricht hier einer Zeile * -->
<!-- * Ein div class=rahmen einem Eintrag (Spiel, Link oder Video) * -->
<!-- * Es folgen jeweils ein Beispiel fuer Links, Videos und Spiele * -->
<!-- * ************************************************************ * -->
<!-- * Beginn class=cat Zeile mit drei Eintraegen  ..... * -->


<!-- * Beginn class=cat Zeile mit drei Eintraegen  Filme ..... * -->
<div class="cat">
<!--- BEGINN MP4 Grusi..... -->
<div class="rahmen">
<a href="filme/astronaut.mp4"  target="vgame" >
<image class="vbutton icon"  src="icons/GrisuDerAstronaut.JPG"/>
<div class="desc" style="text-align:center;">Grisu - Der Astronaut</div>
</a>
</div>
<!-- ENDE MP4 Grusi.....-->

<!--- BEGINN MP4 Dschungelbuch 01..... -->
<div class="rahmen">
<a href="filme/Dschungelbuch 01.mp4"  target="vgame" >
<image class="vbutton icon"  src="icons/DSB-01.jpg"/>
<div class="desc" style="text-align:center;">Dschungelbuch 01</br>Das Gesetz</div>
</a>
</div>
<!-- ENDE MP4 Dschungelbuch 01.....-->


<!--- BEGINN MP4 Evo Of Dance..... -->
<div class="rahmen">
<a href="filme/EvolutionOfDance.mp4"  target="vgame" >
<image class="vbutton icon"  src="icons/Nilpferd.jpg"/>
<div class="desc" style="text-align:center;">Die &Uuml;berraschung</div>
</a>
</div>
<!-- ENDE MP4 Evo Of Dance.....-->
</div>

 
<!-- * Ende class=cat Zeile mit drei Eintraegen  Filme ..... * -->

<!--- ENDE Zeile mit drei Eintraegen  ..... div calss="cat" -->
<!-- * ENDE des Beispiels                     * -->

<!-- * ******************************************************** * -->
<!-- * *****    TEMPLATE                                 ****** * -->
<!-- * *****    ALLES WAS GROSS IST ERSETZEN             ****** * -->
<!-- * ******************************************************** * -->
<!-- * Beginn class=cat Zeile mit drei Eintraegen  ..... * -->


<!---
<div class="cat">
<div class="rahmen">
<a href="LINK_ZUR_SEITE"  target="lgame" >
<image class="lbutton icon"  src="LINK_ZUM_ICON"/>
<div class="desc" style="text-align:center;">BESCHREIBUNG</div>
</a>
</div>

<div class="rahmen">
<a href="LINK_ZUM_FILM"  target="vgame" >
<image class="vbutton icon"  src="LINK_ZUM_ICON"/>
<div class="desc" style="text-align:center;">BESCHREIBUNG</div>
</a>
</div>

<div class="rahmen">
<a href="LINK_ZUR_SEITE"  target="game">
<image class="button icon"  src="LINK_ZUM_ICON"/>
<div class="desc" style="text-align:center;">BESCHREIBUNG</div>
<!-- Fuer neue Sternchen name=NAME_ZUM_STERNCHEN durch z.B. name=chk1002 tauschen an 3 Stellen 3x
<iframe style="height:50px; width:100%;" id="pageNAME_ZUM_STERNCHEN" name="page" src="http://websynthesis.org/tools/stars/iframe.php?quantity=5&color=000000&img1=&img2=&name=NAME_ZUM_STERNCHEN" frameborder="0" scrolling="no"></iframe><script type="text/javascript" src="http://websynthesis.org/tools/stars/js.php?id=NAME_ZUM_STERNCHEN"></script>
</a>
</div>
-->
</div>
<!--- ENDE Zeile mit drei Eintraegen  ..... div calss="cat" -->


<!-- * ******************************************************** * -->
<!-- * ******************************************************** * -->
<!-- * ******************************************************** * -->

<!-- Dialog HTML Frame Mit Navigation -->
<div id="ldialog" title="Navigiere...
<a href='javascript:history.forward()'>Vor </a>
<a href='javascript:history.back()'>Zur&uuml;ck</a>
">
<iframe id="gameframe"  src="" name="lgame" style="" width="100%" height="100%"></iframe>
</div>
<!-- ENDE Dialog HTML Frame Mit Navigation -->


<!-- Dialog Spiel -->
<div id="dialog" title="Und los geht es...">
<iframe id="gameframe"  src="" name="game" style="" width="100%" height="100%"></iframe>
</div>


<!-- Dialog Video -->
<div id="vdialog" title="Und los geht es...">
<iframe id="gameframe"  src="" name="vgame" style="" width="100%" height="100%"></iframe>
</div>

<!-- * ******************************************************** * -->
<!-- * ******************************************************** * -->
<!-- * ******************************************************** * -->



</div><!-- ENDE DIV GAMES -->




<script>
$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
_title: function(title) {
if (!this.options.title ) {
title.html("&#160;");
} else {
title.html(this.options.title);
}
}
}));


<!-- -->

<!-- -->

$( "p" ).click(function() {
$( this ).toggleClass( "highlight" );
});
<!-- -->

$(document).ready(
 
    toggleFullScreen();

function(){
        $('#menu').click(
            function(){
                $('#slider').toggle('slide',{direction:'left'},1000);   

$( ".book" ).slideUp( "slow", function() {
// Animation complete.
});

            });
    });






<!-- -->

<!-- -->

<!-- -->

<!-- -->


document.addEventListener("#vdialog", function(e) {
  if (e.keyCode == 13) {
    toggleFullScreen();
  }
}, false);

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}
    </script>



</body>



<script>


var adWidth = $(window).width();
var adHeight = $(window).height();

if (window.SpeechSynthesisUtterance === undefined) {
  // Not supported
} else {
  // Read my text
var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10]; // Note: some voices don't support altering params
msg.voiceURI = 'Google Deutsch';
msg.volume = 1; // 0 to 1
msg.rate = 1; // 0.1 to 10
msg.pitch = 2; //0 to 2
msg.text = 'Hallo';
msg.lang = 'de-DE';

msg.onend = function(e) {
  console.log('Finished in ' + event.elapsedTime + ' seconds.');
};

speechSynthesis.speak(msg);
  }


$(function() {

$("#sss").on("click", function() {

if (window.SpeechSynthesisUtterance === undefined) {
  // Not supported
} else {
var msgs = $( "#ddd" ).val();
msg.text = 'Willkommen zur Lan Party '+msgs;


speechSynthesis.speak(msg);
}
$(".toggle").toggle( "explode",{pieces: 16 }, 800);


<!-- -->
});


$("#dialog").dialog({
autoOpen: false,
});

 


$(".button").on("click", function() {
    var wWidth = $(window).width();
var dWidth = wWidth * 0.98;
var wHeight = $(window).height();
var dHeight = wHeight * 0.98;

$("#dialog").dialog("open");
$("#dialog").dialog({ position: 'left;top' });
$("#dialog").dialog({width:  dWidth,height:dHeight});
});

$("#ldialog").dialog({
autoOpen: false
});
$(".lbutton").on("click", function() {
    var wWidth = $(window).width();
var dWidth = wWidth * 0.98;
var wHeight = $(window).height();
var dHeight = wHeight * 0.98;

$("#ldialog").dialog("open");
$("#ldialog").dialog({ position: 'left;top' });
$("#ldialog").dialog({width:  dWidth,height:dHeight});
});

$("#vdialog").dialog({
autoOpen: false,

show: 'explode',
hide:'explode',
closeOnEscape: true

});
$(".vbutton").on("click", function() {
    var wWidth = $(window).width();
var vdWidth = wWidth * 0.98;
var wHeight = $(window).height();
var vdHeight = wHeight * 0.95;

        $.blockUI({ message: "", css: { width: '275px' } });

$("#vdialog").dialog("open");
$("#vdialog").dialog({ position: 'left;top' });
$("#vdialog").dialog({width:  vdWidth,height:vdHeight});

  $("#vdialog").dialog({

animate:'slow',
show: 'explode',

closeOnEscape: true,
close: function(event, ui) {
$("#img").toggleClass( 'highlight');
$.unblockUI();
}
});
});




$( ".sticky" ).click(function() {
$( ".book" ).slideToggle( "slow", function() {
// Animation complete.
});
});

});





<!--  -->




</script>

</html>

<!--

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.MP4" type="video/MP4">
  <object data="movie.mp4" width="320" height="240">
  <embed src="movie.swf" width="320" height="240">
  </object>
</video>

-->

Kommentare

Kommentar veröffentlichen

Beliebte Posts aus diesem Blog

Ampelschaltung Teil 1 - HTML, CSS und JavaScript Basics

Bild
Überblick Die meisten Webseiten bestehen im Wesentlichen aus drei Bestandteilen:  HTML Tags, CSS Anweisungen und JavaScript Code  Sie alle sind Text basiert und werden von Browsern nach festen Regeln interpretiert, verarbeitet und dem User dargestellt. CSS Anweisungen und JavaScript Code werden in den HTML Code mittels HTML Tags eingebunden. Eine Webseite besteht also aus HTML Tags, CSS Style Anweisungen und JavaScript Programmcode. Dieser Kurs bietet einen ersten Einblick in diese Bestandteile mit besonderen Schwerpunkt auf die Programmierung mit JavaScript.  Die MiniProjekte 1-4 und das Template sollen dabei helfen das Gelernte zu festigen und sollten auch als kreative Anregung dienen. https://docs.google.com/presentation/d/e/2PACX-1vRr-MvxaWwQ0paYmcOAUxw7yQYAMgIh2VXn9WBPmA67o80S32ktibuS7ASXIfP1gpURLkSI8FvmVxSv/pub?start=true&loop=true&delayms=3000 Tags Einführung, HowTo, Getting startet, HTML, CSS, JavaScript, easy Version 1.0.01052018
Mehr anzeigen

HTML - jquery - mobile - Kontaktformular

Einfaches Kontaktformular. Einfaches Kontaktformular. Ohne viele Worte. <!DOCTYPE html> <html>     <head>     <title>jQuery Mobile</title>     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />     <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>     <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> </head> <body> <div data-role="page">     <div data-role="header">         <h1>Kontakt</h1>     </div><!-- /header -->     <div data-role="content">         <p>Schreib eine Mail</p> </br>         <p><a href="mailto:christof.kaller@gmail.com">christof.kaller@gmail.com</a></p>     </div><!-- /content -->     <di
Mehr anzeigen