How do you position a DIV central in another DIV?
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?
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.
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.
All the best from the United Kingdom.
Re: How do you position a DIV central in another DIV?
That really belongs in your JSsimonmlewis wrote:Ok. I've added that before the <?php code.
Re: How do you position a DIV central in another DIV?
It's basically the same as PHP's foreach.simonmlewis wrote:Trying to understand what each() is about.
That's rightsimonmlewis wrote:I Assume the height() determines the current height of the image or DIV.
-
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?
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?
Is that the basics of it?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: How do you position a DIV central in another DIV?
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?
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?
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...
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>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.
All the best from the United Kingdom.
Re: How do you position a DIV central in another DIV?
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 wrote:Now I assume this has to be all done within the PHP query... as it obviously has to see the image.
-
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?
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?
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.
All the best from the United Kingdom.
Re: How do you position a DIV central in another DIV?
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?
Ok - so the JS needs to be either in a separate file, or just elsewhere away from the code.
But I'm still lost.
But I'm still lost.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: How do you position a DIV central in another DIV?
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?
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?
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.
All the best from the United Kingdom.
Re: How do you position a DIV central in another DIV?
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.
Now in your JS file, we first need to tell it to only run once the DOM has finished loading, so
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.
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
That said, we'll do something like this
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?
Code: Select all
<!DOCTYPE html>
<html>
<head>
.. stuff here ..
</head>
<body>
.. more stuff ..
<script src="/assets/js/whatever.js"></script>
</body>
</html>
Code: Select all
$(document).ready(function() {
// this is where our functionality will go
});Code: Select all
$(document).ready(function() {
$('.target-element-class-here').each(function() {
// Here we iterate over each item
});
});
Code: Select all
<?php
foreach ($foo as $bar) {
// do stuff here
}
Code: Select all
$(document).ready(function() {
$('.target-element-class-here').each(function() {
var height = $(this).height();
$('.another-element').css('height', height + 'px');
});
});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?
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.
.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.
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?
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.
All the best from the United Kingdom.