Почему код не срабатывает с первого раза?

Question

[Space]

Привет. Есть код, он не срабатывает после первого раза загрузки страницы, только стоит обновить уже работает. Использую jquery-1.8.1.min.js, если использую jquery-1.5.1.min.js, то все нормально работает, но так перестает работать бутстрап. Что такое?

$(document).ready(function () {
    $('<div><img src="photo.jpg" style="position: relative;" /><div>') .css({
        float: 'left',
        position: 'relative',
        overflow: 'hidden',
        width: '100px',
        height: '100px'
    }) .insertAfter($('#photo')); 

    $('#photo').imgAreaSelect({
        aspectRatio: '1:1',
        handles: true,
        onSelectChange: preview,
        onSelectEnd: function ( image, selection ) {
            $('input[name=x1]').val(selection.x1);
            $('input[name=y1]').val(selection.y1);
            $('input[name=x2]').val(selection.x2);
            $('input[name=y2]').val(selection.y2);
            $('input[name=w]').val(selection.width);
            $('input[name=h]').val(selection.height);
        }
    });
});

Answer 1

[Andrew Dabich]

Советую это

'<div><img src="photo.jpg" style="position: relative;" /><div>'

конкретно добавлять куда-то и указывать класс, по которому и обращаться.

И проверь что в этих переменных

var heo = $('#photo').width();
var wio = $('#photo').height();

Если пустые, попробуй обернуть всё в $(document).ready();

Comments

[Space]

@dabich переменные то непустые, а это выносил '' толку также ноль

[Andrew Dabich]

@ruslite Консоль открывал? Пишет ошибки какие-то?

[Space]

@dabich Тишина(

[Andrew Dabich]

@ruslite Мне показалось или в примере два раза весь код был? Думаю так же в оригинале не повторяется? Ещё попробуй bootstrap подключать сразу после jquery, и проверь все подключения действительно ли оно есть.

[Space]

@dabich в примере извини, случайно. Понял в чем ошибка, не зря ты сказал про var heo = $('#photo').width();
var wio = $('#photo').height();
почему-то равняется нулю, чтобы сделать?

[Space]

@dabich

$('<div><img src="user/<?php echo $log_username;?>/<?php echo $avatar;?>" style="position: relative;" /><div>') .css({
        float: 'left',
        overflow: 'hidden',
        width: '100px',
        height: '100px'
    }) .insertAfter($('#photo'));

срабатывает когда жму на саму картинку

[Space]

@dabich width: Math.round(scaleX * heo) + 'px',
height: Math.round(scaleY * wio) + 'px', вот это выставляется 0 почему?

[Andrew Dabich]

@ruslite Вставь это в конец функции preview() :

console.log(selection.width);
    console.log(scaleX);
    console.log(scaleY);
    console.log(heo);
    console.log(wio);
    console.log(Math.round(scaleY * wio) + 'px');

И отследи где что теряется.

[Space]

@dabich просто переменные не надо было выносить из функции, спасибо за помощь)

Answer 2

[Andrew Dabich]

Какой порядок подключения библиотек? Вряд ли что-то не так в этой части кода. Потому что он должен одинаково работать при каждой загрузке.

Comments

[Space]

@dabich там где должен быть , но я эти теги не использую так как прописываю html5
либа

Answer 3

[Виталий Киренков]

А который из двух не срабатывает?

Что мешает картинку вставить в хтмл сразу, а не добавлять js-ом?

И столько стилей... вешайте просто класс, а стили лучше в css пропишите.

Comments

[Space]

@DeLaVega это картинка после изменения

[Space]

@DeLaVega не срабатывает в бутстрапе более старый.

[Виталий Киренков]

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

[Space]

@DeLaVega jsfiddle.net/ruslite/U3A3T