Forum - Sprechblasen fürs Forum - Teil 1+2

<style> 
:root {
--Schriftfarbe: #622107;
--Hintergrund:#eeeeaa;
--Rand:#400000;
}
 
.sprech1 {
  display:inline-block;
  position: relative;
  left:10px;
  bottom:-25px;
  cursor:pointer;
  z-index: 999999;
}
 
.sprechblase1 {
  white-space:nowrap; 
  display:inline-block;
  position: absolute;
  min-width: 65px;
  border-radius: 20px;
  
  background: var(--Hintergrund);
  color: var(--Schriftfarbe);
  border: 4px solid var(--Rand);
}
  
.sprechblase1 p {   
  display:flex; 
  width:auto;
  font-family: "arial";
  font-size: 16px;
  padding: 1px 15px;
  max-width:400px;
  text-overflow: ellipsis;    
  overflow: hidden;
}
.sprechblase1 p.toggle {
  white-space: normal;
  width:30vw; 
  max-width:400px;
} 
.sprechblase1:active,   .sprechblase1.index {
  z-index:99999 !important;
} 
 
.sprechblase1:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 22px;
  top: -27px;
    
  border-left: 25px solid transparent;
  border-right: 0 solid transparent;
  border-bottom: 27px solid var(--Rand); 
}
 
.sprechblase1:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 27px;
  top: -20px;
    
  border-left: 17px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 20px solid var(--Hintergrund);
}
</style>
 
<img src="https://files.homepagemodules.de/b104774/a_452_32a89860.jpg">
<br>
 
<div class="sprech1">
<div class="sprechblase1">
 
<p>
<b><u>Hat der Röhrenverstärker ausgedient?</u></b>
<br>
Meistens sind die technischen Daten eines modernen Transistor Verstärker weitaus besser als die eines Röhrenverstärker. Doch die Entwicklung eines Röhrenverstärkers ist auch nicht stehen geblieben. So gibt es heute neue Konzepte, auch wurden neue Röhren entwickelt. Manch ältere Typen wurden neu modifiziert. Das Kern Material für Ausgangsübertrager ist heute von der Belastbarkeit besser. So sind die Übertrager bei gleichen Daten kleiner geworden. Das Kernmaterial (Ferrit) erzeugt eine höhere Induktivität im Gegensatz zu den ersten Übertragern, die auf den Markt kamen.
</p>
 
</div>
</div>
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
window.addEventListener('load', function(){
 
  $('.sprech1').on("click", function(){
     $('p',this).toggleClass('toggle');
  });
 
  $('.sprechblase1 p').each(function(index, e) {
   // debugger;
    if(e.offsetWidth !== e.scrollWidth){
      $('.sprech1 p').attr('title','Sprechblase mit einem Klick öffnen oder schließen!')
    }
  });
 
});
</script>
 

<style>  
.sprech1 {
  display:inline-block;
  position: relative;
  left:-50px;
  bottom:-25px;
  cursor:pointer;
  z-index: 999999;
}
 
.sprechblase1 { 
  white-space:nowrap; 
  display:flex; 
  position: absolute;
  min-width: 65px;
  border-radius: 20px;
  
  background: var(--Hintergrund);
  color: var(--Schriftfarbe);
  border: 4px solid var(--Rand);
}
  
.sprechblase1 p {   
  display:flex; 
  width:auto;
  font-family: "arial";
  font-size: 14px;
  padding: 5px 15px;
  max-width:400px;
  text-overflow: ellipsis;    
  overflow: hidden;
}
.sprechblase1 p.toggle {
  white-space: normal;
  width:30vw; 
  max-width:400px;
} 
.sprechblase1:active,  .sprechblase1.index {
  z-index:99999 !important;
} 
 
.sprechblase1:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 22px;
  top: -27px;
    
  border-left: 25px solid transparent;
  border-right: 0 solid transparent;
  border-bottom: 27px solid var(--Rand); 
}
 
.sprechblase1:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 27px;
  top: -20px;
    
  border-left: 17px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 20px solid var(--Hintergrund);
}
 
