Page 3 of 4
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 1:21 pm
by Celauran
Like in CSS, . references classes, # references IDs. Also, IDs are meant to be unique. Otherwise, it looks like you've got the concept.
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 1:25 pm
by simonmlewis
So are we dealing with IDs here or Class names?
Either way, each Class is going to have roughly the same Class name - well, every other one as it's image left, image right and so on.
This is why I thought I had to put the JS in PHP, so I can dynamically name the IDs in the function.
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 1:32 pm
by Celauran
So why not use a common class?
Code: Select all
<div class="image image-right">...</div>
<div class="image image-left">...</div>
and so forth, and then target $('.image');
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 1:33 pm
by Celauran
Again, this whole issue goes away by simply assigning a height to the wrapping element. You sure there's no way to do that?
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 1:39 pm
by simonmlewis
I wish there was.
I've been asked to make the image and text divs to expand and contract to be responsive. And I want the text in the right div, to be central in the white box.
Plan B would be to fix the size of the image and set the height of the DIV. But it would be SOOOOO cool if the image changed to the % of the screen, and the DIV in the right box stayed there in the middle, and adjusted to suit.
I cannot any any other way to do this. I seriously thought setting a div to be 100% height, would just fill the DIV that it's in, even if it's not given a height. Because it's there, locked in place by the height of the image at the time.
It's a bit like the width of a div.
If I set a DIV with no width.
Put in an image that is 150px wide, and then put a div below that, the width of the div would just snap to fit... because that is where the width of the DIV stops naturally.
Why can it not be the same with height. It's stops there. I can see the border of it stopping, so why can I not say "height 100%" and it just fills that div.
I will try your image class.
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 1:44 pm
by Celauran
What about using a couple of different heights based on breakpoint? That would still get around all of this -- and we haven't gotten to resizing the page yet -- and still (mostly?) achieve the desired effect.
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 1:46 pm
by simonmlewis
Any chance u can jfiddle to show me how?
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 1:52 pm
by Celauran
Sure. Can you provide some sample markup (remove anything sensitive, natch)?
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 2:12 pm
by simonmlewis
Code: Select all
<div class='home-right' id='home-stoneselector'>
<div class='home-right-text'>
<div class='home-right-text-inner'><h3>luxury yacht applications</h3>
<p>Welcome text here to be dynamic and have lots of content on this page and look so nice and special your code and my text and design how can this...</p>
</div>
</div><div class='home-right-image'><img src='/images/pages/120home-yachttest.jpg' id='home-stoneselector-image'/></div>
<div style='clear: both' ></div>
</div>
And you have the CSS from earlier I think.
"home-right-text-inner" It's this DIV that needs to be in the MIDDLE of home-right-text.
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 2:22 pm
by Celauran
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 2:27 pm
by simonmlewis
Not exactly sure what I am looking at.
I can see a div on the right, that's about 2cm tall and text that leaks out of it.
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 2:29 pm
by Celauran
Interesting. What I see is markedly different.
Re: How do you position a DIV central in another DIV?
Posted: Wed Feb 03, 2016 2:36 pm
by simonmlewis
This is what I see.
Re: How do you position a DIV central in another DIV?
Posted: Thu Feb 04, 2016 5:15 am
by simonmlewis
I'm trying everything i can think of and find now.
Code: Select all
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<?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='homeheight home-left' id='home-stoneselector'>
<div class='home-left-text'>
<div class='home-left-text-inner'>";}
if ($row->position == "right") { echo "<div class='homeheight 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>
<button id=\"homeheight\">Get Document Height</button>
<div style='clear: both' ></div>
</div>";
}
?>
<script src="/js/home-resize.js"></script>
JS File:
Code: Select all
$(document).ready(function() {
$('.homeheight').each(function() {
var height = $(this).height();
$('.home-right-text').css('height', height + 'px');
});
$( ".homeheight" ).click(function() {
showHeight( "div", $( div ).height() );
});
});
The button doesn't make anything appear, to prove that the height is working.
Re: How do you position a DIV central in another DIV?
Posted: Thu Feb 04, 2016 7:37 am
by Celauran
Where is the showHeight function defined? What about the div variable? Why are you attaching a click handler to divs?