...

View Full Version : Can I change the title bar of my site every X seconds to a new title?



OpalCat
08-08-2011, 04:49 AM
This page: http://homepage.ntlworld.com/kayseycarvey/document2.html
seems to indicate that it's possible, but it looks like it also pops up an alert window which would be annoying as hell. Is there a way to, say, once every minute change the title bar text?

You see I have a text file of rotating slogans that appear each time you reload a page on my site and someone suggested that having them change even when the page is already open might be fun. I thought I'd look into it and see if it's possible. The site is http://opalcat.com.

I don't know enough about javascript to know if this is possible. I am fairly good at implementing and installing other people's code, though, and can usually make minor changes to tweak things.

Please let me know if this is a doable thing, and if so, if you'd be willing to help me work it out. Thanks in advance,

OpalCat

Old Pedant
08-08-2011, 05:03 AM
Just don't use alert( ). Nobody said you *had* to do so.



<html>
<head>
<title></title>
<script type="text/javascript">
var delay = 3; // number of seconds
var titles = [ "This is my first title",
"Any second now...",
"Third time is a charm",
"What comes fourth now comes forth",
"About now I need a fifth"
];

var curtitle = 0;
function nextTitle()
{
document.title = titles[curtitle];
curtitle = ( curtitle + 1 ) % titles.length;
setTimeout( nextTitle, delay * 1000 );
}
nextTitle();
</script>
</head>
<body>
body
</body>
</html>

Try it.

OpalCat
08-08-2011, 07:30 AM
Well the file I have has hundreds. I don't want to load them all into the script... is there a way to have it pull from a file at random?

OpalCat
08-08-2011, 05:49 PM
This sounds like exactly what I want, but pulling from a text file. Maybe someone awake during the day knows the answer?

OpalCat
08-08-2011, 05:52 PM
Just don't use alert( ). Nobody said you *had* to do so.


(Just so you know, I don't know javascript well enough to know how to remove that without asking. ::hangs head in shame:: )

DanInMa
08-08-2011, 06:54 PM
This sounds like exactly what I want, but pulling from a text file. Maybe someone awake during the day knows the answer?

I think the question should be, How are you accomplishing this now? If it is also via JavaScript we can probably help you adapt the code.

OpalCat
08-08-2011, 07:06 PM
Right now I'm using a plugin for textpattern that calls random lines from a text file

Right now my code looks like this:


<title><txp:dru_random_text source="file" path="/home/jugglerd/public_html/opalcat/random_titles.txt" /><txp:page_title /></title>

OpalCat
08-08-2011, 07:07 PM
And the source of the plugin is here:



function dru_random_text($atts) // by mr drew mclellan // allinthehead.com
{
global $txpcfg;
if (is_array($atts)) extract($atts);
$source = empty($source) ? 'file' : $source;

if ($source == 'database'){
if (empty($table) || empty($column)) return '';
$sql = "select $column from $table order by rand() limit 1";
$rs = getRow($sql);
if($rs) return $rs[0];
return '';
}

if ($source == 'file'){
$path = empty($path) ? $txpcfg['doc_root'].'/random.txt' : $path;
$delimiter = empty($delimiter) ? "\n" : $delimiter;

$fp = fopen($path, "r");
$contents = fread($fp, filesize($path));
$elements = explode($delimiter,$contents);
fclose($fp);
srand((double)microtime()*1000000);
$text_index = (rand(1, sizeof($elements)) - 1);
return $elements[$text_index];
}

return '';
}

Old Pedant
08-08-2011, 08:12 PM
You could use JS to read the text file easily enough.

But if it's JUST a text file with lines of titles, converting it to a JavaScript in an array would be trivial with any decent text editor.

Just add a " to the front of each line and a ", to the end of each line, which you should be able to do with REPLACE ALL if the editor is smarter than, say, Notepad. And then add the stuff to the front to make the array, zap the last comma and tack on ]; and voila, you can then dump it into your HTML file.

However, if you insist on reading the text file from JS, then you must first make sure it is coming from the SAME DOMAIN as the page using it. That is, if your HTML page is, say, "http://www.mysite.com/somepath/xyz.html" then the text file must also be accessible via "http://www.mysite.com/any/path/filename.txt".

OpalCat
08-08-2011, 08:14 PM
They're definitely on the same domain. I really don't want hundreds of lines of title code clogging up my HTML though. How can I make it read from the file?

Old Pedant
08-08-2011, 08:49 PM
It will be more efficient to put it in the HTML, honest. It may make the HTML file larger, but the page will load a smidgen faster. Especially because you will have to wait for JavaScript to read in the file before it can randomly pick a line for the title. Sure you don't want to reconsider that choice?

Old Pedant
08-08-2011, 09:06 PM
Here...this seems to work:


<html>
<head>
<title></title>
<script type="text/javascript">
var url = "mytitles.txt"; // use relative path/to/your/textfile.txt
var delay = 3; // number of seconds

var xml;
var xmlhttp;
if (window.XMLHttpRequest)
{
xml = new XMLHttpRequest();
} else {
xml = new ActiveXObject("Microsoft.XMLHTTP");
}
xml.open( "GET", url, false );
xml.send( );
var titles = xml.responseText.split("\n");

var curtitle = 0;
function nextTitle()
{
var ttl = "";
while ( ttl.length < 3 ) /* 3 is arbitrary...just guarding against blank lines */
{
ttl = titles[curtitle];
curtitle = ( curtitle + 1 ) % titles.length;
}
document.title = ttl;
setTimeout( nextTitle, delay * 1000 );
}
if ( titles.length > 3 ) nextTitle(); // 3 arbitrary here, as well
</script>
</head>
<body>
body
</body>
</html>

If you prefer that the titles be chosen randomly, instead of rotating through the list, that would be a trivial change.

OpalCat
08-08-2011, 10:46 PM
It will be more efficient to put it in the HTML, honest. It may make the HTML file larger, but the page will load a smidgen faster. Especially because you will have to wait for JavaScript to read in the file before it can randomly pick a line for the title. Sure you don't want to reconsider that choice?

Well I also don't want people to look at the source code and get to see them all.

OpalCat
08-08-2011, 10:46 PM
Here...this seems to work:

If you prefer that the titles be chosen randomly, instead of rotating through the list, that would be a trivial change.

Random would be better--what would the change be?

Old Pedant
08-08-2011, 11:13 PM
Just change the function plus the one line right above it. The rest stays the same:


var curtitle = -1;
function nextTitle()
{
var ttl = "";
var tnum = curtitle;
while ( tnum == curtitle || ttl.length < 3 )
{
tnum = Math.floor( Math.random() * titles.length )
ttl = titles[tnum];
}
curtitle = tnum;
document.title = ttl;
setTimeout( nextTitle, delay * 1000 );
}

That is written to ensure the same title won't appear twice in a row, but it *is* possible (though unlikley) that you might see something like title#17, title#223, title#17 (that is, a repeat soon after).

If you need to ensure that all titles are shown before starting over, that's more code, but not that much more.

OpalCat
08-09-2011, 02:00 AM
It works on a test page! Let's see if it works live :D Thanks for your help!

OpalCat
08-09-2011, 02:12 AM
Oh I almost forgot. The end of the title has to have the actual title. See how the tag I currently have is:

<title><txp:dru_random_text source="file" path="/home/jugglerd/public_html/opalcat/random_titles.txt" /><txp: page_title /></title>

Which is the random title followed by the real title. Is there a way to include the <txp: page_title /> tag into it so that it will show up at the end?

Old Pedant
08-09-2011, 07:09 AM
???? Huh?

Show me an example.

OpalCat
08-09-2011, 03:07 PM
Like for example, the title will turn out to be something like this:


<title>OpalCat's World Domination Headquarters - now with more cowbell: Review: Kindle 3</title>

Though since the titles are so long I think I might want to reverse it so that it's


<title>Review: Kindle 3: OpalCat's World Domination Headquarters - now with more cowbell</title>


