Hinweis?

CSS, Java Script u.s.w

Moderator: HTML-Laie

Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7542
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Hinweis?

Beitrag von Butterblume »

Hallo ihr lieben,
hätte da noch einmal eine andere Frage, und hoffe damit hier in diesem forum richtig zu sein

Der eine oder andere findet das vielleicht nervig und doof, ich find es passend, und zwar habe ich bei meiner Halloween Seite https://www.happy-halloween.karins-poserbilder.de als zusätlichen Gruselfaktor Hintergrundgeräusche gesetzt. Auf jeder den ersten 6 seiten sind verschiedene, die sich dann aber je nach Haederbild wiederholen! Momentan habe ich auf der Start Seite einen Hinweis für die User, sie möchten doch ihre Lautsprecher anmachen und ihren Browser erlauben Video und Audiodatein abspielen zu lassen. Doch irgendwie möchte ich das anders verpacken.
Ich dachte jetzt eher an ein Popup Fenster, aber das finde ich selbst auch nervig. Hat vielleicht von euch jemand eine idee?

Würde es reichen auch unten in der Leiste was zu setzten, jedoch möchte ich, dass die User darauf aufmerksam gemacht werden!
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Benutzeravatar
HTML-Laie
Moderator
Moderator
Beiträge: 356
Registriert: So 19. Nov 2017, 12:42
Mein Vorname: Hape
Wohnort: Wesermarsch
Kontaktdaten:

Re: Hinweis?

Beitrag von HTML-Laie »

Man könnte folgendes machen:

Man läßt für eine einstellbare Zeit den gewünschten Hinweis anzeigen. Zusätzlich besitzt dieses Hinweisfenster noch eine Funktion zum Schließen.

Hier auf einer meiner Homepages ist dieses im Einsatz: https://boitwarder-buergerverein.hpage. ... eruns.html

Das Script gibt es hier: http://www.dynamicdrive.com/dynamicinde ... kynote.htm oder auch hier: http://bbv-sitemaker.bplaced.net/forum/ ... p=203#p203

Oder man läßt eine Nachricht in die Mitte "fliegen" : https://hapes-javascript-demo-page.hpag ... ssage.html

Hier das Script: http://bbv-sitemaker.bplaced.net/forum/ ... p=204#p204

Natürlich gibt es auch noch weitere Möglichkeiten wie ein alert-Fenster usw.

LG Hape ;)
Unmögliches wird sofort erledigt, Wunder dauern etwas länger. 95% aller Computerprobleme befinden sich zwischen Tastatur und Stuhl.
Hapes-Javascript-Demo-Page ; Hapes-Baustelle ; Hape's-Javascript-Forum ; Hapes-Fotowelt ; Boitwarder Bürgerverein
Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7542
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Re: Hinweis?

Beitrag von Butterblume »

Guten morgen Hape Schatz :oops: .
Vielen dank für deine schnelle antwort! Ich schau mir deine Links nachher mal an! :DA schön!

Habe mich schon entschieden, werde den code mir mopsen, wo das fenster für ein paar sec erscheint. Reicht aber wenn ich wohl nur auf der startseite das fenster habe! Hoffe ich... ! Werde ich nachher gleich einstellen, muss auf Lieferungen meines neuen Geschirrspüler warten!

Ach Hape Schatz, ich wusste gar nicht, dass du auch ein Forum hast! Hast du deinen Banner dazu?
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7542
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Re: Hinweis?

Beitrag von Butterblume »

Hape Schatz,

ich habe den Code jetzt von Deinem Forum genommen, aber wo muss ich das Script vom Code genau einfügen?

Die Css ist klar

Die Datstellung - habe ich auf der Index Seite eingefügt (?)

Aber das Schript vom Code - weiß nicht auf welche Seite?? :oops:

Und kann man da auch anstatt einem Text auch eine Grafik einfügen? Hätte gern hinter dem Text ein Geist hehabt. Aber natürlich nur wenn es geht!

Momentan siehts du das direkt unter dem Counter https://www.happy-halloween.karins-poserbilder.de

In meinem Fall wäre es wohl besser noch einen Rahmen drumzusetzten? Oh ich weiß, Karin hat wieder Sonderwünsche! :oops:

Ich habs erst einmal wieder runtergenommen, weil plötzlich die ganze Seite nur schwarz war. Ich muss das mal in Ruhe versuchen ! Warte jetzt erst einmal was du dazu sagst!
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Benutzeravatar
HTML-Laie
Moderator
Moderator
Beiträge: 356
Registriert: So 19. Nov 2017, 12:42
Mein Vorname: Hape
Wohnort: Wesermarsch
Kontaktdaten:

Re: Hinweis?

Beitrag von HTML-Laie »

ich habe den Code jetzt von Deinem Forum genommen, aber wo muss ich das Script vom Code genau einfügen?
Wird normalerweise ebenfalls in den Header eingefügt.

Code: Alles auswählen

Und kann man da auch anstatt einem Text auch eine Grafik einfügen? Hätte gern hinter dem Text ein Geist hehabt. Aber natürlich nur wenn es geht!
Natürlich geht dieses auch mit Bild. Hier zu sehen: https://hapes-javascript-demo-page.hpag ... -bild.html

Im Beispiel sind die Textausrichtungen zu sehen. Je nachdem welche Variante man einsetzen möchte gibt es hier die unterschiedlichen Abschnitte:

Code: Alles auswählen

<style type="text/css">
 /* Container holding the image and the text */
.container {
  position: relative;
  text-align: center;
  color: black;
}

/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

/* Top right text */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
Den CSS-Abschnitt .container braucht man auf alle Fälle, er schließt das BIld und den Text in einem Div ein. Der geänderte Abschnitt für den Body:

Code: Alles auswählen

<div id="fadeinbox" style="filter:progid:DXImageTransform.Microsoft.RandomDissolve(duration=1) progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135) ; -moz-opacity:0">
         <div class="container">
         <img src="URL zum Bild" alt="Snow" style="width:100%;">
         <div class="bottom-left">Text unten links</div>
         <div class="top-left">Text oben links</div>
         <div class="top-right">Text oben rechts</div>
         <div class="bottom-right">Text unten rechts</div>
         <div class="centered">Text zentriert</div>
</div>
         <div align="right">
         <a href="#" onclick="hidefadebox();return false">Schließen</a>
         </div>
ich wusste gar nicht, dass du auch ein Forum hast!
Ich hatte oder habe noch zwei Foren die schon länger bestehen. Sie befanden sich bei Forumprofi.de. Da hier aber die Forensoftware umgestellt wurde und die Konvertierung auf das neue Forum fehlschlug waren so gut wie alle Scripte und Codeschnipsel die sich in den Beiträgen befanden so gut wie nutzlos weil zumeist nur leere Codezeilen zu sehen waren. zu sehen hier: http://hapes-forum.forumprofi.de/ und hier: http://hapes-npage-hilfe-forum.forumprofi.de/ . Werde diese beiden aber beizeiten löschen. Da die Darstellung von Codes bei dieser neuen Forensoftware mir nicht gefiel, habe bei Bplaced.net wo ich mal eine Demopage gebastelt habe nun mein eigenes Forum von phbb installiert und fast alles wiederhergestellt was ich mal an Scripten im Netz gefunden habe.

LG Hape :)
Unmögliches wird sofort erledigt, Wunder dauern etwas länger. 95% aller Computerprobleme befinden sich zwischen Tastatur und Stuhl.
Hapes-Javascript-Demo-Page ; Hapes-Baustelle ; Hape's-Javascript-Forum ; Hapes-Fotowelt ; Boitwarder Bürgerverein
Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7542
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Re: Hinweis?

Beitrag von Butterblume »

Guten morgen hapeschatz,
das tut mir sehr leid! Da war die ganze arbeit mit den codes umsonst! Aber schön wenn es wieder funktioniert, aber viel viel arbeit!

Ich hatte gestern nachmittag nochmal auf meiner testseite probiert. Aber da war irgendwie plötzlich der seitenrand zu breit. Frag mich bitte nicht warum. Ist aber auch gott sei dank nur die test seite gewesen!

Ich werde es nachher nochmal probieren. MUSS dringend den fehler korrigieren auf der poserbilder! Dann versuch ichs nochmal! Ich sag auch hier erst einmal :DA schön!
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7542
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Re: Hinweis?

Beitrag von Butterblume »

Hallo Hape Schatz, :oops:

so nun hab ichs mal eingefügt. Ist noch ein bisschen groß das Bild. Aber was mich stört ist der rest vom Weiß! Schau mal...

https://www.test.karins-poserbilder.de/

Die Größe für das bild habe ich von 100% auf 50% bereits verkleinert!

Wo kann ich das ändern in der CSS. Da steht immer nur was mit absolut?! :oops: :shock:

Und schließen tut sich das auch irgendwie nicht!

Ich probiere nachher noch weiter!

Die zeilen mit dem text oben rechts, oben links usw nehme ich noch raus!
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7542
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Re: Hinweis?

Beitrag von Butterblume »

Hallo Hape Schatz, :oops:

also ich habe jetzt folgendes gemacht!
In der CSS habe ich dies drin

Code: Alles auswählen

<style type="text/css">
 /* Container holding the image and the text */
.container {
  position: relative;
  text-align: center;
  color: black;
}

/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

/* Top right text */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
Im Haeder folgendes:

Code: Alles auswählen

<script type="text/javascript">

