Home/ Questions/Q 7008105
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T21:41:33+00:00

I see now I was copy pasting the wrong text/question, that didn’t make sense

  • 0

I see now I was copy pasting the wrong text/question, that didn’t make sense at all! Sorry for that! I found the error in my code. Here is a working version:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{
margin:0;
}
#gallery{
width:100%;
height:100%;
position:fixed;
left:0;
top:0;
background:#000;
opacity:0.9;
}
.child{
width:auto;
height:auto;
position:fixed;
left:0;
top:0;
}
</style>
</head>
<body>
<div id="click_me">click me</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#click_me').click(function(){
$('body').append('<div id="gallery"></div><div class="child" style="width:300px;height:600px;background:#0F0"></div><div class="child" style="width:500px;height:400px;background:#C60"></div><div class="child" style="width:600px;height:200px;background:#390"></div>');
   height_of_window = $('#gallery').height();
   width_of_window = $('#gallery').width();
   max_height = height_of_window - 100;
   max_width = width_of_window - 100;
   $('.child').each(function () {
      var $this = $(this);
      height_of_child = $this.height();
      width_of_child = $this.width();
      if (width_of_child >= max_width) {
         $this.css({
            'max-width': max_width + 'px'
         })
      }
      if (height_of_child >= max_height) {
         $this.css({
            'max-height': max_height + 'px'
         })
      }
      margin_top = (height_of_window - $this.height()) / 2;
      margin_left = (width_of_window - $this.width()) / 2;
      $this.css({
         'margin-top': margin_top + 'px',
         'margin-left': margin_left + 'px'
      })
   }); // end click
   }); // end each
}); // end document redy
</script>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You haven’t told us what the problem is, but:

    You’ve said that the code works (if so, it won’t be reliable; see below) if you put the markup in the HTML, but not if you append that markup using code. The code you’ve quoted will not have that problem because it shows clearly that you’re appending and then doing the search for “.image” elements, but you need to be sure that you do do the append before you run the other code, and you need to do these things once the body tag is ready to have things appended to it. Either make sure your script is at the very end, just after (or before) the closing </body> tag, or use the jQuery ready function (or its shortcut).

    Separately:

    jQuery’s css function does not support shorthand properties, although they work on some browsers. Per the docs:

    Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: $(elem).css('marginTop') and $(elem).css('marginRight'), and so on.

    So this line:

    $(this).css({'margin':margin_top+'px 0 0 '+ margin_left +'px'})

    Should be

    $(this).css({
    marginTop:    margin_top  + 'px',
    marginLeft:   margin_left + 'px',
    marginRight:  "0px",
    marginBottom: "0px"
});

    Separately, note that every time you do $(this), it requires several function calls and memory allocations. It’s best practice not to repeat it unnecessarily; although it’s usually harmless, it creates unnecessary memory churn. Just put var $this = $(this); at the beginning of your function and then use $this throughout (or whatever else you want to call it). (One gotcha there: Be sure to remember that this changes [potentially] in every function, so if you’re setting up event handlers, don’t use the outer function’s $this where you mean to use the event handler’s version.)

    • 0