Home/ Questions/Q 6775655
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T15:55:56+00:00

I’m affecting the CSS to make the absolute position change. jQuery – this changes

  • 0

I’m affecting the CSS to make the absolute position change.

jQuery – this changes the absolute positioning to the top left and top right, eventually I want to do it for all corners but I’m starting with this

$('#topLeft').click(function() {
    $('#questionField').css('top', '0');
    $('#questionField').css('left', '0');
});

$('#topRight').click(function() {
    $('#questionField').css('top', '0');
    $('#questionField').css('right', '0');
});

HTML (aren’t all my IDs and such correct?):

<body>
    <div id="questionField">    
        <form id="questions" action="process.html">
            <fieldset>
                <legend>Hello World!</legend>
                <p>Firstly, which corner would you like this question box to be in?</p>
                <input type="radio" name="corner" id="topLeft" /><label for="topLeft"> Top Left</label><br />
                <input type="radio" name="corner" id="topRight" /><label for="topRight"> Top Right</label><br />
                <input type="radio" name="corner" id="bottomLeft" /><label for="bottomLeft"> Bottom Left</label><br />
                <input type="radio" name="corner" id="bottomRight" /><label for="bottomRight"> Bottom Right</label><br />

                <p>Now, some questions.</p>
                <label for="color">Favorite Color: </label><input type="text" id="color" /><br />
                <label for="animal">Favorite Animal: </label><input type="text" id="animal" /><br />
            <label for="paintBrush">Favorite Paint Brush: </label><input type="text" id="paintBrush" /><br />
                <label for="movie">Favorite Movie: </label><input type="text" id="movie" />
            </fieldset>
        </form>
    </div>
</body>

CSS (it works if I affect this manually without jQuery, but jQuery doesn’t seem to want to affect it!):

#questionField {
    position: absolute;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    padding: 10px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are some subtleties that mean that your code, while correct, won’t work…

    1. Your #questionField element is currently 100% wide, so it is already touching the left side of the page (left: 0) and the right side of the page (right: 0). You need a width of less than 100% to see a change from left to right.

    2. You should set position: absolute to use fixed co-ordinates for an element

    3. Although these adjustments will work (See my JS Fiddle) Once you have clicked, you may get odd behaviour, for example, if I click top left, then top right, then top left, then top right, the box will stop moving as it gets confused when you have both left: 0 and right: 0 set – it cannot satisfy both rules and will choose to stick to the left. You need to revert the properties you previously set to make this work. Here is the full working code (assuming you have put a width on the element).

       $(document).ready(function () {
    $('#topLeft').click(function() {
        $('#questionField').css({
            position: 'absolute',
            'top': '0px',
            'left': '0px',
            'right': 'auto'
        });
     });

     $('#topRight').click(function() {
        $('#questionField').css({
            position: 'absolute',
            'top': '0px',
            'right': '0px',
            'left': 'auto'
        });
    });
});
    • 0