My efforts to resolve the issues in my code have been ongoing, but unfortunately, I have been unable to find a solution

I'm struggling to insert my contact form code into the contact tab without it interfering with the tab bar. I want the form to appear in the middle of the page when the tab is clicked.

I've tried various placements for the code but none seem to work properly. Please run the code and let me know what you find.

Any help would be greatly appreciated!

Below is the code I need to add to the homepage:


    <style>

    div {

    text-align: center;
    }

    </style>

    <div>
    <h1>{PEBKAC}</h1>
    <p>____________________________________________________________________</p>
    <h2>Customer Support:</h2>

    <p>Thank you for using {PEBKAC}! Please complete the form below. <br> This 
    is the 
    fastest and easiest way to get in touch with us.</p>

    <p><b>U.S.</b></p>
    <p><b> Monday-Friday 11:30 AM - 11:45 PM CST <br>
    Saturday-Sunday 1:50 PM - 11:45 PM CST</b></p>

    <p><b>Contact by E-mail only.</b></p>

    <style>
    input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    }

    input[type=submit] {
    background-color: grey;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    }

    input[type=submit]:hover {
    background-color: white;
    }

    .container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
    }
    </style>
    </head>
    <body>

    <form action="mailto:the email that I choose" method="post" 
    enctype="text/plain">

    <div class="container">
    <form action="/action_page.php">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" placeholder="Your 
    Username..">

    <label for="E-mail">E-mail:</label>
    <input type="text" id="E-mail" name="E-mail" placeholder="Your E-mail..">

 
    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write Something.." 
    style="height:200px"></textarea>

    <input type="submit" value="Submit">
    </form>
    </div>

Homepage layout with tabs:

<html lang="en">

        <head>

        <title>{PEBKAC} - HomePage</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

        <style>
        .w3-bar-item{
          margin-top: 36px;
          margin-bottom: 36px;
        }
        </style>

        <body style="background-color:white;">

        <div class="w3-sidebar w3-bar-block w3-light-grey w3-card-2" 
        style="width:130px">
      
        <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 
        'Home')">Home</button>
        <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 
        'Questions')">Questions</button>
         <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 
        'Search')">Search</button>
        <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 
        'Users')">Users</button>
        <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 
        'About')">About</button>
        <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 
        'Profile')">Profile</button>
        <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 
        'Settings')">Settings</button>
        <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'Log 
        Out')">Log Out</button>
        <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 
        'Terms')">Terms</button>
        <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 
        'Privacy Policy')">Privacy Policy</button>
        <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 
        'Contact Us')">Contact Us</button>
        <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 
        'Feedback')">Feedback</button>
        
        </div>

        <div style="margin-left:130px">


        <div id="Home" class="w3-container tab" style="display:none"> 
           
        </div>

        <div id="Questions" class="w3-container tab" style="display:none">
        
        </div>

        <div id="Search" class="w3-container tab" style="display:none"> 

        </div>

        <div id="Users" class="w3-container tab" style="display:none">
       
        </div>

        <div id="About" class="w3-container tab" style="display:none">

        </div>

        <div id="Profile" class="w3-container tab" style="display:none">

        </div>
      
        <div id="Settings" class="w3-container tab" style="display:none">
      
        </div>
      
        <div id="Log Out" class="w3-container tab" style="display:none">

        </div>
      
        <div id="Terms" class="w3-container tab" style="display:none">

        </div>

        <div id="Privacy Policy" class="w3-container tab" style="display:none">

        </div>

        <div id="Contact Us" class="w3-container tab" style="display:none">

        </div>

        <div id="Feedback" class="w3-container tab" style="display:none">

        </div>

        </div>

        </body>
        </head>
        </html>

htmlcss

Answer №1

If you wish to utilize the JQuery function I have created, make sure to place this code snippet within the head tag.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>        
        <script>
        $(document).ready(function(){
            $("#Home").css("display", "block"); 
        });
        function openTab(evnt, id){ 
            $(".tab").each(function(){ $
                (this).css("display", "none"); 
            }) 
            $("#"+id).css("display", "block"); 
        }
        </script>

Ensure there are no spaces within the id selector.

Before:

<div id="Privacy Policy" class="w3-container tab" style="display:none;">

After:

<div id="PrivacyPolicy" class="w3-container tab" style="display:none;">

The same issue was also found in a button.

Before:

<button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'Log Out')">Log Out</button>

After:

<button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'LogOut')">Log Out</button>

I noticed that some of the inline styles for the div elements were not properly closed.

Before:

<div id="Privacy Policy" class="w3-container tab" style="display:none:>

After:

<div id="PrivacyPolicy" class="w3-container tab" style="display:none;">

Please refer to the following functional JSFiddle demo with the necessary corrections and use it as a reference!

JSFiddle Demo

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

Add up the values in the table by organizing them into groups

There is a table below that I am working with: <table> <tr> <th>Category</th> <th>Value</th> </tr> <tr> <td class="cat1">cat1</td> <td class="value" ...

javascripthtml

What is the best way to add prefixes to my SCSS style sheets?

After attempting to add prefixes to my scss files, I came across the autoprefixer tool. However, I discovered that it only supports CSS files. Is there a way to utilize autoprefixer with scss files? Here are the commands for Autoprefixer: npm install post ...

javascripthtmlcssangularsass

HTML scroll bar functioning intermittently

Here is my code snippet. table#projectTable > tbody , table#productTable > tbody{ height: 300px; overflow: auto; } The scrollbar is functional when clicking the top part, but not the bottom. It's quite odd. Upon usin ...

htmlcssscrollbar

React app (storybook) experiencing loading issues with @font-face

I am struggling to load custom fonts from a local directory. Can someone provide assistance? Below is the code I am currently using: @font-face { font-family: 'My Custom Font'; src: url('./fonts/MyCustomFont.eot'); src: url(&apo ...

javascriptcssreactjsfontsstorybook

What is the best way to make a bootstrap component (container) stretch to the full width and height of the window when it first loads, and which

I am looking to achieve something similar to the design on a certain website: The goal is to have a container with a background and a form inside that resizes proportionally based on the size of the window it is opened in. The resizing should be smooth an ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to overlay a video onto an image using HTML and CSS?

Currently, I am experimenting with a layering technique in HTML/CSS. The idea is to place an image behind a video to enhance the overall look of the video section. Here is a sample photoshop mockup that demonstrates what I am aiming for: HTML div id= " ...

htmlcssimagevideo

Utilizing Python to dynamically create unique tags from deeply nested dictionaries through recursion

As part of my project, I am developing a unique dynamic template tool that can seamlessly integrate with any templating framework such as pugs and jinja. The goal is to create a demo that resembles the following structure: view! { div { p { ...

pythonhtmljsondictionaryrecursion

Ways to utilize media queries for repositioning one div on top of another div

Utilizing Bootstrap 5 for website development, my aim is to enhance the responsiveness of the site across various devices. For mobile users, I envision the image-containing div to appear above the div containing the header and paragraph content, but I&apo ...

htmlcssfrontendmedia-queriesbootstrap-5

Javascript Calculator with Dual Input Fields

I have been given a task to create a calculator by tomorrow using Javascript. Unfortunately, I am currently taking a distance course and Javascript has just been introduced in this assignment. While I am familiar with HTML and CSS, Javascript is something ...

javascripthtmlcss

Utilize the :not() selector in combination with the :first-child() selector

Currently, I am seeking a method to merge two css selectors together in order to target specific elements. The selectors I am attempting to combine are ':not' and ':first-of-type'. Here is the code snippet that represents my current sit ...

htmlcsscss-selectors

Error: The variable "Tankvalue" has not been declared

Is there a way to fix the error message I am receiving when trying to display response data in charts? The Tankvalue variable seems to be out of scope, resulting in an "undefined" error. The error message states that Tankvalue is not defined. I need to ...

javascripthtmlangularjsfusioncharts

Positioning MDL cards in HTML documents

Seeking guidance on positioning MDL cards alongside existing text. I've attempted various methods without success so far, and the desired outcome has not been achieved. The goal is to have text aligned to the left (which is currently satisfactory) wi ...

htmlcssmaterial-designcss-positionmaterial-design-lite

The data retrieved from the API call is outdated

I am struggling with a weather web API that is only showing old data when called in the code. However, when I enter the API URL directly into the browser, it displays the most up-to-date information for the current city. Can anyone help me troubleshoot why ...

javascriptjqueryhtmlajaxapi

Issues with Gulp Autoprefixer Functionality

I'm struggling to make Autoprefixer work with Gulp. Despite using opacity, gradients, and transforms in my CSS, I can't see any vendor prefixes being added. However, everything else seems to be functioning correctly. Below is my gulp file: var ...

csssassgulpautoprefixer

The statusText variable for getXMLHTTP object is not found when the status is not equal to

Earlier, I posted about this issue before isolating the problem. Now that I have isolated it, I wanted to repost with a clearer focus on the two functions causing the problem. Whenever I update my State, it triggers the getCity function. The call is being ...

phpjavascriptajaxhtmlmysqli

Resolved issue with fixed div flickering upon clicking link on Phonegap platform, leveraging Bootstrap

Upon attempting to click a link positioned at the bottom of the screen within a colored div using position:fixed;, I notice that the page momentarily flashes white before displaying the "new" page. Removing the fixed positioning allows the new page to load ...

htmlcsstwitter-bootstrapcordova

How can I design unique navigation menus using HTML, CSS, JavaScript, and jQuery?

Is there a way to create menus where clicking on a holiday/seasonal category opens up all related lists automatically? For example: https://i.sstatic.net/Nctd1.png I've been searching online for submenu options but haven't found the right metho ...

javascriptjqueryhtmlcss

Restrict the number of button clicks to only once every 5 minutes

Similar Question: jquery disable a button for a specific time I am currently developing a PHP-based website. One of the features I want to implement is a button that can only be clicked once every five minutes by the user. After some research, I hav ...

phpjqueryhtml

Visualizing live data streaming from MySQL

I am currently using this code to retrieve values from a database and create a basic line graph (showing response time to an alert vs. UTC time). Everything works smoothly when the data is static, but now I want to try retrieving the data in "real-time" (j ...

jqueryhtmlmysqlplotflot

The annoying Facebook "add a comment" popup refuses to close

Occasionally, the "add a comment" popup (iframe) in Facebook's Like plug-in fails to close and obstructs access to the content underneath. This issue has been noted while using Chrome 21 and Firefox 15. To replicate this problem, you can visit the fo ...

javascriptcssfacebook-likefacebook-javascript-sdk