2016-05-25 4 views
0

Ich habe eine einfache HTML-Seite.
Ich benutze typed.js, die ein Jquery-Plugin ist, um den Text einzugeben.

Das Problem ist keiner der Text, die in P-Tags sind stilisiert, wenn sie ausgegeben werden.
Auch der Text in den p-Tags wird nacheinander ausgedruckt.

Ich möchte es auf einmal abgetippt werden.
Nicht sicher, wie Sie diese Probleme beheben können.p Styling wird nicht angezeigt. Abgetippt

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
    <meta charset="UTF-8"> 
    <style type="text/css" media="all"> 
     center { 
      position: relative; 
      margin-top: 10%; 
      line-height: 20px; 
     } 
     p { 
      /*font-family: Monaco, monospace; */ 
      font-family: 'Lucida Console', monospace; 
      font-size: 1.2em; 
      color:#00FF00; 
     } 
    </style> 
    <title>Personal Website</title> 
</head> 
<body bgcolor=""> 
    <center> 
     <div id="typed-strings"> 
      <p>Some text </p> 
      <p>This is some more text.</p> 
      <p>No more text after this.</p> 
     </div> 
     <span id="typed"></span> 
    </center> 
    <script src="jquery.js"></script> 
    <script src="typed.js" type="text/javascript"></script> 
    <script> 
     $(function(){ 
      $("#typed").typed({ 
       stringsElement: $('#typed-strings'), 
       typeSpeed: 0, 
      }); 
     }); 
    </script> 
</body> 
</html> 

Antwort

1

Für mich ist Du Code Check hier die Änderung arbeitet man Stil nicht gegeben für, #

getippt

http://jsfiddle.net/8CbL2/25/

p,#typed { 
      /*font-family: Monaco, monospace; */ 
      font-family: 'Lucida Console', monospace; 
      font-size: 1.2em; 
      color:#00FF00; 
     } 
+0

Nach dem Hinzufügen von p, # eingegeben, es funktioniert. Vielen Dank. Ich muss noch herausfinden, wie man den ganzen Text auf einmal ohne Überschreiben eintippt. –

+0

Meinst du sowas? Http://jsfiddle.net/8CbL2/26/ oder http://jsfiddle.net/8CbL2/27/ – dev

+0

Beide sind gute Antworten. Vielen Dank. –

1

Dies liegt daran, typed.js Ihren Text in einer anderen HTML-Element eingeben . In Ihrem Code geben Sie ihn an, um span mit id=typed einzugeben. So fügen Sie diesen auf Ihrem CSS:

 
p, #typed { 
    /*font-family: Monaco, monospace; */ 
    font-family: 'Lucida Console', monospace; 
    font-size: 1.2em; 
    color: #00FF00; 
} 

Und wenn Sie den Eingabecursor als auch ausrichten möchten, fügen Sie .typed-cursor auf Ihre Selektorliste auch.

+0

Ich verstehe das nicht ganz. meinst du etwa so etwas: .Typed-cursor, #typed {....}? –

+0

Ja, da 'typed.js' den Cursor mit einem HTML-Element der Klasse" 'typed-cursor'" zeichnet. Wenn Sie möchten, dass der Originaltext auch formatiert wird, sagen Sie 'p, #typed, .typed-cursor {...}' – geoff