PDA

View Full Version : URL for Dynamic Ajax Content



squizeers
10-16-2010, 04:37 AM
1) Script Title:
Dynamic Ajax Content

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

3) Describe problem:

I am using ajax to load the external pages into a div. Everything works fine. However, I cannot get the url for the page that is loaded into the div.
Link to the project:
www.rajumaharjan.com/victoria

when you navigate through the pages the url remains same. Is there any way to get the specific url for each page?foe example,
when you click on contact page, url would be: www.rajumaharjan.com/victoria#contact

Any help or the direction would be much appreciated.

jscheuer1
10-16-2010, 03:33 PM
I see that you already have modified the script with your own:


function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(containerid).innerHTML=page_request.responseText
$("a[rel='tufcoat_product']").colorbox();
<!--$(".resource").colorbox({width:"50%", inline:true, href:"#verification"});-->
}
}

The highlighted is not a valid javascript comment. Relying upon that syntax to comment javascript will get you into trouble eventually and may even be causing a nonfatal javascript error here. There are two valid ways to comment in javascript, to the end of the line:


//$(".resource").colorbox({width:"50%", inline:true, href:"#verification"})

or within delimiters:


/*$(".resource").colorbox({width:"50%", inline:true, href:"#verification"})*/

Since you're already using your own HTML markup (ul's) here and it resembles that of this script:

http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm

you could use that script with your styles instead of the ones offered with it.

That script has two advantages here:


It allows a callback for each AJAX loaded page.
It allows persistence of the choice.


Once you get it setup, you could make the callback (highlighted) something like (as explained on http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/ajaxtabs_suppliment2.htm):


<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true);
countries.setselectedClassTarget("link"); //"link" or "linkparent"
countries.init();

countries.onajaxpageload=function(pageurl){
location.hash = '#' + pageurl.substring(pageurl.lastIndexOf('/') + 1, pageurl.lastIndexOf('.'));
};

</script>

The reason I mention the persistence is that once you get the hash in the URL, you would probably want a refresh of or a return to the page to redisplay the hash content.

Alternatively, since you're already using jQuery 1.4.2, it has robust AJAX functions. So you could save bandwidth by using those instead of either of these standalone AJAX scripts. However, you would need either your own cookie unit for persistence, or better yet a way to use the hash to load the desired content on refresh or return.

squizeers
10-21-2010, 05:54 AM
Thank you so much for the explanation and guidance. I will try it out.

squizeers
10-21-2010, 07:19 PM
I tried it out and it worked perfectly. However my goal was have the colorbox pop up the images once the page has been pulled into the div. And it doesn't seem to be working. COuld you please shed some light on this issue.
Link for the test: www.rajumaharjan.com/ajaxtabs

squizeers
10-21-2010, 11:08 PM
UUHHHH! its been whole day I am trying to figure out. The function(pageurl) and function for the fancybox just conflict with eachother (I guess) both dont work together. Any help will be much appreciated. The picture does not pop up into the fancybox until page is refreshed.

www.rajumaharjan.com/ajaxtabs

jscheuer1
10-22-2010, 05:36 AM
For many reasons, this will never work:


var countries=new ddajaxtabs("countrytabs", "submain_gallery")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.onajaxpageload = function(a){
jQuery("a[rel=example_group]").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
}
});
};
countries.init();
jQuery('a[rel=#default]').click(function(a){setTimeout(countries.onajaxpageload, 0)});


countries.onajaxpageload=function(pageurl){
location.hash = '#' + pageurl.substring(pageurl.lastIndexOf('/') + 1, pageurl.lastIndexOf('.'));
};

It does work for the hash though. Now, assuming that your fancybox code is OK, I'd do this:


var countries=new ddajaxtabs("countrytabs", "submain_gallery")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init();
countries.onajaxpageload = function(pageurl){
location.hash = '#' + pageurl.substring(pageurl.lastIndexOf('/') + 1, pageurl.lastIndexOf('.'));
jQuery("a[rel=example_group]").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
}
});
};

If that doesn't work, it's probably something with the fancybox code. To test that (only if the above doesn't work) do like:


var countries=new ddajaxtabs("countrytabs", "submain_gallery")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init();
countries.onajaxpageload = function(pageurl){
location.hash = '#' + pageurl.substring(pageurl.lastIndexOf('/') + 1, pageurl.lastIndexOf('.'));
jQuery("a[rel=example_group]").fancybox();
};

That should (as long as my code is correct) at least get you a very basic fancybox.

squizeers
10-22-2010, 07:10 PM
Thanks much. Its working now

squizeers
10-23-2010, 05:08 AM
Couple more questions:
1) Everything works fine but any link outside the <ul class="shadetabs" id="countrytabs"> doesnot seem to work.
For example, in www.rajumaharjan.com/etos, the logo has link to index2.html but it does not load the index2.html in its original state meaning, it doesn't show the home page with random pictures loaded into the right_container div. Is there any way to get back to the home page?

2) The URL produced by ...... countries.onajaxpageload = function(pageurl){
location.hash = '#' + pageurl.substring(pageurl.lastIndexOf('/') + 1, pageurl.lastIndexOf('.')); .........
if pased into the browser, it doesn't load the exact page.
For example, the url produced, www.rajumaharjan.com/etos#about , if pasted in a browser, the page is not directed to the about page of the site, instead it loads the home page. Is there any solution for this?

jscheuer1
10-23-2010, 03:51 PM
Both of those points are the result of using a cookie to remember what's what.

For #1, if there is a cookie and the page you are going to has the script we've been working on, it will load in that external content and switch the hash to that external content's filename on the new page.

For #2 that means if you go to the page using just a hash, it will it ignore it because a hash is only for navigation within a page and you have no anchors with the hash names. Even if you did, they wouldn't do what I think you are looking for. And at the same time, the same thing as happens in #1 will here as well.

We could kill the cookie for all links not used by our script, and detect the hash and make a cookie of it if found. But it would be better to make a custom script of this using jQuery methods and no cookie. That way it would detect the hash and work from it and not send the hash to other pages.

That would also (since you are already using jQuery on the pages) make the code more efficient. I had mentioned this all before, except I hadn't realized the extent to which using the cookie would become problematic.

Give me a little time to work up the alternate code. Be aware that this will be in place of the ajaxtabs script, not a supplement to it.

jscheuer1
10-23-2010, 06:53 PM
OK, replace:


<script type="text/javascript" src="ajaxtabs/ajaxtabs.js"></script>

with:


<script type="text/javascript" src="jqueryloadajax.js"></script>

In jqueryloadajax.js put:


jQuery(function($){
var ajaxrel = 'countrycontainer', //set rel attribute for ajax activation
ajaxtarget = 'right_container', //set id of target container

hash = location.hash.replace(/#/, '');
ajaxtarget = $('#' + ajaxtarget);
$('a[rel=' + ajaxrel + ']').click(function(e){
e.preventDefault();
var url = this.href;
ajaxtarget.load(url, function(){
location.hash = '#' + url.substring(url.lastIndexOf('/') + 1, url.lastIndexOf('.'));
$("a[rel=example_group]").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
}
});
});
}).each(function(){
if(this.href.indexOf(hash) > -1){
$(this).click();
return false;
}
});
});

Get rid of:


<script type="text/javascript">
var countries=new ddajaxtabs("countrytabs", "right_container")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init();
countries.onajaxpageload = function(pageurl){
location.hash = '#' + pageurl.substring(pageurl.lastIndexOf('/') + 1, pageurl.lastIndexOf('.'));
jQuery("a[rel=example_group]").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
}
});
};
</script>

But there will still be at least one problem. I see that you're planning on using the same filename for antiques and probably repros as well for various items, just in different folders. So our original plan and this one will fail once that's established, unless you can use unique filenames for those pages, or we rethink the hash and/or how it's applied. We could perhaps include a rev attribute for those links requiring a folder.

squizeers
10-24-2010, 04:19 PM
Thank you so much for being so patient and helping me understand what the script is doing.

I dont see any problem giving each page a unique name so that issue is not an issue anymore but I still didn't get what you meant by:

For #1, if there is a cookie and the page you are going to has the script we've been working on, it will load in that external content and switch the hash to that external content's filename on the new page.

I don't know about the cookies.
What I have done is duplicated the index.html page and named it index2.html. So as you are saying, both pages have the same scripts but still its not working. :(

jscheuer1
10-24-2010, 09:46 PM
Are you using the new code? (See post #10 in this thread for the new code, follow the instructions there, requires removing the old code.) With the old code cookies are used, so the problem is unavoidable without convoluted modifications that might never be able to adequately cover all eventualities. With the new code, only the hash is used to determine what gets loaded. It may still have problems, but those should be able to be worked out more easily.

Once you've switched to the new code, if there's still a problem, give me the full address to the pages involved. Right now I cannot find index2.html. However, rajumaharjan.com/ajaxtabs/index.htm appears to still be using the old code.

squizeers
10-25-2010, 03:22 AM
I am really sorry, I didn't mention the URL.
The URL I am currently working is: www.rajumaharjan.com/etos.
I used the code you posted on post#10.
Understanding that, I went ahead and used a javascript in about page and it worked like magic which would not have been possible with the code I used before. Am I correct?
However, the link to show up the home page when clicked on the logo doesn't seem to work.
I am very very thankful to you and this site for helping me learn so much.
Thank you once again.

jscheuer1
10-25-2010, 04:32 AM
OK, I see the problem now. Where I put:



.each(function(){
if(this.href.indexOf(hash) > -1){
$(this).click();
return false;
}
});

I didn't realize that if the variable hash was empty (navigating directly to the page ie: rajumaharjan.com/etos/index.html), the indexOf(hash) of anything would be 0, thus greater than -1 for the first item's in our collection of ajax activated anchors href (collection/chairs/chairs_antiques.html). It would have 'matched' anything, but the way the code is written it stops after the first match and loads the chairs_antiques.html and changes the location.hash and your stuck in that more or less endless loop again.

We can fix that by doing:


jQuery(function($){
var ajaxrel = 'countrycontainer', //set rel attribute for ajax activation
ajaxtarget = 'right_container', //set id of target container

hash = location.hash.replace(/#/, '');
ajaxtarget = $('#' + ajaxtarget);
ajaxrel = $('a[rel=' + ajaxrel + ']').click(function(e){
e.preventDefault();
var url = this.href;
ajaxtarget.load(url, function(){
location.hash = '#' + url.substring(url.lastIndexOf('/') + 1, url.lastIndexOf('.'));
$("a[rel=example_group]").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
}
});
});
});
if(hash){
ajaxrel.each(function(){
if(this.href.indexOf(hash) > -1){
$(this).click();
return false;
}
});
}
});

squizeers
10-25-2010, 04:43 AM
Best class I have ever had with anyone.
TWO THUMBS UP

squizeers
10-27-2010, 01:09 AM
After checking the site www.rajumaharjan.com/etos
All the links ( collection-its sub categories and ABOUT) works. Link at the logo also works.BUT only in FIREFOX.
I tested in IE, all the links in collection and its categories are working but the link for ABOUT is not working. Again the link to the logo is working fine.

Same case with the chrome.

In SAFARI, it works fine.

Why is that so?

jscheuer1
10-27-2010, 06:59 AM
Chrome's OK here. IE is good except for ABOUT. It appears to be importing the page, just that it doesn't seem to see it as containing anything visible. This could be because there's no formal body element on the page, nor any formal end to the head element (from the rajumaharjan.com/etos/about.html page's source code, highlighted comment added):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN">
<head>


<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function() { // toggles the slickbox on clicking the noted link
jQuery('#content2').hide();// hides the slickbox as soon as the DOM is ready
jQuery('a#toggle').click(function() {
jQuery('#content2').slideToggle(400); return false; }); });
</script>

<script type="text/javascript">
jQuery(document).ready(function() { // toggles the slickbox on clicking the noted link
jQuery('#content4').hide();// hides the slickbox as soon as the DOM is ready
jQuery('a#toggle2').click(function() {
jQuery('#content4').slideToggle(400); return false; }); });
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>ETOS</title>
<!-- no formal end to the head element, no formal beginning to the body element -->
<p>Etos, a vibrant partnership of two young international designers, perfectly balances a fusion of European
glamour and Manhattan practicality. Mercedes

Ideally pages for AJAX importation should contain only the content required bounded by a div (or any valid xml node) element. So the rajumaharjan.com/etos/about.html page's source code in its entirety should look like so:


<div>
<p>Etos, a vibrant partnership of two young international designers, perfectly balances a fusion of European
glamour and Manhattan practicality. Mercedes and Alberto met at design school in New York City, where their
passion for merging the old with the new led them to open a boutique that functions as a canvas for their
eclectic styles.</p>
<p>The Etos austhetic is inspired by a wide range of cultural influences from French, African and Pre-Colombian,
to Asian and American. The gallery is filled with carefully selected furniture, accessories, and art that share a
beauty and an elegance. The designers chose a neutral palette highlighted by subtle hints of seasonal colors
that reflect a chic simplicity.</p>
<p>At Etos vignettes inspire the imagination an allow the designers to share the sensibility they have acquired
from their individual travels as well as from their respective European and South American backgrounds. The
boutique will constantly evolve in keeping with the seasions and the demans of an ever changing lifestyle.
Because considerate service is just as important as the products sold, Etos is committed to making sure their
quests feel welcome. When clients cross the doors of this boutuque they will encounter committed professionals
who want to share their skills and help customers integrate what they see at Etos into their lives. Etos
also offers interior design services.</p>
<p>"Etos, more than anything, is a way of living."</p>


