Hinweisleiste am Bildschirmrand

Da man eine solche Hinweisleiste in der Regel nur für einen bestimmten Zeitraum verwendet ist der Code per Inline-CSS eingebunden. So braucht man um diese wieder zu entfernen einfach den entsprechenden Absatz zu löschen.

Zum Einfügen des Codes den Unten aufegführten Quelltext per Widget > Quelltext am Ende der Seite im Content einfügen.

Der Wert "".delay(1000)"" gibt die Zeit an wann die Hinweisleiste eingeblendet wird.

Hiweisleiste OBEN

<div id="hinweis" style="display: none; background-color: rgba(204, 0, 0, 0.9); padding:6px 20px; color:#ffffff; position:fixed; top:0; left:0; width:100%; text-align: center; box-sizing: border-box; z-index:9999;">

<span style="float: right;"><a id="close" href="#" style="color: white;">✕</a></span>

<b><a style="color: white; text-decoration: none;"" href="http://code.zella.de/">zur Startseite!</a></b>

</div>


<script>

$(document).ready(function () {

var p = $("body").css("padding-top");

$("#hinweis").delay(1000).slideDown("fast", function(){

$("body").animate(

{paddingTop: parseInt(p) + parseInt($("#hinweis").outerHeight()) + "px"},

{duration: "fast", complete: function(){

}});

});

$("#hinweis a#close").click(function(e){

$("#hinweis").slideUp("fast", function(){

$("body").animate({paddingTop: p}, "fast");

});

e.preventDefault();

});

});

</script>

Hinweisleiste UNTEN

<div id="hinweis2" style="display: none; background-color: rgba(0, 0, 255, 0.8); padding:6px 20px; color:#ffffff; position:fixed; bottom:0; left:0; width:100%; text-align: center; box-sizing: border-box; z-index:9999;">

<span style="float: right;"><a id="close" href="#" style="color: white;">✕</a></span>

<b><a style="color: white; text-decoration: none;"" href="http://code.zella.de/">Diese Hinweisleiste ist verlinkt<br>mit der Startseite.</a></b>

</div>

<script>

$(document).ready(function () {

var p = $("body").css("padding-top");

$("#hinweis2").delay(3000).slideDown("fast", function(){

$("body").animate(

{paddingBottom: parseInt(p) + parseInt($("#hinweis2").outerHeight()) + "px"},

{duration: "fast", complete: function(){

}});

});

$("#hinweis2 a#close").click(function(e){

$("#hinweis2").slideUp("fast", function(){

$("body").animate({paddingBottom: p}, "fast");

});

e.preventDefault();

});

});

</script>