Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Layout and design crits of my quirky sites new design

Cabbit

Cabbit

macrumors 68020
Original poster
Jan 30, 2006
2,128
1
Scotland
Layout and design crits of my quirky sites new design. Mind its not work safe though there is no content on it but the title mite offend someone.

http://abcomforts.com/rebuild/index.php

As before i love your design advise and feedback and look forward to some constructive criticism and advice.
 
Here's my comments. They go beyond just design and go into coding techniques and address accessibility.
  • The overall look of it is nice
  • There's some validation errors, though only associated with the embed tag
  • There's one CSS error, but an easy fix
  • The text "Search Home" in the search field makes no sense. I'd personally use a label instead of placing text inside it then hide the label with CSS. This makes the search field accessible while still providing the same visual aesthetics you have.
  • You have other accessibility problems with the way you've coded the page:
    • The main navigation, you just have some spans for each menu item. Someone using a screen reader will 'see' your navigation as a string of words rather than individual links. The way to deal with this is to use semantic HTML, use a ul for the navigation and style it with CSS to achieve the same look. List items get a distinct pause after each one, which helps people using screen readers know where links are divided.
    • Similarly the footer navigation is accessible. You should not use | to separate links. Screen readers will read each of those (vertical bar). This should also be done as a ul and you can use CSS to provide a border on the left or right side, which gives the same visual effect you have now. These may seem like small things, but provide much more accessibility to visitors who need it.
    • When you disable to style sheet you'll notcie there's no mention of the name of the site now. Since you're using it as a background image you can supply an alt attribute. You may want to reconsider how you have this coded up so you can supply the text for the title of the page. This will also help with search results.
  • Font sizes are nice
  • The white space around elements looks good
  • The white text on the heading box (h3) lacks contrast with its background color
  • You use h3 tags, but no h2 or h1 tags, that's a no no. Always start with h1.
  • The mouse over color for the navigation menu lacks contrast
  • I like the header image, both the little girl and the ivy-looking part on the right
 
angelwatt said:
Here's my comments. They go beyond just design and go into coding techniques and address accessibility.
  • The overall look of it is nice
  • There's some validation errors, though only associated with the embed tag
  • There's one CSS error, but an easy fix
  • The text "Search Home" in the search field makes no sense. I'd personally use a label instead of placing text inside it then hide the label with CSS. This makes the search field accessible while still providing the same visual aesthetics you have.
  • You have other accessibility problems with the way you've coded the page:
    • The main navigation, you just have some spans for each menu item. Someone using a screen reader will 'see' your navigation as a string of words rather than individual links. The way to deal with this is to use semantic HTML, use a ul for the navigation and style it with CSS to achieve the same look. List items get a distinct pause after each one, which helps people using screen readers know where links are divided.
    • Similarly the footer navigation is accessible. You should not use | to separate links. Screen readers will read each of those (vertical bar). This should also be done as a ul and you can use CSS to provide a border on the left or right side, which gives the same visual effect you have now. These may seem like small things, but provide much more accessibility to visitors who need it.
    • When you disable to style sheet you'll notcie there's no mention of the name of the site now. Since you're using it as a background image you can supply an alt attribute. You may want to reconsider how you have this coded up so you can supply the text for the title of the page. This will also help with search results.
  • Font sizes are nice
  • The white space around elements looks good
  • The white text on the heading box (h3) lacks contrast with its background color
  • You use h3 tags, but no h2 or h1 tags, that's a no no. Always start with h1.
  • The mouse over color for the navigation menu lacks contrast
  • I like the header image, both the little girl and the ivy-looking part on the right
Click to expand...

Thank you for the comments i have taken then on board and will be working on implementing the changes.
For the embed tag errors is there anyway to fix them?
 
MindBrain said:
My advice, how about a website that might help ABs get off that idea
Click to expand...

There are already a few of them out there and i have mentioned no ware if mine is one or not. But for your information my site is being developed to promote healthy lifestyle choices and acceptance of yourself and of other peoples believes, fantasies, and desirers.