.sprech1 .exit  {
    position:absolute; 
    top:0; 
    right: -30px; 
    cursor:pointer; 
    border-radius:50%; 
    padding:0 5px;   
    background: var(--Hintergrund); 
    color: var(--Schriftfarbe);
    border: 4px solid var(--Rand);
  }
  
.sprech1 .exit:hover {
    color: #ff0000;
}
</style>
 
<script>
   window.addEventListener('load', function(){
   /* Business + Xobor (v6) */
   $('.mtext p:first, .xquoteable p:first').each(function(){$(this).replaceWith( "<span>" + $(this).html()  + "</span>" );});
     
   $('.sprech1 .exit').on("click", function(){
     $(this).closest('.sprech1').hide();
   });
   
   $('.sprech1').on("click", function(){
     $('p',this).toggleClass('toggle');
     $('.sprechblase1',this).toggleClass('index');
  });
 
   /* 1. Sprechblase oben */
   function fixSprech(){
     var c = $('.sprechblase1').length;
     var baseZ = 800;
     $('.sprechblase1').css('z-index', function(i) {
       return 800 + (c - i);
     });
   };
  fixSprech();
 

  /*  Einblenden eines Tooltipp bei Textüberlauf */
  $('.sprechblase1 p').each(function(index, e) {
   // debugger;
    if(e.offsetWidth !== e.scrollWidth){
      $('.sprech1 p').attr('title','Sprechblase mit einem Klick öffnen und schließen!')
    }
  });
   
  //$('.sprech1').draggable();
 
});
</script>
 

[sprechblase={{color}};{{background}};{{border}};{{size}}]
...
[/sprechblase]
 

<div class="sprech1" style="margin-left:{{size}};"><div class="sprechblase1" style="--Schriftfarbe: {{color}}; --Hintergrund: {{background}}; --Rand: {{border}};"><p>
...
&nbsp;</p><span class="exit" title="Sprechblase ausblenden!">&#10005;</span></div></div>
 

//files.homepagemodules.de/b2001010/a_800_4ec558a8.png
 

Reihenfolge: 0
 

<div onclick="xob_insert(`[sprechblase=#ffffff;#000070;#2222aa;0px]Sprechblase`,`[/sprechblase]`)" class="xob_icon_cont" id="icon_1101"><img alt="Sprechblase" title="Sprechblase Beiträge einfügen" class="xob_icon" src="//files.homepagemodules.de/b2001010/a_800_4ec558a8.png"></div>
 

<style>
:root {
  --Schriftfarbe2: #622107;
  --Hintergrund2:#eeeeaa;
  --Rand2:#400000;
}
 
.sprechblase2 { 
  min-width:50px;
  max-width:75vw; 
  width:auto;
  display:inline-block;
  position: relative;
  border-radius: 20px;
  left: 25px;
  margin-top:20px;
  bottom:20px;
  cursor: pointer;
    
  background: var(--Hintergrund2);
  color: var(--Schriftfarbe2);
  border: 4px solid var(--Rand2);
  }
  
.forum_sprech2 { 
  display:flex;
  padding: 5px 20px;
  margin: 0;
}
  
.forum_sprech2 p {     
  display:inline-block;
  width: 30vw; 
  min-width:50px;
  max-width: 600px;
  font-family: "arial";
  font-size:14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
} 
  
.forum_sprech2 p.change {
  white-space: normal;
} 
 
.sprechblase2:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left:10%;
  top: 100%;
  border: 15px solid;
  border-color: var(--Rand2) transparent transparent var(--Rand2);
  }
 
.sprechblase2:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left:10%;
  margin-left:4px;
  top: 100%;
  border: 10px solid;
  border-color: var(--Hintergrund2) transparent transparent var(--Hintergrund2);
}
</style>
 
<br><br><br>
 
