When postback happens my all div tags are flickering,How can we stop flickering

Question

0.00/5 (No votes)

See more:

Hi Developers,

For example, In my web application,

I am using 3 Sliding div tags, each div contains some controls.When post back happens all the divs are flickering and flashing.

In the 3rd div(Flip2) inside I am using check box. When I select the check box entire page and all 3 divs flickered and flashing.

Please check below my code for aspx:

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"  runat="server">
    <title></title>
    <script src="Scripts/jquery.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<link href="Styles/StyleSheet1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Styles/html2canvas.js"></script>
   <script type="text/javascript" language="javascript">
       function warningMessage(FirstCanvas, FirstGrid, FirstHiddenField, SecondCanvas, SecondGrid, SceondHiddenField) {
           warningMessage1(FirstCanvas, FirstGrid, FirstHiddenField);
           warningMessage2(SecondCanvas, SecondGrid, SceondHiddenField);
       }
       function warningMessage1(FirstCanvas, FirstGrid, FirstHiddenField) {
           var canvas1 = document.getElementById(FirstCanvas);
           html2canvas(document.getElementById(FirstGrid), {
               onrendered: function (canvas1) {
                   document.body.appendChild(canvas1);
                   var image = canvas1.toDataURL("image/png");
                   image = image.replace('data:image/png;base64,', '');
                   document.getElementById(FirstHiddenField).value = image;
               }
           });
       }
       function warningMessage2(SecondCanvas, SecondGrid, SceondHiddenField) {
           var canvas2 = document.getElementById(SecondCanvas);
           html2canvas(document.getElementById(SecondGrid), {
               onrendered: function (canvas2) {
                   document.body.appendChild(canvas2);
                   var image1 = canvas2.toDataURL("image/png");
                   image1 = image1.replace('data:image/png;base64,', '');
                   document.getElementById(SceondHiddenField).value = image1;
               }
           });
       }
       $("document").ready(function () {
           if ($("#HiddenField1").val() == "block") {
               $("#sliderDiv").css("display", "none");
           }
           if ($("#HiddenField1").val() == "none") {
               $("#sliderDiv").css("display", "block");
           }
           $("#flip").click(function () {
               $("#sliderDiv2").slideUp("slow");
               $("#sliderDiv").slideToggle("slow");
               $("#sliderDiv1").slideUp("slow");
           });
       });

       $("document").ready(function () {
           if ($("#HiddenField2").val() == "block") {
               $("#sliderDiv1").css("display", "none");
           }
           if ($("#HiddenField2").val() == "none") {
               $("#sliderDiv1").css("display", "block");
           }
           $("#flip1").click(function () {
               $("#sliderDiv").slideUp("slow");
               $("#sliderDiv2").slideUp("slow");
               $("#sliderDiv1").slideToggle("slow");
           });
       });
       $("document").ready(function () {
           if ($("#HiddenField3").val() == "block") {
               $("#sliderDiv2").css("display", "none");
           }
           if ($("#HiddenField3").val() == "none") {
               $("#sliderDiv2").css("display", "block");
           }
           $("#flip2").click(function () {
               $("#sliderDiv").slideUp("slow");
               $("#sliderDiv1").slideUp("slow");
               $("#sliderDiv2").slideToggle("slow");
           });
       });

       $(function () {
           var currentPosition = 0;
           var slideWidth = 1200;
           var slides = $('.slide');
           var numberOfSlides = slides.length;

           slides.wrapAll('<div id="slidesHolder"></div>')
           slides.css({ 'float': 'left'
           });
           $('#slideshow').prepend('<span class="nav" id="leftNav">Move Left</span>')
.append('<span class="nav" id="rightNav">Move Right</span>');
           $('.nav').bind('click', function () {
               if (($(this).attr('id') == 'rightNav')) {
                   if (currentPosition == 0) {
                       currentPosition = currentPosition + 1
                   }
                   else if (currentPosition == 1) {
                       currentPosition = currentPosition + 1
                   }
                   else if (currentPosition == 2) {
                       currentPosition = 0
                   }
               }
               if (($(this).attr('id') == 'leftNav')) {
                   if (currentPosition == 0) {
                       currentPosition = currentPosition + 2
                   }
                   else if (currentPosition == 1) {
                       currentPosition = currentPosition - 1
                   }
                   else if (currentPosition == 2) {
                       currentPosition = currentPosition - 1
                   }
               }
               moveSlide();
           });
           function moveSlide() {
               $('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
           };
       });
   </script>
   <style type="text/css">
   #flip
{
padding:5px;
text-align:center;
border:solid 1px #c3c3c3;
}
#flip1
{
padding:5px;
text-align:center;
border:solid 1px #c3c3c3;
}
#flip2
{
padding:5px;
text-align:center;
border:solid 1px #c3c3c3;
}
#slideshow {
position: relative;
}
#slideshow #slideshowWindow {
height: 540px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 1200px;
left:30px;
}
#slideshow #slideshowWindow .slide {
height: 540px;
margin: 0;
padding: 0;
position: relative;
width: 1200px;
}
#slideshow #slideshowWindow .slide .slideText a:link, #slideshow #slideshowWindow .slide .slideText a:visited {
color: #FFFFFF;
text-decoration: none;
}
#slideshow #slideshowWindow .slide .slideText h2, #slideshow #slideshowWindow .slide .slideText p {
color: #FFFFFF;
margin: 10px 0 0 10px;
padding: 0;
}
.nav
{
display:block;
text-indent:-10000px;
position:absolute;
cursor:pointer;
}
#leftNav
{
    background-position: left;
    top: 290px;
    left:-4px;
    width: 50px;
    height: 120px;
    background-image: url('../Images/icon-slide-arrow-right.png');
    background-repeat: no-repeat;
    z-index: 999;
}
#rightNav
{
    background-position: right;
top:290px;
left:1215px;
width:50px;
height:120px;
background-image: url('../Images/icon-slide-arrow-leftt.png');
background-repeat:no-repeat;
}
       </style>
</head>
<body>
    
    <form id="form1"  runat="server">
    <div>
    <div style="height: auto; width: auto; background-color: White;"> 
        <div id="flip" style="background-color: #0082AA; color: #FFFFFF;">
                    Filters</div>
                    <div id="sliderDiv" style="width: 100%; height: 700px;"> 
            This is Control sliding Panel. 
            <asp:Button ID="button1" runat="server" Text="Postback" onclick="button1_Click"/>
            <asp:RadioButton ID="RadioButton1" runat="server" AutoPostBack="True" 
                oncheckedchanged="RadioButton1_CheckedChanged" />
        </div> 
       <div id="flip1" style="background-color: #0082AA; color: #FFFFFF;">
                    Map and Chart</div>
                    <div id="sliderDiv1" style="width: 100%; height: 700px;"> 
            This is Control sliding Panel. 
            <asp:Button ID="button2" runat="server" Text="SecondButton" 
                onclick="button2_Click"/>
        </div>
       <div id="flip2" style="background-color: #0082AA; color: #FFFFFF;">
                    Report</div>
                    
                    <div id="sliderDiv2" style="width: 100%; height: 700px;"> 
                    
                    <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" 
                            oncheckedchanged="CheckBox1_CheckedChanged" />
                            
                        <asp:Button ID="Button3" runat="server" onclick="Button3_Click" Text="Button" 
                            Visible="False" />
            <div id="slideshow">
<div id="slideshowWindow">
<div class="slide">
<asp:GridView ID="grvMergeHeader" runat="server" 
                                ForeColor="White" Font-Names="Arial" Font-Size="10pt" GridLines="None">
                        </asp:GridView>
</div>
<div class="slide">
<asp:GridView ID="gridreport2" runat="server" ForeColor="White" Font-Names="Arial" Font-Size="10pt" GridLines="none">
                                    </asp:GridView>
</div>
<div class="slide">
<img src="slideshow/slide3.jpg" />
</div>
</div>
</div>
</div>
    </div> 
    <canvas id="myCanvas"  runat="server" width="200" height="200" hidden="hidden"></canvas>
    <asp:HiddenField ID="hdnResultValue" Value="Hie." runat="server"/>
    <canvas id="myCanvas1"  runat="server" width="200" height="200" hidden="hidden"></canvas>
    <asp:HiddenField ID="hdnResultValue1" Value="Hie." runat="server"/>
    <asp:HiddenField ID="HiddenField1" runat="server" Value="block"/>
    <asp:HiddenField ID="HiddenField2" runat="server" Value="block"/>
    <asp:HiddenField ID="HiddenField3" runat="server" Value="block"/>
    
    </div>
    </form>
</body>
</html>

And My C# code here:

C#

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
               DataTable dt = new DataTable("RunnerUp");
            DataColumn dc1 = new DataColumn("Name", typeof(string));
            DataColumn dc2 = new DataColumn("Points", typeof(int));
            dt.Columns.Add(dc1);
            dt.Columns.Add(dc2);
            DataRow dr1 = dt.NewRow();
            dr1[0] = "Vulpes";
            dr1[1] = 235;
            DataRow dr2 = dt.NewRow();
            dr2[0] = "SP Nayak";
            dr2[1] = 135;
            DataRow dr3 = dt.NewRow();
            dr3[0] = "Krishna";
            dr3[1] = 40;
            dt.Rows.Add(dr1);
            dt.Rows.Add(dr2);
            dt.Rows.Add(dr3);
            gridreport2.DataSource = dt;
            gridreport2.DataBind();
            grvMergeHeader.DataSource = dt;
            grvMergeHeader.DataBind();
            }
        }
        protected void button1_Click(object sender, EventArgs e)
        {
            HiddenField1.Value = "block";
        }

        protected void RadioButton1_CheckedChanged(object sender, EventArgs e)
        {
            HiddenField1.Value = "none";
        }

        protected void button2_Click(object sender, EventArgs e)
        {
            HiddenField2.Value = "block";
            HiddenField1.Value = "block";
        }

        protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
        { if (CheckBox1.Checked)
            {
            string FirstCanvas = myCanvas.ID;
            string FirstGrid = grvMergeHeader.ID;
            string FirstHiddenField = hdnResultValue.ID;
            string SecondCanvas = myCanvas1.ID;
            string SecondGrid = gridreport2.ID;
            string SceondHiddenField = hdnResultValue1.ID;
            Page.ClientScript.RegisterStartupScript(this.GetType(), "jhfgd", "warningMessage('" + FirstCanvas + "','" + FirstGrid + "','" + FirstHiddenField + "','" + SecondCanvas + "','" + SecondGrid + "','" + SceondHiddenField + "');", true);
            Button3.Visible=true;
            //HiddenField1.Value = "block";
            //HiddenField2.Value = "block";
            HiddenField3.Value = "none";
        }
        else
        {
            //
        }
        }

Kindly provide me your ideas.

Posted 23-Oct-13 20:36pm

D-Kishore

Updated 24-Oct-13 16:07pm

v5

Add a Solution

Comments

PoojaGahlaut 24-Oct-13 2:56am

Did you try giving Style="Display:none" property for your sliderDiv's?

D-Kishore 24-Oct-13 3:17am

I tried this, when I select the checkbox in the event I am making display none. its not working

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

TrushnaK · Answer 1 · 2013-10-23T21:03:00

Solution 1

Use Update Panels before your checkbox div
as

XML

<asp:UpdatePanel ID="updpnlRefresh" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                  //Your div
                </ContentTemplate>
</asp:UpdatePanel>

And Update it from CheckBox1_CheckedChanged event as
updpnlRefresh.Update()

Posted 23-Oct-13 21:03pm

TrushnaK

Comments

D-Kishore 24-Oct-13 3:15am

Hi Trushnak,

I tried this, In this case divs are not flickered but flashing is happening.

TrushnaK 24-Oct-13 3:19am

flashing means...

D-Kishore 24-Oct-13 5:10am

means when post back done white screen comes first then displaying the main screen controls.