RRPowered http://www.rrpowered.com Wed, 22 Feb 2012 04:06:32 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 rrpoweredshttp://feedburner.google.comSubscribe with My Yahoo!Subscribe with NewsGatorSubscribe with My AOLSubscribe with BloglinesSubscribe with NetvibesSubscribe with GoogleSubscribe with PageflakesSubscribe with PlusmoSubscribe with The Free DictionarySubscribe with Bitty BrowserSubscribe with Live.comSubscribe with Excite MIXSubscribe with WebwagSubscribe with Podcast ReadySubscribe with WikioSubscribe with Daily Rotation Use jQuery to load external files http://feedproxy.google.com/~r/rrpowereds/~3/YZAQHeK-X-Y/ http://www.rrpowered.com/2012/02/use-jquery-to-load-external-files/#comments Wed, 22 Feb 2012 04:05:55 +0000 admin http://www.rrpowered.com/?p=534 Continue reading →]]> I’m going to show you an easy way to load a external file using jQuery and use a loading image while file loads.



 
Demo
lets go!!!.
We are gonna use the jQuery .load() function to load are external page.
The code below will load the external.html file into a div with the class of .loaded_files

1

$(".loaded_files").load('external.html');

We’re all done!
Now that we know how it works, let’s put it 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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

<!-- Created by Barrett at RRPowered.com -->
<!-- File name index.html -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
		libs/jquery/1.7.1/jquery.min.js"></script>
		<title>Load external files with jQuery Demo</title>
		<style type="text/css">
			.load_files {
				padding: 5px;
				font-weight: bold;
				background-color: #A9F5A9;
				border: solid #333333 1px;
				cursor: pointer;
			}
			/* The loading image */
			.loading {
				width: 20px;
				height: 20px;
				background-image: url('loader.gif');
				display: none;
			}

		</style>
		<script type="text/javascript">
			$(function() {
				$(".load_files").click(function() {
					$(this).hide();
					/* When load files button is clicked hide it */
					$(".loading").show();
					/* Show loading image */
					/* Load the external file */
					$(".loaded_files").load('external.html', function() {
						$(".loading").hide();
						/* Hide loading image when external file is loaded */
					});
				});
			});

		</script>
	</head>
	<body>
		<h2>Load external files with jQuery</h2>
		<button class="load_files">
			Load Files
		</button>
		<div class="loading"></div>
		<div class="loaded_files"></div>
	</body>
</html>

Now for the external file.
external.html

1

<p>External File Loaded With jQuery</p>


]]> http://www.rrpowered.com/2012/02/use-jquery-to-load-external-files/feed/ 0 http://www.rrpowered.com/2012/02/use-jquery-to-load-external-files/ jQuery simple image slide http://feedproxy.google.com/~r/rrpowereds/~3/g4VXjGW_8zU/ http://www.rrpowered.com/2012/02/jquery-simple-image-slide/#comments Mon, 13 Feb 2012 03:48:02 +0000 admin http://www.rrpowered.com/?p=514 Continue reading →]]> A simple jQuery image slide for use on you website or blog.



 
Demo
lets get started.
Here is the javascript. 

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

$(function() {
    	setInterval("slide()", 5000);
    	//Time is in milliseconds 5000ms is equivalent to 5sec

    });
    //Call the slide function

    function slide() {

    	var act = $("#slide img.active");
    	//Get the current active image


    	var img_src = $("#slide img.active").attr("src");
    	//Get the image path


    	if(act.length == 0)
    		act = $('#slide img:last');
    	//If active equals 0 set act to last img


    	var nex = act.next().length ? act.next() : $('#slide img:first');
    	/*If next active
    	 image equals 0 go to first image  if not go to next image */

    	nex.addClass('active');
    	//Set the class active to image


    	$(".append_image").animate({
    		opacity : 0.05
    	}, 1000, function() {//Fade old image out

    		$(".append_image").attr("src", "" + img_src).animate({
    			opacity : 1.0
    		}, 1000, function() {//Fade new image in

    			act.removeClass('active last-active');
    			//Remove classes "active" and "last-active"

    		});
    	});
    }

The HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div id="frame">
	<img src="imaged.png" alt="d" class="append_image">
</div>
<div id="slide">
	<img src="imagea.png" alt="a" class="active">
	<img src="imageb.png" alt="b">
	<img src="imagec.png" alt="c">
	<img src="imaged.png" alt="d">
</div>

Now put the whole code 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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

<!-- Created by Barrett at RRPowered.com -->
<!-- File name index.html -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
		libs/jquery/1.7.1/jquery.min.js"></script>
		<title>A simple jQuery image slide</title>
		<style type="text/css">
			body {
				margin: 200px 0 0 400px;
				font-family: "arial";
			}
			#slide {
				display: none;
			}
			#frame {
				height: 104px;
				width: 420px;
				padding: 10px;
				border: solid #808080 2px;
			}
		</style>
		<script type="text/javascript">
			$(function() {
				setInterval("slide()", 5000);
				//Time is in milliseconds 5000ms is equivalent to 5sec

			});
			//Call the slide function

			function slide() {

				var act = $("#slide img.active");
				//Get the current active image


				var img_src = $("#slide img.active").attr("src");
				//Get the image path


				if(act.length == 0)
					act = $('#slide img:last');
				//If active equals 0 set act to last img


				var nex = act.next().length ? act.next() : $('#slide img:first');
				/*If next active
				 image equals 0 go to first image  if not go to next image */

				nex.addClass('active');
				//Set the class active to image


				$(".append_image").animate({
					opacity : 0.05
				}, 1000, function() {//Fade old image out

					$(".append_image").attr("src", "" + img_src).animate({
						opacity : 1.0
					}, 1000, function() {//Fade new image in

						act.removeClass('active last-active');
						//Remove classes "active" and "last-active"

					});
				});
			}
		</script>
	</head>
	<body>
		<div id="frame">
			<img src="imaged.png" alt="d" class="append_image">
		</div>
		<div id="slide">
			<img src="imagea.png" alt="a" class="active">
			<img src="imageb.png" alt="b">
			<img src="imagec.png" alt="c">
			<img src="imaged.png" alt="d">
		</div>
	</body>
</html>


]]> http://www.rrpowered.com/2012/02/jquery-simple-image-slide/feed/ 0 http://www.rrpowered.com/2012/02/jquery-simple-image-slide/ jQuery Growing Menu http://feedproxy.google.com/~r/rrpowereds/~3/fSPYO7vaHAk/ http://www.rrpowered.com/2012/02/jquery-growing-menu/#comments Mon, 06 Feb 2012 05:44:18 +0000 admin http://www.rrpowered.com/?p=498 Continue reading →]]> Today We are gonna make a horizontal expanding menu using jQuery and css.



 
Demo
Let’s start with the jQuery.
When the menu gets moused over we will animate and show the hidden text. On mouseout will will hide the text once again.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

$(document).ready(function() {
    $(".nav_bar li").mouseover(function() {
        $(this).stop().animate({
            width : '350px'
        }, 500);
    });

    $(".nav_bar li").mouseout(function() {
        $(this).stop().animate({
            width : '130px'
        }, 500);
    });
});

The HTML structure.

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

<div class="nav_bar">
	<ul>
		<li>
			<span>Menu Tab 1</span>
			<span class="whole">The Whole Menu Tab 1</span>
		</li>
		<li>
			<span>Menu Tab 2</span>
			<span class="whole">The Whole Menu Tab 2</span>
		</li>
		<li>
			<span>Menu Tab 3</span>
			<span class="whole">The Whole Menu Tab 3</span>
		</li>
		<li>
			<span>Menu Tab 4</span>
			<span class="whole">The Whole Menu Tab 4</span>
		</li>
		<li>
			<span>Menu Tab 5</span>
			<span class="whole">The Whole Menu Tab 5</span>
		</li>
		<li>
			<span>Menu Tab 6</span>
			<span class="whole">The Whole Menu Tab 6</span>
		</li>
	</ul>
