RRPowered http://www.rrpowered.com Sun, 07 Oct 2012 02:38:07 +0000 en-US hourly 1 http://wordpress.org/?v=3.4.2 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 PHP Div Columns http://feedproxy.google.com/~r/rrpowereds/~3/7-IKw4Sw6zM/ http://www.rrpowered.com/2012/05/php-div-columns/#comments Thu, 24 May 2012 04:02:03 +0000 admin http://www.rrpowered.com/?p=574 Continue reading →]]> Display records 5 columns wide using Div’s.



 
lets get started.

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

<?PHP
/*Created by Barrett at RRPowered.com*/
include ('connection.php');
//Connection to database

$columns = "5";
//How many columns to display

$r = 0;
//Set r to 0

$get_draft = mysql_query("SELECT * FROM your_table") or die(mysql_error());
while ($rows = mysql_fetch_array($get_draft)) {
	$your_table = $rows['your_table'];

	$r++;
	//Add 1 to r


	$row .= '<div class="row">' . $your_table . '</div>';

	//Clear div every $columns

	if ($r == $columns) {
		$row .= '<div class="clear"></div>';
		//Or you can use <br />

		$r = 0;
		//Set r to 0

	}
}
?>

Here is the whole code. 

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

<?PHP
/*Created by Barrett at RRPowered.com*/
include ('connection.php');
//Connection to database
$columns = "5";
//How many columns to display
$r = 0;
//Set r to 0
$get_draft = mysql_query("SELECT * FROM your_table") or die(mysql_error());
while ($rows = mysql_fetch_array($get_draft)) {
	$your_table = $rows['your_table'];

	$r++;
	//Add 1 to r

	$row .= '<div class="row">' . $your_table . '</div>';

	//Clear div every $columns
	if ($r == $columns) {
		$row .= '<div class="clear"></div>';
		//Or you can use <br />
		$r = 0;
		//Set r to 0
	}
}
?>
<html>
	<head>
		<title>5 column wide records</title>
		<style type="text/css">
			body {
				margin: 400px;
				font-family: arial;
			}

			.row {
				border: solid #606060 1px;
				padding: 5px;
				margin: 10px;
				width: 50px;
				float: left;
			}

			.clear {
				clear: both;
			}

		</style>
	</head>
	<body>
		<h1>PHP 5 column wide records</h1>
		<?PHP echo $row; ?>
	</body>
</html>
]]> http://www.rrpowered.com/2012/05/php-div-columns/feed/ 0 http://www.rrpowered.com/2012/05/php-div-columns/ Create a Basic Website using Div’s http://feedproxy.google.com/~r/rrpowereds/~3/yc_JQ7dA_4M/ http://www.rrpowered.com/2012/05/create-a-basic-website-using-divs/#comments Sun, 20 May 2012 01:34:28 +0000 admin http://www.rrpowered.com/?p=566 Continue reading →]]> We are gonna create a website from scratch using valid XHTML and CSS. Instead of using old fashion Tables We use Div’s.



 
Demo
The 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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>RRPowered Themes</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>	
	<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<div class="container">
The Container Div
	 <div class="header">
	The Header Div
	</div>
	<div class="content">
	The Content Div
	 <div class="sidebar">
	The Sidebar Div
	</div>
	</div>
	<div class="footer">
	The Footer Div
	</div>
</div>
</body>
</html>

Now for the CSS

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

body {
    margin: 0; 
    padding: 0;
    font-family: "arial";
    font-size: 18px;
    font-weight: bold;
    }
.container {
    height: 100%;
    border: solid #000000 2px;
    }	
 
.header {
    width: 650px;
    margin: 0 auto;
    padding: 20px;
    border: solid red 2px;
    }
 
.content {
    width: 650px;
 
    margin: 0 auto;
    padding: 20px;
    border: solid blue 2px;
    }
 
.sidebar {
    padding: 10px;
 
    border: solid yellow 2px;
    float: right;
    }	
 
.footer {
    width: 650px;
    margin: 0 auto;
    padding: 20px;
    border: solid green 2px;
    }
]]> http://www.rrpowered.com/2012/05/create-a-basic-website-using-divs/feed/ 0 http://www.rrpowered.com/2012/05/create-a-basic-website-using-divs/ Awesome jQuery Animated WebSite http://feedproxy.google.com/~r/rrpowereds/~3/D4w1_wD0sHQ/ http://www.rrpowered.com/2012/03/awesome-jquery-animated-website/#comments Sun, 25 Mar 2012 00:56:31 +0000 admin http://www.rrpowered.com/?p=544 Continue reading →]]> In this tutorial, I’m gonna show you how to make an awesome jQuery animated website.



 
Demo
The jQuery

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

