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

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.
sandiegoscubaAsked:
Who is Participating?
 
nap0leonCommented:
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

0
 
nap0leonCommented:
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)
0
 
sandiegoscubaAuthor 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...
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
nap0leonCommented:
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

0
 
sandiegoscubaAuthor Commented:
But where am I calling .load() for loading the external HTML file?
0
 
nap0leonCommented:
In document.ready. I'll post a link to an example in a couple minutes when I'm back at pc
0
 
nap0leonCommented:

<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

0
 
nap0leonCommented:
If .load doesn't work for you, try using .get instead:
http://api.jquery.com/jQuery.get/
0
 
sandiegoscubaAuthor 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

0
 
sandiegoscubaAuthor 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.  ????
0
 
sandiegoscubaAuthor Commented:
<script>
$(document).ready(function() {
$("#slideshow").load('landscape.html');
} )
</script>
0
 
nap0leonCommented:
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>
0
 
sandiegoscubaAuthor 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()?
0
 
nap0leonCommented:
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

0
 
sandiegoscubaAuthor 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?
0
 
nap0leonCommented:
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
0
 
sandiegoscubaAuthor Commented:
I will package up some files that you can take a look at tomorrow.

Thank you again!
0
 
sandiegoscubaAuthor 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().  
 
0
 
nap0leonCommented:
What is the problem?
The sample.html page appears to be working.
0
 
sandiegoscubaAuthor 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.
0
 
nap0leonCommented:
They both scroll for me.
0
 
sandiegoscubaAuthor 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.

0
 
nap0leonCommented:
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
0
 
sandiegoscubaAuthor Commented:
Understood.
0
 
nap0leonCommented:
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.
0
 
sandiegoscubaAuthor 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.  :-(
0
 
sandiegoscubaAuthor 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.
0
 
nap0leonCommented:
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.
0
 
sandiegoscubaAuthor 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.
0
 
sandiegoscubaAuthor Commented:
A workaround to get it to work was to add  <body onload="showMoreOrLess()">

Thank you again for your valuable feedback!
0
 
sandiegoscubaAuthor Commented:
Thank you again!
0
 
nap0leonCommented:
Awesome - was a fun project.  Good luck!
0
 
sandiegoscubaAuthor 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>
0
 
sandiegoscubaAuthor 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!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.