<div id="content1">MERCEDES DESIO
<div id="content2"><p>After living in several places around the world, Mercedes Desio settled in New York City where she studies finance at NYU. Once she obtained her finance degree, she pursued her passion for interior design, which she developed since her early years while drawing floor plans for her father, an earned a degree from NYSID. Mercedes has projects in Miami, New York and London.</p>
<a id="toggle" href="#">close</a></div>
<a id="toggle" href="#">read more</a></div>

<div id="content3">ALBERO VILLALOBOS
<div id="content4"><p>ALberto Villalobos studied interior design in Colombia while working in an art gallery developing his passion for art. He deepened his knowledge after moving to New York and getting a degree from the New York School of Interior Design. After working in the trade
for some time, Alberto developed his own clientele and has worked on several projects commissioned by his clients in New York, New
Jersey, Miami, and Colombia.</p>
<a id="toggle2" href="#">close</a></div>
<a id="toggle2" href="#">read more</a></div>



<div id="footer">67 EAST 11TH STREET NEW YORK, NY 10003 INFO@ETOSNYC.COM</div>
</div>
</div>
</div>

squizeers
10-27-2010, 07:59 PM
Thanks for the quick response. But how about the javascript? where will it go? I have updated the http://rajumaharjan.com/etos/#about page with the javascript to toggle the divs. As soon as I put the javascript, IE doesn't seem to pull the page into the right_container. I thought that the following javascript to toggle the divs:

<script type="text/javascript">
jQuery(document).ready(function() { // toggles the slickbox on clicking the noted link
jQuery('#content2').hide();// hides the slickbox as soon as the DOM is ready
jQuery('a#toggle').click(function() {
jQuery('#content2').slideToggle(400); return false; }); });
</script>

<script type="text/javascript">
jQuery(document).ready(function() { // toggles the slickbox on clicking the noted link
jQuery('#content4').hide();// hides the slickbox as soon as the DOM is ready
jQuery('a#toggle2').click(function() {
jQuery('#content4').slideToggle(400); return false; }); });
</script>

needed to be into the index.html.Even then it doesn't work. Is any of the scripts are conflicting?

jscheuer1
10-28-2010, 03:58 AM
First find out if my recommended change fixes at least the appearance of the content in IE.

After that we can work on the other issue. Scripts on AJAX imported content do not fire. They can be made to fire as part of the onreadystatechange function of the import. This is easier to do though now that we are importing via jQuery. It can be done the same way, as part of the function here:


ajaxtarget.load(url, function(){
location.hash = '#' + url.substring(url.lastIndexOf('/') + 1, url.lastIndexOf('.'));
$("a[rel=example_group]").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
}
});
});

Which is the success callback. But just like fancybox, the scripts have to already be on the 'top' page.

It's also possible in some situations to use jQuery's live() function, which binds events to elements even if they don't show up until later.

But, as I say, let's just make sure we can get the content in first.

squizeers
10-28-2010, 04:57 PM
Thank you once again.

Yes it did work (appeared in IE when the about page was formatted the way you recommended) you can see it working at http://www.rajumaharjan.com/etos/#contact

But the same page with javascript does not appear in IE. you can see it not working at
http://www.rajumaharjan.com/etos/#about


Just in case if you do not like the way i am sending you the issues as PM and also into the post let me know.

jscheuer1
10-28-2010, 05:40 PM
This, in altered form:


<script type="text/javascript">
jQuery(document).ready(function() { // toggles the slickbox on clicking the noted link
jQuery('#content2').hide();// hides the slickbox as soon as the DOM is ready
jQuery('a#toggle').click(function() {
jQuery('#content2').slideToggle(400); return false; }); });
</script>

<script type="text/javascript">
jQuery(document).ready(function() { // toggles the slickbox on clicking the noted link
jQuery('#content4').hide();// hides the slickbox as soon as the DOM is ready
jQuery('a#toggle2').click(function() {
jQuery('#content4').slideToggle(400); return false; }); });
</script>

belongs on the rajumaharjan.com/etos/index.html page, like so:


<style type="text/css">
#content2, #content4 {
display: none;
height: 0; /* this one may have to be removed */
}
</style>
<script type="text/javascript">
jQuery('a.toggle').live('click', function(){
jQuery('#content2').slideToggle(400); return false;
});
jQuery('a.toggle2').live('click', function(){
jQuery('#content4').slideToggle(400); return false;
});
</script>

It can go in the head of that page, as long as it's after:


<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

The HTML code on the rajumaharjan.com/etos/about.html page should be changed as highlighted:


<div id="content1">MERCEDES DESIO
<div id="content2"><p>After living in several places around the world, Mercedes Desio settled in New York City where she studies finance at NYU. Once she obtained her finance degree, she pursued her passion for interior design, which she developed since her early years while drawing floor plans for her father, an earned a degree from NYSID. Mercedes has projects in Miami, New York and London.</p>
<a class="toggle" href="#">close</a></div>
<a class="toggle" href="#">read more</a></div>

<div id="content3">ALBERO VILLALOBOS
<div id="content4"><p>ALberto Villalobos studied interior design in Colombia while working in an art gallery developing his passion for art. He deepened his knowledge after moving to New York and getting a degree from the New York School of Interior Design. After working in the trade
for some time, Alberto developed his own clientele and has worked on several projects commissioned by his clients in New York, New
Jersey, Miami, and Colombia.</p>
<a class="toggle2" href="#">close</a></div>
<a class="toggle2" href="#">read more</a></div>

jscheuer1
10-29-2010, 03:57 AM
Ooops! I was rushed and made a typo or two in the code, sorry. And although Dreamweaver is often not to be trusted in cases like this, here it's correct. It should be (now also corrected in the original post):


<script type="text/javascript">
jQuery('a.toggle').live('click', function(){
jQuery('#content2').slideToggle(400); return false;
});
jQuery('a.toggle2').live('click', function(){
jQuery('#content4').slideToggle(400); return false;
});
</script>

And I should have mentioned before that this is untested. Doing so would be complicated due to the AJAX involved in importing the content. At least now we have the correct syntax. If there are other problems I would probably need to see the pages (with this new code on them) involved to spot and correct any problem(s).

One thing I was wondering, is there any reason why you used two elements with the same id? I mean the correct thing to do in a case like that is to use class instead. Only one element per page per id is allowed in standards compliant HTML. Not always, but often if one violates this it causes problems in javascript.

Had you tried it with class and had a problem?

squizeers
10-29-2010, 04:35 AM
Thank you so much. With your corrected code and a very simple modification in about.html,
<div id="content1"><a class="toggle" href="#">MERCEDES DESIO</a></div>
<div id="content2"><p>After living in several places around the world, Mercedes Desio settled in New York City where she studies finance at NYU. Once she obtained her finance degree, she pursued her passion for interior design, which she developed since her early years while drawing floor plans for her father, an earned a degree from NYSID. Mercedes has projects in Miami, New York and London.</p>
</div>

<div id="content3"><a class="toggle2" href="#">ALBERO VILLALOBOS</a></div>
<div id="content4"><p>ALberto Villalobos studied interior design in Colombia while working in an art gallery developing his passion for art. He deepened his knowledge after moving to New York and getting a degree from the New York School of Interior Design. After working in the trade
for some time, Alberto developed his own clientele and has worked on several projects commissioned by his clients in New York, New
Jersey, Miami, and Colombia.</p>
</div>

I was able to get what I wanted to do with the toggle.
The reason why I used two elements with the id, is that because I was not aware of "Only one element per page per id is allowed in standards compliant HTML. Not always, but often if one violates this it causes problems in javascript." Moreover, I am still learning and you have helped me a lot. Thanks much.

jscheuer1
10-29-2010, 04:39 AM
Great! Oh, and BTW - no need to send me PM's like you've been doing. I always check my active threads first. I've just been deleting the PM's and would rather you didn't send them.

I like to reserve PM's for things that cannot be put in the open forum.

squizeers
10-30-2010, 03:06 AM
Thank you so much for all your patience and great help.
Yes I was wondering if you do not like getting the PMs. I will not do that again. I am working on other pages. Hope with all your help I will be able to figure rest of the pages.
Thank you once again.