I need some help:
<button">Text</button>
<div class="show-on-button-click">Content</div>
<button">Text2</button>
<div class="show-on-button-click">Content2</div>
<button">Text3</button>
<div class="show-on-button-click">Content3</div>
I´de like to show content when the user clicks on the button. But it wont work, even all divs are shown, or it doesnt open and only the buttons are shown.
THX
You have to use some JavaScript/Jquery ;-
$(document).ready(function(){
$("button").click(function(){
$(".show-on-button-click").toggle();
});
});
Hope you solve it !!
I would like to create an HTML button that acts like a link to an item on the same page. So, when you click the button, it redirects to item on the same page.
How can I do this? (I would limit the solution to HTML, CSS, and JavaScript, because currently I am not using any other language)
Current Button (Bootstrap):
<a class="btn btn-large btn-primary" href="">Democracy</a>
Try:
<button onclick="window.location.href='location'">Button Name</button
This is assuming that you are not talking about scrolling down to a regular anchor, and instead you want to scroll to actual HTML elements on the page.
I'm not sure if jQuery counts for you, but if you're using Bootstrap, I imagine it does. If so, you can bind to the "click" event for your button and put some javascript code there to handle the scrolling. Typically you might associate the link/button with the element you want to scroll to using a "data" attribute (e.g. data-scroll="my-element-id").
Without jQuery, you'll have to make a function that contains the code as described, and put in an onclick attribute that references your function, and passes "this" as a parameter to your function, so you can get the reference to the link/button element that called it.
For the code to use to actually scroll to the corresponding element, check out this article:
How to go to a specific element on page?
Quick example without jQuery:
<a class="scrollbutton" data-scroll="#somethingonpage"
onchange="scrollto(this);">something on page</a>
<div id="somethingonpage">scrolls to here when you click on the link above</a>
<script type="text/javascript">
function scrollto(element) {
// get the element on the page related to the button
var scrollToId = element.getAttribute("data-scroll");
var scrollToElement = document.getElementById(scrollToId);
// make the page scroll down to where you want
// ...
}
</script>
With jQuery:
<a class="scrollbutton" data-scroll="#somethingonpage">something on page</a>
<div id="somethingonpage">scrolls to here when you click on the link above</a>
<script type="text/javascript">
$(".scrollbutton").click(function () {
// get the element on the page related to the button
var scrollToId = $(this).data("scroll");
var scrollToElement = document.getElementById(scrollToId);
// make the page scroll down to where you want
// ...
});
</script>
Note: If you literally want a "button" rather than a "link", you can really use any element and make that clickable, e.g.:
<button class="scrollbutton" data-scroll="#somethingonpage">something on page</button>
hey try this : -
<button>Click Me</button>
then to which ever place you want to go in your site : -
u may just place the line below wherever you want,
<a name="A"></a>
hope it works for you
Bookmark your item on the same page that you want to redirect to by assigning it an id. Assume id="itemId", then use<a class="btn btn-large btn-primary" href="#itemId">Democracy</a>. When you click the button, you will be redirected to the part of the page containing that item.
Read More
<section id="sectionA">
<p>You will be directed to this section. You can use id inside div/section/p tags etc</p>
</section>
which section or div using same id in <a href="?">
Democracy
div or section eg:
<section id="democracy">
your content
</section>
try this method abosolutly work
This is the easy way to do it
<button type="button""> Click </button>
try this following code :
<button>Click Over Here</button>
then to which ever place you want to go in your site u may just place the line below wherever you want :
<a name="Link"></a>
Is there any way to have multiple distinct HTML pages contained within a single HTML file? For example, suppose I have a website with two pages:
Page 1 : click here for page 2
and
Page 2 : click here for page 1
Can I create a single HTML file that embeds simple static HTML for both pages but only displays one at a time? My actual pages are of course more complicated with images, tables and javascript to expand table rows. I would prefer to avoid too much script code. Thanks!
Well, you could, but you probably just want to have two sets of content in the same page, and switch between them. Example:
<html>
<head>
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>
<div id="Page1">
Content of page 1
Show page 2
</div>
<div id="Page2" style="display:none">
Content of page 2
Show page 1
</div>
</body>
</html>
(Simplified HTML code, should of course have doctype, etc.)
I used the following trick for the same problem. The good thing is it doesn't require any javascript.
CSS:
.body {
margin: 0em;
}
.page {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: -100vw;
overflow-y: auto;
z-index: 0;
background-color: hsl(0,0%,100%);
}
.page:target {
left: 0vw;
z-index: 1;
}
HTML:
<ul>
<li>Click here for page 1</li>
<li>Click here for page 2</li>
</ul>
<div class="page" id="one">
Content of page 1 goes here.
<ul>
<li>Back</li>
<li>Page 2</li>
</ul>
</div>
<div class="page" id="two">
Content of page 2 goes here.
<ul style="margin-bottom: 100vh;">
<li>Back</li>
<li>Page 1</li>
</ul>
</div>
See a JSFiddle.
Added advantage: as your url changes along, you can use it to link to specific pages. This is something the method won't let you do.
Hope this helps!
have all the pages in distinct div areas
<div style="" id="page1">
First Page Contents
</div>
<div style="display:none" id="page2">
Second Page Contents
</div>
then use a js script to workout what you are viewing (like within an hashtag style) to navigate. Either that, or ajax to get the response from a specific file (like /pages/page1.html)
var $prehashval = "";
function loop()
{
if (location.hash.slice(1)!=$prehashval)
hashChanged();
$prehashval = location.hash.slice(1);
setTimeout("loop()", 100);
}
function hashChanged()
{
var $output;
switch (location.hash.slice(1))
{
case "page1":
document.getElementById('page1').style.display = "";
document.getElementById('page2').style.display = "none";
break;
case "page2":
document.getElementById('page1').style.display = "none";
document.getElementById('page2').style.display = "";
break;
default:
$output = location.hash.slice(1);
}
}
loop();
Have you considered iframes or segregating your content and using a simple show/hide?
Edit If you want to use an iframe, you can have the contents of page1 and page2 in one html file. Then you can decide what to show or hide by reading the location.search property of the iframe. So your code can be like this :
For Page 1 : iframe.src = "mypage.html?show=1"
For Page 2 : iframe.src = "mypage.html?show=2"
Now, when your iframe loads, you can use the location.search.split("=")[1], to get the value of the page number and show the contents accordingly. This is just to show that iframes can also be used but the usage is more complex than the normal show/hide using div structures.
JQuery Mobile has multipage feature. But I am not sure about Desktop Web Applications.
This is kind of overriding the thing of one page, but... You could use iframes in HTML.
<html>
<body>
<iframe src="page1.html" border="0"></iframe>
</body>
</html>
And page1.html would be your base page. Your still making multiple pages, but your browser just doesn't move. So lets say thats your index.html. You have tabs, you click page 2, your url wont change, but the page will. All in iframes. The only thing different, is that you can view the frame source as well.
Screen Rec
You could use Colker, which is built for this, but you'll have to remove the search box, and search feature code, because searching isn't compatible with the type of content you intend to use.
Page contents are stored in a java-script array, and the "page" (eg: ?page=pagename) URL parameter determines which page content to serve.
Twine is an open-source tool for telling interactive, nonlinear stories.
It generates a single html with multiples pages.
Maybe it is not the right tool for you but it could be useful for someone else looking for something similar.
By hiding and showing one another, you can achieve this without embedding it. While Guffa's answer worked quite well, I couldn't figure out how to add more than 2 pages, and while Binz Nakama's answer fixes that, it doesn't quite let you only show Page 1 and toggle between them.
Here's the codepen I made, and here's an example I made from one of my existing websites.
HTML:
<div class="part1">
Page 1 content goes here.
<button onclick="hidePart1()">Go to Page 2</button>
<button onclick="showPart3()">Go to Page 3</button>
</div>
<div class="part2">
Page 2 content goes here.
<button onclick="hidePart2()">Go to Page 1</button>
<button onclick="showPart3()">Go to Page 3</button>
</div>
<div class="part3">
Page 3 content goes here.
<button onclick="hidePart2()">Go to Page 1</button>
<button onclick="hidePart1()">Go to Page 2</button>
</div>
CSS:
.hide {
display: none !important;
}
.show {
display: block !important;
}
.part1 {
display: block;
}
.part2 {
display: none;
}
.part3 {
display: none;
}
JS:
function hidePart1() {
document.querySelector(".part1").classList.remove("show");
document.querySelector(".part1").classList.add("hide");
document.querySelector(".part3").classList.remove("show");
document.querySelector(".part3").classList.add("hide");
document.querySelector(".part2").classList.add("show");
}
function hidePart2() {
document.querySelector(".part2").classList.remove("show");
document.querySelector(".part2").classList.add("hide");
document.querySelector(".part3").classList.remove("show");
document.querySelector(".part3").classList.add("hide");
document.querySelector(".part1").classList.add("show");
}
function showPart3() {
document.querySelector(".part1").classList.remove("hide");
document.querySelector(".part1").classList.remove("show");
document.querySelector(".part1").classList.add("hide");
document.querySelector(".part2").classList.remove("hide");
document.querySelector(".part2").classList.remove("show");
document.querySelector(".part2").classList.add("hide");
document.querySelector(".part3").classList.remove("hide");
document.querySelector(".part3").classList.add("show");
}
While the code above is probably not quite optimized (especially the JS), it definitely works well for me. I am still quite new to JavaScript, and not very good at it.
Edit: Added part 3 to the code.
Edit: Added example.
It is, in theory, possible using data: scheme URIs and frames, but that is rather a long way from practical.
You can fake it by hiding some content with JS and then revealing it when something is clicked (in the style of tabtastic).
Solution 1
One solution for this, not requiring any JavaScript, is simply to create a single page in which the multiple pages are simply regular content that is separated by a lot of white space. They can be wrapped into div containers, and an inline style sheet can endow them with the margin:
<style>
.subpage { margin-bottom: 2048px; }
</style>
... main page ...
<div class="subpage">
<!-- first one is empty on purpose: just a place holder for margin;
alternative is to use this for the main part of the page also! -->
</div>
<div class="subpage">
</div>
<div class="subpage">
</div>
You get the picture. Each "page" is just a section followed by a whopping amount of vertical space so that the next one doesn't show.
I'm using this trick to add "disambiguation navigation links" into a large document (more than 430 pages long in its letter-sized PDF form), which I would greatly prefer to keep as a single .html file. I emphasize that this is not a web site, but a document.
When the user clicks on a key word hyperlink in the document for which there are multiple possible topics associated with word, the user is taken a small navigation menu presenting several topic choices. This menu appears at top of what looks like a blank browser window, and so effectively looks like a page.
The only clue that the menu isn't a separate page is the state of the browser's vertical scroll bar, which is largely irrelevant in this navigation use case. If the user notices that, and starts scrolling around, the whole ruse is revealed, at which point the user will smile and appreciate not having been required to unpack a .zip file full of little pages and go hunting for the index.html.
Solution 2
It's actually possible to embed a HTML page within HTML. It can be done using the somewhat obscure data: URL in the href attribute. As a simple test, try sticking this somewhere in a HTML page:
blah
In Firefox, I get a "blah" hyperlink, which navigates to a page showing the FOO heading. (Note that I don't have a fully formed HTML page here, just a HTML snippet; it's just a hello-world example).
The downside of this technique is that the entire target page is in the URL, which is stuffed into the browser's address input box.
If it is large, it could run into some issues, perhaps browser-specific; I don't have much experience with it.
Another disadvantage is that the entire HTML has to be properly escaped so that it can appear as the argument of the href attribute. Obviously, it cannot contain a plain double quote character anywhere.
A third disadvantage is that each such link has to replicates the data: material, since it isn't semantically a link at all, but a copy and paste embedding. It's not an attractive solution if the page-to-be-embeddded is large, and there are to be numerous links to it.
going along with #binz-nakama, here's an update on his jsfiddle with a very small amount of javascript. also incoporates this very good article on css navigation
update on the jsfiddle
Array.from(document.querySelectorAll("a"))
.map(x => x.addEventListener("click",
function(e){
Array.from(document.querySelectorAll("a"))
.map(x => x.classList.remove("active"));
e.target.classList.add("active");
}
));
Let's say you have multiple pages, with id #page1 #page2 and #page3. #page1 is the ID of your start page. The first thing you want to do is to redirect to your start page each time the webpage is loading. You do this with javascript:
document.location.hash = "#page1";
Then the next thing you want to do is place some links in your document to the different pages, like for example:
Click here to get to page 2.
Then, lastly, you'd want to make sure that only the active page, or target-page is visible, and all other pages stay hidden. You do this with the following declarations in the <style> element:
<style>
#page1 {display:none}
#page1:target {display:block}
#page2 {display:none}
#page2:target {display:block}
#page3 {display:none}
#page3:target {display:block}
</style>
An example that actually uses two separate HTML files. The example is based on this tutorial from Tutorial Republic.
app.js
$(document).ready(function(){
$("#screen").load("page1.html")
$(document).on("click", '#page1_button', function(event) {
$("#screen").load("page2.html")
});
$(document).on("click", '#page2_button', function(event) {
$("#screen").load("page1.html")
});
});
Index.html
<!DOCTYPE html>
<html lang="eng">
<head></head>
<body>
<div id="screen"></div>
<!-- Import JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Import main JS -->
<script src="app.js"></script>
</body>
</html>
page1.html
<div>Welcome to page one</div>
<button id="page1_button" type="button">Go to page 2</button>
page2.html
<div>Welcome to page two</div>
<button id="page2_button" type="button">Go to page 1</button>
Important: Page one and page two should only have the body content, i.e., without <body> and <HTML> tags.
In case the container should span over the whole page (taken from this StackOverflow answer):
stycle.css
#screen
{
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
}
<html>
<head>
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>
Show page 1
Show page 2
<div id="Page1">
Content of page 1
</div>
<div id="Page2" style="display:none">
Content of page 2
</div>
</body>
</html>
I have been trying to use jquery tabs to launch html pages(within the same page) but somehow failing at it repeatedly. Seems like a simple enough thing, but in all my attempts either the tabs stop working or the page doesn't open.
Here's what I am trying to achieve - my index.html page with multiple tabs(say a,b,c). i have the individual pages a.html, b.html and c.html written and want them to be opened in the same page(below the tabs) such that the tabs are omnipresent. What would be the easiest way to get this working? I have tried simply calling the html pages or even using iframes, but nothing seems to work. Also, when I tried using iframes, the frame wasn't using the full height of the page available to it, but only say 20% of it(in latest firefox).
I know this is probably too trivial a question and might have been caused by some silly mistake at my end, but I have literally spent more than a week in trying to get this to work and am,now, at my wit's end!
Any help would be much appreciated!
Thanks
{ edited the post to add relevant code snippets}
<body>
...
<div id="navigation" class="menu">
<ul class="tabNavigation">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
<div>
<!--tab contents -->
<div class="panes">
<div id="A">A Content<p> tab A content</p>
<iframe src="a.html"></iframe></div>
<div id="B">B Content <p> tab B content</p>
<iframe src="b.html"></iframe></div>
<div id="C">C Content<p> tab C content</p>
<iframe src="c.html"></iframe></div>
</div>
</div>
<!-- JS to activate the tabs -->
<script>
$(function()
{
var tabContainers = $('div.tabs > div');
$('div.tabNavigation ul.tabs a').click(function()
{
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
</script>
</body>
{Edited with specific code}
You could simply put the tabs on every page. The pages will reload but the tabs will be in the same place.
If the reload bothers you you're going to have to call the content of the html pages using javascript.
This script will call the html out of the pages and put the html into the panes of the divs with corresponding letters. This should serve what you are trying to achieve with iframes but without the iframes of course.
<script type="text/javascript">
$(document).ready(function() {
$.get("a.html", function(data){
$(#A).append(data);
});
$.get("b.html", function(data){
$(#B).append(data);
});
$.get("c.html", function(data){
$(#C).append(data);
});
});
</script>