Need same random include at two places?

**printman55** · 06-11-2010, 05:39 PM

1) Script Title:Ajax Rotating Includes Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ajaxrotate.htm

3) Describe problem: I have set up a test page using the include script in two locations. How can I get the lower right cell to display the same file that was selected for the top cell?
http://www.rspsitedesign.com/ajax/ajax-test.html

Use refresh and you will see how the selection process works.
There is a one in three chance they may be the same, but I need it exact. For example, I would need a picture of a commentator in one cell to match his comments in another cell on the page.

I described the issue badly above. What really is needed is a picture to match the file that is selected.
If for example, there are 3 files: file.html, file2.html and file3.html.
Also there are three picture files: pic.html, pic2.html and pic3.html.
When file2.html is selected and placed in one page location, it knows to select pic2.html to place in a different location.

Also if you view the test page above in IE and Firefox you get different renderings??

**jscheuer1** · 06-14-2010, 06:31 AM

This scrpt isn't really setup to work that way. We can 'short circuit' it to force the random choice to work out to be the same index for each array. Add the following highlighted code as shown:

Code:

<script type="text/javascript">

/***********************************************
* Ajax Rotating Includes script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//To include a page, invoke ajaxinclude(files_array, "ROTATETYPE") in the BODY of page.
//* file_array is the name of the array containing your list of files to include.
//* For "ROTATETYPE", valid values are "dailyw", "dailym", and "random", for each day of the week, each day of the month, and random, respectively.
//* Included file MUST be from the same domain as the page displaying it.

//Enter path to list of files to display.
//For rotatetype="dailyw", there must be 7 files, and for "dailym", 31 files. Otherwise, no restriction:

var includefiles=["file.html", "file2.html", "file3.html"]
var picfiles=["pic.html", "pic2.html", "pic3.html"]

;(function(){
	if(includefiles.length !== picfiles.length){
		alert('includefiles and picfiles Must Have the Same Number of Entries!');
		return;
	}
	var index = Math.floor(Math.random() * includefiles.length);
	includefiles = [includefiles[index]];
	picfiles = [picfiles[index]];
})();

var rootdomain="http://"+window.location.hostname

function ajaxinclude(files_array, rotatetype){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XM . . .

About the rendering issue, ain't cross browser design fun? Anyways, you have a table for which you have specified a border attribute of 1. There is no standard as to what color that border must be. In order to create a visual contrast, the browser uses its best guess based upon what the surrounding colors are. The routines for this vary. Generally it will be OK, even if different. If you want a more consistent appearance, use style. Here's one way - give your table a class, for example:

Code:

<body>
<table class="displayTable" width="700" border="1" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>&nbsp;</td>
    <td>&nb . . .

Now you may place a stylesheet in the head of the page (or add its rules to your existing stylesheet):

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.displayTable {
	border-collapse: collapse;
	border: 1px solid #fff;
}
.displayTable td {
	border: 1px solid #fff;
}
</style>
<script type="text/javascript">

/***********************************************
* Ajax Rotating Includes . . .

**printman55** · 06-14-2010, 01:50 PM

The code modification works great. I changed each of the images so we would know which pic went with which file. I still having trouble with the styling of the text. I styled the font at the cell level in ajax-test.html. For an example in file.html I deleted the stylesheet which I used to style the sheet. I Firefox there is no change. In IE the font appears as much larger text. In file2&3.html I left the style there. I Firefox there is no change. However in IE the font is still the larger text. How does one overcome this styling issue on include pages?

**jscheuer1** · 06-14-2010, 03:01 PM

First off, from here I don't see the problem. So either you fixed it, or there is some setting in your browser causing this. Generally, when styling includes, one should use a stylesheet on the 'top' page to style them. Let's say the situation is like so:

HTML Code:

<div id="contentarea"></div>

And that's where the external content will end up. Let's say you have a span in the external content. You could then put in your stylesheet:

Code:

#contentarea span {
	font-size: 12px;
}

If you want more control, just give the elements in the includes id or class attributes and use those as hooks for the stylesheet on the 'top' page.

The reason to do it this way is that it makes changing things for all includes easier. You can even have different styles for them if included on different pages or to different content areas on the same page. And, say you have a stylesheet on the include page - some browsers will use it, others will not. Or, say you have inline style for the element on the include page - all browsers will respect that. But you would have to edit each include to make sure everything is the way you want it. Making changes would be tedious.

The best thing is to have no style of any kind (best not to use font, b, i, and other styling type tags either) on the include page. Give the elements on the include pages consistent tags and, if you need them, consistent id and/or class attributes. Set the styles for the includes in a stylesheet on or linked to the 'top' page.

**printman55** · 06-14-2010, 06:13 PM

Here is what I did to make the problem clearer. The file.html has no attached style sheet, but this style on the page

Code:

<style type="text/css">

.fontstyle2 {
	color : #FF0000;
	font-family : Arial, Helvetica, sans-serif;
	font-size : 18px;
	font-style : normal;
	font-weight : normal;
}

</style>

In Firefox it styles the same for the three files. In IE there is no styling on any page for the words FILE1, FILE2 AND FILE3:

http://www.rspsitedesign.com/ajax/ajax-test.html

**jscheuer1** · 06-14-2010, 08:25 PM

Don't put styles on file.html or on any of the included text or image pages. Put this:

Code:

<style type="text/css">

.fontstyle2 {
	color : #FF0000;
	font-family : Arial, Helvetica, sans-serif;
	font-size : 18px;
	font-style : normal;
	font-weight : normal;
}

</style>

on the 'top' page (on ajax-test.html).

**printman55** · 06-14-2010, 09:14 PM

Ok I cleared all styling from file1-3.html and placed the font style on ajax-test.html in the head section. The difference now is the font in the file1-3.html in IE is about twice the size as what it is in Firefox.

**jscheuer1** · 06-15-2010, 06:52 AM

Not here. Perhaps you are viewing an older cached version of the page. Or perhaps your settings in IE make the text appear larger. Or perhaps your settings in Firefox make the text look smaller.

For these last two, check a variety of websites around the internet. If many of those also show text size discrepancies between the two browsers, its probably a settings issue.

There often are slight differences, though not by a factor of 2.

In any case, this would be very hard for me to fix because they look exactly the same to me here, and tracing the styles in both browsers shows:

18px Arial, Helvetica, sans-serif

What version of IE are you using? Is the displayed font-family the same in both browsers?

**printman55** · 06-15-2010, 11:48 AM

Many thanks it was a cache issue. I added more stuff to file.html. It appears that I am now able to actually style items on the include page like links and text. Refresh until you get to FILE1 page. This is now getting powerful!