</div>

Now put it 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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

<!-- Created by Barrett at RRPowered.com -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
    <head>
	    <script type="text/javascript" src="http://ajax.googleapis.com/
		ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<link rel="stylesheet" type="text/css" href="style.css" />
		<title>Growing Menu</title>
		<script type="text/javascript">
			$(document).ready(function() {
				$(".nav_bar li").mouseover(function() {
					$(this).stop().animate({
						width : '350px'
					}, 500);
				});

				$(".nav_bar li").mouseout(function() {
					$(this).stop().animate({
						width : '130px'
					}, 500);
				});
			});
		</script>
	</head>
	<body>
		<h3>Growing Menu with jQuery</h3>
		<div class="nav_bar">
			<ul>
				<li>
					<span>Menu Tab 1</span>
					<span class="whole">The Whole Menu Tab 1</span>
				</li>
				<li>
					<span>Menu Tab 2</span>
					<span class="whole">The Whole Menu Tab 2</span>
				</li>
				<li>
					<span>Menu Tab 3</span>
					<span class="whole">The Whole Menu Tab 3</span>
				</li>
				<li>
					<span>Menu Tab 4</span>
					<span class="whole">The Whole Menu Tab 4</span>
				</li>
				<li>
					<span>Menu Tab 5</span>
					<span class="whole">The Whole Menu Tab 5</span>
				</li>
				<li>
					<span>Menu Tab 6</span>
					<span class="whole">The Whole Menu Tab 6</span>
				</li>
			</ul>
		</div>
	</body>
</html>

Now for the styling

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

/*Created by Barrett at RRPowered.com*/
body {
	margin: 0;
	padding: 0;
	font-family: "arial";
	font-size: 12px;
}
span {
	float: left;
	padding: 6px 8px 6px 8px;
}
.nav_bar {
	width: 230px;
	margin: 0 auto;
}
.nav_bar ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
.nav_bar li {
	background-color: #f5f5f5;
	cursor: pointer;
	font-weight: bold;
	width: 130px;
	overflow: hidden;
	max-height: 26px;
}
.whole {
	background-color: #f5f5f5;
	margin-left: 50px;
	font-weight: normal;
	width: 150px;
}


]]> http://www.rrpowered.com/2012/02/jquery-growing-menu/feed/ 0 http://www.rrpowered.com/2012/02/jquery-growing-menu/ Use PHP to show a part of your text http://feedproxy.google.com/~r/rrpowereds/~3/XfflIb4CQNc/ http://www.rrpowered.com/2012/01/use-php-to-show-a-part-of-your-text/#comments Tue, 24 Jan 2012 06:37:50 +0000 admin http://www.rrpowered.com/?p=491 Continue reading →]]> Use PHP to show only a part of your text by adding “…” to the end of your message after 10 characters.



We’re gonna start with our text in a variable.

1
2
3
4
5
6
7

$message="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in erat
nec lacus condimentum hendrerit. Vestibulum fringilla ornare augue ut sagittis.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Vivamus urna nibh, tristique a suscipit sit amet, tempus vitae lectus.";

Okay here we go!!!
We use the PHP function strlen() to get the length of the text in our variable. Then use the PHP function substr() to only shoe the first 10 characters from the text in our variable. 

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

$VarLength = strlen($message);
//The length set to 10

if ($VarLength > 10) {
/*Add "..." after 10 charecters*/
$message = substr($message,0,10) . "...";
}
echo $message;


]]> http://www.rrpowered.com/2012/01/use-php-to-show-a-part-of-your-text/feed/ 1 http://www.rrpowered.com/2012/01/use-php-to-show-a-part-of-your-text/ jQuery plugin get variable from plugin http://feedproxy.google.com/~r/rrpowereds/~3/7c7Z43kVXg8/ http://www.rrpowered.com/2012/01/jquery-plugin-get-variable-from-plugin/#comments Sat, 21 Jan 2012 02:55:50 +0000 admin http://www.rrpowered.com/?p=325 Continue reading →]]> Today I will show you how to get a variable from your plugin. Lets say you want to know what a variable is that was passing to your plugin.



