Jump to content

Ron Brinkman

Members
 View Profile  See their activity

  • Posts

    18

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Ron Brinkman's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Ron Brinkman
    I have several goals with respect to navigation in my website: 1. Have just a single-page navigation file that can be included (w3.includeHTML) into every web page rather than being repeated over-and-over on each web page. a. Result: a change to navigation will require only one change to automatically update every web page on the site. Saves a lot of maintenance effort. 2. Highlight the top level (main menu bar) button background that is currently selected with a different color (I use Teal) 3. Make pages accessible on all device sizes (yeah, don’t we all) a. On small screen implementations, implement slide-over drop-down menus I first tried the solution at https://www.w3schools.com/w3css/w3css_navigation.asp but I have many items on the main menu, and when used on a smartphone they permanently take up a large portion of the screen I am now trying the more promising approach at https://www.w3schools.com/css/css_rwd_templates.asp but the example is too simplistic in that the main menu item that contains a drop-down list (More) is not demonstrated for the small screen implementation. So, here’s my current state. Home page (I have named mine 0testHome.html) <!-- 0testHome.html --> <!-- see https://www.w3schools.com/css/css_rwd_templates.asp --> <!-- and https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_band&stacked=h --> <!DOCTYPE html> <html> <title>Home</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="utf-8"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><body> <script src="https://www.w3schools.com/lib/w3.js"></script> <body onload="hiliteFunction()" class="w3-content" style="max-width:auto"> <!-- Include navigation for the page --> <div w3-include-html="/0testnavHome.html"></div> <div class="w3-container" style="margin-top:46px"> Home <!-- Path to this page --> <div id="screenSize"></div> <div id="topButton"></div> <h1>Home</h1> <!-- Page Title --> <!-- page content --> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec egestas arcu. Aenean auctor ornare ipsum eget molestie. Quisque dictum metus ex, et tempus diam blandit eu. Vivamus cursus mollis egestas. Nullam commodo at odio sit amet gravida. Fusce pretium lectus tellus, sed fringilla erat faucibus id. Ut rutrum placerat dui, sed rutrum nisl ultrices vel. Nam consectetur pharetra sollicitudin. Integer lacinia auctor facilisis. Mauris non ante congue, rutrum lacus sed, laoreet metus.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec egestas arcu. Aenean auctor ornare ipsum eget molestie. Quisque dictum metus ex, et tempus diam blandit eu. Vivamus cursus mollis egestas. Nullam commodo at odio sit amet gravida. Fusce pretium lectus tellus, sed fringilla erat faucibus id. Ut rutrum placerat dui, sed rutrum nisl ultrices vel. Nam consectetur pharetra sollicitudin. Integer lacinia auctor facilisis. Mauris non ante congue, rutrum lacus sed, laoreet metus.</p> <!-- scripts --> <script> //This script is from https://www.w3schools.com/css/css_rwd_templates.asp //...with example https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_band&stacked=h // Used to toggle the menu on small screens when clicking on the menu button function navFunction() { var x = document.getElementById("navToggle"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script> <script> function hiliteFunction(x) { if (x === undefined) { x = "unknown"; } let text = "<p>" + x + "</p>"; document.getElementById("topButton").innerHTML = text; } </script> <script> w3.includeHTML(); </script> <script> let text = "<p>innerWidth: " + window.innerWidth + "</p>" + "<p>innerHeight: " + window.innerHeight + "</p>" + "<p>outerWidth: " + window.outerWidth + "</p>" + "<p>outerHeight: " + window.outerHeight + "</p>"; document.getElementById("screenSize").innerHTML = text; </script> </div> </body> </html> Single-page navigation (named 0testnavHome.html) <!-- 0testnavHome.html --> <div class="w3-container"> <!-- see https://www.w3schools.com/css/css_rwd_templates.asp --> <!-- and https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_band&stacked=h --> <div class="w3-top" style="max-width: 950px;"> <!-- Navigation (Stays on Top) --> <div class="w3-bar w3-black"> <a class="w3-bar-item w3-button w3-padding-large w3-hide-medium w3-hide-large w3-right" href="javascript:void(0)" onclick="navFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Home')">Home</a> <span class="w3-bar-item w3-hide-medium w3-hide-large w3-right">More &gt;</span> <div class="w3-dropdown-hover w3-hide-small"> <button class="w3-button">Menu 1 <i class="fa fa-caret-down"></i></button> <div class="w3-dropdown-content w3-bar-block w3-dark-grey"> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 1')">Item 1</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 1')">Item 2</a> </div> </div> <div class="w3-dropdown-hover w3-hide-small"> <button class="w3-button">Menu 2 <i class="fa fa-caret-down"></i></button> <div class="w3-dropdown-content w3-bar-block w3-dark-grey"> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 2')">Item 1</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 2')">Item 2</a> </div> </div> <div class="w3-dropdown-hover w3-hide-small"> <button class="w3-button">Menu 3 <i class="fa fa-caret-down"></i></button> <div class="w3-dropdown-content w3-bar-block w3-dark-grey"> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 1</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 2</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 3</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 4</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 5</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 6</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 7</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 8</a> </div> </div> <div class="w3-dropdown-hover w3-hide-small" w3-hide-small> <button class="w3-button">Menu 4 <i class="fa fa-caret-down"></i></button> <div class="w3-dropdown-content w3-bar-block w3-dark-grey"> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 1</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 2</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 3</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 4</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 5</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 6</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 7</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 8</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 9</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 10</a> </div> </div> <a href="#" class="w3-bar-item w3-button w3-hide-small w3-right" onclick="hiliteFunction('Menu 5')">Menu 5</a> </div> </div> <!-- Navbar on small screens (remove the onclick attribute if you want the navbar to always show on top of the content when clicking on the links) --> <div id="navToggle" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium w3-top" onclick="navFunction()" style="width: 45%; margin-top: 46px;"> <div class="w3-dropdown-hover"> <button class="w3-button">Menu 1<span class="w3-right">&gt;</span></button> <div class="w3-dropdown-content w3-bar-block w3-dark-grey"> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 1')">Item 1</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 1')">Item 2</a> </div> </div> <div class="w3-dropdown-hover"> <button class="w3-button">Menu 2<span class="w3-right">&gt;</span></button> <div class="w3-dropdown-content w3-bar-block w3-dark-grey"> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 2')">Item 1</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 2')">Item 2</a> </div> </div> <div class="w3-dropdown-hover"> <button class="w3-button">Menu 3<span class="w3-right">&gt;</span></button> <div class="w3-dropdown-content w3-bar-block w3-dark-grey"> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 1</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 2</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 3</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 4</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 5</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 6</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 7</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 3')">Item 8</a> </div> </div> <div class="w3-dropdown-hover"> <button class="w3-button">Menu 4<span class="w3-right">&gt;</span></button> <div class="w3-dropdown-content w3-bar-block w3-dark-grey"> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 1</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 2</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 3</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 4</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 5</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 6</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 7</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 8</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 9</a> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 4')">Item 10</a> </div> </div> <a href="#" class="w3-bar-item w3-button" onclick="hiliteFunction('Menu 5')">Menu 5</a> </div> </div> ISSUES 1. [high priority] When viewed on a narrow screen or a smartphone, when hovering over Menu 1, for instance, the sub-menu choices (Item 1 and Item 2) drop down over the top of the other Menu 2 and Menu 3 choices. I need the sub-menu choices to drop down next to the list of main Menu choices because covering up Menu items confuses the user. Nothing I have tried (like w3-right) has succeeded in placing the sub-menu choices next to the Menu choices. 2. [high priority] When the user makes a choice, I need the appropriate Home or Menu 1..5 button background to change to Teal (class=”w3-teal”). I included a placeholder hiliteFunction() for the purpose of passing an argument to tell the Function which button to change, but I don’t know how to find the right button and change it. Ideally an argument wouldn’t even need to be passed – if the sub-menu’s position in the hierarchy could be sensed, but passing an argument would be OK. And of course, the Function would need to turn off the Teal background from the previous user selection. Or better yet maybe there is a better way to do this without the Function. 3. [pesky but minor] When viewed on a narrow screen or a smartphone, Menu 1 is always hilited even when not hovering over it. I can’t see what’s making it stay hilited – none of the others hilite before being hovered over. 4. [pesky, can cause future errors] The navigation file that is included (via w3.includeHTML) doesn’t refresh even if the parent page is refreshed; the cached navigation file is used. Is there a way to force the included file to refresh every time the main page is loaded, just in case it has changed? I appreciate any help you can provide addressing these issues.
  2. Ron Brinkman
    Thank you dsonesuk, I obviously need t study up on the interaction of the structures - my bad. In the meantime, the modal is working with the paragraph removed.
  3. Ron Brinkman
    My mental model of a modal is that it's completely autonomous from the "outside world". I can do anything I want in the modal and it doesn't affect the outside, and vice versa. When I run the example above, which simply places the modal inside a paragraph (<p>...</p>) the modal does not work, an the text following the button is forced onto a new line. See the attached WithPara.jpg image. When I remove the paragraph tags the modal now works, and the text following the button stays inline with the button. See the attached NoPara.jpg image. As I noted, my workaround is simply to omit the paragraph tags, but that seems counter to what I do everywhere else, which is to keep my paragraphs of text inside paragraph structures. But I may be wrong 😁
  4. Ron Brinkman
    Later I ran onto an odd situation (to me at least) that I banged my head against the wall for a long time to track down. In my use, I have a paragraph of explanatory text preceding the button, and text that immediately follows the button. When the paragraph is inserted into the code there were two surprises: The modal quit working The text following the button was forced to start on a new line - it was not permitted to immediately follow the button. Here's the (slightly) modified code: <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container"> <h2>W3.CSS Modal</h2> <p>Push this button ... <button onclick="this.nextElementSibling.style.display='block'" class="w3-button w3-black">Open Modal</button> <div id="id01" class="w3-modal"> <div class="w3-modal-content"> <div class="w3-container"> <span onclick="this.closest('.w3-modal').style.display='none'" class="w3-button w3-display-topright">&times;</span> <p>Some text. Some text. Some text.</p> <p>Some text. Some text. Some text.</p> </div> </div> </div> ... to see how a modal works</p> </div> </body> </html> The reason for my need is that I replace the big black button with an "information" icon, so the insertion into the middle of the string of text makes sense. FWIW, my button is: <button class="btn" onclick="this.nextElementSibling.style.display='block'"><i class="fa fa-info-circle"></i></button> I can probably find a way to accommodate this issue, but if anybody has an elegant solution I would appreciate seeing it.
  5. Ron Brinkman
    Perfect. The redefinition of the onclick statement was the part I was not capable of determining. Thank You!
  6. Ron Brinkman
    <!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container"> <h2>W3.CSS Modal</h2> <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Open Modal id01</button> <div id="id01" class="w3-modal"> <div class="w3-modal-content"> <div class="w3-container"> <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span> <p>Some text. Some text1. Some text1.</p> <p>Some text. Some text1. Some text1.</p> </div> </div> </div> <br><br> <button onclick="document.getElementById('id02').style.display='block'" class="w3-button w3-black">Open Modal id02</button> <br> <div id="id02" class="w3-modal"> <div class="w3-modal-content"> <div class="w3-container"> <span onclick="document.getElementById('id02').style.display='none'" class="w3-button w3-display-topright">&times;</span> <p>Some text. Some text2. Some text2.</p> <p>Some text. Some text2. Some text2.</p> </div> </div> </div> </div> </body> </html> The above code, modified from https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal to display two different modals, works fine - but I was getting tired of creating unique IDs for each Modal, and repeating the ID three times. So, I was hoping that I could use an approach with an Adjacent Sibling Selector (+) similar to that shown in https://www.w3schools.com/howto/howto_css_display_element_hover.asp except that a Modal would be displayed rather than a block. The attempts I have made have not been successful. I would be happy to have the Modal appear with either the "onclick" method or "hover" method. It would just make code maintenance easier to simply place the actuating portion of the code next to the display portion, simplifying the process. Is it possible to make the Adjacent Sibling Selector work with Modals?
  7. Ron Brinkman
    <!DOCTYPE html> <html> <head> </head> <body onload="noticeFunction()"> <script> function noticeFunction() { let size = 800; //let size = min(100, 700); //let size = min(window.innerWidth, window.innerHeight); if (size < 900) { alert("<b>Notice</b>\nYour device screen size is " + size + "px"); } } </script> <p>Hello World</p> </body> </html> The function as written above works, but: I would like to use formatting (bold text). The alert just renders the literal text. Do alerts not permit formatting? I need to replace the hard coded value (size) with the detected window size. If either of the commented lines is uncommented no alert is displayed. Best Regards, Ron Brinkman
  8. Ron Brinkman
    The following files, posted at the root of the server, result in the Navbar and the following text scrolling off the top of the screen for me. <!-- test.html --> <!DOCTYPE html> <html> <title>Test</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="utf-8"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <script src="https://www.w3schools.com/lib/w3.js"></script> <style> .w3-top { position: sticky; } </style> <body class="w3-content" style="max-width:auto"> <div w3-include-html="/Nav-Test.html"></div> <!-- Include the appropriate navigation for the page --> <!-- <div w3-include-html="another-include.html"></div> --> <script> w3.includeHTML(); </script> <!-- End including navigation --> <div class="w3-container"> <h2>Fixed Top Navigation</h2> <h3>The w3-top class forces the navigation bar to stay at the top of the page, even when the user scrolls the page.</h3> <h3>Scroll this page to see the effect.</h3> <p>Some text to enable scrolling..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> </div> </body> </html> and <!-- Nav-Test.html --> <!-- see https://www.w3schools.com/w3css/w3css_navigation.asp --> <div class="w3-top" style="max-width:950px"> <!-- Navigation (Stays on Top) --> <div class="w3-bar w3-black"> <a href="/" class="w3-bar-item w3-button w3-mobile">Home</a> <div class="w3-dropdown-hover w3-mobile"> <button class="w3-button">Menu1 <i class="fa fa-caret-down"></i></button> <div class="w3-dropdown-content w3-bar-block w3-dark-grey"> <a href="/Menu1/Item1/" class="w3-bar-item w3-button w3-mobile">Item1</a> <a href="/Menu1/Item2/" class="w3-bar-item w3-button w3-mobile">Item2</a> </div> </div> <div class="w3-dropdown-hover w3-mobile"> <button class="w3-button">Menu2 <i class="fa fa-caret-down"></i></button> <div class="w3-dropdown-content w3-bar-block w3-dark-grey"> <a href="/Menu2/Item1/" class="w3-bar-item w3-button w3-mobile">Item1</a> <a href="/Menu2/Item2/" class="w3-bar-item w3-button w3-mobile">Item2</a> </div> </div> <div class="w3-dropdown-hover w3-mobile"> <button class="w3-button">Menu3 <i class="fa fa-caret-down"></i></button> <div class="w3-dropdown-content w3-bar-block w3-dark-grey"> <a href="/Menu3/Item1/" class="w3-bar-item w3-button w3-mobile">Item1</a> <a href="/Menu3/Item2/" class="w3-bar-item w3-button w3-mobile">Item2</a> <a href="/Menu3/Item3/" class="w3-bar-item w3-button w3-mobile">Item3</a> <a href="/Menu3/Item4/" class="w3-bar-item w3-button w3-mobile">Item4</a> <a href="/Menu3/Item5/" class="w3-bar-item w3-button w3-mobile">Item5</a> <a href="/Menu3/Item6/" class="w3-bar-item w3-button w3-mobile">Item6</a> <a href="/Menu3/Item7/" class="w3-bar-item w3-button w3-mobile">Item7</a> <a href="/Menu3/Item8/" class="w3-bar-item w3-button w3-mobile">Item8</a> </div> </div> <div class="w3-dropdown-hover w3-mobile"> <button class="w3-button">Menu4 <i class="fa fa-caret-down"></i></button> <div class="w3-dropdown-content w3-bar-block w3-dark-grey"> <a href="/Menu4/Item1/" class="w3-bar-item w3-button w3-mobile">Item1</a> <a href="/Menu4/Item2/" class="w3-bar-item w3-button w3-mobile">Item2</a> <a href="/Menu4/Item3/" class="w3-bar-item w3-button w3-mobile">Item3</a> <a href="/Menu4/Item4/" class="w3-bar-item w3-button w3-mobile">Item4</a> <a href="/Menu4/Item5/" class="w3-bar-item w3-button w3-mobile">Item5</a> <a href="/Menu4/Item6/" class="w3-bar-item w3-button w3-mobile">Item6</a> <a href="/Menu4/Item7/" class="w3-bar-item w3-button w3-mobile">Item7</a> <a href="/Menu4/Item8/" class="w3-bar-item w3-button w3-mobile">Item8</a> <a href="/Menu4/Item9/" class="w3-bar-item w3-button w3-mobile">Item9</a> <a href="/Menu4/Item10/" class="w3-bar-item w3-button w3-mobile">Item10</a> </div> </div> <a href="/Menu5/Item1/" class="w3-bar-item w3-button w3-mobile">Menu5</a> </div> </div>
  9. Ron Brinkman
    Yes, I am using the example you mention. Giving it sticky positioning was successful in getting the page text to start at the bottom of the Navbar rather than starting at the top of the Navbar (and therefore the first couple of lines of the page text hidden behind the Navbar). However, with this change, surprisingly, the Navbar no longer "sticks". The Navbar and all the succeeding page text simply scroll off the screen.
  10. Ron Brinkman
    I implemented W3.CSS Navigation Bars as shown at https://www.w3schools.com/w3css/w3css_navigation.asp, with w3-mobile class. I found that I had to place a margin-top before the start of the page text in order to keep the first line(s) of text from being hidden behind the navbar. So far, so good. When the page is viewed on a small cell phone device, the w3-bars that were initially displayed on a single horizontal line stack on top of each other, the height now much greater than the original margin-top spacing and therefore hiding text at the top of the web page. The text will not scroll "down", so it cannot be viewed by the user. There must be a way to get the top of the page text to always start at the bottom of the Navigation Bar so that the margin-top would not need at all (?). Best Regards, Ron Brinkman
  11. Ron Brinkman
    I think there may be no automatic solution to this issue, but I will ask anyhow just in case... I have implemented accordions in accordance with https://www.w3schools.com/howto/howto_js_accordion.asp. Inside one of the accordion elements I have implemented a multi-level treeview in accordance with https://www.w3schools.com/howto/howto_js_treeview.asp. The problem is that as the elements of the tree are opened they exceed the height of the accordion block and the bottom of the tree falls out of sight under the succeeding accordion block. The primitive solution I am using is to put a bunch of extra whitespace below the tree, giving enough room for a generous amount of growth of the expanded tree...but of course, you will never know how much is enough extra whitespace in a dynamic tree. So, the question is, is it feasible to have the accordion block size expand/contract dynamically as the size of the contents change? Best Regards, Ron Brinkman
  12. Ron Brinkman
    Thank you for the quick, and spot-on response.
  13. Ron Brinkman
    I have successfully used a Font Awesome icon that, when the icon is clicked, invokes a Modal like so: <span style="font-size: 15px; color: Teal;"> <i onclick="document.getElementById('S9id01').style.display='block'" class="fa fa-info-circle"></i></span> I am trying to invoke a Modal by clicking on a .jpg image rather than a Font Awesome icon like so: <span> <i onclick="document.getElementById('S9id01').style.display='block'" <img src="VoteFraudPenaltySm.jpg">></i></span> This yields a ">" being show on the web page, with no image. I've tried numerous variations with no success. There's obviously some fundamental concept I'm not understanding to get the syntax right. Best Regards, Ron Brinkman
  14. Ron Brinkman
    Thank you for providing the generic solution - and - for helping clarify for me how the modal structure works in the first place. Now works as I had hoped.
  15. Ron Brinkman
    Thank you for your reply. I chose the "Close the Modal" option on purpose because it would permit the user to close the modal either way, thinking that would be best from a user standpoint. If I have only one modal per page this feature works as expected. If I have multiple modals on a page, some modals will close only with the "X" and others only by clicking outside the modal - a mixed bag. I must have stumbled onto a more complicated way of doing a modal that permits the modal to be closed by either clicking the "X" or clicking outside the modal, than you did. In the "Close the Modal" example it uses divs like so: <div id="id01" class="w3-modal"> <div class="w3-modal-content w3-card-4"> <header class="w3-container w3-teal"> <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span> <h2>Modal Header</h2> </header> <div class="w3-container"> <p>You have two options to close this modal:</p> <p>Click on the "x" or click anywhere outside of the modal!</p> </div> <footer class="w3-container w3-teal"> <p>Modal Footer</p> </footer> </div> </div> </div> The divs appear to the the things that force the structure breaks. Your example is MUCH simpler, and it appears it would permit inline icons by replacing "HERE" in your example above with '<img src="icon.jpg">'. I'm overlooking the simpler method if it's on the same web page as the "Close the Modal" example(?!?). Also, the example opens the modal - but where does the text/image that is to be displayed placed? Best Regards, Ron Brinkman
×
×
  • Create New...