Install J-Query Plugin on Dreamweaver
trying , failing install plugin dreamweaver.
http://www.mattboldt.com/demos/typed-js/
should simple j-query plugin.
apparently "this need going" -
<script src="jquery.js"></script>
<script src="typed.js"></script>
<script>
$(function(){
$(".element").typed({
strings: ["first sentence.", "second sentence."],
typespeed: 0
});
});
</script>
...
<span class="element"></span>
i'm right in thinking dreamweaver has script linking jquery file?
you write java in source code file right ?
sorry lack of details. first plugin i've ever installed , struggling
thanks lot
copy & paste code new, blank document. note: plugin script needs go in external js file in local site folder. i'm putting inside document expediency.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>typed js</title>
</head>
<body>
<div id="typed"></div>
<!--latest jquery-->
<script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lzfhibxzmho3ggeehn1hudtap3sc0ukxbxazhx1sjtk=" crossorigin="anonymous"></script>
<!--plugin script should go in external js file-->
<script>
// mit license (mit)
// typed.js | copyright (c) 2014 matt boldt | www.mattboldt.com
// permission hereby granted, free of charge, person obtaining copy
// of software , associated documentation files (the "software"), deal
// in software without restriction, including without limitation rights
// use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of software, , permit persons whom software is
// furnished so, subject following conditions:
// above copyright notice , permission notice shall included in
// copies or substantial portions of software.
// software provided "as is", without warranty of kind, express or
// implied, including not limited warranties of merchantability,
// fitness particular purpose , noninfringement. in no event shall the
// authors or copyright holders liable claim, damages or other
// liability, whether in action of contract, tort or otherwise, arising from,
// out of or in connection software or use or other dealings in
// software.
!function($){
"use strict";
var typed = function(el, options){
// chosen element manipulate text
this.el = $(el);
// options
this.options = $.extend({}, $.fn.typed.defaults, options);
// text content of element
this.text = this.el.text();
// typing speed
this.typespeed = this.options.typespeed;
// add delay before typing starts
this.startdelay = this.options.startdelay;
// backspacing speed
this.backspeed = this.options.backspeed;
// amount of time wait before backspacing
this.backdelay = this.options.backdelay;
// input strings of text
this.strings = this.options.strings;
// character number position of current string
this.strpos = 0;
// current array position
this.arraypos = 0;
// number stop backspacing on.
// default 0, can change depending on how many chars
// want remove @ time
this.stopnum = 0;
// looping logic
this.loop = this.options.loop;
this.loopcount = this.options.loopcount;
this.curloop = 0;
// stopping
this.stop = false;
// systems go!
this.build();
};
typed.prototype = {
constructor: typed
, init: function(){
// begin loop w/ first current string (global self.string)
// current string passed argument each time after this
var self = this;
self.timeout = settimeout(function() {
// start typing
self.typewrite(self.strings[self.arraypos], self.strpos);
}, self.startdelay);
}
, build: function(){
// insert cursor
this.cursor = $("<span class=\"typed-cursor\">|</span>");
this.el.after(this.cursor);
this.init();
}
// pass current string state each function, types 1 char per call
, typewrite: function(curstring, curstrpos){
// exit when stopped
if(this.stop === true)
return;
// varying values settimeout during typing
// can't global since number changes each time loop executed
var humanize = math.round(math.random() * (100 - 30)) + this.typespeed;
var self = this;
// ------------- optional ------------- //
// backpaces string faster
// ------------------------------------ //
if (self.arraypos == 1){
self.stopnum = 3;
self.backdelay = 10;
}
//every other time, delete whole typed string
else{
self.stopnum = 0;
self.backdelay = self.options.backdelay;
}
// contain typing function in timeout humanize'd delay
self.timeout = settimeout(function() {
// check escape character before pause value
// format: \^\d+ eg: ^1000 should able print ^ using ^^
// single ^ removed string
var charpause = 0;
var substr = curstring.substr(curstrpos);
if (substr.charat(0) === '^') {
var e = 1;
if(substr.match(/^\^\d+/)) {
substr = substr.replace(/^\^(\d+).*/, "$1");
e += substr.length;
charpause = parseint(substr);
}
// strip out escape character , pause value they're not printed
curstring = curstring.substring(0,curstrpos)+curstring.substring(curstrpos+e);
}
// timeout pause after character
self.timeout = settimeout(function() {
if(curstrpos === curstring.length) {
// fires callback function
self.options.onstringtyped(self.arraypos);
// final string
if(self.arraypos === self.strings.length-1) {
// animation occurs on last typed string
self.options.callback();
self.curloop++;
// quit if wont loop back
if(self.loop === false || self.curloop === self.loopcount)
return;
}
self.timeout = settimeout(function(){
self.backspace(curstring, curstrpos);
}, self.backdelay);
} else {
/* call before functions if applicable */
if(curstrpos === 0)
self.options.prestringtyped(self.arraypos);
// start typing each new char existing string
// curstring: arg, self.text: original text inside element
self.el.text(self.text + curstring.substr(0, curstrpos+1));
// add characters 1 one
curstrpos++;
// loop function
self.typewrite(curstring, curstrpos);
}
// end of character pause
}, charpause);
// humanized value typing
}, humanize);
}
, backspace: function(curstring, curstrpos){
// exit when stopped
if (this.stop === true) {
return;
}
// varying values settimeout during typing
// can't global since number changes each time loop executed
var humanize = math.round(math.random() * (100 - 30)) + this.backspeed;
var self = this;
self.timeout = settimeout(function() {
// ----- part optional ----- //
// check string array position
// on first string, delete 1 word
// stopnum represents amount of chars to
// keep in current string. in case it's 14.
// if (self.arraypos == 1){
// self.stopnum = 14;
// }
//every other time, delete whole typed string
// else{
// self.stopnum = 0;
// }
// ----- continue important stuff ----- //
// replace text current text + typed characters
self.el.text(self.text + curstring.substr(0, curstrpos));
// if number (id of character in current string) is
// less stop number, keep going
if (curstrpos > self.stopnum){
// subtract characters 1 one
curstrpos--;
// loop function
self.backspace(curstring, curstrpos);
}
// if stop number has been reached, increase
// array position next string
else if (curstrpos <= self.stopnum) {
self.arraypos++;
if(self.arraypos === self.strings.length) {
self.arraypos = 0;
self.init();
} else
self.typewrite(self.strings[self.arraypos], curstrpos);
}
// humanized value typing
}, humanize);
}
// start & stop not working
// , stop: function() {
// var self = this;
// self.stop = true;
// clearinterval(self.timeout);
// }
// , start: function() {
// var self = this;
// if(self.stop === false)
// return;
// this.stop = false;
// this.init();
// }
// reset , rebuild element
, reset: function(){
var self = this;
clearinterval(self.timeout);
var id = this.el.attr('id');
this.el.after('<span id="' + id + '"/>')
this.el.remove();
this.cursor.remove();
// send callback
self.options.resetcallback();
}
};
$.fn.typed = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('typed')
, options = typeof option == 'object' && option;
if (!data) $this.data('typed', (data = new typed(this, options)));
if (typeof option == 'string') data[option]();
});
};
$.fn.typed.defaults = {
strings: ["these default values...", "you know should do?", "use own!", "have great day!"],
// typing speed
typespeed: 0,
// time before typing starts
startdelay: 0,
// backspacing speed
backspeed: 0,
// time before backspacing
backdelay: 500,
// loop
loop: false,
// false = infinite
loopcount: false,
// call when done callback function
callback: function() {},
// starting callback function before each string
prestringtyped: function() {},
//callback every typed string
onstringtyped: function() {},
// callback reset
resetcallback: function() {}
};
}(window.jquery);
</script>
<!--invoke typed function on page load text below-->
<script>
$(function(){
$("#typed").typed({
strings: ["typed.js jquery plugin.", "it tyops out", "it types out sentences.", "and deletes them.", "try out!"],
typespeed: 30,
callback: function(){
shift();
}
});
});
</script>
</body>
</html>
i think prefer css method. it's lot less code!
nancy o.
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment