How do you position a DIV central in another DIV?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you position a DIV central in another DIV?

Post by simonmlewis »

Ok. I've added that before the <?php code.
Trying to understand what each() is about. I Assume the height() determines the current height of the image or DIV.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do you position a DIV central in another DIV?

Post by Celauran »

simonmlewis wrote:Ok. I've added that before the <?php code.
That really belongs in your JS
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do you position a DIV central in another DIV?

Post by Celauran »

simonmlewis wrote:Trying to understand what each() is about.
It's basically the same as PHP's foreach.
simonmlewis wrote:I Assume the height() determines the current height of the image or DIV.
That's right
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you position a DIV central in another DIV?

Post by simonmlewis »

So you are saying for each() image you find, gather it's height() and then use it as the height : **px in a DIV?
Is that the basics of it?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do you position a DIV central in another DIV?

Post by Celauran »

Pretty much, yeah. Loop through the elements of a given class (or its children, depending how you've set it up), get the height, set css height property on its parent or the text box that's currently using 100% height.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you position a DIV central in another DIV?

Post by simonmlewis »

Now I assume this has to be all done within the PHP query... as it obviously has to see the image.
So where does this go within the query?

Code: Select all

  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function() { // <-- runs when the DOM is ready
  $.each([ 52, 97 ], function( index, value ) {
  alert( index + ": " + value );
});
});

</script>
I know I have copied the each bit, but I am trying to understand how to code up the each part first. As I understand I need to look at each image as it passes over, and then see how to put in the height() part...

Code: Select all

$result = mysql_query ("SELECT * FROM static WHERE section = 'home-stoneselector' ORDER BY priority");
while ($row = mysql_fetch_object($result))
  {
  if ($row->position == "left") { echo "<div class='home-left' id='home-stoneselector$row->id'>
  <div class='home-left-text'>
  <div class='home-left-text-inner'>";}
  
  if ($row->position == "right") { echo "<div class='home-right' id='home-stoneselector$row->id'>
  <div class='home-right-text'>
  <div class='home-right-text-inner'>";}
  
    if ($row->position == "wide") { echo "<div class='home-wide'>
  <div class='home-wide-text'><div>";}
  
  echo "$row->content
          </div>
        </div>";
  if ($row->position == "left") { echo "<div class='home-left-image'>";}
  if ($row->position == "right") { echo "<div class='home-right-image'>";}   
  if ($row->position == "wide") { echo "<div class='home-wide-image'>";}   
  echo "<img src='/images/pages/$row->photo'  id='home-stoneselector$row->id'/></div>
  <div style='clear: both' ></div>
  <button id=\"home-stoneselector$row->id\">Get Document Height</button>
  <script>
function showHeight( element, height ) {
  $( \"div\" ).text( \"The height for the \" + element + \" is \" + height + \"px.\" );
}
$( \"#home-stoneselector$row->id\" ).click(function() {
  showHeight( \"document\", $( document ).height() );
});
</script>
</div>";
  }
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do you position a DIV central in another DIV?

Post by Celauran »

simonmlewis wrote:Now I assume this has to be all done within the PHP query... as it obviously has to see the image.
No. Don't mix all your stuff together. Let PHP create the page however it wants. The JS will run on the browser once the document has finished loading.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you position a DIV central in another DIV?

Post by simonmlewis »

Sorry you have lost me again.
Are you saying I need JS at the top with some IDs to the image and the DIVs in the PHP?

IF so, how do I code that up?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do you position a DIV central in another DIV?

Post by Celauran »

No, I'm saying JS and PHP don't belong in the same file.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you position a DIV central in another DIV?

Post by simonmlewis »

Ok - so the JS needs to be either in a separate file, or just elsewhere away from the code.
But I'm still lost.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do you position a DIV central in another DIV?

Post by Celauran »

What are you lost about? JS files get called in script tags at the bottom of your page. JS loads and, once the DOM is ready, loop through these divs and set your heights.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you position a DIV central in another DIV?

Post by simonmlewis »

You are telling someone that's never written or "composed" a JS script before.... what to do in lamens terms.

If I told a friend, who knows a little HTML, "just open PHP, do a While loop, to loop through the info from the database, and echo each DIV, and assign the class to each div", they wouldn't have the first clue what I was saying.

You are kinda doing that here. I'm trying to learn what each() and height() are, but thsoe tutorial pages are teaching someone who already knows JS.

I don't know it. But I want to read it, see it in action, and understand what it is doing.

ie. if you say "put this code into the DOM..... ". That will run through each element.
Then add this height() in there. That will collate the height of the element in question, which is the image.

Then add this into it, to assign the height to the CSS class of the DIV.

You get me?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do you position a DIV central in another DIV?

Post by Celauran »

OK. Let's walk through this step by step, then. Create a JS file -- call it whatever you like -- and reference it via script tag at the bottom of your HTML.

Code: Select all

<!DOCTYPE html>
<html>
    <head>
        .. stuff here ..
    </head>
    <body>
        .. more stuff ..
        <script src="/assets/js/whatever.js"></script>
    </body>
</html>
Now in your JS file, we first need to tell it to only run once the DOM has finished loading, so

Code: Select all

$(document).ready(function() {
    // this is where our functionality will go
});
That should all be working by this point -- you can verify that the JS file has loaded and contains the above content -- but it's not yet doing anything.

Code: Select all

$(document).ready(function() {
    $('.target-element-class-here').each(function() {
        // Here we iterate over each item
    });
});
So here, once the document has finished loading, we want to iterate over all items of your class -- text-right or something, I don't recall -- where .target-element-class-here is. $ is the jQuery object and we're passing a selector to it to tell it which set of objects -- which part of the DOM -- we want to manipulate. This is more or less equivalent to

Code: Select all

<?php

foreach ($foo as $bar) {
    // do stuff here
}
That said, we'll do something like this

Code: Select all

$(document).ready(function() {
    $('.target-element-class-here').each(function() {
        var height = $(this).height();
        $('.another-element').css('height', height + 'px');
    });
});
Inside the each loop, $(this) refers to the item we're currently iterating on -- $bar in our PHP example. We call the height method on it (.height()) and store it in a variable called height (that's the var height = bit). Finally, we target the element whose size you want to set -- I've used .another-element, but you'll obviously need to use the appropriate selector by class, id, whatever -- and set the CSS property.

Make any more sense now?
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you position a DIV central in another DIV?

Post by simonmlewis »

So .target-element-class-here is the IMAGE we are asking about.
.another-element, is the DIV we want to change the size of dynamically?

So it's saying, for each .image, put it's height into "height()", and then assign that height to the CSS for height of the other DIV.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you position a DIV central in another DIV?

Post by simonmlewis »

Code: Select all

<?php
$result = mysql_query ("SELECT * FROM static WHERE section = 'home-stoneselector' ORDER BY priority");
while ($row = mysql_fetch_object($result))
  {
  if ($row->position == "left") { echo "<div class='home-left' id='home-stoneselector'>
  <div class='home-left-text'>
  <div class='home-left-text-inner'>";}
  
  if ($row->position == "right") { echo "<div class='home-right' id='home-stoneselector'>
  <div class='home-right-text'>
  <div class='home-right-text-inner'>";}
  
    if ($row->position == "wide") { echo "<div class='home-wide'>
  <div class='home-wide-text'><div>";}
  
  echo "$row->content
          </div>
        </div>";
  if ($row->position == "left") { echo "<div class='home-left-image'>";}
  if ($row->position == "right") { echo "<div class='home-right-image'>";}   
  if ($row->position == "wide") { echo "<div class='home-wide-image'>";}   
  echo "<img src='/images/pages/$row->photo'  id='home-stoneselector-image'/></div>
  <div style='clear: both' ></div>
</div>";
  }
?>
<script src="/source/js/home-div-resize.js"></script>

Code: Select all

$(document).ready(function() {
    $('.home-stoneselector-image').each(function() {
        var height = $(this).height();
        $('.home-stoneselector').css('height', height + 'px');
    });
});
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply