Hidden div shwoing when back button is clicked

[Hfnet]

Hello,

I have a div in an aspx (vb .net 4.5) page:

<div id="Div1" runat="server" class="shaded" style="display:none;">&nbsp;</div>

When an ImageButton is clicked, it shows the div from code-behind:

Private Sub ImageButton1_Click(sender As Object, e As ImageClickEventArgs) Handles ImageButton1.Click

        Me.Div1.Attributes.Add("style", "display:block")

End Sub

For some reason, when a person hits the back button in the browser, this hidden div is always shown again. I have even put code in the Page Load to try getting round this.

Can anyone help?

Thanks

 

[Hfnet]

Sorry, css:

.shaded {
    left: 0;
    top: 0; 
    width: 100%;
    height: 100%; /*position:relative; */
    opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
    background-color: #000000;
    z-index: 995;
    position: absolute;
}

 

[ChrisHirst]

Documents read from the browser cache do not trigger onload events or reload CSS, whatever state they were in, is what they come back as. "Back" simply restores the previous DOM image as it was.


Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[Hfnet]

But why does the div show? Is there anything I can do to ensure it doesn't? It only shows on hitting back, not if you click the home button for example.

It seems somewhat random. If someone clicks on the button to show the div and then closes it again, it will re-show on returning to the page every single time, but then sometimes it will show anyway even if it had previously not been triggered.

Most odd.

 

[ChrisHirst]

Using the "home" button/link reloads the URL from the server, the back button doesn't.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[Hfnet]

An actual suggestion would have been welcome.

 

[ChrisHirst]

To do what??

There is no IfLoadedFromCache event to hook into, so you cannot make a browser re-render the page if has been loaded from history(-1).

What loads from the cache is what it is, and there isn't a whole lot you can do about it.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[HappyFusionHead]

Hey silly question (and yes I know i'm slow to respond ),

as your div is absolutely positioned anyway, have you tried simply setting both top and left to negative numbers and specifying a width ... e.g.:

.shaded {
    left: -800px;
    top: -800px; 
    width: 700px;
    height: 700px; /*position:relative; */
    opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
    background-color: #000000;
    z-index: 995;
    position: absolute;
}

then change your onclick to something like this:

Private Sub ImageButton1_Click(sender As Object, e As ImageClickEventArgs) Handles ImageButton1.Click

        Me.Div1.Attributes.Add("style", "display:block")
        Me.Div1.Attributes.Add("style", "left:0px")
        Me.Div1.Attributes.Add("style", "top:0px")
        Me.Div1.Attributes.Add("style", "height:100%")
        Me.Div1.Attributes.Add("style", "width:100%")

End Sub

sorry if the syntax is nasty (personally I'd just do this in javascript rather than ask ASP to generate the javascript for me ) but I find that provided you get your CSS states correct it should work... of course the first thing to try is to simply specify that the div should be hidden by appending a display attribute to your initial CSS ... something like:

.shaded {
    left: 0;
    top: 0; 
    width: 100%;
    height: 100%; /*position:relative; */
    opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
    background-color: #000000;
    z-index: 995;
    position: absolute;
    [i]display: none;[/i]
}

or considering you're heading back a step, why not on form submission ensure the style is set to display:none (e.g. your forms submit button can have an onclick that does this.)

There are literally many ways to combat this scenario, not sure it's still an issue as i'm sure by now you've found a solution, but I noticed your post which read:

An actual suggestion would have been welcome

So I figured I might as well give you one or two

hfh