Hi,
I am trying to achieve something similar to the way the heading of a page is presented to the user of this website with jQuery, i.e.:
http://wonder-wall.com/#project/en
when you click on a thumbnail from the main index, the heading of that thumbnail generates different values until it appears to the user properly.
Just wondering if this can be achieved somehow using jQuery even though it is using Adobe Flash?
Thanks.
You're not talking about the 'title', you're talking about the 'heading' probably h1 or h2. It's definitely possible to write a javascript (resp. jQuery) function that creates a similar effect. The example you linked uses Flash not only because of the animation but also because they're embedding a non-standard font. So if you're planning to use a web font, you can write it in JS. Changing DOM content is a core funtionality of jQuery so this is really up to your imagination!
As for how to solve it I can only tell you what I would try:
This is an approach without jQuery. I am sure this can be improved, but I hope this helps and gives you an idea of how to do this.
<html>
<head>
<script type="text/javascript">
function createRandomString(length, id, callback, value) {
if (typeof value == "undefined"){
value = "";
}
if (value.length == length){
callback(value);
return;
}
var c = ((Math.round(Math.random() * 100)) % 127);
if (c == '\'' || c == '\"'){
c = 33;
}
value += String.fromCharCode(Math.max(33, c));
document.getElementById(id).innerHTML = value;
setTimeout(function(){createRandomString(length, id, callback, value)}, 20);
}
function changeHeader(id, realString, randomString){
if (typeof randomString == "undefined") {
createRandomString(realString.length, id, function(value){changeHeader(id, realString, value);});
return;
}
var d = realString.length - randomString.length;
var modifiedString = realString.substring(0, d) + randomString;
document.getElementById(id).innerHTML = modifiedString;
if (randomString.length == 0){
return;
}
randomString = randomString.substring(1);
setTimeout(function(){changeHeader(id,realString,randomString);}, 50);
}
</script>
</head>
<body>
<h1 id="test"></h1>
<button onclick="changeHeader('test', 'this is the header')">Test</button>
</body>
</html>
Although moxn has done all the hard work for you, I suppose what you are really after is a jquery-fied version of that...
So here is a jquery plugin, thanks moxn for original code, all I did was convert it to a jquery plugin
(function($){
$.fn.generateHeader=function(settings){
var settings=$.extend({
newText:"This is a new header"
},settings);
return this.each(function(){
var _this=$(this)[0];
changeHeader(_this, settings.newText);
function createRandomString(length, node, callback, value) {
if (typeof value == "undefined"){
value = "";
}
if (value.length == length){
callback(value);
return;
}
var c = ((Math.round(Math.random() * 100)) % 127);
if (c == '\'' || c == '\"'){
c = 33;
}
value += String.fromCharCode(Math.max(33, c));
node.innerHTML = value;
setTimeout(function(){createRandomString(length, node, callback, value)}, 20);
}
function changeHeader(node, realString, randomString){
if (typeof randomString == "undefined") {
createRandomString(realString.length, node, function(value){changeHeader(node, realString, value);});
return;
}
var d = realString.length - randomString.length;
var modifiedString = realString.substring(0, d) + randomString;
node.innerHTML = modifiedString;
if (randomString.length == 0){
return;
}
randomString = randomString.substring(1);
setTimeout(function(){changeHeader(node,realString,randomString);}, 50);
}
});
};
})(jQuery);
You would use it by first including the above code somewhere in your html...
and then calling something like $('#heading').generateHeader({newText:'this is the new header text'}); where heading is the id of the element you would want to apply this to, and then change 'this is the new header text' to whatever text you would want to show up...