In this world we are given 0 to 110 years if were lucky, forcing everyone to follow one mold, religion or idea is totally and absolutely wrong. There are many groups of people out there that you have to learn to resect and tolerate, you don't have to like them just tolerate that is what they choose to do be it for sexual pleasure, stress relief, or spiritual/religious reasons.

My particular interest is all about relieving stress in a world i have never understood were people scare me and there is to little time to live to be worried about what other people think just to fit in when the truth of the matter is very likely that same person that is offended by you could go home and conduct skat play with his wife and think thats ok.

Long story short, your comment has nothing to do with the design nor layout of the site.
Reading though your previous posts not one of them has added any valuable contribution to any thread so i have no interest in the opinion of someone to be frank sounds like a spoilt teenager.
 
angelwatt said:
Here's my comments. They go beyond just design and go into coding techniques and address accessibility.
  • The main navigation, you just have some spans for each menu item. Someone using a screen reader will 'see' your navigation as a string of words rather than individual links. The way to deal with this is to use semantic HTML, use a ul for the navigation and style it with CSS to achieve the same look. List items get a distinct pause after each one, which helps people using screen readers know where links are divided.
  • Similarly the footer navigation is accessible. You should not use | to separate links. Screen readers will read each of those (vertical bar). This should also be done as a ul and you can use CSS to provide a border on the left or right side, which gives the same visual effect you have now. These may seem like small things, but provide much more accessibility to visitors who need it.
  • When you disable to style sheet you'll notcie there's no mention of the name of the site now. Since you're using it as a background image you can supply an alt attribute. You may want to reconsider how you have this coded up so you can supply the text for the title of the page. This will also help with search results.
Click to expand...

tried to fix most of the problems but using ul instead of span causes display issues were the element has a unchangeable margin around it. For the header i did have css text over it before but it never looked quite right im working on a solution for accessibility and design and will keep at it.
 
On the embed tag validation, check out this other post on another site that references a ALA article.

babyjenniferLB said:
tried to fix most of the problems but using ul instead of span causes display issues were the element has a unchangeable margin around it. For the header i did have css text over it before but it never looked quite right im working on a solution for accessibility and design and will keep at it.
Click to expand...

Not sure why you're having issues with the margins. Should be doable without too much CSS. Padding could also be helpful. If you want to send me a link where you have it coded up with ul I can try to help out with the CSS.
 
I am going to Edinburgh soon, when i am back i will clean up my stylesheet and code and if i have problems sorting it out will post the code here.
 
Ok i have commented my page and cleaned up the code would appreciate the helps.


index.php
HTML: 
<?php
// Including the session, session stores user data and calls for it throughout the site //
include("include/session.php");
// Get the current username, used throughout the page for personalization of the site to the current user //
$username = $session->username;
// Trim the username for use by req_user //
$req_user = trim($session->username);
/* Display requested user information */
$req_user_info = $database->getUserInfo($req_user);
// Calls the user cookie bin //
$sql = mysql_query("SELECT * FROM `users_cookie_bin` WHERE username = '$username'");
	$row = mysql_fetch_row($sql);
	// $page is just used to identify 
	$page = "home";
// End of user cookie bin call //
?>
<!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><!-- Start header -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><!-- Charicter set -->
	<title>Adult Baby Comforts</title><!-- Remember to make the title dynamic to page -->
	<style type="text/css" media="all">@import "stylesheet.css";</style><!-- Stylesheet import -->
</head><!-- End header -->
<body><!-- Start outputting the body -->
<div id="page_container"><!-- The page container for the entire page -->
	<div id="header"><!-- Page header -->
		<!-- Header image called by css -->
	</div><!-- End of "header"-->
	<div id="navagation"><!-- Main navagation bar -->
		<!-- Navagation Links -->
		<span class="nav_link"><a href="">Home</a></span>
		<span class="nav_link"><a href="">Support</a></span>
		<span class="nav_link"><a href="">Forum</a></span>
		<span class="nav_link"><a href="">Blogs</a></span>
		<span class="nav_link"><a href="">Chat</a></span>
		<span class="nav_link"><a href="">Stories</a></span>
		<span class="nav_link"><a href="">Tips</a></span>
		<span class="nav_link"><a href="">Gallery</a></span>
		<!-- Search button -->
		<div class="search_box_area"><!-- Box that contains the search bar -->
			<div class="search-cont"><!-- Box that contains the textfeald and button -->
				<form action="" method="post"><!-- Search form, rember to link to the search page -->
				<span class="search-textbox"><!-- Container for the text feild -->
					<!-- Search text feild, label is hidden with css -->
					<label>Search</label><input type="text" name="search_box" id="search-textfield" />
				</span>
				<span class="search-btn_cont"><!-- Container for the search button -->
					<!-- Seach submit button, javascript used change the rollover effect of the image -->
					<input type="submit" value="" style="cursor: pointer" class="search_btn" onmouseover="this.className='search_btn_hover'" onmouseout="this.className='search_btn'" alt="search" /></form>
				</span>
			</div><!-- End of "search-cont" -->
		</div><!-- End of "search_box_area" -->
	</div><!-- End of "navagation" -->
	<div id="page_main"><!-- box element that keeps the sidebar and main body areas grouped together -->
		<div id="sidebar"><!-- The side bar block, for user cp and contribue blocks -->
			<?php
				///User Control Panel///
				include("classies/home/usercp.php");
				///contrib///
				include("classies/home/contrib.php");
				///chatting time///
				include("classies/home/chat_time.php");
			?>
		</div><!-- End of "sidebar" -->
		<div id="content"><!-- This is the main text body of the page -->
			<?php
				// Call the required table //
				$sql = "SELECT `id`, `page_id`, `title`, `body` FROM `articles` WHERE `page_id` = 'home' GROUP BY `id`";
				// Preparing the results for use //
				$result = mysql_query($sql) or die("Sorry there seems to be a problem with the database"); 
				// Outputting the results //
				if(mysql_num_rows($result)) 
					{
	   				while($row = mysql_fetch_array($result)) 
	   					{
					// Printing out the results, "main_block" is the CSS styling //
					printf( "<div class=\"main_block\"><h3>%s" . "</h3>%s" . "</div>", $row["title"], $row["body"]);
					}
				}
				else
					{
					// This displays if we find no results //
					printf("<div class=\"main_block\"><h3>Nought</h3><p>Sorry there are no results here</p></div>");
					}
				// End of the output //
			?>
		</div><!-- End of "content" -->
	</div><!-- End of "page_main" -->
	<div id="footer"><!-- The page footer -->
		<div class="footer_text"><!-- Contains the footer text -->
			<span class="footer_left">
				<a href="">Links</a> | <a href="">About</a> | <a href="">Contact Us</a> | <a href="">Site Map</a> | <a href="">FAQ</a>
			</span>
			<span class="footer_right">
			<a href="">Report a Issue</a> | <a href="">Request a Feature</a>
			</span>
		</div><!-- End of "footer_text" -->		
	</div><!-- End of "footer" -->
</div><!-- End of "page_container" -->
</body>
</html>

stylesheet.css
PHP: 
/************************* The header **********************************/
/*header*/

body {
	color: #444;
	background-color: #bbbee0;
	font: normal 11pt/13pt Geneva, Helvetica, sans-serif;
}
h1 {
  	color: #fff;
	margin: 0px 0px 0px 0px;
    padding: 30px 0px 10px 0px;
	text-align: center;
	font: bold 33pt/36pt Geneva, Arial, Helvetica, sans-serif;
}
h2 {
	text-align: center;
  	color: #333;
  	font-size: 26px;
	line-height:26px;
	font-weight: normal;
	font-style: normal;
	margin: 0px 0px 5px 0px;
    padding: 0px 0px 0px 0px;
}
h3 {
	border: 1px solid #999;
	background-image:url(images/layout/title.png);
	padding: 8px;
	margin: 5px;
  	font-size: 14pt;
	color: #444;
	text-align: left;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	line-height: 16px;
}
h4 {
	text-indent: 2px;
  	font-size: 14pt;
	color: #dda2c4;
	text-align: left;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	border-bottom: 1px solid #999;
	line-height: 16px;
	margin: 5px 5px 10px 5px;
	padding-bottom: 5px;
}
h5 {
  	font-size: 12pt;
	line-height: 12pt;
	color: #666666;
	text-align: left;
	margin: 2px 0 0 0;
	padding: 0 0 0 0;
}
a {
  	color: #769ec7;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
}

a:hover {
  	color: #336699;
  	text-decoration: underline;
}

label {
	display: none;
	overflow: hidden;
}
/* Page Layout */

#page_container {
	width: 960px;
	margin: 0 auto;
	padding: 0;
}

#header {
	background-image:url(images/layout/header.png);
  	background-repeat:no-repeat;
	height: 160px;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#navagation {
	background-image:url(images/layout/link_norm.png);
	width: 958px;
	height: 40px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid #999;
	border-top: none;
	overflow: hidden;
}

#sidebar {
	width: 215px;
	float: left;
	margin: 10px 0px 10px 10px;
	padding: 0;
	overflow: hidden;
}

#content {
	width: 725px;
	float: right;
	background-color: #fff;
	/* mesurements (top, right, bottom, left)*/
	margin: 10px 0px 5px 5px;
	overflow: hidden;
	padding: 0;
}

#page_main {
	width: 958px;
	overflow: hidden;
	background-color: #fff;
	border-left: 1px solid #999;
	border-right: 1px solid #999;
}

.main_block {
	background-color: #ffd9ff;
	width: 700px;
	margin: 0px 10px 15px 0px;
	overflow: hidden;
	padding: 5px 5px 5px 5px;
	border: 1px solid #ebbbed;
}
.side_block {
	float: left;
	background-color: #ffd9ff;
	width: 200px;
	margin: 0px 0px 10px 0px;
	overflow: hidden;
	padding: 5px 5px 5px 5px;
	border: 1px solid #ebbbed;
}

#footer {
	float:right;
	width: 958px;
	background-color: #fff;
	border: 1px solid #999;
	border-top: none;
	border-bottom: none;
	padding: 5px 0 10px 0;
	margin: 0;
}
.footer_text {
	margin: 0px 10px 0px 10px;
	padding: 0px;
	line-height: 35px;
}
.footer_right {
	float:right;
}
.footer_left {
	float:left;
}
/***Standard Elements***/
td.border {
border-bottom:1px solid #999999; 
}
table { 
	border-collapse:collapse;
	font-size: 10.5pt;
	line-height:11pt;
}

ul { 
	color: #ff99ff;
}
p {
	/* mesurements (top, right, bottom, left)*/
	margin: 10px 10px 10px 10px;
}

/* Navagation Bar */

.nav_link A {
	color: #333;
	float:left;
	border-right: 1px solid #999999;
	width:85px;
	height:40px;
	text-decoration: none;
	text-align: center;
	line-height: 40px;
	font-size: 1.0em;
	font-weight: normal;
	font-style: normal;
}
.nav_link A:hover {	
	background-image:url(images/layout/link_hover.png);
	color: #ffffff;
}

/* Seach box */

/*** Search box *****/

.search_box_area {
	float: left;
	width: 210 px;
	height: 24px;
	margin: 8px 8px 8px 8px;
	overflow: hidden;
}
.search_btn {
	width:47px;
	height:24px;
	background-image:url(/images/funtion_box/search-box/btn_search.png);
	background-repeat:no-repeat;
	color: #ffffff;
	border-style: solid;
	border-width: 0;
}
.search_btn_hover {
	width:47px;
	height:24px;
	background-image:url(/images/funtion_box/search-box/btn_search_hover.png);
	background-repeat:no-repeat;
	color: #ffffff;
	border-style: none;
}
#search-textfield {
	height: 22px;
	width: 200px;
	padding: 0;
	margin: 0;
	color:#999999;
	border: 1px solid #666666;
	border-right-style: none;
}
.search-textbox {
	float: left;
	width: 200px;
	height: 24px;
}
.search-btn_cont {
	float: left;
	width: 43px;
	height: 24px;
}
.search-cont {
	width: 250px;
	height: 24px;
}
/***Decoration stuff****/

