Почему этот код jQuery для перемещения div в верхний правый или верхний левый не работает? - PullRequest
0 голосов
/ 03 ноября 2011

Я влияю на CSS, чтобы изменить абсолютную позицию.

jQuery - это меняет абсолютное позиционирование на верхний левый и верхний правый, в конце концов я хочу сделать это для всех углов, но яначиная с этого

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

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

HTML (не все ли мои идентификаторы и такие правильные?):

<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 (это работает, если я влияю на это вручную без jQuery, но jQuery некажется, не хочет влиять на это!):

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

Ответы [ 8 ]

2 голосов
/ 03 ноября 2011

Вам мешает использование встроенных стилей.После того, как вы нажмете обе кнопки, jQuery устанавливает встроенные стили CSS в DIV, и это выглядит так: <div id="questionField" style="left: 0px; top: 0px; right: 0px; "> - «left: 0» переопределяет «right: 0», и оно прикрепляется к верхнему левому углу.

Вам нужно либо удалить старые встроенные стили, прежде чем создавать новые, или вместо этого переключать классы CSS.Я бы порекомендовал последнее.Попробуйте это:

$('#topLeft').click(function() {
    $('#questionField').removeClass().addClass('topleft');
});

$('#topRight').click(function() {
    $('#questionField').removeClass().addClass('topright');
});

CSS:

#questionField {
    position: absolute;
    padding: 10px;
}
.topleft {
    top: 0;
    left: 0;
}
.topright {
    top: 0;
    right: 0;
}

http://jsfiddle.net/mblase75/H8R6D/2/

Добавление в нижних углах теперь тривиально: http://jsfiddle.net/mblase75/H8R6D/3/

Единственная проблема состоит в том, что это удалит все классы в DIV, включая те, которые вы не хотите удалять.Если это проблема, замените .removeClass() на .removeClass('topright bottomright bottomleft') (или что-то подобное; в нем должны быть указаны только те классы, которые do хотите удалить).

1 голос
/ 03 ноября 2011

Кроме того, не забудьте установить обратное позиционирование css обратно на значение по умолчанию, когда пользователь изменяет свои предпочтения:

$('#questionField').css({
  'top': '0',
  'left': '0',
  'right': 'auto', // <--
  'bottom': 'auto' // <--
});
0 голосов
/ 03 ноября 2011

Есть некоторые тонкости, которые означают, что ваш код, хотя и правильный, не будет работать ...

  1. Ваш элемент #questionField в настоящее время имеет ширину 100%, поэтому он ужекасаясь левой стороны страницы (слева: 0) и правой стороны страницы (справа: 0).Вам нужно ширину менее 100%, чтобы увидеть изменение слева направо.

  2. Вы должны установить абсолютное положение для использования фиксированных координат для элемента

  3. Хотя эти настройки будут работать (см. Мой JS Fiddle ) После того, как вы нажали, вы можете получить странное поведение, например, если я нажму вверху слева, затем вверху справа, затем вверхувлево, затем в верхнем правом углу окно перестанет двигаться, так как оно запутается, когда вы установили оба параметра: left: 0 и right: 0 - он не может удовлетворить оба правила и выберет придерживаться слева.Вам нужно вернуть свойства, которые вы ранее установили, чтобы сделать эту работу.Вот полный рабочий код (при условии, что вы указали ширину элемента).

     $(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 голосов
/ 03 ноября 2011

Это потому, что ваш div растягивает всю страницу. Наклейте на него цвет фона, и вы увидите это, как в этом jsFiddle .

На самом деле он идет вверх или вправо или влево ... но, поскольку он такой огромный, он попадает и в другой угол. Нажав на разные радиокнопки, вы указываете, что right:0; left:0 делает вашу ширину 100%. Вам нужно будет настроить его так, чтобы он не умещался на всей странице при перемещении.

0 голосов
/ 03 ноября 2011

Вам нужно будет установить left обратно на auto, когда вы щелкнете вверху справа и наоборот.Если вы просто обновите объект CSS, у вас будет left,top,right все установлено на ноль, а не просто top,right, как вы хотите.

ОБНОВЛЕНИЕ

Добавлен коди CSS:

    #questionField
    {
        position: absolute;
        padding: 10px;
        width: 500px;
    }
    div.topright
    {
        top: 0;
        right: 0;
    }
    div.topleft
    {
        top: 0;
        left: 0;
    }
    div.bottomright
    {
        bottom: 0;
        right: 0;
    }
    div.bottomleft
    {
        bottom: 0;
        left: 0;
    }

    $(document).ready(function () {
        $('#topLeft').click(function () {
            $('#questionField').removeClass('topright bottomright bottomleft').addClass('topleft');
        });
        $('#topRight').click(function () {
            $('#questionField').removeClass('topleft bottomright bottomleft').addClass('topright');
        });
        $('#bottomLeft').click(function () {
            $('#questionField').removeClass('topleft topright bottomright').addClass('bottomleft');
        });
        $('#bottomRight').click(function () {
            $('#questionField').removeClass('topleft topright bottomleft').addClass('bottomright');
        });
    });
0 голосов
/ 03 ноября 2011

Вы на самом деле не сказали, что с этим не работает, но просто убедитесь, что вы вызываете jquery после загрузки элементов.

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

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

Кроме того, в вашем css я не думаю, что вынужно объявить все углы элемента.Сверху и слева должно быть достаточно.

0 голосов
/ 03 ноября 2011

Вы также должны поставить .css('position', 'absolute') через jQuery, если не определено в CSS

Это будет работать, если его перезаписать другим значением, просто добавьте! Важный, как это

.css('position', 'absolute !important');

Надеюсь, это поможет.

0 голосов
/ 03 ноября 2011

Вы должны заполнить int, а не строку.

.css('top', 0);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...