locked
javascript to set visibility RRS feed

  • Question

  • User363578564 posted

    there is DIV in row 1 with height 300px

    when setting DIV to hidden by javascript, row 2 come up.  that is what i want

    however, when i set the DIV back to visible by javascript

    row 1 and row 2 are overlapped on screen.  How to solve it?  thanks.

    Wednesday, December 23, 2020 10:47 AM

Answers

  • User363578564 posted

    Thanks for the help

    finally it is ok by adding style.display

                    if (CbHTML.checked == true) {
                        TxtMessage.style.visibility = "hidden";
                        TxtMessage.style.display = "block"
                        TxtMessage.style.height = 0;
                        FileUploadHTML.style.visibility = "visible";
                    } else {
                        TxtMessage.style.visibility = "visible";
                        TxtMessage.style.display = "inline-table"
                        CKEDITOR.config.height = 580;
                        FileUploadHTML.style.visibility = "hidden";
                    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 2, 2021 2:09 AM

All replies

  • User753101303 posted

    Hi,

    Could it be that you are using CSS Layout - The position Property (w3schools.com) rather than letting them flow one after the other?

    See  Debugging CSS - Learn web development | MDN (mozilla.org) to inspect and activate/deactivate styles to confirm if it is caused by a position or some other unexpected CSS style.

    Edit: you are just changing the "display" style? When something that should work quite out of the box doesn't, it's a bit hard to be sure which problem was introduced without seeing your code. You could consider:
    - using a simplified versino for example at JSFiddle - Code Playground to understand what is done wrong
    - if not you have something to show others

    In particular when showing code you'll get likely more help if you took care of narrowing what matters to show just that,rather than just just showing your full markup and style and asking others to ignore all irrelevant stuff.

    Wednesday, December 23, 2020 11:03 AM
  • User-1151440187 posted

    Hey, Good Morning.

    First, hide the first div tag as you want using the "display: none" style.

    And use the hide and show method to display that div tag.

    I have written the code on fiddle just check it out here: https://jsfiddle.net/7ndzm0gq/

    If you don't want two methods then you can hide and show using just one method "toggle" on just one button click.

    I have also written the code for it which is commented in the fiddle you can check it.

    Hope you find your answer.

    Tuesday, December 29, 2020 3:04 AM
  • User363578564 posted

    sorry to response so late because of covid-19.  I wish to show either TxtMessage or FileUploadHTML

                function SwitchHTML() {
                    var CbHTML = document.getElementById("CbHTML");
                    var TxtMessage = document.getElementById('cke_TxtMessage')
                    var FileUploadHTML = document.getElementById('FileUploadHTML')
                    if (CbHTML.checked == true) {
                        TxtMessage.style.visibility = "hidden";
                        TxtMessage.style.height = 0;
                        FileUploadHTML.style.visibility = "visible";
                    } else {
                        TxtMessage.style.visibility = "visible";
                        CKEDITOR.config.height = 580;
                        FileUploadHTML.style.visibility = "hidden";
                    }
                }

                <tr >
                    <td style="text-align:right;vertical-align:top">Message (<asp:Label ID="NoOfCharacter" runat="server" Text="" style="color: #006600; font-weight: 700;" />4000) :<br />
                        HTML content<asp:CheckBox ID="CbHTML" runat="server" onchange="SwitchHTML()" /></td>
                    <td><asp:TextBox ID="TxtMessage" runat="server" TextMode="MultiLine" />
                        <asp:FileUpload ID="FileUploadHTML" runat="server" Font-Size="Medium"  width="600px" Style="visibility:hidden" accept=".html" /></td>
                    <script>
                        CKEDITOR.replace('TxtMessage', {
                            customConfig: '/ckeditorFULL/config2.js'
                        });
                        CKEDITOR.config.height = 580;
                        CKEDITOR.config.extraPlugins = 'wordcount,notification';
                        CKEDITOR.config.wordcount = { showCharCount: true, showWordCount: false, showParagraphs: false };
                        CKEDITOR.config.wordcount.countSpacesAsChars = true;
                        CKEDITOR.config.wordcount.countHTML = true;
                        CKEDITOR.config.wordcount.maxCharCount = 4000;
                    </script>
                </tr>

    Monday, March 1, 2021 8:26 AM
  • User363578564 posted

    Thanks for the help

    finally it is ok by adding style.display

                    if (CbHTML.checked == true) {
                        TxtMessage.style.visibility = "hidden";
                        TxtMessage.style.display = "block"
                        TxtMessage.style.height = 0;
                        FileUploadHTML.style.visibility = "visible";
                    } else {
                        TxtMessage.style.visibility = "visible";
                        TxtMessage.style.display = "inline-table"
                        CKEDITOR.config.height = 580;
                        FileUploadHTML.style.visibility = "hidden";
                    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 2, 2021 2:09 AM