.user_avatar {
	float: left;
	background-color: #e9f2fa;
	margin: 6px;
	padding: 15px;
	border: 1px solid #ebbbed;
}
 
I went through the navigation bar and the footer and put lists for the links and created CSS for each so that it achieves the same visual look. I also gave you a solution for providing text in the header for screen readers using a CSS class called nosee that I use for accessibility. Also tweaked the search button. I only tested in Firefox and Safari. IE may need more tweaking possibly, because its, well IE. When I was testing locally the search bar wasn't looking quite right, but think it may be due to testing it locally. In the CSS I had to use absolute URL for the images.

Let me know if you have any questions about this or if there were any other parts you wanted me to address.

I'll only post the relevant HTML as I was unable to make use of the PHP parts so couldn't get at the content area. I added two lines to the header, the navigation I basically jut changed the spans to list items and the same for the footer.
HTML: 
...
	<div id="header"><!-- Page header -->
		<!-- Header image called by css -->
                <!-- Accessibility header that's only seen by screen readers or CSS-less browsers -->
		<h1 class="nosee">Adult Baby Comforts</h1>
	</div><!-- End of "header"-->

...
	<div id="navagation"><!-- Main navagation bar -->
		<!-- Navagation Links -->
		<ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Support</a></li>
      <li><a href="#">Forum</a></li>
      <li><a href="#">Blogs</a></li>
      <li><a href="#">Chat</a></li>
      <li><a href="#">Stories</a></li>
      <li><a href="#">Tips</a></li>
      <li><a href="#">Gallery</a></li>
		</ul>
		<!-- Search button -->
		<div class="search_box_area"><!-- Box that contains the search bar -->
			<div class="search-cont"><!-- Box that contains the textfeald and button -->
				<form action="" method="post"><!-- Search form, rember to link to the search page -->
				<span class="search-textbox"><!-- Container for the text feild -->
					<!-- Search text feild, label is hidden with css -->
					<label for="search_box">Search</label><input type="text" name="search_box" id="search-textfield" />
				</span>
				<span class="search-btn_cont"><!-- Container for the search button -->
					<!-- Seach submit button, javascript used change the rollover effect of the image -->
					<input type="image" src="http://abcomforts.com//images/funtion_box/search-box/btn_search.png" style="cursor: pointer" class="search_btn" onmouseover="this.src='http://abcomforts.com/images/funtion_box/search-box/btn_search_hover.png'" onmouseout="this.src='http://abcomforts.com//images/funtion_box/search-box/btn_search.png'" alt="search" /></form>
				</span>
			</div><!-- End of "search-cont" -->
		</div><!-- End of "search_box_area" -->
	</div><!-- End of "navagation" -->
...
	<div id="footer"><!-- The page footer -->
		<div class="footer_text"><!-- Contains the footer text -->
			<ul class="footer_left">
				<li class="first"><a href="#">Links</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact Us</a></li>
				<li><a href="#">Site Map</a></li>
				<li><a href="#">FAQ</a></li>
			</ul>
			<ul class="footer_right">
			  <li class="first"><a href="">Report a Issue</a></li>
			  <li><a href="">Request a Feature</a></li>
			</ul>
		</div><!-- End of "footer_text" -->		
	</div><!-- End of "footer" -->
Relevant CSS. I deleted some of your CSS, but was able to reuse most of it:
Code: 
.search_box_area {
    float: left;
    width: 250px;
    height: 24px;
    margin: 8px 8px 8px 8px;
    overflow: hidden;
}

#footer {
    float:right;
    width: 958px;
    background-color: #fff;
    border: 1px solid #999;
    border-top: none;
    border-bottom: none;
    padding: 5px 0 10px 0;
    margin: 0;
}
.footer_text {
    margin: 0px 10px 0px 10px;
    padding: 0px;
    line-height: 35px;
}
#footer .footer_left,
#footer .footer_right {
 margin: 0; padding: 0;
 list-style: none;
}
#footer .footer_left {
 float:left;
 text-align: left;
}
#footer .footer_right {
 float:right;
 text-align: right;
}
#footer .footer_left li,
#footer .footer_right li {
 display: inline;
 padding: 0 .3em 0 .5em;
 border-left: 1px solid #000;
}
#footer li.first {
 border: none;
}
/* Navagation Bar */

#navagation ul {
 margin: 0; padding: 0;
 list-style: none;
}
#navagation li {
 display: inline;
}
#navagation li a {
  color: #333;
  float:left;
  border-right: 1px solid #999999;
  width:85px;
  height:40px;
  text-decoration: none;
  text-align: center;
  line-height: 40px;
  font-size: 1.0em;
  font-weight: normal;
  font-style: normal;
}
#navagation li a:hover {
    background-image:url('http://abcomforts.com/rebuild/images/layout/link_hover.png');
    color: #ffffff;
}
.nosee {
 width: 1px; height: 1px;
 overflow: hidden; float: right;
}
 
babyjenniferLB said:
Oh i got one warning something to do with the for in the label.

And internet exploder 6 gives everything more margin making it all off looking.
http://ipinfo.info/netrenderer/index.php
Click to expand...

For the "for" I thought it allowed references to name attributes as well as IDs, but guess not. Change the text for the 'for' to "search-textfield" and it should be good.

If I can get to a machine with IE I'll look at what it's doing. I can see IE adds a little more space to the left of the sidebar, and that causes the content to fall underneath it, but it's hard to say just by looking at the rendering as to what's causing it. Do you know if that was happening before you added my changes?
 
Yip it was happening before, seems to have no solution. All other browsers have a nice 10px margin but ie gives it about 3 times the amount for no reason.
 
babyjenniferLB said:
Yip it was happening before, seems to have no solution. All other browsers have a nice 10px margin but ie gives it about 3 times the amount for no reason.
Click to expand...

This results from IE's box model issues. One way to fix this is with a conditional comment to supply IE6 an extra piece of CSS. With the following CSS, IE6 will display it reasonably well (in my brief testing), it at least won't kick the content beneath the sidebar.

CSS
Code: 
#sidebar {
 margin: 10px 0 10px 6px !important;
}

Conditional Comment:
Code: 
<!--[if lt IE 6]>
<link rel=“stylesheet” href=“ieonly.css” type=“text/css” />
<![endif]-->
 
i put in this statement to try sort it out it seems to work. It reads the *html as internet exploder only code

Code: 
#sidebar {
	width: 220px;
	float: left;
	margin: 10px 0 15px 10px !important;
	padding: 0;
	overflow: hidden;
}

*html #sidebar {
	width: 220px;
	float: left;
	margin: 10px 0 15px 6px !important;
	padding: 0;
	overflow: hidden;
}
 
A new one here, my whos online system uses ajax an im pretty sure there is a much better implementation than the work around i am using as my ajax skills are non existent.

The php file
PHP: 
	<div class="side_block">
		<h3>Whos Online</h3>
<p>
<?php
include("../../include/database.php");
echo "$database->num_active_guests guests viewing the site.<br><br>";
?>
<table width="100%" border="0" cellspacing="0" cellpadding="2">
<?php
/* Display requested user information */
if(!defined('TBL_ACTIVE_USERS')) {
  die("Error processing page");
}

