Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #38742 > unrolled thread

Embed hides on subsequent dynamic updating

Back to article view | Back to comp.lang.javascript

Contents

  Embed hides on subsequent dynamic updating Andrew Poulos <ap_prog@hotmail.com> - 2020-08-21 14:22 +1000
    Re: Embed hides on subsequent dynamic updating Andrew Poulos <ap_prog@hotmail.com> - 2020-08-21 15:25 +1000
      Re: Embed hides on subsequent dynamic updating Julio Di Egidio <julio@diegidio.name> - 2020-08-20 23:15 -0700
        Re: Embed hides on subsequent dynamic updating Andrew Poulos <ap_prog@hotmail.com> - 2020-08-21 16:59 +1000

#38742 — Embed hides on subsequent dynamic updating

I have this html

<embed id="pdf"
   src=""
   type="application/pdf"
   title=""
   style="position:... ; display: none; opacity: 0;">

and this css

#pdf {
   transition: opacity 2s ease;
}

Selecting button 'A' causes the html to be dynamically updated to

<embed id="pdf"
   src="pdf/test.pdf#view=FitH"
   type="application/pdf"
   title="Test document"
   style="position:... ; display: block; opacity: 1;">

and the PDF displays. On selecting button 'B', the html is reverted back 
to the original and the PDF "hides". So far so good.

Now, selecting button 'A' a subsequent time causes the html to update 
correctly but the PDF doesn't display.

In Chrome's DevTools, unchecking and then checking the element's style 
checkbox for display: block; causes the PDF to display.

What's going on, and how can I get the PDF to display correctly every time?

Andrew Poulos

[toc] | [next] | [standalone]

#38743

On 21/08/2020 2:22 pm, Andrew Poulos wrote:
> I have this html
> 
> <embed id="pdf"
>    src=""
>    type="application/pdf"
>    title=""
>    style="position:... ; display: none; opacity: 0;">
> 
> and this css
> 
> #pdf {
>    transition: opacity 2s ease;
> }
> 
> Selecting button 'A' causes the html to be dynamically updated to
> 
> <embed id="pdf"
>    src="pdf/test.pdf#view=FitH"
>    type="application/pdf"
>    title="Test document"
>    style="position:... ; display: block; opacity: 1;">
> 
> and the PDF displays. On selecting button 'B', the html is reverted back 
> to the original and the PDF "hides". So far so good.
> 
> Now, selecting button 'A' a subsequent time causes the html to update 
> correctly but the PDF doesn't display.
> 
> In Chrome's DevTools, unchecking and then checking the element's style 
> checkbox for display: block; causes the PDF to display.
> 
> What's going on, and how can I get the PDF to display correctly every time?

I still don't know what's happening but I decided to wrap the EMBED in a 
DIV, and to change the display and opacity on the DIV instead, and the 
PDF can be hidden and revealed multiple times correctly.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#38744

On Friday, 21 August 2020 07:25:29 UTC+2, Andrew Poulos  wrote:
> On 21/08/2020 2:22 pm, Andrew Poulos wrote:
<snip>
> > What's going on, and how can I get the PDF to display correctly every
> > time?
> 
> I still don't know what's happening but I decided to wrap the EMBED in a 
> DIV, and to change the display and opacity on the DIV instead, and the 
> PDF can be hidden and revealed multiple times correctly.

Strange, works fine for me (tested on Edge and Chrome):

--------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test</title>
</head>
<body>
    Visible:
    <input type="checkbox" onclick="togglePdf(this.checked)">
    <br>
    <embed id="pdf"
        style="display: none; opacity: 0; transition: opacity 2s ease"
        src="about:blank"
        type="application/pdf"
        width="250"
        height="200">
    
    <script>
        var PDF_URL = "some.pdf";
        
        var pdf = document.getElementById("pdf");
        
        function togglePdf(visible) {
            if (visible) {
                pdf.src = PDF_URL;
                pdf.style.display = "inline";
                pdf.style.opacity = 1;
            }
            else {
                pdf.style.opacity = 0;
                pdf.style.display = "none";
                pdf.src = "about:blank";
            }
        }
    </script>
</body>
</html>
--------------------------

The devil is in the detail?

Julio

[toc] | [prev] | [next] | [standalone]

#38745

On 21/08/2020 4:15 pm, Julio Di Egidio wrote:
> On Friday, 21 August 2020 07:25:29 UTC+2, Andrew Poulos  wrote:
>> On 21/08/2020 2:22 pm, Andrew Poulos wrote:
> <snip>
>>> What's going on, and how can I get the PDF to display correctly every
>>> time?
>>
>> I still don't know what's happening but I decided to wrap the EMBED in a
>> DIV, and to change the display and opacity on the DIV instead, and the
>> PDF can be hidden and revealed multiple times correctly.
> 
> Strange, works fine for me (tested on Edge and Chrome):
> 
> --------------------------
> <!DOCTYPE html>
> <html lang="en">
> <head>
>      <meta charset="utf-8">
>      <title>Test</title>
> </head>
> <body>
>      Visible:
>      <input type="checkbox" onclick="togglePdf(this.checked)">
>      <br>
>      <embed id="pdf"
>          style="display: none; opacity: 0; transition: opacity 2s ease"
>          src="about:blank"
>          type="application/pdf"
>          width="250"
>          height="200">
>      
>      <script>
>          var PDF_URL = "some.pdf";
>          
>          var pdf = document.getElementById("pdf");
>          
>          function togglePdf(visible) {
>              if (visible) {
>                  pdf.src = PDF_URL;
>                  pdf.style.display = "inline";
>                  pdf.style.opacity = 1;
>              }
>              else {
>                  pdf.style.opacity = 0;
>                  pdf.style.display = "none";
>                  pdf.src = "about:blank";
>              }
>          }
>      </script>
> </body>
> </html>
> --------------------------
> 
> The devil is in the detail?

I tried your example and it works fine. Thanks for doing that.

Andrew Poulos

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web