/***********************************************
* Sticky Note script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Go to http://www.dynamicdrive.com/ for full source code
***********************************************/

//Specify display mode. 3 possible values are:
//1) "always"- This makes the fade-in box load each time the page is displayed
//2) "oncepersession"- This uses cookies to display the fade-in box only once per browser session
//3) integer (ie: 5)- Finally, you can specify an integer to display the box randomly via a frequency of 1/integer...
// For example, 2 would display the box about (1/2) 50% of the time the page loads.

var displaymode="always"

var enablefade="yes" //("yes" to enable fade in effect, "no" to disable)
var autohidebox=["yes", 5] //Automatically hide box after x seconds? [yes/no, if_yes_hide_after_seconds]
var showonscroll="yes" //Should box remain visible even when user scrolls page? ("yes"/"no)
var IEfadelength=1 //fade in duration for IE, in seconds
var Mozfadedegree=0.05 //fade in degree for NS6+ (number between 0 and 1. Recommended max: 0.2)

////////No need to edit beyond here///////////

if (parseInt(displaymode)!=NaN)
var random_num=Math.floor(Math.random()*displaymode)

function displayfadeinbox(){
var ie=document.all && !window.opera
var dom=document.getElementById
iebody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
objref=(dom)? document.getElementById("fadeinbox") : document.all.fadeinbox
var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
var docwidth=(ie)? iebody.clientWidth : window.innerWidth
docheight=(ie)? iebody.clientHeight: window.innerHeight
var objwidth=objref.offsetWidth
objheight=objref.offsetHeight
objref.style.left=docwidth/2-objwidth/2+"px"
objref.style.top=scroll_top+docheight/2-objheight/2+"px"

if (showonscroll=="yes")
showonscrollvar=setInterval("staticfadebox()", 50)

if (enablefade=="yes" && objref.filters){
objref.filters[0].duration=IEfadelength
objref.filters[0].Apply()
objref.filters[0].Play()
}
objref.style.visibility="visible"
if (objref.style.MozOpacity){
if (enablefade=="yes")
mozfadevar=setInterval("mozfadefx()", 90)
else{
objref.style.MozOpacity=1
controlledhidebox()
}
}
else
controlledhidebox()
}

function mozfadefx(){
if (parseFloat(objref.style.MozOpacity)<1)
objref.style.MozOpacity=parseFloat(objref.style.MozOpacity)+Mozfadedegree
else{
clearInterval(mozfadevar)
controlledhidebox()
}
}

function staticfadebox(){
var ie=document.all && !window.opera
var scroll_top=(ie)? iebody.scrollTop : window.pageYOffset
objref.style.top=scroll_top+docheight/2-objheight/2+"px"
}

function hidefadebox(){
objref.style.visibility="hidden"
if (typeof showonscrollvar!="undefined")
clearInterval(showonscrollvar)
}

function controlledhidebox(){
if (autohidebox[0]=="yes"){
var delayvar=(enablefade=="yes" && objref.filters)? (autohidebox[1]+objref.filters[0].duration)*1000 : autohidebox[1]*1000
setTimeout("hidefadebox()", delayvar)
}
}

