trouble with include HTML

[molendijk]

ok I put a test copy online.

I'm probably being blind but I don't see the test copy

[jscheuer1]

I decided to review the documentation on jQuery's AJAX shorthand load() function and it explicitly specifies scripts will be loaded and executed when used in the way I have shown you. But one thing I noticed is it can cache the result. Meaning if you change header3.html, changes might not show up immediately for a user who has recently visited. If this is a problem, you can add the highlighted to the script that loads the external content:

<script type="text/javascript">
jQuery(function($){
	$.ajaxSetup({cache: false});
	$('#header3').load('header3.html');
});
</script>

Then each time it's called, it will make a fresh request. You really should NOT do this unless you've just made a critical change to header3.html as it will slow things down more than necessary and put extra demands on the server. Users will eventually be shown the updated content anyway. And new users, and those who have recently cleared their caches and/or whose cache of that page (header3.html) has expired, will always get the most recent version.

[mcolton]

Well, it was working for the first part of the header. When I added the rest of the header (the ddsmoothmenu), it didn't work.
I did add that 1 line for ajaxsetup. The new header3.html is shown below. it is still online at lotatennis.com. Go to lower left and click "test". Then under "All About LOTA" click "Marty test only"

<div>
  <span style="width:15%; text-align:center; float:left">
    <img src="lotalogo.jpg" width="195" height="187" alt="LOTA logo" />
	</span>		
  <p style="width:61%; font-family: arial black; text-align:center; color:blue; float:left">
	  <span style="font-size:40px; font-style:italic">
       Lake Oconee Tennis Association<br />
    </span>
	  <span style="font-size:16px; text-align:center; vertical-align:top; color:black">                
       PO Box 58, Greensboro, GA 30642
    </span>
	</p> 
	<p style="width:20%; text-align:right; float:left; margin-left: 10px">
    <div id="cont_207c19025454af9f9b8d13576ae36716">
	     <script type="text/javascript" async src="https://www.theweather.com/wid_loader/207c19025454af9f9b8d13576ae36716">
 	     </script>
    </div>			
  </p>
</div>

<p><br /><br /><br /><br /><br /><br /><br /><br />
</p>

<!-- Markup for mobile menu toggler. Hidden by default, only shown when in mobile menu mode -->
<a class="animateddrawer" id="ddsmoothmenu-mobiletoggle" href="#">
<span></span>
</a>

<div id="smoothmenu1" class="ddsmoothmenu">
  <ul>
  <li><a href = "#">All About LOTA</a>
    <ul style="width:300px">
      <li><a href="boardmembers.htm">Board Members</a></li>
      <li><a href="president.pdf">Message from Kathy Mitchell, President</a></li>
      <li><a href="passwd-protect/roster.pdf">Member Roster (need password)</a></li>
      <li><a href="photos.htm">Photos</a></li>
      <li><a href="statistics.htm">Member Statistics</a></li>
      <li><a href="hall-of-fame.htm">Hall of Fame</a></li>
      <li><a href="history.htm">Our History</a></li>
      <li><a href="memorial.htm">In Memoriam</a></li>
      <li><a href="google.htm">Google directions</a></li>
      <li><a href="newindex3.htm">testing - Marty only</a></li>
	  	<li><a href="directions.pdf">Directions to Courts</a></li>  
      <li><a href="LOTA Bylaws 10-19-15.pdf">Bylaws (boring)</a></li>
    </ul>
  </li>
  <li><a href="#">LOTA Recreational Tennis</a>
    <ul>
		  <li><a href="mixed.htm">Mixed Doubles</a></li>
  		<li><a href="ladies.htm">Ladies' Doubles</a></li>
	  	<li><a href="singles.htm">Ladies' Singles&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
		  <li><a href="mens.htm">Men's Doubles&nbsp;&nbsp;</a>
    	</li>
    </ul>
  </li>
  <li><a href="#" style="font-style:italic">Tournament</a>
    <ul>
		  <li><a href="2016-regulations.pdf">2016 LOTA Classic Regulations</a></li>
  		<li><a href="2016-men-results.pdf">2016 Scoresheet Men</a></li>
	  	<li><a href="2016-ladies-results.pdf">2016 Scoresheet Women</a></li>
		  <li><a href="recap.pdf">2016 LOTA Classic Recap</a></li>
  <!--
     	<li><a href="classic-registration.htm">2016 Registration Form</a></li>
		  <li><a href="2015-classic-sponsors.pdf">2015 LOTA Classic Sponsors</a></li>
  		<li><a href="https://www.facebook.com/media/set/?set=a.412557578798963.98543.166617693392954&type=1&l=83144e1220">2012 Draw Party Pictures</a></li>
	  	<li><a href="https://www.facebook.com/media/set/?set=a.412562352131819.98544.166617693392954&type=1&l=3fd172412c">2012 Tournament Pictures</a></li>
		  <li><a href=" https://www.facebook.com/media/set/?set=a.412578928796828.98546.166617693392954&type=1&l=3cdf6d1a1c">2012 Party Pictures</a></li>
  -->
    </ul>
  </li><li><a href="#">USTA Links</a>
    <ul>
      <li><a href="http://www.usta.com"><img src="ustalogo.jpg" width="30" height="30" alt="USTA" />&nbsp;USTA Tennis</a></li>
      <li><a href="http://www.southern.usta.com"><img src="new-usta-ss.gif" width="96" height="40" alt="Southern USTA" />&nbsp;USTA Southern</a></li>
      <li><a href="http://www.ustageorgia.com"><img src="usta-ss-ga-button.jpg" width="119" height="40" alt="GA USTA" />&nbsp;USTA Georgia</a></li>
      <li><a href="https://tennislink.usta.com/Dashboard/Main/Login.aspx?App=3">Tennis Link</a></li>	 
      <li><a href="usta-regs.pdf">Local USTA League Regulations</a></li>
      <li><a href="http://www.usta-sta.com/sub_membership_application.htm">Join USTA</a></li>
      <li><a href="http://assets.usta.com/assets/1/15/2011FAC.pdf">2011 Friend at Court - Tennis Rules: You should know them</a></li>
      <li><a href="ntrpcategories.htm">NTRP Categories</a></li>
      <li><a href="http://www.tennisresortsonline.com">Tennis Resorts Online</a></li>
  	</ul>
  </li>
  <li><a href="#">Lake Oconee Links</a>
    <ul style="width:250px">
      <li><a href="http://www.greeneccoc.org">Greene County</a></li>
      <li><a href="http://www.madisonga.org">Morgan County</a></li>
    	<li><a href="http://www.eatonton.com">Putnam County</a></li>
      <li><a href="http://www.milledgevillega.com">Baldwin County</a></li>
      <li><a href="http://www.reynoldslakeoconee.com">Reynolds Lake Oconee</a></li>
      <li><a href="http://www.harborclub.com">Harbor Club</a></li>
	    <li><a href="http://www.cuscowilla.com">Cuscowilla</a></li>
  	  <li><a href="http://www.LiveAtLakeOconee.com">Del Webb</a></li>
	  </ul>
  </li>
  <li><a href="#">Newsletters</a>
    <ul style="width:250px">
      <li><a href="newsletter-aug-2015.pdf">August 2015</a></li>
	  </ul>
  </li>
  <li><a href="#">Calendars</a>
    <ul style="width:250px">
      <li><a href="usta-lota-calendar2016.pdf">2016 LOTA USTA Calendar.</a></li>	 
	  </ul>
  </li>
  <li><a href="videos.htm">Tennis Videos</a>
    <ul style="width:250px">
	  </ul>
  </li>
  <br style="clear: left" />
</div>

[jscheuer1]

OK, I see what's happening. You're loading the markup for the menu in the include, but initializing it on the page itself, before the include loads. You might be able to initialize it on the include, but you for sure can do it as a return (success) function of the load, which might be best -

On the newindex3.htm page, get rid of:

<script type="text/javascript">
ddsmoothmenu.init({
	mainmenuid: "smoothmenu1", //menu DIV id
	orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
	classname: 'ddsmoothmenu', //class added to menu's outer DIV
	//customtheme: ["#1c5a80", "#18374a"],
	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>

Change the load command's script to (additions highlighted, best to just copy and paste over what you have though):

<script type="text/javascript">
jQuery(function($){
	$.ajaxSetup({cache: false}); // recommend commenting this out once things are working for a week or so
	$('#header3').load('header3.html', function(){
		ddsmoothmenu.init({
			mainmenuid: "smoothmenu1", //menu DIV id
			orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
			classname: 'ddsmoothmenu', //class added to menu's outer DIV
			//customtheme: ["#1c5a80", "#18374a"],
			contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
		});
	});
});
</script>

And on a side note, you're not using this anymore as far as I can see:

<script type="text/javascript" src="https://www.w3schools.com/lib/w3data.js"></script>

If I'm right about that, best to get rid of it and anything else the page is no longer using, like perhaps the w3.css link.

[mcolton]

Wow. Lots to play with. I'll work on it. thanks.
Tried the changes. I get the menu fine but the spacing on the weather app is not right

[jscheuer1]

Great on the menu! The weather app you will just have to play with the layout and css to get it where you want it. Or, if you need help with that, start a new thread, css and layout are not my strong points, others here have more experience in that area, though I'm good at tweaking it sometimes, so I will have a look. The thing to remember, is - it probably isn't any different than if it were on the page where you're importing it to in the first place.

[mcolton]

Thanks. That's the weird part. If you run it online, the page before you click "Marty test only" shows the weather app correctly. When you click "Marty test only", it doesn't work.
I'm pretty sure the code is the same in both places but I'll check again.

[mcolton]

I just tried it again and it seems to work.
Thanks for all your help. I learned a lot

[jscheuer1]

OK, as promised, I did take a look and see it's working, but it wasn't with what you had before. I think there are two things about basic HTML and basic css you either aren't aware of, or that you missed in your earlier attempt.

Now since it seems to now be working, I wouldn't worry about these too much.

That said, these two are items are as follows.

1.) If you have a P element that contains another block level element like a div or another P, that will automatically close the P element, so styles on that P will not be used by its apparent child elements if they are block level. In the earlier demo I think this caught you up because you had the float on the P, and had a div inside it that contained the weather app, so the app wasn't floating like you had set for the P.

2.) Once you have established a working float, it doesn't take up any vertical layout space. I believe you have two floats in the header, one for the logo and one for the weather app. I think you overcame this by adding a lot of BR elements. But if you clear the float(s), you don't need so many and don't have to guess the optimal amount to use, ex:

<div>
<div style="float: left;">some content that has intrinsic height, like a logo image</div>
<div style="float: right;">some content, maybe a weather app, that has intrinsic height</div>
</div>
<div style="clear: both;"></div>
Now anything here will automatically go below the image and the weather app

[mcolton]

I've been using this "include" stuff we've worked on for 4 months. It is working correctly however when I load the page, the bottom half loads quickly but then the "included" part loads 4-5 seconds later.
website is www.lotatennis.com

Thanks if you can look at this