CODEWITHSUNDEEP
jquerycsscss-position
Stephanie
Stephanie

Reputation: 97

How do I give a jQuery element absolute positioning on a page?

How do I apply absolute positioning to a jQuery element my current jQuery script is

<head>
    ...
    <script type="text/javascript" src="slidemenu.js"></script>
    <script type="text/javascript">
        $('#sm').css({
            position: 'absolute',
            top: '10px',
            left: '10px' 
        });
    </script>
</head>
<body onload="slideMenu.build('sm',286,10,10,1)">
    <ul id="sm" class="sm">
        <li><img src=".gif" alt="" /></li>
        <li><img src=".gif" alt="" /></li>
        <li><img src=".gif" alt="" /></li>
        <li><img src=".gif" alt="" /></li>
        <li><img src=".gif" alt="" /></li>
        <li><img src=".gif" alt="" /></li>
    </ul>
    ...

And my current css is:

#sm {
    margin:0; 
    padding:0;
}
#sm {
    list-style:none;
    top:240px;
    left:300px; 
    width:604px; 
    height:286px; 
    display:block; 
    overflow:hidden;z-index: 200;
    position:absolute; 
}
#sm li {
    float:left; 
    display:inline; 
    overflow:hidden;z-index: 200;
    position:relative; 
}

Upvotes: 8

Views: 40670

Answers (6)

Matt Asbury
Matt Asbury

Reputation: 5672

Use the .css functionality:

$('#yourelement').css({
    position: 'absolute',
    top: '10px',
    left: '10px'
});

Upvotes: 13

A. Genedy
A. Genedy

Reputation: 718

Here is a generic way of absolutizing any element:

function absolutize(selector_expression) {
    element = jQuery(selector_expression).eq(0);

    if (element.css('position') == 'absolute') {
        return element;
    }

    element.css({
        position: 'absolute',
        top:    element.offset().top + 'px',
        left:   element.offset().left + 'px',
        width:  element.width() + 'px',
        height: element.height() + 'px'
    });

    return element;
}

To use it: absolutize('#sm');

Upvotes: 0

PonrajPaul
PonrajPaul

Reputation: 174

if you use

position: absolute;

your absolute container will go up when you scroll the page.

try with

position: fixed;

this is the best solution. And your positioning container will be visible even you scroll the page

Upvotes: 0

keithjgrant
keithjgrant

Reputation: 12769

It looks like you are doing it correctly, but you forgot to put your script inside the $(document).ready().

$(document).ready(function() {
    $('#sm').css({
        position: 'absolute',
        top: '10px',
        left: '10px' 
    });
});

This ensures your script isn't run until the entire DOM is loaded in the browser. Otherwise, it will try to apply the CSS before it knows about the #sm element. Since all you're doing is setting some styling, is there a reason you can't just add this to your CSS file instead?

I would also suggest removing the onload from your <body> tag and moving the call to slideMenu.build() into the $(document).ready() function, as well.

Upvotes: 1

Carvell Fenton
Carvell Fenton

Reputation: 2361

Stephanie, this is just to clarify what jAndy has demonstrated, with a bit of my own answer. But, being still relatively new to jQuery myself, I can relate to your confusion. Let's take apart jAndy's code and respond to your comments.

I am also confused on how this incorporates into my above code, where do I put it and which is $elem. and which is #someelement_id

In jAndy's code, the $elem is the element that you're trying to position. He is using #someelement_id just to make his example generic. So specific to your code, his

var $elem = $('#someelement_id');

would become

var $elem = $('#sm');

in your code. All he is doing there is storing the element (object) reference into the variable $elem. Nothing fancy there I don't think. Not sure why he prepends $ onto the variable name...? I believe var elem = $('#sm'); would work the same, unless I am missing something. So, that just gets you the element you want to work on.

am I putting values inside the position() elements? For example position(10px).top

No. Not if your goal is to keep the element absolutely positioned in its current position. If we take apart that line of his code, $elem.position() will return an object that contains the properties top and left. You can read about the position method here jQuery API position (Check out jQuery API offset as well because it provides different information and allows you to provide coordinates for a new position for the element). So as far as I can tell, as jAndy says in his answer, his code will set the absolute position of the element to its current location, therefore keeping it in place.

I don't think this would be what you want if you actually want to move an element from its current place to another location. For that you would be setting the top and left as answered by Matt Asbury, or you could be using some combination of the two answers if you wanted to move the element to a new position relative to its current location. For example,

$elem.css({
    position:  'absolute',
    top:       $elem.position().top + 10,
    left:      $elem.position().left + 10
});

Or, with jQuery API offset, and combining the two, I believe you could do something like:

var newCoords = { 
   top: $elem.position().top + 10, 
   left: $elem.position().left + 10
};
$elem.offset(newCoords);

Not sure which is the "better" approach.

The link provided by Nikkelman is also good, but there may be a lot to figure out there if you are new to jQuery.

One other thing I noticed, and perhaps you left these things out because they seemed obvious, but just in case:

  1. You need to include jQuery.js from somewhere, as you have included your slidemenu js.
  2. And usually you would have your jQuery code wrapped in a $(document).ready(function() {...}); block, but this is not always necessary.

Hopefully this helps and I haven't just muddied the waters for you!

Upvotes: 3

jAndy
jAndy

Reputation: 236192

Should look like:

var $elem = $('#someelement_id');

$elem.css({
    position:   'absolute',
    top:        $elem.position().top,
    left:       $elem.position().left
});

This should make sure, that the element will stay at the position it was before.

Upvotes: 0

Related Questions