1

new user, long time researcher.

My district uses Moodle and I am setting up my webpage. However Moodle doesn't like all HTML, CSS, or JAVA codes. Therefor, I need to hash it together. By default Moodle has a DIV ID="inst4"

<div id="inst4" class="block_navigation  block" role="navigation" data-block="navigation" data-instanceid="4" aria-labelledby="instance-4-header" data-dockable="1">
    <div class="header" id="yui_3_17_2_1_1471893404838_261"><div class="title" id="yui_3_17_2_1_1471893404838_177">
        <div class="block_action">
            <img class="block-hider-hide" alt="Hide Navigation block" src="http://moodle.tcu2905.us/theme/image.php/clean/core/1470413034/t/switch_minus" tabindex="0" title="Hide Navigation block">
            <img class="block-hider-show" alt="Show Navigation block" src="http://moodle.tcu2905.us/theme/image.php/clean/core/1470413034/t/switch_plus" tabindex="0" title="Show Navigation block">
            <input type="image" class="moveto customcommand requiresjs" alt="Move this to the dock" title="Dock Navigation block" src="http://moodle.tcu2905.us/theme/image.php/clean/core/1470413034/t/block_to_dock">
        </div>
        <h2 id="instance-4-header">Navigation</h2></div>
    </div>
    <div class="content" id="yui_3_17_2_1_1471893404838_249">
        <ul class="block_tree list" role="tree" data-ajax-loader="block_navigation/nav_loader" id="yui_3_17_2_1_1471893404838_248">
            <li class="type_unknown depth_1 contains_branch current_branch" aria-labelledby="label_1_1" tabindex="-1" id="yui_3_17_2_1_1471893404838_247">
            <p class="tree_item branch active_tree_node canexpand navigation_node" role="treeitem" aria-expanded="true" aria-owns="random57bb4f9c947b61_group" data-collapsible="false" tabindex="0" aria-selected="true" id="yui_3_17_2_1_1471893404838_255">
            <a tabindex="-1" id="label_1_1" href="http://moodle.tcu2905.us/my/">Dashboard</a></p>
            <ul id="random57bb4f9c947b61_group" role="group" tabindex="-1">
                <li class="type_setting depth_2 item_with_icon" aria-labelledby="label_2_2" tabindex="-1">
                   <p class="tree_item hasicon" role="treeitem" tabindex="-1" aria-selected="false">
                        <a tabindex="-1" id="label_2_2" href="http://moodle.tcu2905.us/?redirect=0">
                        <img class="smallicon navicon" alt="" src="http://moodle.tcu2905.us/theme/image.php/clean/core/1470413034/i/navigationitem" tabindex="-1">
                        <span class="item-content-wrap" tabindex="-1">Site home</span>
                         </a>
                     </p>
                </li>
                <li class="type_course depth_2 contains_branch" aria-labelledby="label_2_3" tabindex="-1">
                    <p class="tree_item branch" role="treeitem" aria-expanded="false" aria-owns="random57bb4f9c947b63_group" tabindex="-1" aria-selected="false">
                        <span tabindex="-1" id="label_2_3" title="Tri-City United Moodle Site">Site pages</span>
                    </p>
                    <ul id="random57bb4f9c947b63_group" role="group" aria-hidden="true" tabindex="-1">
                        <li class="type_unknown depth_3 item_with_icon" aria-labelledby="label_3_5" tabindex="-1">
                            <p class="tree_item hasicon" role="treeitem" tabindex="-1" aria-selected="false">
                                <a tabindex="-1" id="label_3_5" href="http://moodle.tcu2905.us/blog/index.php">
                                <img class="smallicon navicon" alt="" src="http://moodle.tcu2905.us/theme/image.php/clean/core/1470413034/i/navigationitem" tabindex="-1">
                                <span class="item-content-wrap" tabindex="-1">Site blogs</span>
                                </a>
                            </p>
                       </li>
                       <li class="type_custom depth_3 item_with_icon" aria-labelledby="label_3_6" tabindex="-1">
                           <p class="tree_item hasicon" role="treeitem" tabindex="-1" aria-selected="false">
                               <a tabindex="-1" id="label_3_6" href="http://moodle.tcu2905.us/badges/view.php?type=1">
                                   <img class="smallicon navicon" alt="" src="http://moodle.tcu2905.us/theme/image.php/clean/core/1470413034/i/navigationitem" tabindex="-1">
                                    <span class="item-content-wrap" tabindex="-1">Site badges</span>
                                </a>
                            </p>
                       </li>
                       <li class="type_setting depth_3 item_with_icon" aria-labelledby="label_3_7" tabindex="-1">
                           <p class="tree_item hasicon" role="treeitem" tabindex="-1" aria-selected="false">
                               <a tabindex="-1" id="label_3_7" href="http://moodle.tcu2905.us/tag/search.php">
                                   <img class="smallicon navicon" alt="" src="http://moodle.tcu2905.us/theme/image.php/clean/core/1470413034/i/navigationitem" tabindex="-1">
                                    <span class="item-content-wrap" tabindex="-1">Tags</span>
                                </a>
                            </p>
                       </li>
                       <li class="type_custom depth_3 item_with_icon" aria-labelledby="label_3_8" tabindex="-1">
                           <p class="tree_item hasicon" role="treeitem" tabindex="-1" aria-selected="false">
                               <a tabindex="-1" id="label_3_8" href="http://moodle.tcu2905.us/calendar/view.php?view=month">
                                   <img class="smallicon navicon" alt="" src="http://moodle.tcu2905.us/theme/image.php/clean/core/1470413034/i/navigationitem" tabindex="-1">
                                    <span class="item-content-wrap" tabindex="-1">Calendar</span>
                                </a>
                            </p>
                        </li>
                        <li class="type_activity depth_3 item_with_icon" aria-labelledby="label_3_9" tabindex="-1">
                            <p class="tree_item hasicon" role="treeitem" tabindex="-1" aria-selected="false">
                                <a tabindex="-1" id="label_3_9" title="Forum" href="http://moodle.tcu2905.us/mod/forum/view.php?id=1">
                                    <img class="smallicon navicon" alt="Forum" title="Forum" src="http://moodle.tcu2905.us/theme/image.php/clean/forum/1470413034/icon" tabindex="-1">
                                     <span class="item-content-wrap" tabindex="-1">Site news</span>
                                 </a>
                              </p>
                        </li>
                   </ul>
              </li>

              <li class="type_system depth_2 contains_branch" aria-labelledby="label_2_10" tabindex="-1" id="yui_3_17_2_1_1471893404838_246">

                   <p class="tree_item branch" role="treeitem" id="expandable_branch_0_courses" aria-expanded="false" data-requires-ajax="true" data-loaded="false" data-node-id="expandable_branch_0_courses" data-node-key="courses" data-node-type="0" tabindex="-1" aria-selected="false">
                       <a tabindex="-1" id="label_2_10" href="http://moodle.tcu2905.us/course/index.php">Courses</a>
                   </p>
               </li>
           </ul>
       </li>
   </ul>