<div class="sprechblase2">
  <div class="forum_sprech2">
    <p title="Sprechblase bei Überlauf mit einem Klick öffnen oder schließen!">
 
      <b><u>Hat der Röhrenverstärker ausgedient?</u></b>
      <br>
      Meistens sind die technischen Daten eines modernen Transistor Verstärker weitaus besser als die eines Röhrenverstärker. Doch die Entwicklung eines Röhrenverstärkers ist auch nicht stehen geblieben. So gibt es heute neue Konzepte, auch wurden neue Röhren entwickelt. Manch ältere Typen wurden neu modifiziert. Das Kern Material für Ausgangsübertrager ist heute von der Belastbarkeit besser. So sind die Übertrager bei gleichen Daten kleiner 
      geworden. Das Kernmaterial (Ferrit) erzeugt eine höhere Induktivität im Gegensatz zu den ersten Übertragern, die auf den Markt kamen.
 
    </p>
  </div>
</div>
 
<br>
<img src="https://files.homepagemodules.de/b104774/a_452_32a89860.jpg" style="border:0;margin-left:20px;">
 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
window.addEventListener('load', function(){
  
   $('.sprechblase2').each(function(){
     var character_count = $('p',this).html().length;
     $('p',this).css('animation', 'typing 4s steps(' + character_count + ') ');
 
     $('<style>@keyframes typing {from {width: 0 } to {width: ' + character_count + 'ch} }</style>').appendTo('body');
 
    
    $(this).on("click", function(){
      $('p',this).toggleClass('change');
    });
  });
 
    //$('.sprechblase2').draggable();
});
</script>
 

<style>
.sprechblase2 { 
  min-width:50px;
  max-width:75vw; 
  width:auto;
  display:inline-block;
  position: relative;
  border-radius: 20px;
  left: 25px;
  margin-top:20px;
  bottom:20px;
  cursor: pointer;
    
  background: var(--Hintergrund2);
  color: var(--Schriftfarbe2);
  border: 4px solid var(--Rand2);
  }
  
.forum_sprech2 { 
  display:flex;
  padding: 5px 20px;
  margin: 0;
}
  
.forum_sprech2 p {     
  display:inline-block;
  width: 30vw; 
  min-width:50px;
  max-width: 600px;
  font-family: "arial";
  font-size:14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
} 
  
.forum_sprech2 p.change {
  white-space: normal;
} 
 
.sprechblase2:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left:10%;
  top: 100%;
  border: 15px solid;
  border-color: var(--Rand2) transparent transparent var(--Rand2);
  }
 
.sprechblase2:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left:10%;
  margin-left:4px;
  top: 100%;
  border: 10px solid;
  border-color: var(--Hintergrund2) transparent transparent var(--Hintergrund2);
}
</style>
 
 
<script>
window.addEventListener('load', function(){
  
  $('.sprechblase2').each(function(){
    var character_count = $('p',this).html().length;
    $('p',this).css('animation', 'typing 4s steps(' + character_count + ') ');
 
    $('<style>@keyframes typing {from {width: 0 } to {width: ' + character_count + 'ch} }</style>').appendTo('body');
 
    
    $(this).on("click", function(){
     $('p',this).toggleClass('change');
    });
  });
 
  //$('.sprechblase2').draggable();
});
</script>
 

[sprechblase2={{color}};{{background}};{{border}};{{size}}]
...
[/sprechblase2]
 

<div class="sprechblase2"  style="--Schriftfarbe2: {{color}}; --Hintergrund2: {{background}}; --Rand2: {{border}}; margin-left:{{size}};margin:auto !important}};"><div class="forum_sprech2"><p title="Bei Text-Überlauf mit einem Klick öffnen oder schließen!">
...
&nbsp;</p></div></div>
 

//files.homepagemodules.de/b2001010/a_800_4ec558a8.png
 

Reihenfolge: 0
 

<div onclick="xob_insert(`[sprechblase2=#ffffff;#000070;#2222aa;10px]Sprechblase`,`[/sprechblase2]`)" class="xob_icon_cont" id="icon_1101"><img alt="Sprechblase" title="Sprechblase Überschrift einfügen" class="xob_icon" src="//files.homepagemodules.de/b2001010/a_800_4ec558a8.png"></div>