jQuery change title text like Facebook

So you want to know how to change to title text with jQuery? Well your in luck, because today I’m gonna show you how.
This is how Facebook does it.



View it in action in the video below.

Watch in full screen for best results.


 
Demo
Demo
Okay, lets get started.

When the submit button is clicked we get the value from #changeTitle.
Then put it into a variable called changeTitle.

1

var changeTitle = $("#changeTitle").val();

 
Okay here is where the magic happens. We use the .attr API to change the title text.
There are two values for this, the first one is the attribute name and the second is
the value, which in our case is the chanegTitle variable.

1

$(document).attr("title", changeTitle);

 
Now lets put it together.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

<!-- Created by Barrett at RRPowered.com -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
    <head>
        <title>jQuery change title text like Facebook</title>
	<!-- Include the latest version of the jQuery library. -->
	<script type="text/javascript" src="http://ajax.googleapis.com/
	ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript">
            $(function() {
		$("#submit").click(function() {

		/*When the submit button is clicked we get the value
		from #changeTitle. Then put it into a variable called changeTitle.*/
		var changeTitle = $("#changeTitle").val();

		/*Okay, here is where the magic happens. We use the .attr API to
		change the title text. There are two values for this, the first
		one is the attribute name and the second is the value, which in
		our case is the chanegTitle variable.*/
		$(document).attr("title", changeTitle);

		});
	    });
        </script>
    </head>
    <body>
	<!-- Just a simple html form with two inputs -->
        <form>
	    <input type="text" id="changeTitle" />
	    <input type="button" value="Change title text" id="submit" />
	</form>
    </body>
</html>

 
Now lets update the title text from an external page every 5 seconds.
Okay lets get started!
We will be using the javascript setTimeout() method to check for updates very 5 seconds.

1
2
3
4
5

setTimeout(function(){
    //Code here

}, 5000);

 
Now we will load the txt.php file with the jQuery .load API.

1
2
3
4
5

$(this).load("txt.php", function(changeTitle){
    //Code here

});

 
Here is the final jQuery.
This will check the txt.php file every 5 seconds and then update the title text to the text
that text that we get from our txt.php file.

1
2
3
4
5
6
7
8
9
10
11
12
13

$(function() {
    setTimeout(function(){
        $(this).load("txt.php", function(changeTitle){
            $(document).attr("title", changeTitle);
        });
    }, 5000);
});

 
Now for the final code put all together.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<!-- Created by Barrett at RRPowered.com -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-strict.dtd">
<html lang="en">
    <head>
	<title>Test</title>
        <!-- Include the latest version of the jQuery library. -->
	<script type="text/javascript" src="http://ajax.googleapis.com/
	ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript">
	    $(function() {
                //Now we will check the txt.php file every 5 seconds.

		setTimeout(function(){ 

		    /*Now we will load the txt.php file with the jQuery .load API.*/
		    $(this).load("txt.php", function(changeTitle){
		        /*Okay here is where the magic happens. We use the .attr API to
                        change the title text. There are two values for this, the first
                        one is the attribute name and the second is the value, which in
                        our case is the chanegTitle variable.*/
		        $(document).attr("title", changeTitle);
		    });

		}, 5000);//Value is in milliseconds 5000 = 5 seconds

            });
        </script>
    </head>
    <body>
        <!-- Your content would go here! -->
    </body>
</html>

 
The PHP
Okay now for the PHP file called txt.php.

1
2
3
4
5
6
7
8
9
10
11

<?PHP
/*Created by Barrett at RRPowered.com*/
//This is where your new title text would go.

$text = "My text here!";
echo $text;
?>

I hope you enjoyed this tutorial.

Posted on December 21, 2011 Views: 1668
ADVERTISEMENT

Tags: , , , , ,

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends!

Discussion