ansaurus

Question

<div> of images, retrieved by getJSON, disappear after append()

Answer 1

+2 A:

When you add the <html> tag to your page it confuses the browser and is most likely the problem. I would suggest to either do as Pointy said and use window.open() to make a popup window (check out this tutorial), or better yet try out one of the many jQuery light box plugins.

I'm not sure what you are doing with the google maps, so I decided to just go with a basic example for you. With this script, if you click on an image inside the #image div, it'll open a popup window the same size as the image.

$(document).ready(function(){
 $('#images img').click(function(){
  var padding = 20;
  var w = $(this).width() + padding;
  var h = $(this).height() + padding;
  var popup = '\
   <html>\
    <head>\
     <link type="text/css" href="popup-style.css" rel="stylesheet" />\
     <scr'+'ipt type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/scr'+'ipt&gt;\
    </head>\
    <body>\
    <img src="' + $(this).attr('src') + '">\
    </body>\
   </html>';
  var pop = window.open('','Image View','toolbar=0,location=0,status=0,width=' + w + ',height=' + h + ',scrollbars=1,resizable=1');
  pop.document.write(popup);
  pop.document.close();
 })
});

NOTE: When adding a script tag inside a string, make sure you break up the word "script" otherwise you will get an error.

Update #2: Ok, since you want to work with what you have, try doing this:

Remove the <html> tag from your campwindow, then position your campwindow using CSS and/or javascript. Add something like:

 var w = $(window).width();
 var h = $(window).height();
 // Add overlay and make clickable to hide popup
 // you can remove the background color and opacity if you want to make it invisible
 var $overlay = $('<div/>', {
  'id': 'overlay',
  css: {
   position   : 'absolute',
   height     : h + 'px',
   width      : w + 'px',
   left       : 0,
   top        : 0,
   background : '#000',
   opacity    : 0.5,
   zIndex     : 99
  }
 }).appendTo('body');
 // Position your popup window in the viewport
 $('#CampWindow').css({
  position: 'absolute',
  top     : $(window).scrollTop() + 50 + 'px',
  left    : w/2 - $('#CampWindow').width()/2 + 'px', // centers the popup
  zIndex  : 100
 })
 .fadeIn('slow');
 // Click overlay to hide popup
 $('#overlay').click(function(){
  $('#CampWindow').hide();
  $(this).remove(); // remove the overlay
 })

fudgey 2010-04-16 13:08:07

Hi guys Thanks a lot for your responses. The thing is, that although I agree that it may be an unelegant solution, it was working before I wanted to append divs to the marker popup. I guess that in itself says it all. Could you advise on how to go about reworking the marker popup generation with window.open()?

Midiane 2010-04-16 13:50:44

Hi, I've updated my answer. It makes the `#CampWindow` into a popup. Note, the code I used does require jQuery v1.4+. I hope it helps!

fudgey 2010-04-17 16:26:37

@fudgey thank you so much for the detailed answer. will try update #2 solution first; if not, shall try the 1st one. thanks muchly.

Midiane 2010-04-19 08:36:18

@fudgey: 2nd solution worked perfectly! thanks a lot. could you just guide me now on how to incorporate the actual GMaps marker code/popup?

Midiane 2010-04-19 22:16:40

I've never used GMaps before, so I would suggest asking a separate question. But just guessing, if GMap works inside of an iframe, you could put the iframe inside of your `#CampWindow` and see if it works.

fudgey 2010-04-19 23:08:40

I've found myself a dozen of on-line tutorials. Will figure it out. Thanks again muchly

Midiane 2010-04-20 07:00:38

ansaurus

tags:

views:

answers:

<div> of images, retrieved by getJSON, disappear after append()

related questions