homepage Welcome to WebmasterWorld Guest from 184.72.69.79
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Make DIV keep a Fixed Position
icon_kid




msg:4624111
 1:38 am on Nov 18, 2013 (gmt 0)

I have two DIVs -- one is nested inside of the other. The outer DIV is very large; it fills the entire browser window. Even the contents of it is much larger still, so it has overflow (scroll bars). The inner DIV is a fixed 200px X 700px column. Since the nested DIV sits on top of the other one (or within it), it moves when the parent DIV is scrolled.

Is there a code that will make the inner DIV keep its position relative to the browser window instead of to it's parent (so as to appear fixed even though the rest of the page is being scrolled)?

My guess is that it would take a Javascript function to do this, if it's possible at all given the structuring of nested DIVs.

 

lucy24




msg:4624117
 2:37 am on Nov 18, 2013 (gmt 0)

If you don't want div A to move when div B does, why is div A inside div B in the first place? Code them separately and set div A (the "inner" div) to position: fixed.

icon_kid




msg:4624378
 4:41 am on Nov 19, 2013 (gmt 0)

...why is div A inside div B in the first place?

This was not my ideal arrangement. I had someone develope the basic coding for this document but I didn't want this:

<div>...
<div>...
</div>...
</div>... (one inside the other)

I wanted this:

<div>...
</div>...
<div>...
</div>...

-- two separate DIVs.
I've tried pulling out the nested DIV and placing it before the other one but there was a problem with that, mainly that the document uses a 'hide' script which stopped working when I re-organized the DIVs. The problem may be because the new DIV arrangement requires the 'hide' script to be given a different placement in the document as well. I'll have to try this again, and work on it for awhile.

Thanks.

Readie




msg:4624534
 5:25 pm on Nov 19, 2013 (gmt 0)

Post the hide script, and elaborate on the problem with it and we may be able to assist with your underlying problem.

icon_kid




msg:4624687
 5:07 am on Nov 20, 2013 (gmt 0)

Post the hide script, and elaborate...

