Problems with menu and Iframe

Asked

Viewed 85 times

-1

I’m having trouble with the menu, it’s not fixed, and when the iframe of the scrool appears a border at the end of the iframe

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" http-equiv="Content-Type" content="text/html; charset=UTF-8"/>



<style>
body, html {
  margin:0;
  width:100%;
  border: 0;
  padding: 0;
  height: 100%;
}


iframe {
  height: calc(100% - 103px);
  width:100%;
  border:0;
  margin: 0;
  padding: 0;
  overflow: visible;

}

.topnav {
  overflow: hidden;
  background-color: #00985F;
}

.topnav a {
  float: left;
  display: block;
  color: #B3E0CF;
  text-align: center;
  padding: 14px  0px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-bottom: 3px solid transparent;
  font-family: Roboto, Noto, Helvetica, Arial, sans-serif;
  width: 50%;
}

.topnav a:hover {
  border-bottom: 3px solid #007248;
  color: #fff;
}

.topnav a.active {
  border-bottom: 3px solid #007248;
  color: #fff;
}


.navbar{
    background: #00985F;
    left: 0;
    top: 0;
    height: 56px;
    font-size: 20px;
    color:white;
}
.navbar-inner{
    width: 100%;
    height: 100%;
    justify-content: flex-start;
}
.left{
    float:left;
}
.left a{
    padding: 0 16px;
    line-height: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    min-width:30px;
}
.center{
    font-size: 17px;
    font-weight: 500;
    text-align: center;
    margin: 0 2px 0 4px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 56px;
    display: inline-block;
    text-align: left;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-family: Roboto, Noto, Helvetica, Arial, sans-serif;
}


</style>
</head>
<body>
<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="http://onfutebol.hospedagemdesites.ws" class="back link icon-only">
                <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z' fill='#ffffff'/></svg>
            </a>
        </div>
        <div class="center">Municipal de Campo</div>
    </div>
</div>
<div class="topnav" id="myDIV">
  <a target="Carregar" class="btn active" href="http://onfutebol.hospedagemdesites.ws/xanxere/municipal-de-campo/jogos">JOGOS</a>

  <a target="Carregar" class="btn" href="http://onfutebol.hospedagemdesites.ws/xanxere/municipal-de-campo/classificacao">CLASSIFICAÇÃO</a>
</div>

<iframe name="Carregar" src="http://onfutebol.hospedagemdesites.ws/xanxere/municipal-de-campo/jogos"></iframe>

<script>
// Add active class to the current button (highlight it)
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  this.className += " active";
  });
}
</script>


</body>
</html>
html

  • Could point with pictures the problem also kindly?

1 answer

0


You have to put position:sticky in divs navbar and topnav, whereas the navbar gets top:0 and the topnav with top:56px, since the height of navbar is 56px, so one does not cover the other in the scroll

The white bar at the bottom of the page is because you didn’t put display:block in the iframe, doing this solves the problem.

inserir a descrição da imagem aqui

Follow the image code above

OBS: Your iframe does not appear in the snippet below pq it is in http, if it were https would appear on the site, it is a security issue, but in your environment will be right!

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" http-equiv="Content-Type" content="text/html; charset=UTF-8"/>



<style>
body, html {
  margin:0;
  width:100%;
  border: 0;
  padding: 0;
  height: 140%;
}


iframe {
  height: calc(100% - 103px);
  width:100%;
  border:0;
  margin: 0;
  padding: 0;
  overflow: visible;
  display: block;
}

.topnav {
  overflow: hidden;
  background-color: #00985F;
  position: sticky;
  top: 56px;
}

.topnav a {
  float: left;
  display: block;
  color: #B3E0CF;
  text-align: center;
  padding: 14px  0px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-bottom: 3px solid transparent;
  font-family: Roboto, Noto, Helvetica, Arial, sans-serif;
  width: 50%;
}

.topnav a:hover {
  border-bottom: 3px solid #007248;
  color: #fff;
}

.topnav a.active {
  border-bottom: 3px solid #007248;
  color: #fff;
}


.navbar{
    background: #00985F;
    left: 0;
    top: 0;
    height: 56px;
    font-size: 20px;
    color:white;
    position: sticky;
    top: 0px;
}
.navbar-inner{
    width: 100%;
    height: 100%;
    justify-content: flex-start;
}
.left{
    float:left;
}
.left a{
    padding: 0 16px;
    line-height: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    min-width:30px;
}
.center{
    font-size: 17px;
    font-weight: 500;
    text-align: center;
    margin: 0 2px 0 4px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 56px;
    display: inline-block;
    text-align: left;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-family: Roboto, Noto, Helvetica, Arial, sans-serif;
}


</style>
</head>
<body>
<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="http://onfutebol.hospedagemdesites.ws" class="back link icon-only">
                <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z' fill='#ffffff'/></svg>
            </a>
        </div>
        <div class="center">Municipal de Campo</div>
    </div>
</div>
<div class="topnav" id="myDIV">
  <a target="Carregar" class="btn active" href="http://onfutebol.hospedagemdesites.ws/xanxere/municipal-de-campo/jogos">JOGOS</a>

  <a target="Carregar" class="btn" href="http://onfutebol.hospedagemdesites.ws/xanxere/municipal-de-campo/classificacao">CLASSIFICAÇÃO</a>
</div>

<iframe name="Carregar" src="http://onfutebol.hospedagemdesites.ws/xanxere/municipal-de-campo/jogos"></iframe>

<script>
// Add active class to the current button (highlight it)
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  current[0].className = current[0].className.replace(" active", "");
  this.className += " active";
  });
}
</script>


</body>
</html>

  • Show, the menu was fixed and the iframe of the scroll below the menu, only you have the iframe of the scroll too much and when you click the other tab to pull the other iframe it opens from where to the previous

  • @galaxyplay1234 this is because I increased the height of Body to be able to have scroll in the window and you can test just put the height in Body/HTML in 100% that solves. About you pull another iframe and he see in the "wrong" position is already another question.... I suggest that if you consider that this answer answers your problem mark it as accepted in the one below the arrows on the side of the answer, and open a new question with the updated code and explained the problem of when you call another iframe

  • Seguinte @hugocsl... When I click on the GAMES tab to load the iframe, it pulls the page of the games, then when I scroll and stop the page in half and click on the tab Rating the page goes already with the scroll in half

  • @galaxyplay1234 picked up the problem, does along with the script that calls the new iframe an event that scrolls the page to the top, I’m not very good of JS, but a Document.scrollTop sometimes solves, as I told you this is another question...

  • I already managed to arumar... Thank you, I called you in the face look there

  • @galaxyplay1234 legal that solved ai, dps I look there, success!

  • would you like to help me with a question here?

  • @galaxyplay1234 guy I manjo very little iframe, in fact almost nobody else uses it pq it is very limited and has security problems, just vc search here on the site questions about iframe that you will see.... But in any case open a new question there, put your situation and the minimum code that to simulate your problem, then I or someone else will be able to help you

  • I’m unable to ask the question, the one about php

  • could I talk to you? Email or face something like this?

  • @galaxyplay1234 guy I’m really caught up with work here, I’ve hardly been entering the site anymore. But I know that on Facebook itself there are several groups of Dev. There will surely help you ;)

  • could you help me with that question? https://answall.com/q/488727/176259

Show 7 more comments

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.