Issue with a hidden div, problem with scrolling, a div overlapping other divs

I'm feeling a bit lost here, trying to figure out what went wrong. It seems like a simple mistake, but I can't pinpoint it. Currently, I'm just testing everything out for a mobile website template. Hopefully, that information helps.

For anyone who wants to take a look at my code, here is the link to the fiddle page: View Code

<div id="parent">
  <div id="child">
    <!--TOP IMG-->
    <div class="image">
      <img name="bed" src="https://www.psychologies.co.uk/sites/default/files/styles/psy2_page_header/public/wp-content/uploads/2012/03/happy.jpg" style="padding:0px;" width="100%" align="top" alt="bed" />

      <h2 id="phototext"><span>Have a great summer!<span class='spacer'></span><br />
  <span class='spacer'></span>2017</span></h2>

      <!--BODY TEXT-->    
      <!--What do we offer>-->
      <!--SELECTIONS -->
      <div></div>
      <div>
        <a class="stylea" id="diva" href="javascript:showonlyone('newboxes1');">
          <input type="button" class="buttonheader" value="show this one only"> </input>
        </a>
      </div>
      <div class="" id="newboxes1" style="display: block;">
        <p>Discription</p>
      </div>

      <div>
        <a id="divb" href="javascript:showonlyone('newboxes2');">
          <p>show this one only</p>
        </a>
      </div>
      <div class="newboxes" id="newboxes2" style="display: none;">
        <p>Div #2</p>
      </div>

      <div>
        <a id="divc" href="javascript:showonlyone('newboxes3');">
          <p>show this one only</p>
        </a>
      </div>
      <div class="newboxes" id="newboxes3" style="display: none;">
        <p>Div #3</p>
      </div>

      <div>
        <a id="divd" href="javascript:showonlyone('newboxes4');">
          <p>show this one only</p>
        </a>
      </div>
      <div class="newboxes" id="newboxes4" style="display: none;">
        <p>Div #4</p>
      </div>

      <div>
        <a id="dive" href="javascript:showonlyone('newboxes5');">
          <p>show this one only</p>
        </a>
      </div>
      <div class="newboxes" id="newboxes5" style="display: none;">
        <p>Div #5</p>
      </div>

      <div>
        <a id="divf" href="javascript:showonlyone('newboxes6');">
          <p>show this one only</p>
        </a>
      </div>
      <div class="newboxes" id="newboxes6" style="display: none;">
        <p>Div #6</p>
      </div>
      <!--BODY DIV ENDING-->

    </div>
    <!--ENNDING TOP IMG-->


    <table width="100%" border="0" cellspacing="0" cellpadding="0" style=" padding-top:150%;">
      <tr>
        <th scope="row">&nbsp;</th>
      </tr>
    </table>

  </div>
</div>

<div style="width:100%;height:400px;">
  <img src="https://promoworx.files.wordpress.com/2014/06/montreal-beach-summer-swimming-photo.jpg" alt="Norway" style="float:left;width:50%;height:100%;object-fit:cover;">
  <img src="http://enewsbreak.com/wp-content/uploads/2015/06/summer-family-photography-05-2.jpg" alt="Paris" style="float:left;width:50%;height:100%;object-fit:cover;">
</div>

I've been doing some testing and apologize if there's unnecessary code within this snippet.

function showonlyone(thechosenone) {
  $('.newboxes').each(function(index) {
    if ($(this).attr("id") == thechosenone) {
      $(this).show(200);
    } else {
      $(this).hide(600);
    }
  });
}

< script src = "hideshow.js" > < /script> < script type = "text/javascript" >
  function toggleDiv(divId) {
    $("#" + divId).toggle();
  }

/*THE SCRIPT BELOW IS FOR THE MENU*/

function openCity(cityName, elmnt, color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(cityName).style.display = "block";
  elmnt.style.backgroundColor = color;

}
/* Get the element with id="defaultOpen" and click on it*/
document.getElementById("defaultOpen").click();
/*MENU SCRIPT ENDED*/

CSS

.childcabe {
  width: 100%
}

body {
  height: 1000px;
  margin: 0;
  padding: 0;
  background-color: #FFFFFF;
}

p {
  text-indent: 30px;
  text-align: justify;
  color: #333333;
  font-weight: normal;
  font-family: 'Didact Gothic', sans-serif;
  font-size: 14px;
  margin: 15px;
  word-wrap: break-word;
}

#parent {
  width: 320px;
  height: auto;
  margin: 0;
}

#child {
  width: inherit;
}


/*#header {
     display: inline-block;   
}*/

#diva {
  display: inline-block;
  margin: auto;
}

.image {
  position: fixed;
  width: 100%;
  /* for IE 6 */
}

h2 {
  position: absolute;
  top: 118px;
  left: 0px;
  width: 235px;
}

#phototext {
  color: #000000;
  font: 15px/35px;
  font-weight: normal;
  font-family: 'Didact Gothic', sans-serif;
  font-size: 14px;
  letter-spacing: -1px;
  background: rgb(255, 255, 255);
  /* fallback color */
  background: rgba(255, 255, 255, 0.5);
  padding: 10px;
  margin-left: 0px;
  margin-right: auto;
}


/*
h2 span.spacer {
   padding:0 5px;
}*/

img {
  max-width: 100%;
  align: top;
  margin-top: 0px;
  opacity: 0.9;
  -webkit-filter: grayscale(50%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(40%) brightness(50%);
  /*filter: alpha(opacity=50 saturate=-10 contrast=200% brightness=150%); */
  /* For IE8 and earlier */
}

.buttonheader {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  /*margin: 4px 2px;*/
  cursor: pointer;
  margin-left: 0px;
  margin-top: 0px;
}

Just wanted to reiterate that I have specific questions about certain functionalities. Sometimes, articulating them can be challenging. 1. On mobile, the webpage doesn't allow scrolling. 2. An image enclosed in a div component seems to float above other elements, and I'm unsure why.

javascriptjqueryhtmlcss

Answer №1

I made a few changes, including setting position:absolute for the image and decreasing the padding-top of the table. Take a look:

function showonlyone(thechosenone) {
  $('.newboxes').each(function(index) {
    if ($(this).attr("id") == thechosenone) {
      $(this).show(200);
    } else {
      $(this).hide(600);
    }
  });
}

< script src = "hideshow.js" > < /script> < script type = "text/javascript" >
  function toggleDiv(divId) {
    $("#" + divId).toggle();
  }

/*THE SCRIPT BELOW IS FOR THE MENU*/

function openCity(cityName, elmnt, color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(cityName).style.display = "block";
  elmnt.style.backgroundColor = color;

}
/* Get the element with id="defaultOpen" and click on it*/
document.getElementById("defaultOpen").click();
/*MENU SCRIPT ENDED*/
.childcabe {
  width: 100%
}

body {
  height: 1000px;
  margin: 0;
  padding: 0;
  background-color: #FFFFFF;
}

p {
  text-indent: 30px;
  text-align: justify;
  color: #333333;
  font-weight: normal;
  font-family: 'Didact Gothic', sans-serif;
  font-size: 14px;
  margin: 15px;
  word-wrap: break-word;
}

#parent {
  width: 320px;
  height: auto;
  margin: 0;
}

#child {
  width: inherit;
}


/*#header {
     display: inline-block;   
}*/

#diva {
  display: inline-block;
  margin: auto;
}

.image {
  position: absolute;
  width: 100%;
  /* for IE 6 */
}

h2 {
  position: absolute;
  top: 118px;
  left: 0px;
  width: 235px;
}

#phototext {
  color: #000000;
  font: 15px/35px;
  font-weight: normal;
  font-family: 'Didact Gothic', sans-serif;
  font-size: 14px;
  letter-spacing: -1px;
  background: rgb(255, 255, 255);
  /* fallback color */
  background: rgba(255, 255, 255, 0.5);
  padding: 10px;
  margin-left: 0px;
  margin-right: auto;
}


/*
h2 span.spacer {
   padding:0 5px;
}*/

img {
  max-width: 100%;
  align: top;
  margin-top: 0px;
  opacity: 0.9;
  -webkit-filter: grayscale(50%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(40%) brightness(50%);
  /*filter: alpha(opacity=50 saturate=-10 contrast=200% brightness=150%); */
  /* For IE8 and earlier */
}

.buttonheader {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  /*margin: 4px 2px;*/
  cursor: pointer;
  margin-left: 0px;
  margin-top: 0px;
}
<div id="parent">
  <div id="child">


    <!--TOP IMG-->
    <div class="image">
      <img name="bed" src="https://www.psychologies.co.uk/sites/default/files/styles/psy2_page_header/public/wp-content/uploads/2012/03/happy.jpg" style="padding:0px;" width="100%" align="top" alt="bed" />

      <h2 id="phototext"><span>Have a great summer!<span class='spacer'></span><br />
  <span class='spacer'></span>2017</span></h2>

      <!--BODY TEXT-->

      <!--What do we offer>-->
      <!--SELECTIONS -->
      <div></div>
      <div>
        <a class="stylea" id="diva" href="javascript:showonlyone('newboxes1');">
          <input type="button" class="buttonheader" value="show this one only"> </input>
        </a>
      </div>
      <div class="" id="newboxes1" style="display: block;">
        <p>Discription</p>
      </div>

      <div>
        <a id="divb" href="javascript:showonlyone('newboxes2');">
          <p>show this one only</p>
        </a>
      </div>
      <div class="newboxes" id="newboxes2" style="display: none;">
        <p>Div #2</p>
      </div>

      <div>
        <a id="divc" href="javascript:showonlyone('newboxes3');">
          <p>show this one only</p>
        </a>
      </div>
      <div class="newboxes" id="newboxes3" style="display: none;">
        <p>Div #3</p>
      </div>

      <div>
        <a id="divd" href="javascript:showonlyone('newboxes4');">
          <p>show this one only</p>
        </a>
      </div>
      <div class="newboxes" id="newboxes4" style="display: none;">
        <p>Div #4</p>
      </div>

      <div>
        <a id="dive" href="javascript:showonlyone('newboxes5');">
          <p>show this one only</p>
        </a>
      </div>
      <div class="newboxes" id="newboxes5" style="display: none;">
        <p>Div #5</p>
      </div>

      <div>
        <a id="divf" href="javascript:showonlyone('newboxes6');">
          <p>show this one only</p>
        </a>
      </div>
      <div class="newboxes" id="newboxes6" style="display: none;">
        <p>Div #6</p>
      </div>
      <!--BODY DIV ENDING-->

    </div>
    <!--ENNDING TOP IMG-->

    <table width="100%" border="0" cellspacing="0" cellpadding="0" style=" padding-top:70%;">
      <tr>
        <th scope="row">&nbsp;</th>
      </tr>
    </table>

  </div>
</div>

<div style="width:100%;height:400px;">
  <img src="photos/bed.jpg" alt="Norway" style="float:left;width:50%;height:100%;object-fit:cover;">
  <img src="photos/24296486_1977777138916054_132797857849763576_n.jpg" alt="Paris" style="float:left;width:50%;height:100%;object-fit:cover;">
</div>

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

Error: Failed to decode audio content due to a DOMException that was caught in the promise

Encountering an issue with the decodeAudioData method while utilizing the Web Audio API for playback in Chrome (works seamlessly in Firefox)- Sending the audio buffer, which has been recorded by the media recorder, back from the server. Server-side wss ...

javascriptnode.jswebsocketweb-audio-apimediarecorder-api

The error message "ReferenceError: obj is not defined using webcomponents & polymer" indicates that the object

I am diving into the world of web components for the first time with this project, and my knowledge of js/jquery is quite limited. I'm encountering an issue and I'm unsure why it's happening. I've created a custom element in "search-fo ...

javascriptjquerypolymerweb-component

Nested routing in Nextjs is encountering issues when implemented with a specific file

I'm struggling with setting up routes in Next.js. When I create the path "/app/[locale]/admin/page.tsx," I can access http://url/admin/ without any issues. However, when I try to set up "/app/[locale]/admin/login.tsx," I encounter an error and cannot ...

javascriptnext.jsroutes

What is the best way to overlay my slider with a div containing content?

In the hero section of my website, there is a slider with 3 slides. I am looking to add a div element that will display content over these slides at all times, regardless of which slide is currently showing. ...

htmlcss

developing a stand-alone job listings feature

Our website features a job postings page that our clients are interested in incorporating into their own websites. This would allow applicants to easily apply for jobs directly on the client's site, with the information being saved in our system. One ...

javascriptasp.net

jquery function context

I'm having trouble grasping function scope in this scenario. When a button is clicked, it triggers a dialog box with a textarea inside displaying a URL that can be copied for camera setup. <button id="axis-details" onclick="apikey('<?php e ...

javascriptjqueryhtmljquery-ui

Tips for safely storing JWT tokens in a react/next.js app:

After a valid user login following proper registration through REST API, I am looking for the best way to store the JWT token that is generated. I have researched various methods of storing JWT on the client side, including local storage, session storage, ...

javascriptreactjsjwtnext.js

Google has not detected any hreflang return tag

My website has encountered indexing errors on Google Search Console. According to the reports, many pages are showing an alternate version in a different language without the "return tag". This "return tag" is believed to be the pointer back to the origina ...

htmlseogoogle-searchcanonical-linkhreflang

Tips for making sure a header is consistently at the top of every page during printing

I need help with my website - I have a table that is quite tall and spans across multiple pages when printing. Is there a way to make the header row appear on top of each page when printing? ...

javascripthtmlcssprinting

Switching from using jQuery's $.ajax method to Angular's $http service

I have been working on a jQuery code snippet that works seamlessly across different origins: jQuery.ajax({ url: "http://example.appspot.com/rest/app", type: "POST", data: JSON.stringify({"foo":"bar"}), dataType: "json", contentType: "a ...

jqueryajaxangularjscross-domainangular-http

No results found by Mongoose find() method

I've set up a route that utilizes a model named Todo as shown below: app.get('/api/todos', function(req, res) { Todo.find({},function(err, todos) { if (err) res.send(err); console.log("number of todos " + tod ...

javascriptnode.jsmongodbmongoose

Tips for displaying a category name only once if it has already been rendered in a map function

My scenario involves a variety of categories in which pharmaceutical drugs are classified. Each individual drug belongs to a specific class. Currently, my code iterates through all the categories from the category array and places drugs underneath them if ...

javascriptreactjs

Dividing Javascript code in bs4 using Python

I've encountered some challenges when attempting to extract Javascript values from a bs4 code. The javascript snippet appears like this: <script type="text/javascript"> var FancyboxI18nClose = 'Close'; var FancyboxI18nNext = 'Ne ...

javascriptpythonbeautifulsoup

Transform any falsy values within a JavaScript object into an empty string

Looking for a solution to transform all undefined, NaN, etc. values in a Javascript object into an empty string for better definition. For example: javascriptObject = convertUndefined(javascriptObject) Seeking something that can achieve this functionalit ...

javascriptangularjs

Navigating through Switch cases and If Statements with multiple arguments can be complex for beginners in the world of JavaScript

Hi there, I have a specific case that I'm struggling to find a solution for. I am using Angular with a Firebase back-end to retrieve true or false values from a variable called ref. The variable contains 4 properties with either true or false values - ...

javascriptangularjsif-statementjavascript-objects

What is the best way to keep fixed input at the bottom of the page?

Let me begin by stating that I struggled to come up with a more appropriate name for this question than the one above. My issue is not limited to a fixed input; it's much more complex. Let me delve into the details of my problem here. The Scenario I ...

htmlcsscss-position

The authorization process for uploading data to Azure Data Lake Gen2

Currently, I am working on generating a Shared Access Signature (SAS) client-side within my Node.js application. The primary goal is to allow users to directly upload files to my Azure Data Lake Gen2 Blob Storage container without streaming them through th ...

javascriptnode.jsazure-data-lake-gen2

Divide a string into separate numbers using JavaScript

This snippet of code is designed to search the table #operations for all instances of <td> elements with the dynamic class ".fuel "+ACID: let k = 0; let ac_fuel = 0; parsed.data.forEach(arrayWithinData => { let ACID = parsed.data[k][0]; ...

javascriptjquerystringsplitsum

Using Three.js to Manipulate Objects through Their Names

Is there a way to access multiple meshes with the same name? var mesh1 = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0xffffff })); mesh1.name = "meshes"; scene.add( mesh1); var mesh2 = new THREE.Mesh( geometry, new THREE.MeshBasicMate ...

javascriptthree.js

The combination of Fabric.js, Darkroom.js, and devicePixelRatio offset creates a powerful tool

Having reached out on the Darkroom.js GitHub page with little activity, I'm turning to this platform for assistance. Despite being a great plugin overall, I've run into some issues while testing it on a Retina screen. Everything works fine on a ...

javascriptnode.jshtml5-canvasfabricjs