We help IT Professionals succeed at work.

Ajax that does show.hide div with external file, and toggle text

sandiegoscuba
on
I've search the net trying to find a specific task that I am trying to do, but have not come across anything as of yet that does all of what I need.

My project is such.

I have a background image in a <TD> that needs to be swapped out with an external file using a <DIV>. The external file is basically an html file with a slideshow. I tried inline frames, but have issues with the slideshow. So I need to load the external file via ajax. I also need a text link to toggle between "Show More..." / "Hide..." to load/unload the external file.

In addition, the event will need to hide.show other DIVs as well on the page.

Any feedback would be greatly appreciated.
Comment
Watch Question

Top Expert 2011

Commented:
use .load() for loading the external HTML file
http://api.jquery.com/load/

use .toggle() for hide/show
http://api.jquery.com/toggle/

for .load, you give it the ID of the item that is already on the page that you want the contents loaded into (a wrapper of some sort)

for .toggle, your page can include both links (More and Hide) and you simply toggle both of them opposite directions (when you click More, you show Hide and hide More, and vice-versa)

Author

Commented:
What I can not seam to get to work is the ability to toggle More/Hide and toggle an image/external html file.

Basically I'm trying to do this...
<JPG image> in a div or <td> background image
Show more... <link>

Clicking Show more... yields....

<an external html file that replaced the JPG image>
Hide... <link>

Clicking Hide... goes back to...
<JPG image>
Show more...
Top Expert 2011

Commented:
Create your page with both elements on the page.
But "Hide" the second one.
When the user clicks "More" in the jpg's div, use .toggle to Hide the jpg's div and Show the external file's div.
When the user clicks "Less" in the external file's div, use .toggle to Hide the external file's div and Show the jpg's div.

Sample below
<!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" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
#external_file_goes_here{display:none;}
</style>

<script>

function showMoreOrLess(){
  $("#jpg_goes_here").toggle();
  $("#external_file_goes_here").toggle();
}

</script>
</head>
<body>
<div id="jpg_goes_here">Some JPG Goes Here.  <a href="javascript:void(0);" onclick="showMoreOrLess()">Show more</a></div>
<div id="external_file_goes_here">Some External File content goes here.  <a href="javascript:void(0);" onclick="showMoreOrLess()">Show less</a></div>

</body>

</html>

Open in new window

Author

Commented:
But where am I calling .load() for loading the external HTML file?
Top Expert 2011

Commented:
In document.ready. I'll post a link to an example in a couple minutes when I'm back at pc
Top Expert 2011

Commented:

<script>
$(document).ready(function() {
    //Load some file into the element with id=external_file_goes_here
    $('#external_file_goes_here').load("URL of file");
</script>

Open in new window


if you are loading a page from the same server that the webpage is on, you can just put the path of the file, like this:
    $('#external_file_goes_here').load(../somedir/somefile.html");

Open in new window

Top Expert 2011

Commented:
If .load doesn't work for you, try using .get instead:
http://api.jquery.com/jQuery.get/

Author

Commented:
Not too sure why I can't get this to work, but the external file does not load.

You can view what I have here:  test.scubadive4fun.com/sample/sample.html

 
<!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" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<style>
			#slideshow{display:none;}
		</style>
		<script>
			$(document).ready(function() {
			    //Load some file into the element with id=external_file_goes_here
			    $('#slideshow').load("landscape.html");
			    };
		</script>
		<script>
			function showMoreOrLess(){
			  $("#marker").toggle();
			  $("#slideshow").toggle();
			}
		</script>

	</head>
<body>
	<div id="marker"><img src="landscape/marker.jpg" width="600" height="428">
		<br>
		<a href="javascript:void(0);" onclick="showMoreOrLess()">Show...</a>
	</div>
	
	<div id="slideshow">
		<a href="landscape.html" target="_blank">This is the html file that should be loaded.</a>
		<br>
		<a href="javascript:void(0);" onclick="showMoreOrLess()">Hide...</a>
	</div>
</body>
</html>

Open in new window

<!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" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<style>
			#slideshow{display:none;}
		</style>
		<script>
			$(document).ready(function() {
			    //Load some file into the element with id=external_file_goes_here
			    $('#slideshow').load("landscape.html");
			    };
		</script>
		<script>
			function showMoreOrLess(){
			  $("#marker").toggle();
			  $("#slideshow").toggle();
			}
		</script>

	</head>
<body>
	<div id="marker"><img src="landscape/marker.jpg" width="600" height="428">
		<br>
		<a href="javascript:void(0);" onclick="showMoreOrLess()">Show...</a>
	</div>
	
	<div id="slideshow">
		<a href="landscape.html" target="_blank">This is the html file that should be loaded.</a>
		<br>
		<a href="javascript:void(0);" onclick="showMoreOrLess()">Hide...</a>
	</div>
</body>
</html>

Open in new window

Author

Commented:
I had a syntax error with $(document).ready(function().

The external file is now loading, but for some reason when a toggle is performed, the Div for "Hide..." isn't showing.  ????

Author

Commented:
<script>
$(document).ready(function() {
$("#slideshow").load('landscape.html');
} )
</script>
Top Expert 2011

Commented:
I tested the 2nd block of HTML you posted above and saved it locally... it works for me in IE8, FF8, and Chrome 15. (I don't have your files, so I did not test the .load piece)

Visiting your site, it looks like the issue is that the link for "Hide" is not displaying when you toggle-on "slideshow".  Since the content of "slideshow" is external and you probably do not want to place the "hide" message in the external file, you would want to manually add it to the page and toggle-on that piece at the same time as you toggle-on the slideshow.

e.g., create another DIV that goes below "slideshow" that contains the call to showMoreorLess.  And be sure to hide it in the style at the top of the page
            <style>
                  #slideshow{display:none;}
                  #slideshow_hide{display:none;}
            </style>

Author

Commented:
Thanks for the added input. The solution seams to work perfect when I use a different html file. So the problems occurs only when I try to load my original HTML file.

Is it possible to load an external HTML file that also uses #(document).ready(function()?
Top Expert 2011

Commented:
The document.ready portion is for loading the external file.
Once it is loaded, that page's contents are now part of the original page.  So there should be no need to use that page's document-ready for anything (that we are discussing here).

What you need to do is either
1- add the call to showMoreOrLess into the main page underneath the "slider" div, rather than inside the slider div - right now you have it inside it, which means it "goes away" when the landscape,html page loads.
2- add it to the landscape.html page

I would only consider #2 if you are not using the landscape.html page anywhere else.

	<div id="marker"><img src="landscape/marker.jpg" width="600" height="428">
		<br>
		<a href="javascript:void(0);" onclick="showMoreOrLess()">Show...</a>
	</div>
	
	<div id="slideshow"></div>
	<div id="slideshow_hide">
		<br>
		<a href="javascript:void(0);" onclick="showMoreOrLess()">Hide...</a>
	</div>

Open in new window


with this for showMoreOrLess()
		<script>
			function showMoreOrLess(){
			  $("#marker").toggle();
			  $("#slideshow").toggle();
			  $("#slideshow_hide").toggle();
			}
		</script>

Open in new window


and this for your style:
		<style>
			#slideshow{display:none;}
			#slideshow_hide{display:none;}
		</style>

Open in new window

Author

Commented:
That's exactly how I have the code, and it works fine.

My last question regarding the .load function is that my external HTML file also calls a jQuery .load function. When I test the code with that external HTML file, it does not load correctly.

So my questions is... is it possible to have an external HTML file (that uses an entirely different) .load function.

Is this possible or problematic?
Top Expert 2011

Commented:
I haven't tried that before but I expect it could be problematic...
It's getting to be bedtime here, so I won't have time to test anything tonight but can take a look into it in the AM

Author

Commented:
I will package up some files that you can take a look at tomorrow.

Thank you again!

Author

Commented:
As it turns out, the problem does not manifest itself with the .load function being called in a separate file. I tried several variations, and get the same result when I build one html file and toggle the slideshow code that invokes a $(document).ready(function().

So the problem is when I toggle a div that uses  $(document).ready(function().  
 
Top Expert 2011

Commented:
What is the problem?
The sample.html page appears to be working.

Author

Commented:
The thumbnails are not behaving....

Correct slideshow thumbnail behavior... <http://test.scubadive4fun.com/sample/landscape2.html>

toggle div slideshow behavior...  click "Show" at <http://test.scubadive4fun.com/sample/sample.html>

Notice that the toggle div version scrolls the thumbnails when it shouldn't.
Top Expert 2011

Commented:
They both scroll for me.

Author

Commented:
Well, that's odd....

There are only 7 images in the slideshow. The thumbnails at the bottom should not scroll to the left. They should be stationary and only the main image above them should change.

What I see is when the div is toggled, the thumbnails at the bottom scroll to the left as well. They should be stationary.

Top Expert 2011

Commented:
Ok.. I may have been looking at the wrong thing (I know I saw the image sliding... Not air now if the thumbs were sliding too).  It may be morning brute I can look into it again.  If I have a chance, I'll check back for progress

Author

Commented:
Understood.
Top Expert 2011

Commented:
I don't see anything in there that looks like it is a control for whether the thumbnails slide or not.
Also, the thumbnails don't start sliding until it goes from the 2nd to the third image... as if it wants to move the image to the left to make room for the rest of the images.

Unfortunately, I have no experience with this particular plugin.

Author

Commented:
I've been told by the developer to initialize the plugin after it's shown, because it can't get the size of it's elements when hidden.

But unfortunately, I do not know how to do this due to my inexperience with coding.  :-(

Author

Commented:
I have two documents calling $(document).ready(function()

The main page that loads the external file...
      jQuery(document).ready(function() {
         $("#slideshow").load('landscape.html');
      } )

And in the external file for the slideshow....
   $(document).ready(function() {                     
      $('#image-gallery').royalSlider({
         controlNavThumbs:true,                  
         controlNavThumbsNavigation:true,
         controlNavEnabled:true,
         slideshowAutoStart:true
      });         
   });            

If I am to initialize the plugin after it's shown, how do I combine them in the main page? Tried several ways but all to no avail.
Top Expert 2011

Commented:
Try switching the order of the toggles... just a guess here...

in the CSS:
1- reverse which one is hidden and which one is shown.  Show the "More" and hide the "Less"

in document-ready:
1- load the external file
2- execute the showMoreOrLess

That way, when the page loads, the slider will load, visible, but immediately be toggled to the "Less" image.

Author

Commented:
I understand the toggle part, but would the document.ready.function look like this?
            <script>
                  jQuery(document).ready(function() {
                        $("#slideshow").load('landscape.html');
                  } );
                  showMoreOrLess();
            </script>

Your solution does fix my problem with the thumbnails, but I can't seam to get the page to load with the marker image. It shows the slideshow.
Top Expert 2011
Commented:
Try like this:

Logic is:
When the page is done loading, document.ready will load the contents of landscape.html into the slidwshow DIV.  Once the load is completed, showMoreOrLess runs.

            <script>
                  jQuery(document).ready(function() {
                        $("#slideshow").load('landscape.html', function(){
                         showMoreOrLess();
                        });
                  } );
            </script>

Open in new window


If that doesn't do it, try this one - same basic thing, but the toggle is not bound to the load finishing:
            <script>
                  jQuery(document).ready(function() {
                        $("#slideshow").load('landscape.html');
                       showMoreOrLess();
                  } );
            </script>

Open in new window

Author

Commented:
A workaround to get it to work was to add  <body onload="showMoreOrLess()">

Thank you again for your valuable feedback!

Author

Commented:
Thank you again!
Top Expert 2011

Commented:
Awesome - was a fun project.  Good luck!

Author

Commented:
I just tried changing toggle() to slideToggle() for the showMoreOrLess function...
            <script>
                  jQuery(document).ready(function() {
                        $("#slideshow").load('landscape.html', function(){
                              $("#marker").toggle();
                              $("#slideshow").toggle();
                              $("#slideshow_hide").toggle();
                        });
                  } );
            </script>
            <script>
                  function showMoreOrLess(){
                        $("#marker").slideToggle('slow');
                        $("#slideshow").slideToggle('slow');
                        $("#slideshow_hide").toggle();
                  };
            </script>

But get strange results with the sliding of the div's. Shouldn't the div's simply slide over top of each other? Right now the slide starting below the maker image.

sample.... <http://test.scubadive4fun.com/sample/test.html>

Author

Commented:
Figured it out.... I had to get rid of the More/Less DIV. I am now swapping out the text for More/Less toggle with the following...
            <script>
                  function showMoreOrLess(){
                        $("#marker").slideToggle('slow');
                        $("#slideshow").slideToggle('slow');
                        document.getElementById("toggle_text").innerHTML = "Hide...";
                  };
            </script>

Works great now!