What we have here is the the plugin called myplugin with a function(callback) 

1
2
3
4
5
6
7
8
9
10
11

$("#test-div").myplugin(
function(callback){
if(callback == 1){
alert("test variable equals 1");
}
});

The plugin
Ok, here is the plugin.
Now to send a variable back to our plugin call. We set a variable called testvariable. Then we create a function called callback with the variable testvariable.

1
2
3
4
5
6
7
8
9
10
11

(function($){
$.fn.myplugin = function(callback){
var testvariable=1;
callback(testvariable);
}
})(jQuery);


]]> http://www.rrpowered.com/2012/01/jquery-plugin-get-variable-from-plugin/feed/ 0 http://www.rrpowered.com/2012/01/jquery-plugin-get-variable-from-plugin/ PHP Time Ago http://feedproxy.google.com/~r/rrpowereds/~3/r09q29zBOxE/ http://www.rrpowered.com/2012/01/php-time-ago/#comments Tue, 03 Jan 2012 21:34:19 +0000 admin http://www.rrpowered.com/?p=469 Continue reading →]]> A simple way to display ago with UNIX time.



Displaying the time ago.
To display the time ago. Just add this where you want to display the time ago.

1
2
3
4
5
6
7
8
9
10
11

<?PHP
/*Created by Barrett at RRPowered.com*/
include_once('ago.php');//Include the ago.php file

$cur_time1 ="1291684422";//Your Unix time from database

echo time_ago($cur_time1) ;
?>

 

Here is the PHP file!
This file is called ago.php

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

<?PHP
/*Created by Barrett at RRPowered.com*/
//Call the function

function time_ago($cur_time){
$time_ = time() - $cur_time;

$seconds =$time_;
$minutes = round($time_ / 60);
$hours = round($time_ / 3600);
$days = round($time_ / 86400);
$weeks = round($time_ / 604800);
$months = round($time_ / 2419200);
$years = round($time_ / 29030400);

//Seconds

if($seconds <= 60){

   $time="$seconds seconds ago";   

//Minutes

}else if($minutes <= 60){

   if($minutes == 1){
   $time="one minute ago";
   }else{
   $time="$minutes minutes ago";
   }

//Hours

}else if($hours <= 24){

  if($hours == 1){
  $time="one hour ago";
  }else{
  $time="$hours hours ago";
  }

//Days

}else if($days <= 7){

   if($days == 1){
   $time="one day ago";
   }else{
   $time="$days days ago";
   }

//Weeks

}else if($weeks <= 4){

  if($weeks == 1){
  $time="one week ago";
  }else{
  $time="$weeks weeks ago";
  }

//Months

}else if($months <= 12){

  if($months == 1){
  $time="one month ago";
  }else{
  $time="$months months ago";
  }

//Years

}else{  

  if($year == 1){
  $time="one year ago";
  }else{
  $time="$year years ago";
  }  

}
return $time;
}
?>


]]> http://www.rrpowered.com/2012/01/php-time-ago/feed/ 3 http://www.rrpowered.com/2012/01/php-time-ago/ Check If A Users Picture Exists Using PHP http://feedproxy.google.com/~r/rrpowereds/~3/y658ZpaScEE/ http://www.rrpowered.com/2012/01/check-if-a-users-picture-exists-using-php/#comments Tue, 03 Jan 2012 05:03:05 +0000 admin http://www.rrpowered.com/?p=464 Continue reading →]]> Today We will use PHP to check if a users picture exists.



Let’s get started!
First We set the users and default picture location into a variable. Next We check if the users picture exists. If the users picture exists We will display it. If not We show the default picture.

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

/*The location to the default picture*/
$no_picture="default.jpg";

/*The location to the users picture*/
$picture="$user/picture.jpg";