The javascript code is working on the front page of my site right now (because it doesn't have an article name appended, so I installed it) at opalcat.com. The javascript is in a "form" and the form is called by the page, and parsed before it lands on the page, so if the javacript included the tag "<txp: page_title />" it would be parsed out to the title of that page before being included on the page, so that would be fine.

(Right now in the "title" spot on my page form it is called like this: <txp: output_form form="titles" /> which calls up a form called "titles" which contains the javascript code you gave me.

So basically I need the javascript to append the tag <txp: page_title /> right before it calls the random title line. Preferably with a colon after it.

Old Pedant
08-09-2011, 08:54 PM
Does the fixed part of the title *HAVE* to come from a widget???

If not, it's trivial.

Just change
document.title = ttl;
to


document.title = "Fixed part of title: " + ttl;


If it has to come from the widget, then this *MIGHT* work:


<html>
<head>
<title><txp: page_title /></title>
<script type="text/javascript">
var url = "mytitles.txt"; // use relative path/to/your/textfile.txt
var delay = 3; // number of seconds

var xml;
var xmlhttp;
if (window.XMLHttpRequest)
{
xml = new XMLHttpRequest();
} else {
xml = new ActiveXObject("Microsoft.XMLHTTP");
}
xml.open( "GET", url, false );
xml.send( );
var titles = xml.responseText.split("\n");

var originalTitle = document.title;

var curtitle = -1;
function nextTitle()
{
var ttl = "";
var tnum = curtitle;
while ( tnum == curtitle || ttl.length < 3 )
{
tnum = Math.floor( Math.random() * titles.length )
ttl = titles[tnum];
}
curtitle = tnum;
document.title = originalTitle + ": " + ttl;
setTimeout( nextTitle, delay * 1000 );
}if ( titles.length > 3 ) nextTitle(); // 3 arbitrary here, as well
</script>
</head>

But that is utterly untested.

Old Pedant
08-09-2011, 08:57 PM
It's also possible that you might be able to do this:


<html>
<head>
<title></title>
<script type="text/javascript">
var url = "mytitles.txt"; // use relative path/to/your/textfile.txt
var delay = 3; // number of seconds

var xml;
var xmlhttp;
if (window.XMLHttpRequest)
{
xml = new XMLHttpRequest();
} else {
xml = new ActiveXObject("Microsoft.XMLHTTP");
}
xml.open( "GET", url, false );
xml.send( );
var titles = xml.responseText.split("\n");

var curtitle = -1;
function nextTitle()
{
var ttl = "";
var tnum = curtitle;
while ( tnum == curtitle || ttl.length < 3 )
{
tnum = Math.floor( Math.random() * titles.length )
ttl = titles[tnum];
}
curtitle = tnum;
document.title = "<txp: page_title />" + ": " + ttl;
setTimeout( nextTitle, delay * 1000 );
}if ( titles.length > 3 ) nextTitle(); // 3 arbitrary here, as well
</script>
</head>

But I dunno if your widget will dump stuff into a JS string like that or not.

OpalCat
08-09-2011, 09:53 PM
But I dunno if your widget will dump stuff into a JS string like that or not.

It will. It will parse any txp code into it's relevant html before rendering the page.

OpalCat
08-09-2011, 10:01 PM
Hmmm... except it's not. And the other one isn't working, either.

Old Pedant
08-09-2011, 10:02 PM
Okay, so you only have to change one line:


document.title = "<txp: page_title />" + ": " + ttl;

Can't see why that wouldn't work.

Your widget code is JSP? Looks like it.

Old Pedant
08-09-2011, 10:04 PM
Oops...spoke too soon.

Bring up the page (second version) in your browser, click on the VIEW menu, click on the SOURCE or PAGE SOURCE menu item to see the HTML source, and see if indeed it dumped the <txp: page_title/> into the "..." string or not.

Old Pedant
08-09-2011, 10:08 PM
Version 1 worked for me when I used a static title.

That is, I used the code from post #20 except changed


<title><txp: page_title /></title>

to


<title>YOWSER! This work?</title>

And indeed as the titles rotate, it prefixes each with that.

So double check your code.

OpalCat
08-09-2011, 10:11 PM
Right, it's prefixing it with <txp: page_title/> though, instead. I think that <txp: page_title/> can't go in a form template it has to go in a page template, maybe. Let me to try something.

OpalCat
08-09-2011, 10:14 PM
I got it working. They changed the syntax of the title tag to <txp:title /> in the new version I upgraded to and it wasn't playing nice

OpalCat
08-09-2011, 10:17 PM
The only complaint I have about it isn't a big deal. The front page of the site doesn't by default have a title, only article pages, so the title starts with a :
It would be cool if the colon would only show up if there was a prefixed title, but that's probably impossible and it's not a big deal.


Thank you so much for your help!

Old Pedant
08-09-2011, 10:17 PM
Just for the flat fish, I decided to spruce this up one more time.

This now (1) shuffles the titles, (2) runs through *ALL* of them in the random order, (3) reshuffles!, (4) repeats from 2.

So it's guaranteed that the user will see *all* of the titles before seeing a repeat.

And as you can see, this uses the "originalTitle" concept of post #20.


<html>
<head>
<title>YOWSER! This work?</title>
<script type="text/javascript">
var url = "mytitles.txt"; // use relative path/to/your/textfile.txt
var delay = 3; // number of seconds

var xml;
var xmlhttp;
if (window.XMLHttpRequest)
{
xml = new XMLHttpRequest();
} else {
xml = new ActiveXObject("Microsoft.XMLHTTP");
}
xml.open( "GET", url, false );
xml.send( );

var titles = xml.responseText.split("\n");

// ensure no blank lines:
for ( var t = titles.length-1; t >= 0; --t )
{
if ( titles[t].length < 3 ) titles.splice( t, 1 );
}
// random order the titles:
titles = titles.sort( function() { return Math.random() > 0.5; } );

var originalTitle = document.title;

var curtitle = 0
function nextTitle()
{
document.title = originalTitle + ": " + titles[curtitle];
++curtitle;
if ( curtitle >= titles.length )
{
// reshuffle the titles:
titles = titles.sort( function() { return Math.random() > 0.5; } );
curtitle = 0; // and start over
}
setTimeout( nextTitle, delay * 1000 );
}

if ( titles.length > 3 ) nextTitle(); // 3 arbitrary here, as well
</script>
</head>
<body>
body
</body>

Yes, it worked as is in MSIE and FF.

*********

p.s.: "flat fish" = "halibut"

Old Pedant
08-09-2011, 10:21 PM
The only complaint I have about it isn't a big deal. The front page of the site doesn't by default have a title, only article pages, so the title starts with a :
It would be cool if the colon would only show up if there was a prefixed title, but that's probably impossible and it's not a big deal.


Naw, that's trivial.

Change the line


var originalTitle = document.title;

to


var originalTitle = document.title;
if ( originalTitle.length > 1 ) originalTitle += ": ";

And then change

document.title = originalTitle + ": " + ttl;

to just


document.title = originalTitle + ttl;

See? So we only add the ": " if the original <title> contained something.

OpalCat
08-10-2011, 05:21 AM
Naw, that's trivial.

Change the line


var originalTitle = document.title;

to


var originalTitle = document.title;
if ( originalTitle.length > 1 ) originalTitle += ": ";

And then change

document.title = originalTitle + ": " + ttl;

to just


document.title = originalTitle + ttl;

See? So we only add the ": " if the original <title> contained something.
Is this for the newer version of the script? because I can't find those exact variables to change... Could you post the whole script with that change made? I really appreciate your help. This will be a fun side feature of my site for those who notice it ;D

Old Pedant
08-10-2011, 06:24 AM
From my post #30:


<html>
<head>
<title><txp:title /></title>
<script type="text/javascript">
var url = "mytitles.txt"; // use relative path/to/your/textfile.txt
var delay = 3; // number of seconds

var xml;
var xmlhttp;
if (window.XMLHttpRequest)
{
xml = new XMLHttpRequest();
} else {
xml = new ActiveXObject("Microsoft.XMLHTTP");
}
xml.open( "GET", url, false );
xml.send( );

var titles = xml.responseText.split("\n");

// ensure no blank lines:
for ( var t = titles.length-1; t >= 0; --t )
{
if ( titles[t].length < 3 ) titles.splice( t, 1 );
}
// random order the titles:
titles = titles.sort( function() { return Math.random() > 0.5; } );

var originalTitle = document.title;
if ( originalTitle.length > 1 ) originalTitle += ": ";
var curtitle = 0
function nextTitle()
{
document.title = originalTitle + titles[curtitle];
++curtitle;
if ( curtitle >= titles.length )
{
// reshuffle the titles:
titles = titles.sort( function() { return Math.random() > 0.5; } );
curtitle = 0; // and start over
}
setTimeout( nextTitle, delay * 1000 );
}

if ( titles.length > 3 ) nextTitle(); // 3 arbitrary here, as well
</script>
</head>
<body>
body
</body>

But it would have worked with the version in post #20, as well.

And with a minor change would work in post #21.

OpalCat
08-10-2011, 05:38 PM
It's working on the whole site now and I love it. Thanks so much, guys! :D

OpalCat
08-19-2011, 09:46 PM
This is working great but I need a change made. The CMS I use has a tag that inserts the title of the individual article of the page you're on, and I want that to be part of the title. The tag is <txp:title /> and what I'd like is for the title to display like this:

Title of Article : Random Title

I somehow had it working at one point, and then the random titles stopped rotating and I reverted to something else for a while, then I came back to get this working and it's not doing the article title and like a fool I don't have a backup of what I had before.

Old Pedant
08-19-2011, 11:07 PM
Ummm...show us what you *ARE* using now.

And how does it differ from what's in my last post-with-code?

jovadviser
08-20-2011, 12:52 AM
you should use

document.title="Your new title";

Make a ajax call if you are taking data from server and then in javascript you can use above function

OpalCat
08-20-2011, 01:03 AM
you should use

document.title="Your new title";

Make a ajax call if you are taking data from server and then in javascript you can use above function

I don't know what "making an ajax call" even means--I'm not a programmer, I'm a designer.

OpalCat
08-20-2011, 01:05 AM
This is what I'm currently using, that doesn't work:


<title><txp:title /></title>
<script type="text/javascript">
var url = "/random_titles.txt"; // use relative path/to/your/textfile.txt
var delay = 60; // number of seconds

var xml;
var xmlhttp;
if (window.XMLHttpRequest)
{
xml = new XMLHttpRequest();
} else {
xml = new ActiveXObject("Microsoft.XMLHTTP");
}
xml.open( "GET", url, false );
xml.send( );
var titles = xml.responseText.split("\n");

var curtitle = -1;
function nextTitle()
{
var ttl = "";
var tnum = curtitle;
while ( tnum == curtitle || ttl.length < 3 )
{
tnum = Math.floor( Math.random() * titles.length )
ttl = titles[tnum];
}
curtitle = tnum;
document.title = ttl;
setTimeout( nextTitle, delay * 1000 );
}
if ( titles.length > 3 ) nextTitle(); // 3 arbitrary here, as well
</script>

Old Pedant
08-20-2011, 08:07 PM
You *ARE* making an AJAX call. Well, sort of. AJAX means "Asynchronous Javascript And Xml". What you are actually using should maybe by called "SJAT" or "Synchronous Javascript And Text". But it's really just a minor variation on AJAX, so it tends to all get lumped together. The clue is the use of new XMLHttpRequest().

Anyway...let me look at it again and get back to you.

Old Pedant
08-20-2011, 08:59 PM
Yeah, you went *way* back to one of my earlier versions that didn't account for the <txp:title />

Try using the code from my post #33.

I *did* test that way back then and it worked fine. (I didn't have access to <txp:title/>, but I simulated it with a fixed title, both blank and non blank.)

OpalCat
08-21-2011, 12:16 AM
Thanks, much appreciated.

OpalCat
08-22-2011, 01:32 PM
Ok that seems to be working, but it rotates it at a given rate of time. I want it to rotate on pageload, and have that title stay for the time the page is open... the way it is now if I set the delay to 60, every page opened in that 60 second time frame looks like it has the same title, not a rotating one... and I don't need it to rotate while the page is open unless it's very slowly (like once a minute)

But thanks so much for your help. It's nice to have it working.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum