Looking to be able to put multiple distinct pages into one html page similar to the code shown below that was posted in this post:
Multiple distinct pages in one HTML file
However, I would like to have a fixed header above the pages to allow for navigation.
For example, the header has 4 links (Link1,Link2,etc.) that a user can choose from. If a user where to click on "Link2", then only Link2 will appear beneath and the other pages will remain hidden.
Let me know, Thanks!
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
<!DOCTYPE html>
<html>
<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>
You could play with the IDs only, but if you get many pages that starts to get a little tedious. I suggest using a class to do the hiding. Also, if you want there to be a common header for the pages, you just need to build it from HTML elements and then display the page links there and not within the page content.
I made an alternative suggestion where I added a 'page' class to all the page DIVs. Then what you can do is hide all the DIVs with the "page" class and show the one you want with an ID. This too is not a very flexible system, you can't easily do a dynamic amount of pages or a dynamic first page but it is a place to start. Here's my example:
This is in JSFiddle http://jsfiddle.net/H4dbJ/ but here's the code directly:
// show the given page, hide the rest
function show(elementID) {
// find the requested page and alert if it's not found
const ele = document.getElementById(elementID);
if (!ele) {
alert("no such element");
return;
}
// get all pages, loop through them and hide them
const pages = document.getElementsByClassName('page');
for (let i = 0; i < pages.length; i++) {
pages[i].style.display = 'none';
}
// then show the requested page
ele.style.display = 'block';
}
span {
text-decoration:underline;
color:blue;
cursor:pointer;
}
<p>
Show page
<span onclick="show('Page1');">1</span>,
<span onclick="show('Page2');">2</span>,
<span onclick="show('Page3');">3</span>.
</p>
<div id="Page1" class="page" style="">
Content of page 1
</div>
<div id="Page2" class="page" style="display:none">
Content of page 2
</div>
<div id="Page3" class="page" style="display:none">
Content of page 3
</div>
Further development ideas include: a next/prev button that uses Page1 Page2...PageN the page number as a variable, loops through all the pages an shows the last one. Or shows the first one. After that, a Next/Previous button that keeps track of the current page in a variable and then goes to the next one.
Related
I have 3 files:
mainPage.html
starter.html
Landing.js
When I click on the div in starter.html I want to move to mainPage.html and then to the Menu section of this page
starter.html code:
<li> <div onclick="onBackToMenu()">Back to menu</div></li>
landing.js code:
function onBackToMenu() {
window.location.href = "../mainPage.html";
document.getElementById("Menu").scrollIntoView();
}
mainPage.html: (partial code)
<!-- Menu section -->
<span class="anchor-offset" id="Menu"></span>
<div class ="section" >
<div class ="sectionHeadings">
<h1>Menu/Products</h1>
<div class="menu">
<div class="starter" onclick="location.href='pages/starter.html';">
<h3 class="menu-heading starter-heading">Starters</h3>
</div>
When I click on the div then it does take me to mainPage.html, but it doesnt want to take me to the Menu section with id of Menu.
Please help
Since you have an id on that section already ==> <span class="anchor-offset" id="Menu"></span> pass the id at the end of your href like this: window.location.href = "../mainPage.html#Menu"; this will a direct you to that section when the new page loads.
function onBackToMenu() {
window.location.href = "../mainPage.html#Menu";
document.getElementById("Menu").scrollIntoView();
}
No javascript is necessary. It's better practice and better for accessibility to use an anchor element (<a>) with an href element to create a hyperlink to the new page with a fragment identifier for the section you want to scroll to.
In your case, just change the list item in starter.html to:
<li>Back to menu</li>
This will navigate a user to the menu section of the new page.
With this script i try show pages inside divs with content, and move each time and the people wants see some page, can click over number page and load, the problem actually it´s when people click over number page, show more of 1 page, and not show the page´s number
TEST HERE :
https://jsfiddle.net/2mvek66f/
<script>
var total_pages=3;
pg=0;
function gopage(num_page)
{
jQuery(".page"+num_page).fadeIn(1000);
pg=num_page;
}
function init_pages()
{
jQuery(".page"+pg).fadeIn(1000,function(){auto_pages();});
}
function auto_pages()
{
jQuery(".page"+pg).fadeOut(1000,function(){init_pages();});
pg ++;
if(pg>=total_pages)
{
pg=0;
}
}
</script>
HTML CODE WITH PAGES
Pages:
<div class="page0" style="position:relative;width:200px;height:200px;margin:auto;background-color:red;display:none;"></div>
<div class="page1" style="position:relative;width:200px;height:200px;margin:auto;background-color:green;display:none;"></div>
<div class="page2" style="position:relative;width:200px;height:200px;margin:auto;background-color:blue;display:none;"></div>
<script>
init_pages();
</script>
<br>
<span onclick="gopage(0);">1</span>
<span onclick="gopage(1);">2</span>
<span onclick="gopage(2);">3</span>
When the people click over links in footer ,"gopage" must load the select div, but actually the problem in many cases, it´s that when click over pagination´s number, show more divs and not selected div
I currently have a section on my website (site is constructed in Laravel 5) which the user can show/hide. It is essentially a greeting from me. At the moment, all I am doing is using jQuery .toggle() on the element to show/hide. The issue is, when a user visits a different page the element re-appears (because it wasn't hidden originally).
I have considered just using AJAX for my sub pages and not refreshing the page, as there is very little content here anyway, but I was wondering if there is a better way to just pass session variables or cookies to different views and continue to hide the div.
HTML:
<div class="container">
<div class="row-fluid welcome-container">
<div class="col-md-3 profile">
<img class="profile-picture" src="images/jon.jpg">
</div>
<div class="col-md-9 welcome-box">
<div class="welcome">
<h2>
Welcome to my website.
<hr>
</h2>
</div>
<p class="hide-welcome">
[-]
</p>
</div>
</div>
<p class="show-welcome">
[+]
</p>
</div>
JS:
$(".hide-welcome").click(function() {
$(".welcome-container").slideToggle(500, "swing");
$(".hide-welcome").css("display", "none");
$(".show-welcome").css("display", "block");
var hidden = 1;
});
$(".show-welcome").click(function() {
$(".welcome-container").slideToggle(500, "swing");
$(".show-welcome").css("display", "none");
$(".hide-welcome").css("display", "block");
var hidden = 0;
});
I figure if I can pass 'hidden' along to each view via a Session/Cookie I could just run a blade check on that variable and then either hide/show the div at page load. Is there an easy way to do this, or should I just do AJAX loading of body content (and never leave the home page)?
I've got a simple problem that I don't know how to deal with it because I'm learning JavaScript
What I want to do is a link navigation to an anchor with fade in/out content. For that, I must get the current page ID and the anchor href with JavaScript.
This is what I got so far: (Please note in the script that is a simple calling method that I don't know yet)
$(btn).click(function(e){
$(*/current page/*).fadeOut('slow', function(){
$(*/destiny page/*).fadeIn('slow');
});
});
#page2, #page3 {
display:none;
}
<div id="page1">
Page 1 Content
<br>
Show Page 2 and hide this page
<br>
Show Page 3 and hide this page
</div>
<div id="page2">
Page 2 Content
<br>
Show Page 1 and hide this page
<br>
Show Page 3 and hide this page
</div>
<div id="page3">
Page 3 Content
<br>
Show Page 1 and hide this page
<br>
Show Page 2 and hide this page
</div>
I really apreciate your help and efforts!
For referring a group of elements You need to use btn as class , id should be unique and can be use to refer single element.
// bind click event
$('.btn').click(function(e) {
// prevent default click event action
e.preventDefault();
// get id next page based on clicked element
var next = $(this).attr('href');
// get parent to hide and fadeout
$(this).parent().fadeOut('slow', function() {
// get element to show and fade in
$('#' + next).fadeIn('slow');
});
});
#page2,
#page3 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="page1">
Page 1 Content
<br>
Show Page 2 and hide this page
<br>
Show Page 3 and hide this page
</div>
<div id="page2">
Page 2 Content
<br>
Show Page 1 and hide this page
<br>
Show Page 3 and hide this page
</div>
<div id="page3">
Page 3 Content
<br>
Show Page 1 and hide this page
<br>
Show Page 2 and hide this page
</div>
Consider the following page layout:
<div id="page-container" class="">
<div id="scroller">
<!-- This page should be removed -->
<div id="page_1" class="pagina"></div>
<!-- These pages should be kept -->
<div id="page_2" class="pagina"></div>
<div id="page_3" class="pagina"></div>
<!-- This is the current page -->
<div id="page_4" class="pagina"></div>
<!-- These pages should be kept -->
<div id="page_5" class="pagina"></div>
<div id="page_6" class="pagina"></div>
<!-- These pages AND everything that follows should be removed -->
<div id="page_7" class="pagina"></div>
<div id="page_8" class="pagina"></div>
</div>
</div>
I have a function loadPage(pageNr) which loads a specific page and scrolls it into view.
I also have a function that load's two more pages on top, or below the current page depending on the scroll direction.
What I want to achieve now, is that when my loadPage() function is called, I want to keep 2 pages below and before the current page. All other pages should be removed. This is for speed purposes as my app has 748 pages in total.
What I have tried:
//Determine which pages on top of current page should be kept
var firstPageToKeep = (pageNr - 2);
//Delete every page on top that should not be kept in memory
for(x=0;x<firstPageToKeep;x++) {
console.log('x: '+x);
$('#page_'+x).remove();
}
//=================================
//Determine which pages below current page should be kept
var lastPageToKeep = (pageNr + 2);
//Delete every page below current page that should not be kept in memory
for(y=0;y<lastPageToKeep;y++) {
$('#page_'+y).remove();
}
This does remove every page except the current page. I believe I have set the limits of which pages should be deleted and which not. Why is everything deleted except the current page?
Try this code:
$('.pagina').each(function(i, page) {
if ((i < pageNr - 3) || (i > pageNr + 1)) {
$(page).remove();
}
});
http://jsfiddle.net/6NCmR/
Try This:
$("#scroller").children().not("#id1 #id2 ...").each(function(){//Your code});
My quick guess is, that your last for-loop deletes all pages up to lastPageToKeep, keeping only the last pages. You should iterate beginning from lastPageToKeep+1 up to the maximum number of pages.
Nevertheless I'd recommend to you the :lt and :gt selectors from jQuery!
I made a quick fiddle for you demonstrating the use:
http://jsfiddle.net/d6tZ6/
Note: As a side effect this will also remove the neccessity for having an ID for each page.