$(document).ready(function() {
    $(".nav_bar li").click(function() {
    /*Get the class from the menu button that was clicked*/
	var Tab = $(this).attr("class");
        /*Slide the current DIV to the right 1500px*/
	    $(".box").stop().animate({
	        left : "1500px"
		}, 1000, function() {
                    /*Now set the current DIV opacity to 0 and left 1500px then hide it*/
		    $(".box").css("left", "-1500px").hide();
                    /*Show the new div slide right to 0px, set opacity to 100% then stop the animation*/
		        $("#" + Tab).show().animate({
			    left : "0px",
			    opacity : 1.0
			}, 1000).stop();
	   });
    });
});

Now for the 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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

<div class="outer">
    <!--Here is the nav bar -->
    <div class="nav_bar">
        <!--Inside our nav bar we have a list to display all of our pages -->
        <ul>
	    <li class="p1">
	    Home
	    </li>
	    <li class="p2">
	    Page 1
	    </li>
	    <li class="p3">
	    Page 2
	    </li>
	    <li class="p4">
	    Page 3
	    </li>
	</ul>
    </div>
    <!-- Now for the page content -->
    <div class="container">
        <!-- We have a div for every page -->
        <div class="box"></div>
	<div class="box" id="p1">
	    <h3>Home</h3>
	</div>
	<div class="box" id="p2">
	    <h3>Page 1</h3>
	</div>
	<div class="box" id="p3">
	    <h3>Page 2</h3>
	</div>
	<div class="box" id="p4">
	    <h3>Page 3</h3>
	</div>
    </div>
</div>

Now put the whole thing 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

<!-- 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="styles.css" />
		<title>Awesome Animated Website</title>
		<script type="text/javascript">
			$(document).ready(function() {
				$(".nav_bar li").click(function() {

					/*Get the class from the menu button that was clicked*/
					var Tab = $(this).attr("class");

					/*Slide the current DIV to the right 1500px*/
					$(".box").stop().animate({
						left : "1500px"
					}, 1000, function() {

						/*Now set the current DIV opacity to 0 and left 1500px then hide it*/
						$(".box").css("left", "-1500px").hide();

						/*Show the new div slide right to 0px, set opacity to 100% then stop the animation*/
						$("#" + Tab).show().animate({
							left : "0px",
							opacity : 1.0
						}, 1000).stop();
					});
				});
			});
		</script>
	</head>
	<body>
		<div class="outer">
			<div class="nav_bar">
				<ul>
					<li class="p1">
						Home
					</li>
					<li class="p2">
						Page 1
					</li>
					<li class="p3">
						Page 2
					</li>
					<li class="p4">
						Page 3
					</li>
				</ul>
			</div>
			<div class="container">
				<div class="box"></div>
				<div class="box" id="p1">
					<h3>Home</h3>
				</div>
				<div class="box" id="p2">
					<h3>Page 1</h3>
				</div>
				<div class="box" id="p3">
					<h3>Page 2</h3>
				</div>
				<div class="box" id="p4">
					<h3>Page 3</h3>
				</div>
			</div>
		</div>
	</body>
</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
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

/*Created by Barrett at RRPowered.com*/
.outer {
   padding 0;
   margin: 0;
   }   
 
.nav_bar {
   width: 850px;
   margin-top: 60px;
   margin-left: auto;
   margin-right: auto;
   background-color: #f5f5f5;
   border: solid #bfbfbf 2px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   overflow: hidden;
   }
 
.nav_bar ul {
   padding: 0;
   margin: 0;
   list-style: none;
   }
 
.nav_bar li {
   padding: 6px 8px 6px 8px;
   border-right: solid #bfbfbf 2px;
   cursor: pointer;
   font-weight: bold;
   display: inline;
   float:left;
   }   
 
.nav_bar li:hover {
   background-color: #e2e2e2;
   } 
 
.box {
   padding: 10px;
   background-color: #f5f5f5;
   border: solid #bfbfbf 2px;
   -moz-border-radius: 8px;
   border-radius: 8px;   
   }   
 
.box {
   display: none;
   position: relative;
   } 
 
.container {
   width: 850px;
   margin-top: 30px;
   margin-left: auto;
   margin-right: auto;   
   overflow:hidden;
   } 
 
 #p1 {
   display: block;
   }
]]> http://www.rrpowered.com/2012/03/awesome-jquery-animated-website/feed/ 1 http://www.rrpowered.com/2012/03/awesome-jquery-animated-website/ 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/ 4 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/ 4 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/