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":https://i.sstatic.net/YOczK.png

An inspection view error cropped up, as seen in this screenshot:https://i.sstatic.net/PwjKI.png

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>

https://i.sstatic.net/n5efOm.png https://i.sstatic.net/YjSf3m.png

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>

https://i.sstatic.net/n5efOm.png https://i.sstatic.net/YjSf3m.png

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 there a way to make the X-editable datepicker appear next to the date field rather than in the same spot every time?

Can you explain the process of utilizing CSS to create a smooth transition effect with

Displaying various images within a bootstrap modal window

Tips on generating model names dynamically within a service

Tips for choosing text within an HTML <label> tag

ASP.NET Core's use of Ajax for POST requests leads to a 400 Bad Request error

Using a variety of images to fill various shapes on a grid canvas

Determine the loading time for every page within an application using C#

How can I add 0-5 images to a column without causing any distortion in the row?

Replacing text in the main navigation bar with sIFR

Creating distinct identifiers for CSS JQ models within a PHP loop

What could be causing my grid-area properties to not take effect?

Angular 5: Transforming and Concealing CSS Class Names

Tips for accessing the value of a dynamically created textbox using JavaScript

Incorporated iframe covering the entire browser window

Tips for aligning and emphasizing HTML content with audio stimuli

Display MQTT information on a Django template

Arrange the icons in multiple rows to ensure an equal distribution of icons on each row

Incorrect ASP.NET method called by jQuery ajax request

Refresh a function following modifications to an array (such as exchanging values)