0
I am working with a 100% offline HTML page, I use Frameset to create a side menu that is resizable by the user. I was informed that Frameset or iframe are exceeded, so I would like to know some more updated element.
2 answers
1
frameset is obsolete and not supported by HTML5, but iframe not yet and is much used (see article, in English). Even won new attributes in HTML5.
Since you want something modern, I suggest you use jQuery UI resizable. With this library you can create a resizable side column with ease, and be able to take advantage of numerous jQuery utilities.
See an example of a side and resizable menu page using jQuery and CSS. I used iframe only in the area where pages will be loaded (content):
$("#menu").resizable({
handles: "e", // irá redimensionar apenas para a esquerda
minWidth: 200, // largura mínima do menu
maxWidth: 500, // largura máxima
resize: function( event, ui ){
$("#conteudo").css("width",(window.innerWidth-ui.size.width-60)+"px"); // ajusto a largura do iframe de acordo com a largura do menu
}
});html, body{
overflow: hidden;
margin: 0;
}
#menu{
min-width: 200px;
height: calc(100vh - 30px); /* altura da tela menos o padding*/
padding: 15px;
overflow-x: hidden; /* escondo a rolagem horizontal*/
float: left;
}
#conteudo{
width: calc(100% - 260px); /* largura da tela menos a largura total do menu*/
padding: 15px;
overflow: auto;
float: left;
}
.ui-resizable-e { /*largura da área onde o mouse redimensiona a largura do menu*/
width: 15px;
background: #ddd;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="menu">
<h2>Menu</h2>
<a target="conteudo" href="h2.html">Página 2</a>
</div>
<iframe frameborder="0" name="conteudo" id="conteudo" src="h1.html"></iframe>To use jQuery UI, simply load the libraries on the main page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
Behold at this link a better example because the snippet from here does not work properly using the resources, and take advantage to analyze the source code.
-
worked perfectly, but the problem I wanted to avoid, when using iframes or frames Chrome defines its content as #Document, the original part. so for example, I can’t get a button in the menu to affect a <p> of the file, because Document (js) only works for the same document. It is not possible to use contentDocument because it is a local file, which jquery does not allow, by issuing "cross-origin" error, how to proceed?
-
You want a menu item to change another element of a page that was loaded in iframe?
-
yes basically that
-
The problem is only in Chrome that does not accept file:// protocol in Ajax, already Firefox accepts. In online server will accept without problems. If you run on a local server, I think Chrome will accept because the protocol is no longer file://
-
@Kidnapper I think you could open up another question on the issue of CORS (if you don’t already have another one here at Sopt). The doubt of his question was a more modern way to replace the Frameset. About manipulating elements of a dynamically loaded content or how to load them is no longer within the scope of the question.
-
created empty Ivs and with Jquery imported the documents I created. I had to add them on the internet, but it solved all the problems, thanks anyway
0
One of the reasons for the drop in iframe is security.
This page is static or dynamic?
If static, there are numerous scripts (shell scripts) that specialize in building static pages (even an entire blog) from local files. They have a language of template to inform what is sidebar, top bar, footer, content ... and do the hard work of generating one or more static pages , each with the same layout.
Here is a list of these scripts: https://www.netlify.com/blog/2016/05/02/top-ten-static-website-generators/
If it is dynamic, it is the same case, but it is possible to do this with the server-side language itself. But then we have an ocean of possibilities. Would you do your own? or it would be in the format of a blog (can use Wordpress, Joomla...), or could be converted into a plugin of a content manager of the ones I cited... infinite means of achieving the same result.
The simplest of all, taking PHP as an example, would be to remove your <iframe> and trade for <?php include('barra_lateral.php') ?> , and so on. Your page would now be a PHP script/page, and provided you can do the HTML layout (you could use CSS Bootstrap for this https://getbootstrap.com ) just put the include in the right places.
I hope I’ve helped.
:root {
--jumbotron-padding-y: 3rem;
}
.jumbotron {
padding-top: var(--jumbotron-padding-y);
padding-bottom: var(--jumbotron-padding-y);
margin-bottom: 0;
background-color: #fff;
}
@media (min-width: 768px) {
.jumbotron {
padding-top: calc(var(--jumbotron-padding-y) * 2);
padding-bottom: calc(var(--jumbotron-padding-y) * 2);
}
}
.jumbotron p:last-child {
margin-bottom: 0;
}
.jumbotron-heading {
font-weight: 300;
}
.jumbotron .container {
max-width: 40rem;
}
footer {
padding-top: 3rem;
padding-bottom: 3rem;
}
footer p {
margin-bottom: .25rem;
}
.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }<script src="https://getbootstrap.com/assets/js/vendor/holder.min.js"></script>
<script src="https://getbootstrap.com/assets/js/vendor/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">About</h4>
<p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Contact</h4>
<ul class="list-unstyled">
<li><a href="#" class="text-white">Follow on Twitter</a></li>
<li><a href="#" class="text-white">Like on Facebook</a></li>
<li><a href="#" class="text-white">Email me</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark box-shadow">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-center">
<strong> php include('barra_superior.html')</pre></strong>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
<main role="main">
<section class="jumbotron text-center">
<div class="container">
<h1 class="jumbotron-heading">Album example</h1>
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
<p>
<a href="#" class="btn btn-primary my-2">Main call to action</a>
<a href="#" class="btn btn-secondary my-2">Secondary action</a>
</p>
</div>
</section>
<div class="album py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="text-muted">
<div class="container">
<p class="float-right">
<a href="#">Back to top</a>
</p>
<p>Album example is © Bootstrap, but please download and customize it for yourself!</p>
<p>New to Bootstrap? <a href="../../">Visit the homepage</a> or read our <a href="../../getting-started/">getting started guide</a>.</p>
</div>
</footer>Where you read php include('barra_superior.html') is where the template is made with PHP: but I omitted the full code, which would be: <?php include('barra_superior.html') ?> .
This is the best I can do at the moment to show you how to make a simple template with PHP and HTML + CSS Bootstrap .
-
Here is one of the problems, I am layman in php, if you have at least one php code that separates a page in two (preferably html places) and I can write the whole page in HTML freely thank you!
-
Ops, I guess I haven’t seen your comment stating that you’ll need to run this on a server...
Browser other questions tagged html5
You are not signed in. Login or sign up in order to post.
Page runs on local server?
– Sam
yes, but if necessary I can make it run online
– Raptador