Thank you. I have to show a complete sample document because any small thing in the whole context of the hide script may be an issue (I suppose). The original document was full of 'comments' which I left preserved in the sample code below for your reference:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Brooklyn Map</title>
<style type="text/css">
/* Moved all presentational attributes out of body element. */
body {
color: #000;
font-family: Arial, Helvetique, sans-serif;
font-size: x-small;
margin: 0;
padding: 0;
}
/* This container has the map background. It has been sized to the
* dimensions of the background image. It has position relative so
* absolutely positioned images that get placed on the map are relative
* to this container. */
.mapContent {
background: #484848 url('BROOKLYN_map.png') no-repeat;
width: 1551px;
height: 1315px;
overflow: auto;
position: relative;
}
/* This container has the client list. It is positioned within the map
* container. */
.clientList {
background-color: #CCD8D5;
border: 2px solid #93a6bc;
float: left;
overflow: auto;
margin: 1em;
width: 200px;
height: 700px;
}
/* This is the list of clients. List markers have been removed. */
.clientList ul {
list-style: none;
list-style-position: inside;
margin: 0;
padding: 0;
}
/* This is the list item which contains client info. */
.clientList li {
padding: .5em;
}
/* Moved all presentational attributes out of body element. */
a:link {
color: #8f8ffc;
}
a:visited {
color: #b67af6;
}
a:active {
color: #fff;
}
img {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="mapContent">
<div class="clientList">
<ul>
<li>
<input type="checkbox">
<img alt=""
src="ICONS/C-green-empty.png"
data-position-left="729px" data-position-top="1047px">
<font size="3" color="#0000a0"><b>Alergant</b></font>
<div><font size="3">1829 &nbsp; E. 13th St.</font></div>
</li>
<li>
<input type="checkbox">
<img alt=""
src="ICONS/C-green-dot.png"
data-position-left="768px" data-position-top="1040px">
<font size="3" color="#0000a0"><b>Babayev</b></font>
<div><font size="3">2269 &nbsp; Ocean Ave.</font></div>
</li>
</ul>
</div><!-- clientList -->
</div><!-- mapContent -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
(function () {
/**
* Given an image, create a copy and position it on the map using the
* data-position-top and data-position-left attributes of the image.
* This will insert the new image immediately after the one passed in
* but because it's absolutely positioned will appear on the map.
*/
function showOnMap($img) {
$('<img>', {
src: $img.attr('src'),
alt: $img.attr('alt')
}).css({
'position': 'absolute',
'top': $img.data('position-top'),
'left': $img.data('position-left')
}).insertAfter($img);
}
/**
* Given an image, remove the next sibling image (which was created in
* the showOnMap function) from the DOM.
*/
function hideFromMap($img) {
$img.next('img').remove();
}
/* Attach a click handler to the clientList container that will trigger
* for each checkbox element within the clientList. */
$('.clientList').on('click', 'input[type="checkbox"]', function () {
// this = the checkbox
var $img = $(this).next('img');
if (this.checked) {
showOnMap($img);
}
else {
hideFromMap($img);
}
})
})(); </script>
</body>
</html>

--------------------------------

The next thing is to show you the same code (from <STYLE> to <BODY>) but with all the comments removed and with the whole nested DIV in bold text:

<style type="text/css">
body {
color: #000;
font-family: Arial, Helvetique, sans-serif;
font-size: x-small;
margin: 0;
padding: 0;
}
.mapContent {
background: #484848 url('BROOKLYN_map.png') no-repeat;
width: 1567px;
height: 1415px;
overflow: auto;
position: relative;
}
.clientList {
background-color: #b5c7e0;
border: 2px solid #93a6bc;
float: left;
margin: 1em;
width: 200px;
}
.clientList ul {
list-style: none;
list-style-position: inside;
margin: 0;
padding: 0;
}
.clientList li {
padding: .5em;
}
a:link {
color: #8f8ffc;
}
a:visited {
color: #b67af6;
}
a:active {
color: #fff;
}
img {
margin: 0;
padding: 0;
}
</style>
</head>
<body> <---------------------------!
<div class="mapContent">
<div class="clientList">
<ul>
<li>
<input type="checkbox">
<img alt=""
src="client1.png"
data-position-top="500px" data-position-left="500px">
Client 1
<div>Address 1</div>
</li>
<li>
<input type="checkbox">
<img alt=""
src="client2.png"
data-position-top="300px" data-position-left="250px">
Client 2
<div>Address 2</div>
</li>
</ul>
</div><!-- clientList -->

</div><!-- mapContent -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
(function () {
function showOnMap($img) {
$('<img>', {
src: $img.attr('src'),
alt: $img.attr('alt')
}).css({
'position': 'absolute',
'top': $img.data('position-top'),
'left': $img.data('position-left')
}).insertAfter($img);
}
function hideFromMap($img) {
$img.next('img').remove();
}
$('.clientList').on('click', 'input[type="checkbox"]', function () {
// this = the checkbox
var $img = $(this).next('img');
if (this.checked) {
showOnMap($img);
}
else {
hideFromMap($img);
}
})
})(); </script>
</body>

So everything in bold text needs to be plucked out in one whole piece and placed next underneath the BODY tag (where the arrow shows). That's all this is needed to pull one DIV out of the other. The resulting code looks like this:

(with the shifted segment still in bold text)

<style type="text/css">
body {
color: #000;
font-family: Arial, Helvetique, sans-serif;
font-size: x-small;
margin: 0;
padding: 0;
}
.mapContent {
background: #484848 url('BROOKLYN_map.png') no-repeat;
width: 1567px;
height: 1415px;
overflow: auto;
position: relative;
}
.clientList {
background-color: #b5c7e0;
border: 2px solid #93a6bc;
float: left;
margin: 1em;
width: 200px;
}
.clientList ul {
list-style: none;
list-style-position: inside;
margin: 0;
padding: 0;
}
.clientList li {
padding: .5em;
}
a:link {
color: #8f8ffc;
}
a:visited {
color: #b67af6;
}
a:active {
color: #fff;
}
img {
margin: 0;
padding: 0;
}
</style>
</head>
<script>
(function () {
function showOnMap($img) {
$('<img>', {
src: $img.attr('src'),
alt: $img.attr('alt')
}).css({
'position': 'absolute',
'top': $img.data('position-top'),
'left': $img.data('position-left')
}).insertAfter($img);
}
function hideFromMap($img) {
$img.next('img').remove();
}
$('.clientList').on('click', 'input[type="checkbox"]', function () {
// this = the checkbox
var $img = $(this).next('img');
if (this.checked) {
showOnMap($img);
}
else {
hideFromMap($img);
}
})
})(); </script>
<body>
<div class="clientList">
<ul>
<li>
<input type="checkbox">
<img alt=""
src="client1.png"
data-position-top="500px" data-position-left="500px">
Client 1
<div>Address 1</div>
</li>
<li>
<input type="checkbox">
<img alt=""
src="client2.png"
data-position-top="300px" data-position-left="250px">
Client 2
<div>Address 2</div>
</li>
</ul>
</div><!-- clientList -->

<div class="mapContent">
</div><!-- mapContent -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</body>

So there are actually two problems I have now. The first one (which should be easily fixed) is that the two DIVs are acting like block elements -- each DIV is taking a whole line unto itself, whereas I need them to sit side-by-side. However, the bigger problem is that, in this new arrangement, the hide script itself (which has not been altered) no longer works. And if that's not terribly interesting, I don't know what is.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved