Page 2 of 4
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 11:05 am
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.
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 11:08 am
by Celauran
simonmlewis wrote:Ok. I've added that before the <?php code.
That really belongs in your JS
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 11:12 am
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
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 11:19 am
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?
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 11:21 am
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.
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 11:24 am
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>";
}
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 11:41 am
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.
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 12:21 pm
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?
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 12:28 pm
by Celauran
No, I'm saying JS and PHP don't belong in the same file.
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 12:33 pm
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.
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 12:36 pm
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.
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 12:43 pm
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?
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 1:07 pm
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?
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 1:17 pm
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.
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 1:19 pm
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');
});
});