Jump to content
cesarhtc

iframe

By cesarhtc, in HTML e CSS

Recommended Posts

cesarhtc    0

cesarhtc
Posted

Boa tarde o que devo utilizar para substituir a iframe, para abrir uma pagina. 

<HTML>
<HEAD>

<style>
@import url(https://fonts.googleapis.com/css?family=Titillium+Web);

*, *:after, *:before {
  box-sizing: border-box;
}
body{
  margin: 0;
  padding: 0;
  font-family: 'Titillium Web', sans-serif;
  line-height: 1.5;
  color: #444;
  font-size: 16px;
}
p{
  padding: 0 10px;
}

.tabs-container {
  position: relative;
  height: 360px;
  max-width: 98%;
  margin: 0 auto;
}
.tabs-container p{
  margin: 0;
  padding: 0;
}
.tabs-container:after {
  content: '.';
  display: block;
  clear: both;
  height: 0;
  font-size: 0;
  line-height: 0;
  visibility: none;
}
input.tabs {
  display: none;
}
input.tabs + label {
  line-height: 40px;
  padding: 0 20px;
  float: left;

  background: #444;
  color: #fff;
  cursor: pointer;
  transition: background ease-in-out .3s;
}
input.tabs:checked + label {
  color: #000;
  background: #eee;
}
input.tabs + label + div {
  width: 50%;
  opacity: 0;
  position: absolute;
  background: #eee;
  top: 40px;
  left: 0;
  height: 300px;
  padding: 10px;
  z-index: -1;
  transition: opacity ease-in-out .3s;
}
input.tabs:checked + label + div {
  opacity: 1;
  z-index: 1000;
}

</style>
</HEAD>

<BODY>
<p>Conteúdo</p>

<div class="tabs-container">

<input type="radio" name="tabs" class="tabs" id="tab1" checked>
<label for="tab1">Item</label>
<div>
  <p><iframe src="#" name="iframe_a" scrolling="no" frameborder="0" height="500px" width="800px" ></iframe>
</div>


<input type="radio" name="tabs" class="tabs" id="tab2">
<label for="tab2">Item</label>
<div>
  <p></p>
</div>

<input type="radio" name="tabs" class="tabs" id="tab3">
<label for="tab3">Item</label>
<div>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse condimentum vitae risus ac pharetra. Duis sit amet viverra ante. Vivamus non maximus risus. Curabitur eu velit cursus, faucibus erat ac, interdum magna. Sed eget lorem sapien. Maecenas metus lectus, pulvinar et elit vitae, elementum cursus odio. Suspendisse eget semper diam. Nunc sagittis felis sit amet purus aliquam, at mollis eros fermentum. Proin dolor eros, semper at fermentum id, imperdiet tristique massa. Ut rhoncus pharetra tempor. Aenean elementum felis quam, vel faucibus odio porttitor vel. </p>
</div>

</div>
  
<p>Resto do conteúdo</p>
</BODY>
</HTML>

 

Share this post

Link to post
Share on other sites

cesarhtc    0

cesarhtc
Posted

Desculpe a ignorância poderia seria assim?

 

Atualmente :

<embed id="embedGNU" type="text/html" src="pagina.asp?variavel=<%=variavel%>" height="500px" width="100%" />

 

Seria isto

<head>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

 

<script> $(selector).html(pagina.asp?variavel=<%=variavel%>)</script>

 

 

 

Share this post

Link to post
Share on other sites

Omar~    87

Omar~
Posted
7 horas atrás, cesarhtc disse:

Desculpe a ignorância poderia seria assim?

 

Atualmente :

<embed id="embedGNU" type="text/html" src="pagina.asp?variavel=<%=variavel%>" height="500px" width="100%" />

 

Seria isto

<head>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

 

<script> $(selector).html(pagina.asp?variavel=<%=variavel%>)</script>

 

 

.html da jQuery na base serve somente para inserir conteúdo, e não uma requisição.

No caso o que @GabrielFerrari disse é para você usar AJAX, ao qual com jQuey possui alguns métodos. Você pode fazer assim, não é o ideal mas é o mais simples para mostrar: 

<script type="text/javascript">
$(document).ready(function () {
    $('.mostrar-pagina').load('pagina.asp?variavel=<%=variavel%>');
});
</script>
<div class="mostrar-pagina"></div>

 

A dica quo o @Maujor deu também é muito boa.

 

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Go To Topic Listing HTML e CSS

  • Similar Content

    • Kefatif
      Campo de opção obrigatório
      By Kefatif
      Bom dia Srs.
       
      Preciso de uma ajuda, não estou conseguindo deixar a seleção de opções abaixo obrigatória mesmo incluindo o "required"
       
      <label style="width:35%; margin-left:2%">Unidade<b style="color:red">*</b><br> <select name="cnes" class="form-control required" style="width:100%"> <option value="">Selecione</option> <?php $sql = "select * from UNIDADES order by NOME_UNIDADE"; $result = mysqli_query($con, $sql); while ($row= mysqli_fetch_array($result)){ ?> <option value="<?php echo $row["CNES"];?>"><?php echo $row["NOME_UNIDADE"]; ?></option> <?php } ?> </select> </label>  
      Agradeço desde já pela ajuda!
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.

  I accept