Step-by-step guide to displaying the dropdown menu button content at the top of the page in main.html by using the frameset tag

The layout of my main.html involves displaying menu.htm and welcome.htm using frameset. One issue that arises is with the drop-down menu buttons "Admin..." and "Scheduler...". When hovering over these buttons, the dropdown content does not display properly because welcome.htm is positioned on top of menu.htm in the frameset structure.

Interestingly, when accessing menu.htm as a standalone page, all menu buttons function correctly (see attached pic menu.htm). However, the drop-down buttons fail to show their content when opened within main.html utilizing frame tags.

Here is the structure of main.html:

<html>
 <head>
  <title>Main Menu</title> 
  
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></meta>
  <meta http-equiv="cache-control" content="max-age=0" />

 </head>
 <frameset rows = "25,*" >
    <frame frameborder="0" marginheight="0" marginwidth="0"  scrolling="no" id="menu_frame1"
            name="menu_frame" src="menu.htm" />
        <frame frameborder="0" marginheight="0" marginwidth="0"  scrolling="auto"
            id="content_frame1" name="content_frame" src="welcome.htm" />
    </frameset>
</html>

Below is the code for menu.htm:

<html>
   [Menu code here]
</html>

And the contents of welcome.htm:

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<TITLE>
Main Menu Welcome Page
</TITLE>
</HEAD>
<BODY>
Use the links at the top of the menu to navigate.
</BODY>
</HTML>

Answer №1

Why not utilize HTML5 first and foremost?

Consider employing iframes in place of frames

https://www.example.com/tryit_iframe

Next, assign an id to the iframe element and adjust its display settings or apply inline CSS with "position:absolute;z-index" Then, when a mouseover event occurs on the iframe, dynamically update the z-index property using JavaScript

Answer №2

Before we proceed further, Have you had a chance to review jquery.load() yet? https://api.jquery.com/load/

I believe it could simplify things for you.

     <!DOCTYPE html>
        <html>
        <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
       </head>
       <body>
    
        <div id="divMenu"></div>
    
    
      </body>
      </html>
       <script>
      $(document).ready(function(){
         $("#divMenu").load("./menu.html");//.txt or html or  url
    
       });
       </script>

Answer №3

give this a shot

Even as you scroll down the page, the menu will stick to the top.

    <!DOCTYPE html>
   <html lang="en">
   <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        body{background-color:#333}
        *{margin:0;padding:0;border:0}
        .menuBar{width:100%;height:50px;position:fixed;left:0;top:0;z-index:999;background-color:#111;}
        .content{float: left;width:100%;margin-top:50px;height:100vh;}
    </style>
   </head>
   <body>
    <iframe class="menuBar" src="./menu.html" ></iframe>
    <iframe class="content" src="./welcome.html" ></iframe>
    
</body>
</html>

Answer №4

Give this a shot! I've set the background of the "menu bar" to be transparent, and when you hover over it, the height will automatically change to 300px.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        body{background-color:#333}
        *{margin:0;padding:0;border:0}
        .menuBar{width:100%;height:50px;position:fixed;left:0;top:0;z-index:999;background-color:transparent;}
        .content{float:left;width:100%;margin-top:50px;height:100vh;}
    </style>
</head>
<body>
    <iframe class="menuBar" src=".menu.html"></iframe>
    <iframe class="content" src="./welcome.html"></iframe>
    
</body>
</html>

<script>
var menuBar = document.querySelector(".menuBar")
menuBar.onmouseover = function(){
    menuBar.style.height="300px"
}
menuBar.onmouseout = function(){
    menuBar.style.height="50px"
}
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for validating a string in a URL with Selenium IDE

When I click on a tab on my website, it triggers an AJAX service call where the URL contains parameters related to the data being loaded after the tab is clicked. The data is displayed as horizontal tiles one below the other, with 4 tiles being loaded pe ...

Troubleshooting the Ineffectiveness of AJAX in Image Map Coordinate Hover Feature

I am currently facing an issue with setting up an image map with ajax hover functionality to retrieve information from the database table major_occurrence. Unfortunately, the ajax call does not seem to be working at all. The hover element is clickable and ...

Curious about the power of jQuery methods?

I've been coming across codes similar to this: $(document.documentElement).keyup( function(event) { var slides = $('#slides .pagination li'), current = slides.filter('.current'); switch( event.keyCode ) { ...

AngularJS search box functionality allows users to easily search through a

1 I am looking to develop a search box using AngularJS similar to the one shown in the image. While I am familiar with creating a normal text box, I am unsure of how to incorporate the search icon. Any guidance on how to achieve this would be greatly appr ...

Tips for eliminating choices upon button press

How do I remove nested options inside a select element upon button click? I'm not sure where my mistake is, could it be in the for loop? var select = document.getElementById('colorSelect'); var options = document.getElementsByTagName(&ap ...

Fetch the contents of a div from a PHP page on a different domain and display it on another webpage

Hey there, I hope you're having a great morning! I'm currently working on setting up an affiliate box for our affiliates within Wordpress. I've managed to create it dynamically and you can check out an example here The values needed to cre ...

What is the best way to retrieve a collection of DOM elements in JSX?

I'm in need of rendering certain components only if a specific condition is met. To achieve this, I have written the following inside the render() method: return ( <div className={classes.root}> {registrationScreen && ( * ...

Unable to get Mongoose's Required field to work in conjunction with Enum validation

Encountering issues with Mongoose Required true and Enum validation when using updateone await MonthlyTarget.updateOne({website: req.body.website, year: req.body.year, month: req.body.month}, req.body, {upsert: true}); Model 'use strict'; import ...

Transferring a JavaScript variable to PHP using AJAX does not display any output

My code is not working as expected. I am trying to pass a JavaScript variable with Ajax to PHP when the submit button is clicked, but the result does not display the var_data variable from JavaScript. Can someone help me identify what is wrong with my code ...

Tips for transforming a JSON object (originated from jquery-css-parser) into properly formatted CSS code

Currently, we are utilizing a jQuery plugin in our project to convert CSS to a JSON object. The plugin can be found at the following link: Now, we have a requirement to convert the JSON object back to CSS in string format. Unfortunately, the plugin we ar ...

What is a way to merge all the letters from every console.log result together?

I'm encountering an issue - I've been attempting to retrieve a string that provides a link to the current user's profile picture. However, when I use console.log(), the output appears as follows: Console Output: https://i.sstatic.net/70W6Q ...

Localizing HTML number input values is not functioning properly

When using an HTML number field, I encountered the following error: The specified value "101,5" is not a valid number. The value must match the regular expression: -?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)? I am trying to co ...

Transferring information to the controller and refreshing the interface (Single-page design)

I'm stuck on a personal project and could really use some help. If anyone has any feedback, it would be greatly appreciated. Thanks in advance. In my index.php file, I have a div with the id main-container. Inside this container, there are two separa ...

ng-disabled with function that activates on change

I am attempting to create a submit validation button that will only enable when all fields have been entered correctly. Due to the complexity of the validation process, I am unable to rely solely on formName.$invalid and need to write a custom function for ...

Struggling to make the fancybox feature function with html/php

I've been trying to find a solution to this problem repeatedly, but I just can't seem to crack it. All I want to do is use fancybox to display an image. Since this is my first time using fancybox, I'm sure someone with more experience will ...

Navigating between two Vue2 applications

I currently have two applications, app1 and app2. App1 serves as a website at www.wxample.com with a button. My goal is to implement code in app2 that allows me to click the button on app1 and be redirected to the Login Panel in app2 for the workers module ...

Different ways to position two header tags on top of each other instead of next to each other

I am attempting to adjust the placement of my header tags so that the second header sits directly below the first one, rather than side by side. Currently, I am using h1 and h2 tags for my headers. I have experimented with placing both headers inside an h ...

Caution: It is not possible to make changes to a component (`App`) during the rendering of another component (`History

I am currently in the process of creating a tic tac toe game, but I'm encountering an error that is preventing me from updating the history. Despite following a tutorial on skillshare.com and mirroring the steps exactly, the error persists. I must men ...

The Mongoose query for the id field retrieves both the id and _id values

Within my Mongoose schema, there is a specific field named id which holds a unique identifier for each document. This operates using the same system as the standard _id field as shown below: var JobSchema = new mongoose.Schema({ id: { type:String, requi ...

JavaScript guide: Deleting query string arrays from a URL

Currently facing an issue when trying to remove query string arrays from the URL. The URL in question looks like this - In Chrome, it appears as follows - Var url = "http://mywebsite.com/innovation?agenda%5B%5D=4995&agenda%5B%5D=4993#ideaResult"; ...