/*We will use the PHP file_exists function*/
if(file_exists($picture)){
/*If users picture exists show it*/
$pic='<img src="'.$picture.'" alt="" />';
}else{
/*If users picture dose not exists shoe default picture instead*/
$pic='<img src="'.$no_picture.'" alt="" />';
}

/*Usage*/
echo $pic

 

Used in a function
We can also put it in a Function. Like this!

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

function UserPic($user){
/*The location to the default picture*/

$no_picture="default.jpg";
/*The location to the users picture*/
$picture="$user/picture.jpg";

if(file_exists($picture)){
$pic='<img src="'.$picture.'" alt="" />';
}else{
$pic='<img src="'.$no_picture.'" alt="" />';
}
return $pic;
}

/*Usage*/
UserPic($user)


]]> http://www.rrpowered.com/2012/01/check-if-a-users-picture-exists-using-php/feed/ 0 http://www.rrpowered.com/2012/01/check-if-a-users-picture-exists-using-php/ Public API with PHP, jQuery and JSON http://feedproxy.google.com/~r/rrpowereds/~3/74HIRJXmm2c/ http://www.rrpowered.com/2011/12/public-api-with-php-jquery-and-json/#comments Sat, 31 Dec 2011 05:51:47 +0000 admin http://www.rrpowered.com/?p=452 Continue reading →]]> Okay I’m gonna show you a simple way of creating a Public API using PHP, jQuery and JSON.



Demo
Let’s get started!
First we need to include the connection to the database. This file will be called connection.php

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

<?PHP
/*Created by Barrett at RRPowered.com*/
/*PHP Public API*/

//Our connection to the database

mysql_connect("HOST_NAME","USER_NAME","PASSWORD") OR DIE (mysql_error());
mysql_select_db("DATABASE") OR DIE (mysql_error());
?>

Now for the API. First we include the database connection file. Then we check if the function exists.
Now that we checked if the function exists we call the passed function. What’s next? Creating the function it’s self. So we create a function called allUsers(). Select all users from the database,
put them into an array then loop through them putting them into a single array. Now for the JSON, we use the PHP json_encode() function.

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

<?PHP
/*Created by Barrett at RRPowered.com*/
/*PHP Public API*/

//Include the database connection

include('connection.php');

//Now we check if the function exists

if(function_exists($_GET['method'])){
	//Call the passed function

	$_GET['method']();
}

//Here is the function to get

function allUsers(){
	//Get all users from the database

	$sql_users=mysql_query("SELECT * FROM users") OR DIE (mysql_error());
	//New array called users

	$users=array();
	//Loop through each result and put each result into a single array

	while($user=mysql_fetch_array($sql_users)){
	$users[]=$user;
	}
	//Set $users to json encode $users

	$users=json_encode($users);
	//Okay here is the JSONP

	echo $_GET['jsoncallback'].'('.$users.')';
}
?>

 
Now for the jQuery
The url in the $.getJSON() function looks like
http://www.YOUR_WEBITE_ADDRESS.com/api.php?method=allUsers&jsoncallback=?
the method is set to method=allUsers and the jsoncallback set to &jsoncallback=?.
Now we loop through the result an display them in a DIV.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$(function() {
/* we use the jQuery get json function to get data
from are API. The first parameter is the url of our
API file called api.php */
    $.getJSON("http://www.YOUR_WEBITE_ADDRESS.com/api.php?method=allUsers&jsoncallback=?",
        function(dataGet) {
	    for(allUsers in dataGet) {
	        var user = dataGet[allUsers];
		$("#output").append(user.name + "<br />");
        }
    });
});

 
Now for the final html

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

<!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>PHP Public API</title>
	<!-- Include the latest version of 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() {
		/* we use the jQuery get json function to get data
		from are API. The first parameter is the url of our
		API file called api.php */
		    $.getJSON("http://www.YOUR_WEBITE_ADDRESS.com/api.php?method=allUsers&jsoncallback=?",
		    function(dataGet) {
	                for(allUsers in dataGet) {
			    var user = dataGet[allUsers];
			    $("#output").append(user.name + "<br />");
			}
		    });
		});
        </script>
    </head>
    <body>
	<div id="output"></div>
   </body>
</html>


]]> http://www.rrpowered.com/2011/12/public-api-with-php-jquery-and-json/feed/ 2 http://www.rrpowered.com/2011/12/public-api-with-php-jquery-and-json/ Animated header background with jQuery http://feedproxy.google.com/~r/rrpowereds/~3/yt8Hud2EMdA/ http://www.rrpowered.com/2011/12/animated-header-background-with-jquery/#comments Fri, 23 Dec 2011 21:01:10 +0000 admin http://www.rrpowered.com/?p=413 Continue reading →]]> Today I’m gonna show you how to make an awesome animate header, using jQuery and CSS.



View it in action in the video below.

Watch in full screen for best results.


 
Demo
Demo
lets get started.
The first things we have are the options for are background, the scrollSpeed for how fast the background image moves, the step is for the pixel movement per step, the current set to 0, the imageHeight this is the height of our background image, the HeaderHeight for how high we want our header to be.

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

var scrollSpeed = 15;       // Speed in milliseconds

            var step = 1;               // How many pixels to move per step

            var current = 0;            // The current pixel row

            var imageHeight = 4300;     // Height of the background image

            var headerHeight = 300;     // Header hight


            //The pixel row where to start a new loop

            var restartPosition = -(imageHeight - headerHeight);

            function scrollBg(){

                //Go to next pixel row.

                current -= step;

                //If at the end of the image, then go to the top.

                if (current == restartPosition){
                    current = 0;
                }
                //Set the CSS position of the header.

                $("#header").css("background-position","0 "+current+"px");

            }

            //Calls the scrolling function repeatedly

            var init = setInterval("scrollBg()", scrollSpeed);

 
Now the CSS.
We just set the height and background image that we want.

1
2
3
4
5
6
7

#header{
            height: 300px;
            background: url('bg.jpg') repeat-y scroll left top;
            }

Ok the HTML setup.
Just one div is all we need.

1
2
3
4
5

<div id="header">
            <h1>Animated Header</h1>
        </div>

Now put it 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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

<!-- Created by Barrett at RRPowered -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Animated header background with jQuery</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
            var scrollSpeed = 15;       // Speed in milliseconds

            var step = 1;               // How many pixels to move per step

            var current = 0;            // The current pixel row

            var imageHeight = 4300;     // Height of the background image

            var headerHeight = 300;     // Header hight


            //The pixel row where to start a new loop

            var restartPosition = -(imageHeight - headerHeight);

            function scrollBg(){

                //Go to next pixel row.

                current -= step;

                //If at the end of the image, then go to the top.

                if (current == restartPosition){
                    current = 0;
                }
                //Set the CSS position of the header.

                $("#header").css("background-position","0 "+current+"px");

            }

            //Calls the scrolling function repeatedly

            var init = setInterval("scrollBg()", scrollSpeed);
        </script>
        <style type="text/css">
            #header{
            height: 300px;
            background: url('bg.jpg') repeat-y scroll left top;
            }
        </style>
    </head>
    <body>
        <div id="header">
            <h1>Animated Header</h1>
        </div>
    </body>
</html>

So now you can use this awesome animated header in your project.


]]> http://www.rrpowered.com/2011/12/animated-header-background-with-jquery/feed/ 0 http://www.rrpowered.com/2011/12/animated-header-background-with-jquery/ jQuery change title text like Facebook http://feedproxy.google.com/~r/rrpowereds/~3/8x_oCcKD0bM/ http://www.rrpowered.com/2011/12/jquery-change-title-text-like-facebook/#comments Wed, 21 Dec 2011 08:10:29 +0000 admin http://www.rrpowered.com/?p=421 Continue reading →]]> 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.


]]> http://www.rrpowered.com/2011/12/jquery-change-title-text-like-facebook/feed/ 0 http://www.rrpowered.com/2011/12/jquery-change-title-text-like-facebook/