Showing content in a div from another webpage / IFRAME script

Question

I got 10 galleries, let's say gallery1.php, gallery2.php etc.

and I want to make a navigator, that whenever i press on "First Gallery" or "Secont Gallery" etc.

what it will do is only changing a content of a div or something else.

The galleries shows the images with for loop. basically, I rename all of the photos to series numbers and then use a for loop to print them one after another.

I tried using the IFRAME of HTML but when i tried to do a script that will set it's height to the content height, I faced a problem because the script didn't work on all the browsers. I Google for other scrips, and tried about 10 scripts by now, but none seems to work on all the browsers.

If you have a script that will work on all browsers, that would help.

If you don't, how do I change a div content to content from another webpage? Just consider that that content that i'm trying to pull from the other webpage, is a result of a For loop.

I really don't want to reload the whole page every time I choose another gallery.

my last code: function calcHeight() { var the_height=0; //find the height of the internal page if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ //test for Firefox/x.x or Firefox x.x (ignoring remaining digits); the_height=document.getElementById('example').contentDocument.body.offsetHeight+40; } else { the_height=document.getElementById('example').contentWindow.document.body.scrollHeight+16; } document.getElementById('example').height=the_height+"px"; } — kfirba, Jan 12 '13 at 17:40
You tagged with jQuery/javascript, so How about using AJAX to load content into the div or even just changing the src of the iframe ? — Lawrence Cherone, Jan 12 '13 at 17:48
share your html code also ,so that we may come up with some solution — Afsar, Jan 12 '13 at 17:50
possible duplicate of [Resizing an iframe based on content](http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content) — Lawrence Cherone, Jan 12 '13 at 17:50
well, I have NEVER worked with AJAX, as I understand, AJAX can come very handy :O — kfirba, Jan 12 '13 at 17:57

score 0 · Answer 1 · answered Jan 12 '13 at 17:43

0

You can achieve this with AJAX. Basically when you choose a new gallery, the JavaScript (recommended to use jQuery) will fetch the relevant PHP page and put it into the div, like so:

$.post('gallery1.php', function(data) {
  $('#the-div-id').html(data);
});

answered Jan 12 '13 at 17:43

Ynhockey

3,563
5
28
47

I don't wanna be rude, but my experience with JS, JQUERY and AJAX is very lame. could you please provide me a full code to show me where i put every part of code? I guess that will help alot :) – kfirba Jan 12 '13 at 17:51
The answer posted by charlietfl just after mine actually provides this. You need the following: 1) Download jQuery and link it to your page using the – Ynhockey Jan 12 '13 at 18:37

charlietfl · Accepted Answer · 2013-01-12T18:32:00.013

0

You can use AJAX to get content from server and insert into a page without reloading the whole page.

jQuery has numerous AJAX methods of which the simplest is load().

Give your gallery links a common class:

<a class="gallery_link" href="gallery1.php">One</a>

Then in jQuery:

$(function(){    
    $('.gallery_link').click(function(){
      /* "this" inside click handler refers to link clicked*/
     var galleryUrl= this.href;
      $('#galleryDiv').load(galleryUrl, function(){
        /* new content is oaded into the DIV, can run any other code here that manages new content*/
      });
      /* prevent browser opening url in window*/
      return false;    
    })
});

API refernce: http://api.jquery.com/load/

edited Jan 12 '13 at 18:32

answered Jan 12 '13 at 17:47

charlietfl

164,229
13
110
143

as I said to someone else, I don't wanna be rude, but my experience with JS, JQUERY and AJAX is very lame. could you please provide me a full code to show me where i put every part of code? I guess that will help alot :) – kfirba just now edit – kfirba Jan 12 '13 at 17:53
I gave you the full code. Just include jQuery.js before the script I gave you. Put the script I gave you in a script tag. Study some tutorials on how to use jQuery from beginner level... should find many – charlietfl Jan 12 '13 at 17:54
and put the code in the – kfirba Jan 12 '13 at 17:56
script should be located at or ? jQuery seems useful.. gotta learn that! – kfirba Jan 12 '13 at 17:59
either... as long as you load the jQuery.js library before the other code... study some tutorials – charlietfl Jan 12 '13 at 18:04
http://learn.jquery.com/about-jquery/how-jquery-works/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DHow_jQuery_Works%26redirect%3Dno – charlietfl Jan 12 '13 at 18:06
well, I did that and it doesn't seem to work. it's opening the page instead of importing the information. I imported the jquery in the head section : After that, i used the script you gave me. After that, I created this: One
Frame.html is my test page – kfirba Jan 12 '13 at 18:07
did you download jquery.js and make sure path is relative to page? Go to jQuery.com and can use CDN source also without needing to download it....start with tutorials!!!! – charlietfl Jan 12 '13 at 18:09
I have to download a .JS file in order to use jQuery? I thought that the script tag with src will do that for me – kfirba Jan 12 '13 at 18:11
not sure how much more I can give you...I gave you link to `How jQuery WOrks` from official docs...and suggested sevral times to find some tutorials. You won't learn this in an hour, or even a few hours if you have no javascript basics at all – charlietfl Jan 12 '13 at 18:13
well, I started reading. I downloaded the JS file and imported it to the page. But still, it's opening the page instead of importing the data. I need this solution as soon as possible for something, I will learn jquery after I will finish with this solution because it's kinda urgent – kfirba Jan 12 '13 at 18:19
use a browser console to check errors. Based on `urgent` and no background... don't expect miracles – charlietfl Jan 12 '13 at 18:22
this is my error: Uncaught SyntaxError: Unexpected end of input my code: [link](http://pastebin.com/64eMSefQ) – kfirba Jan 12 '13 at 18:26
i left out a set of closing braces in code... have updated it – charlietfl Jan 12 '13 at 18:32
yup, I noticed that too. I added the braces but now, nothing happens. Whenever i press on the link, the link doesn't open up, but the div content isn't changing. it remains the same – kfirba Jan 12 '13 at 18:35
inspect AAJX request in browser console. See what path being used is and make sure it is valid and that url is returning data – charlietfl Jan 12 '13 at 18:37
this is what I get: XMLHttpRequest cannot load file:///C:/wamp/www/!Gallery/frame.html. Origin null is not allowed by Access-Control-Allow-Origin. – kfirba Jan 12 '13 at 18:39
Ok, that's wierd. I changed the file extension to .php and it works PERFECTLY! thanks alot! – kfirba Jan 12 '13 at 18:54

Showing content in a div from another webpage / IFRAME script

2 Answers2