$q = "SELECT username FROM ".TBL_ACTIVE_USERS." ORDER BY timestamp DESC,username";
$m = 0; 
$result = $database->query($q);
/* Error occurred, return given name by default */
$num_rows = mysql_numrows($result);
if(!$result || ($num_rows < 0)){
   echo "Error displaying info";
}
else if($num_rows > 0){
   /* Display active users, with link to their info */
   for($i=0; $i<$num_rows; $i++){
      $uname = mysql_result($result,$i,"username");
$sql = mysql_query("SELECT * FROM users WHERE username = '$uname'");
$row = mysql_fetch_row($sql);
 ///Start output///
print '<tr class=\"border\">'; 
echo "<td class=\"border\" rowspan=\"2\" width=\"25%\">";
if ($row[16] == "" OR $row[16] == "not entered") {
print "<img class=\"who_img\" src=\"../images/profile_avatars/no_log.jpg\" alt=\"profile-image\" width=\"35px\" />";
}
else {
echo "<img class=\"who_img\" src=\"../images/profile_avatars/";
print nl2br($row[16]);
echo "\"alt=\"facepic\" width=\"35px\" />";
}
echo "</td>";
echo "<td width=\"75%\">";
      echo "$uname";
echo "</td></tr><tr>";
echo "<td class=\"border\" width=\"75%\">";
echo "<font size=\"-1\">";
echo "<a href=\"../user/user_profile.php?user=$uname\">Profile</a> | <a href=\"../mail/sendmail.php?user=$uname\">Mail me</a>";
echo "</font>";
echo "</td>";
echo "</tr>";
}
}
?>
</table>
</p>
		</div>


The ajax file that calls the php file on a timer to refresh it.
Code: 
GetXmlHttpObject = function()
{
var XMLHttp = null;
// active x internetexplorer ---------------------------------------------------------
try
{
	XMLHttp = new ActiveXObject('MSXML2.XMLHTTP.3.0'); // ie7
}
catch (e)
{
try
{
	XMLHttp = new ActiveXObject("Msxml2.XMLHTTP"); //ie 6
}
catch(e)
{
try
{
	XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");//ie older versions
}
catch(e)
{
}
}
}
// active x internetexplorer ---------------------------------------------------------

if (XMLHttp == null)
{
XMLHttp = new XMLHttpRequest();
}
return XMLHttp;
}

// Make the XMLHttpRequest object
var http = GetXmlHttpObject();

function sendRequest(page) {

// Open PHP script for requests
http.open('get', page);
http.onreadystatechange = handleResponse;
http.send(null);

}

function handleResponse() {

if(http.readyState == 4 && http.status == 200){

// Text returned FROM the PHP script
var response = http.responseText;

if(response) {
// UPDATE ajaxTest conten
document.getElementById("whoonline").innerHTML = response;
}

}

}

function repeatloop()
{
sendRequest('class/sidebar/whos_online.php'); 
setTimeout("repeatloop()", 50000);
}

window.onload=function() {
repeatloop();
}
 
babyjenniferLB said:
A new one here, my whos online system uses ajax an im pretty sure there is a much better implementation than the work around i am using as my ajax skills are non existent.
Click to expand...

I guess you're just asking about making some of the code a little neater, rather than there being a problem with the code that you'd like fixed. So I'll work from that assumption.

PHP: More efficient echo of HTML
PHP: 
$x = "My Title";
// The EOD below can be any name, just has to match the
//  last line before the semicolon.
echo <<<EOD
<h1>$x</h1>
<p>Some paragraph text. Calling functions is a little
harder {${func()}} is what you can do.</p>
EOD;
function func() { echo "function text"; }
This will help keep you from having to escape so many quotes and makes it somewhat more readable. You can use variables name within it, and even call functions.

JavaScript: I believe I can simplify your GetXmlHttpObject function
PHP: 
GetXmlHttpObject = function() {
  try {
    return (window.XMLHttpRequest) ? new XMLHttpRequest() /* IE7 & non-IE */
      : new ActiveXObject("Microsoft.XMLHTTP"); /* IE6 and older */
  }
  catch(e) { return null; /* catch old browsers */ }
};
// Make the XMLHttpRequest object
var http = GetXmlHttpObject();
...
window.onload=function() {
  if (http != null) repeatloop();
}
I haven't thoroughly tested this code though. I don't use AJAX for anything currently so don't get much practice.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back