Home/ Questions/Q 7459033
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T13:56:02+00:00

I am using the below test code to toggle a div based on a

  • 0

I am using the below test code to toggle a div based on a radio button selection.
The problem is when the div slides back up, there is an annoying jerk I notice
only in IE8. The same code works well in Firefox.

I tried changing the DOCTYPE to the one I am using in the test code below.

Could someone suggest how to eliminate the jerk / flicker in IE when the div slides up?

Below is the sample code I am testing with.

Thanks for any help!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<style>
.div3{
width: 300px;
height:40px;
border: 1px solid blue;
}
.div4{
width: 300px;
height:80px;
border: 1px solid red;
}
</style>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">

    $(document).ready(function(){

        $('[value="myDiv_3"]').attr('checked',true);
        $('.div3').show();

        $('input[name="myRadio"]').change(function(){
            var selected = $(this).val();
            $('.div3').slideUp(3000);
            $('#'+selected).slideDown(3000);
        });
    });
</script>
</head>


<body style="text-align:center;">
<form action="example.com" method="post">
    <input type="radio" name="myRadio" value="myDiv_3" />MyDiv3
    <input type="radio" name="myRadio" value="myDiv_4" />MyDiv4
</form>
<div id="myDiv_3" class="div3">Div number 3!</div>
<div id="myDiv_4" class="div4">Div number 4!</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It looks like there is a glitch because, when selecting the first radio button called MyDiv3, the following code tells the same div to slide up and down at the same time.

    $('input[name="myRadio"]').change(function(){
     var selected = $(this).val();
     $('.div3').slideUp(3000);
     $('#'+selected).slideDown(3000);
});

    Not exactly sure what your final effect is supposed to be and assuming the rest of the code is what you intended, you can try this…

    $('input[name="myRadio"]').change(function(){
     var selected = $(this).val();
     if (selected === 'myDiv_3') {
         $('#myDiv_3').slideDown(3000);
     } else {
         $('#myDiv_3').slideUp(3000);
     }
});

    Demo: http://jsfiddle.net/wMfFe/2/

    EDIT after seeing OP’s demo page:

    In the page source…

    <!-- http://www.bennadel.com/blog/2263-Use-jQuery-s-SlideDown-With-Fixed-Width-Elements-To-Prevent-Jumping.htm -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    The OP’s demo page is slipping IE8 into quirks-mode because the doctype is not the very first line in the file. The doctype must always come first. Using the tools at F12 verifies active quirks-mode, and then forcing IE8 Standards Mode fixes the jerky animation issue.

    Removing everything above doctype including the empty space will prevent IE8 from slipping into quirks-mode as long as the rest of the page is also properly validated.

    • 0