diff --git a/registration-system/index.php b/registration-system/index.php index cb7bcc1ef1558fa77969aa59e106c003fbb4bbba..3923ada765694bc997f664efdda46984e333a98c 100644 --- a/registration-system/index.php +++ b/registration-system/index.php @@ -248,7 +248,8 @@ function index_show_formular($fid, $bid = NULL, $bachelor = NULL){ if (!isset($_GET['noscript'])) { echo '</noscript>'; - echo '<div id="storybox"></div>'; + echo '<div style="margin:0 auto; position:relative; width:900px; height:500px"><div id="storybox"></div>'; + echo '<div style="position:absolute; left:20px; bottom:20px; background:#f0f; cursor:pointer" onclick="story.next(true)">ZURÜCK</div></div>'; echo '<div style="text-align:center;font-weight:bold"><a style="float:none;margin:0 auto;" href="'.$_SERVER['REQUEST_URI'].'&noscript">Seite funktioniert nicht?</a></div>'; } } diff --git a/registration-system/other/story_travelBegin.svg b/registration-system/other/story_travelBegin.svg index c85df544f0dc7d6e07c8cd340054f56354e164f8..93582d2046015f4a3cbb17fc92c597fb322fd9c3 100644 Binary files a/registration-system/other/story_travelBegin.svg and b/registration-system/other/story_travelBegin.svg differ diff --git a/registration-system/view/graphics/story/travelBegin.png b/registration-system/view/graphics/story/travelBegin.png index d9b7ee2d2eaaa71aacaf6d53201f9da5e4a8fac9..b2fb669f7cce6db4d7bf5780ffd8fb8c66e6a60b 100644 Binary files a/registration-system/view/graphics/story/travelBegin.png and b/registration-system/view/graphics/story/travelBegin.png differ diff --git a/registration-system/view/js/story.js b/registration-system/view/js/story.js index df7f6f3220392bf66b66a7208e318cbd883577e5..588827574efec6a8740a77d2fb0c6e5366efd377 100644 --- a/registration-system/view/js/story.js +++ b/registration-system/view/js/story.js @@ -10,7 +10,7 @@ function storyImage(filename) } function storyImageDiv(filename) { - return $('<div style="width:900px; height:500px; background: url(view/graphics/story/'+filename+');"></div>'); + return $('<div style="position:absolute; width:900px; height:500px; background: url(view/graphics/story/'+filename+');"></div>'); addFormText(bell, "eMail", "mehl", 150, 215); } @@ -32,13 +32,43 @@ function Story(_storybox) this.basicData = null; this.travelStart = null; } +Story.prototype.next = function(bPrev) +{ + if (bPrev) + { + this.state -= 1; + if (this.state < 1) + this.state = 1; + } + + switch(this.state) + { + case 0: + this.initBasicData(); + break; + case 1: + this.initTravelStart(); + this.travelStart.animate({left:bPrev?'900px':'0px'}, 1000); + this.basicData.animate({left:bPrev?'0px':'-900px'}, 1000); + break; + case 2: + break; + case 3: + break; + } + if (!bPrev) + this.state += 1; +} Story.prototype.initTravelStart = function() { - this.travelStart = storyImageDiv('travelStart.png'); + if (this.travelStart) return; + this.travelStart = storyImageDiv('travelBegin.png'); + this.travelStart.animate({left:'900px'}, 0); this.storybox.append(this.travelStart); } Story.prototype.initBasicData = function() { + if (this.basicData) return; this.basicData = storyImageDiv('begin.png'); this.storybox.append(this.basicData); var bell = storyImageDiv('bell.png'); @@ -67,24 +97,6 @@ Story.prototype.initBasicData = function() orig_bell.effect("transfer", {to: bell}, 800); }, 600); } -Story.prototype.next = function() -{ - switch(this.state) - { - case 0: - this.initBasicData(); - break; - case 1: - this.basicData.remove(); - this.initTravelStart(); - break; - case 2: - break; - case 3: - break; - } - this.state += 1; -} Story.prototype.begin = function() { this.next(); diff --git a/registration-system/view/style.css b/registration-system/view/style.css index 822fa99d1e3c6ef86c744f82dd92f1cde5bd3b11..9c55eb172ee4b68edbf116ad2db5b49e4969a66b 100644 --- a/registration-system/view/style.css +++ b/registration-system/view/style.css @@ -101,9 +101,13 @@ div.headerboxshade { } div#storybox { - position:relative; + position:absolute; + top:0px; + left:0px; margin: 0 auto; width:900px; + height:500px; + overflow:hidden; } div#headerbox h2 {