</div>

My question is how can I hide DIV ID="inst4" using <'script>?

I've tried the following per another Stack Overflow post:

document.getElementById("inst4").style.visibility = "hidden";

However, it's not removing DIV ID="inst4" from the website. I'm wondering if it is actually possible or not, knowing I don't have control over DIV ID="inst4".

I know <'script> works, since I was able to get a background loading using:

<script>document.body.style.backgroundImage = "url('http://wallpaper.zone/img/149826.jpg')";

Any thoughts?

S McCrohan
  • 6,663
  • 1
  • 30
  • 39
Joey
  • 7
  • 2
  • What is the error in the JavaScript Developer Console.? My guess is you are referencing the element before it is rendered. – epascarello Aug 22 '16 at 20:16
  • Possible duplicate of [Show/hide 'div' using JavaScript](http://stackoverflow.com/questions/21070101/show-hide-div-using-javascript) – v.coder Aug 22 '16 at 20:17
  • Try adding this script in the footer of your page. probably you are trying to access when the element is not present on the page. You can also test this by checking the length of the element. Moreover using visibility hidden or display none will only make the element invisible and wont remove it from the page. – Vatsal Aug 22 '16 at 20:23
  • I get the following message in console. `index.php:107 Uncaught TypeError: Cannot read property 'style' of null` – Joey Aug 22 '16 at 21:16

2 Answers2

0

There are several ways to handle your script needing to access elements on the page that haven't yet loaded.

  1. As one of the comments suggested, you can move your script to the bottom of the webpage, just before the closing tag. This probably isn't an issue in your case, but can result in elements that would be changed by the script potentially being temporarily visible as the page loads. The script would also need to be included in the html body code and the best practice is to keep it separate.
  2. You could use the DOMContentLoaded event. It triggers on the document when the page is ready( the DOM hierarchy has been constructed). DOMContentLoaded will wait for external scripts and will trigger after all inline scripts execute. You should be able to access and hide the div id after this event.
  3. window.onload will execute when all files and resources like images have finished loading. It is probably unnecessary to wait for this event in your case because the DOM tree will have finished loading after the DOMContentLoaded event
Jinw
  • 428
  • 5
  • 10
  • I tried adding the script at the bottom, it didn't change anything. I used [javascript.info](http://javascript.info/tutorial/onload-ondomcontentloaded#the-alternative-to-domcontentloaded) as a reference on DOMContentLoaded and window.onload, since I've never used them before and get the following errors: `index.php:107 Uncaught ReferenceError: ready is not defined` `index.php:107 Uncaught TypeError: Cannot set property 'onload' of undefined` I'm wondering if because "inst4" loads by default, I can't remove it. – Joey Aug 23 '16 at 10:36
0

I found out today that Moodle doesn't function the same as a standard website (first time using it). Therefor, I cannot achieve what I was looking to do. Thank you everyone for your input though!

Joey
  • 7
  • 2