function initfunction(){
setTimeout("displayfadeinbox()", 100)
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = ""
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
if (displaymode=="oncepersession" && get_cookie("fadedin")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){
if (window.addEventListener)
window.addEventListener("load", initfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", initfunction)
else if (document.getElementById)
window.onload=initfunction
document.cookie="fadedin=yes"
}
</script><script type="text/javascript">
// Bilder mit Zoom-Funktion (ohne Animation)
// Homepage-Total.de
function anzeigen(das){
 if(document.getElementById(das).style.display=="none") {
  document.getElementById(das).style.display="inline";
 }
 else {
  document.getElementById(das).style.display="none";
 }
}
</script>
<style type="text/css">
.Bereich {
 position: absolute;
 text-align: center;
 font-weight: bold;
}

.Beschreibung_a {
 color: #FF6A00;
 background-color: #000000;
 display: block;
}</style>
<script language='JavaScript' type='text/JavaScript'>
//Made by 1st JavaScript Editor
//http://www.yaldex.com
//Come and get more (free) products
var tenth='';function ninth() {
if (document.all) {(tenth);alert("Wenn Sie sich f&uuml;r die Bilder interessieren,wenden sie sich an den Webmaster"); return false;}}
function twelfth(e) {
if (document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(tenth);return false;}}}
if (document.layers) {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=twelfth;}
else{document.onmouseup=twelfth;document.oncontextmenu=ninth;}
document.oncontextmenu=new Function('alert(" Bilder Copyright © 2010 bbv-sitemaker. Wenn Sie sich f&uuml;r die Bilder interessieren, wenden sie sich an den Webmaster"); return false')
</script>
und im Index hab ich dies bereits abgeändert:

Code: Alles auswählen

<div id="fadeinbox" style="filter:progid:DXImageTransform.Microsoft.RandomDissolve(duration=1) progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135) ; -moz-opacity:0">
         <div class="container">
         <img src="https://www.happy-halloween.karins-poserbilder.de/images/poserbilder/hinweis.png" alt="Snow" style="width:30%;">
        </div>
         <div align="right">
         <a href="#" onclick="hidefadebox();return false">Schließen</a>
         </div>




Nachdem ich denen Code im Haeder eingegeben habe, ghet nun auch das Bild von allein weg!

Das Bild hat jetzt die richtige Größe!

Nun ist nur noch der weiße Hintergrund mit dem orangen Rahmen. Denn eigentlich sollte der Rahmen das Bild umranden!

Wenn das Bild ohnehin von alleine weggeht, warum muss ich dann das Schließen noch drin haben?

https://www.test.karins-poserbilder.de

Was mir gerade noch einfällt! Wenn das Bild weggegangen ist, bleibt dort eine recht große Lücke, kann man das ebenfalls noch ändern, oder ist das so? Weil dann kann ich das nicht nehmen. Sieht ja auf dauer dann nicht gerade schön aus! :cry:

Jetzt wart ich erst einmal auf Deine Antowrt!

Wünsche einen schönen Tag!
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Benutzeravatar
HTML-Laie
Moderator
Moderator
Beiträge: 356
Registriert: So 19. Nov 2017, 12:42
Mein Vorname: Hape
Wohnort: Wesermarsch
Kontaktdaten:

Re: Hinweis?

Beitrag von HTML-Laie »

So habe mal dein Design nachgebaut auf meinem Rechner und habe getestet. Das der Hintergrund des Bildes also der div in dem das Bild dargestellt wird so groß ist, liegt daran das schon ein Div mit der ID .container existiert. Das ich aber jetzt herausgefunden habe das du ein Bild mit Text verwendest, kannst du die geposteten CSS-Abschnitte wieder entfernen aus der CSS-Datei.

Dafür fügt du folgenden Abschnitt ein:

Code: Alles auswählen

img{
border-radius: 9px;
  margin: 1% auto;
  -webkit-box-shadow:0 0 2px #FF6A00, 0 0 2px #FF6A00,0 0 2px #FF6A00,0 0 2px #FF6A00,0 0 2px #FF6A00,0 0 5px #FF6A00,0 0 5px #FF6A00,0 0 5px #FF6A00;
}
Damit kriegt das Bild seinen Rahmen. Jetzt noch folgendes anpassen: Den zuletzt eingefügten Div-Container wieder entfernen,
Wenn das Bild ohnehin von alleine weggeht, warum muss ich dann das Schließen noch drin haben?


habe ich ebenfalls entfernt, so das nur noch dieses übrigbleibt:

Code: Alles auswählen

<div id="fadeinbox" style="filter:progid:DXImageTransform.Microsoft.RandomDissolve(duration=1) progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135) ; -moz-opacity:0">
<img src="https://www.happy-halloween.karins-poserbilder.de/images/poserbilder/hinweis.png" alt="Snow" style="width:30%;">
</div>
Was mir gerade noch einfällt! Wenn das Bild weggegangen ist, bleibt dort eine recht große Lücke, kann man das ebenfalls noch ändern, oder ist das so? Weil dann kann ich das nicht nehmen. Sieht ja auf dauer dann nicht gerade schön aus!
Warum es nicht funktionierte:

Die CSS- Anweisungen für die fadeinbox haben gefehlt. Zumindest konnte ich sie nicht in deiner CSS-Datei finden.

LG Hape ;)
Unmögliches wird sofort erledigt, Wunder dauern etwas länger. 95% aller Computerprobleme befinden sich zwischen Tastatur und Stuhl.
Hapes-Javascript-Demo-Page ; Hapes-Baustelle ; Hape's-Javascript-Forum ; Hapes-Fotowelt ; Boitwarder Bürgerverein
Benutzeravatar
Butterblume
Held des Forums
Held des Forums
Beiträge: 7542
Registriert: Fr 3. Aug 2012, 16:33
Mein Vorname: Karin
Wohnort: Peine / Niedersachsen
Kontaktdaten:

Re: Hinweis?

Beitrag von Butterblume »

Guten morgen Hape Schatz,
Das klingt ja jetzt alles recht einfach. Ich werde das nach meiner Hausarbeit mal ändern! Vielen dank! Wenn ich noch fragen habe, melde ich mich noch einmal ! Ansonsten wünsche ich einen schönen tag!
Kussi... und Bild für all eure Bemühungen!

Butterblume / Karin

https://www.karins-poserbilder.de
Antworten

Zurück zu „Fragen zu HTML & Programmiersprachen“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast