Geek asks and answers

Problem with plausible editing a document in Chrome

For some reason, the correct filling of the right side of the document does not appear properly on the display when you try to change the padding-right value using JavaScript after the page loads. Check out this fiddle that demonstrates the problem.

HTML

<html><body><div></div></body></html>

Javascript

// Workaround #1: changing right padding without timeout
//$(document.body).css('padding-right', '100px');
setTimeout(function () {
    // This doesn't work properly (at least for me) in Chrome on Ubuntu 12.04
    $(document.body).css('padding-right', '100px');
    // Write info in body that function was executed
    $(document.body).append('timeout function executed');
    // Workaround #2: write content into div
    //$('div').append('timeout function executed');
    // Workaround #3: set document body display to none and back to block via zero ms timeout
    /*$(document.body).css('display', 'none');
    setTimeout(function () {
        $(document.body).css('display', 'block');
    }, 0);*/
}, 1000);

http://jsfiddle.net/gyqEK/2/

There were some workarounds, how I was able to make the changes in the correct addition effective

  • resize browser window
  • switch the display of the document body to none and through the timeout function with a zero millisecond back to the block
  • write some HTML content in a div (in the example script)

Windows Chrome, Ubuntu 12.04 Chrome 24 . Firefox . - - , / Chrome?

, , . "-" ( "div" ), , . Firefox, Chrome.

$('div').click(function () {
    var jqBody = $(document.body);
    if (jqBody.css('padding-right') !== '200px') {
        jqBody.animate({
            'padding-right': '200px'
        }, 500);
    } else {
        jqBody.animate({
            'padding-right': '0'
        }, 500);
    }
});

http://jsfiddle.net/gyqEK/5/

, . , 200 , div . , div, , , div div. Chrome.

+5
2

- , .

fooobar.com/questions/30524/...

, Chrome. , , Chrome. , , :)

$('div').click(function () {
    var jqBody = $(document.body);
    if (jqBody.css('padding-right') !== '200px') {
        jqBody.animate({
            'padding-right': '200px'
        }, {
            duration: 500,
            step: function () {
                this.style.display = 'none';
                this.offsetHeight;
                this.style.display = 'block';
            }
        });
    } else {
        jqBody.animate({
            'padding-right': '0'
        }, {
            duration: 500,
            step: function () {
                this.style.display = 'none';
                this.offsetHeight;
                this.style.display = 'block';
            }
        });
    }
});

http://jsfiddle.net/gyqEK/6/

. none, offsetHeight , . , Firefox, . , , , .

0

- . JQuery, , . , Jquery "" .

:

$(document).ready(function(){
    setTimeout(function () {
        $(document.body).css('padding-right', '100px');
        // Write info in body that function was executed
        $(document.body).append('timeout function executed');
       },1000);
});

... , Chrome, ( Firefox Chrome Ubuntu 12.04)

0

More articles:


All Articles