Effortless Sidebar Navigation for populating primary content

Question

Effortless Sidebar Navigation for populating primary content

Initially, I must confess that even though this seems like a straightforward issue, I am just as puzzled as you are by my inability to solve it independently. With no prior experience in web development, I find myself in need of using GitHub Pages to document a project. Unfortunately, I have been struggling with this task for an embarrassingly long time.

The main challenge lies in my attempt to incorporate nested iframes into the layout. However, as I add layers, additional scroll bars appear and the content fails to scroll in perfect synchronization. Setting scrolling="no" results in hidden content. The problem is further exacerbated when I introduce frames for the sidebars.

Here's the code from Index.html:

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="./styles/main_style_sheet.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="mainheader"> 
    <b> My Project Name
    </b>
</div>

<body>

<div class="topnav">
    <a href="overview.html" target="main_body">Overview</a>
    <a href="important_concepts.html" target="main_body">Model Concepts/Patterns</a> 
    <a href="lineage.html" target="main_body">Data Lineage</a>
    <a href="entity_metadata.html" target="main_body">Entity Details</a>
    <a href="jargon.html" target="main_body">Jargon Glossary</a> 
    <a href="examples.html" target="main_body">Example Demos</a>             
</div>

<!-- This creates a frame in the lower body, with an unwanted scroll bar, but it's not too bad. --> 
<iframe name="main_body" src="overview.html" height="100%" width="100%">

</body>
</html>

It becomes especially tricky when dealing with a left sidebar. It appears that I am misunderstanding how heights are inherited amongst frames. The image depicts how the sidebars keep piling up, and the scrolling mechanism does not sync flawlessly. Despite trying to increase the height to 100000 and hiding scrolling, the horizontal scroll is also eliminated.

<!DOCTYPE html>
<html>

  <link href="./styles/main_style_sheet.css" rel="stylesheet" type="text/css">    

  <body>

  <div class="container" style="display: flex; height:100%;">
    <div style="display:inline-block;">
      <iframe 
            src="cs_entity_sidebar.html"
            name="cs_entity_sidebar"
            frameborder="0" 
            scrolling="no" 
            width="100%" 
            align="left">
      </iframe> 

    </div>
      <iframe  class="second-row" 
          name="main_overview_content" 
          scrolling = "yes"
          height=10000 
          align="left"
        >
      </iframe>
</div>

</html>

A tutorial on a site closely resembling what I require can be found at this link.

A snippet from that source:

<div id="main-container">
    <div id="sidebar">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
        <a href="#">Link 4</a>
        <a href="#">Link 5</a>
    </div>
    <div id="content">Content Area</div>
</div>

The question now is, how do I make the "Content Area" display the linked HTML content? When I try to implement this method in my own HTML, it redirects me to a separate window without the top navigation menu.

This query comes close to addressing my concerns, although it doesn't touch upon linking the pages and maintaining proper navigation.

I have come across recommendations suggesting jQuery/Ajax as a better alternative here. Unfortunately, none of my attempts with Ajax seem to yield any impact. Given that I'm connected through a corporate VPN, there could potentially be a proxy-related issue hindering progress.

Any assistance provided would be greatly appreciated.

Furthermore, incorporating a jQuery/Ajax approach proved ineffectual. While the script doesn't throw errors, clicking on links accomplishes nothing. Although I've tried various solutions, including leveraging the Google library, utilizing src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" has proven successful in other projects within my organization.

Note the screenshot highlighting the section below "Above this is from the script":

An inspection view error cropped up, as seen in this screenshot:

html jquery css ajax iframe

Answer 1

Answer №1

If you’re looking to create a website that allows users to navigate to a new page without triggering a page refresh, then you’re diving into the realm of modern dynamic websites.

In order to achieve this goal, using jquery/ajax is definitely the way to go as opposed to iframes due to various styling challenges associated with iframes (especially when it comes to responsive mobile web design). Here’s a straightforward snippet for implementation using jquery/ajax:

index.html:

<html>
<head>

  <!-- load ajax, file can also be loaded locally -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <script>
    /* create event handler that loads content into main area when navigation link is clicked */
    $(document).ready(function () {
      $('#link1').click(function(){
        $('#main_body').load('overview.html');
      });
    });
  </script>

</head>
<body>

  <div class="mainheader"> 
    <h3>My Project Name</h3>
  </div>

  <div class="topnav">
    <a id="link1">Overview</a>            
  </div>

  <!-- where you want the page to load -->
  <div id="main_body"></div>

</body>
</html>

overview.html:

<html>
<style>
  #wrapper {
    background-color: yellow;
    height: 200px;
  }
</style>

<div id="wrapper">
  <p>Dynamically loaded webpage</p>
</div>
</html>

link to a demo

Keep in mind that there are security considerations when loading content dynamically. For more information on this topic, check out this question: Dynamic html page creation with jquery

Edit: Your code functions properly on an online text editor. However, remember that Ajax will work effectively only if you host the webpages on a server that supports protocol schemes like http/https.

Answer 2

If you’re looking to create a website that allows users to navigate to a new page without triggering a page refresh, then you’re diving into the realm of modern dynamic websites.

In order to achieve this goal, using jquery/ajax is definitely the way to go as opposed to iframes due to various styling challenges associated with iframes (especially when it comes to responsive mobile web design). Here’s a straightforward snippet for implementation using jquery/ajax:

index.html:

<html>
<head>

  <!-- load ajax, file can also be loaded locally -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <script>
    /* create event handler that loads content into main area when navigation link is clicked */
    $(document).ready(function () {
      $('#link1').click(function(){
        $('#main_body').load('overview.html');
      });
    });
  </script>

</head>
<body>

  <div class="mainheader"> 
    <h3>My Project Name</h3>
  </div>

  <div class="topnav">
    <a id="link1">Overview</a>            
  </div>

  <!-- where you want the page to load -->
  <div id="main_body"></div>

</body>
</html>

overview.html:

<html>
<style>
  #wrapper {
    background-color: yellow;
    height: 200px;
  }
</style>

<div id="wrapper">
  <p>Dynamically loaded webpage</p>
</div>
</html>

link to a demo

Keep in mind that there are security considerations when loading content dynamically. For more information on this topic, check out this question: Dynamic html page creation with jquery

Edit: Your code functions properly on an online text editor. However, remember that Ajax will work effectively only if you host the webpages on a server that supports protocol schemes like http/https.

Effortless Sidebar Navigation for populating primary content

Answer №1

Similar questions

Is Ionic capable of storing data similar to sharedpreferences?

Prepare information for Flot Pie to work with

Unable to reach the top of an absolute or centered div when it exceeds the height of the viewport

Prevent loss of data when user incorrectly submits a webform

Dropdown with multiple selections organized in a hierarchical structure

ajax is providing identical data when called too frequently

When extracting the host URL and destination URL

Activate the radio button with jQuery when the event occurs

Utilizing the Invision prototype for embedding

What is the recommended lifecycle hook in Vue.js2 to execute a function when the page is loaded?

adjusting the color of ion-button when hovering over the cancel button

relocate & adjust the position of an element beneath a sibling element in the HTML code

How to detect a disconnected socket in Node.js using websockets

Is it wise to use position absolute when floating a React JS tag around a component?

Is it possible for me to overlap a text over hidden text, and if the hidden text becomes visible through JavaScript, my text will shift to the right of the now visible hidden text?

Error message "undefined" appears when using jQuery Ajax response in Internet Explorer

What is the best way to iterate over an indexed attribute in PHP?

The presence of a white block as the background on a webpage in Ubuntu

Please insert a decimal point and thousand separator into the text field

React Nested Grid with Material-UI