pagination div pages with jquery - javascript

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

Related

How to display the hidden div after page reload?

I have a requirement that when click on a button the page need to reload.after reload i need to show the hidden div.
below is my requirement which describe my problem?
1.In my html code consist of some text along with button and in this page only by default i am hiding some text div
2.when click on the button i am reloading the page .after reload the page i want show hidden div
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#test2").css("visibility","hidden");
alert("reloaded");
$("#p1").click(function(){
setTimeout(function(e){
alert("inside time out");
$("#p2").css("visibility","visible");
},3000);
location.reload();
});
});
</script>
</head>
<body>
<div id="myDiv">
<p id="p1">This is sample text</p>
</div>
<div id="test2">
<p id="p2">this is invisible text</p>
</div>
</body>
</html>
Thanks in advance
You can set a localStorage item when a user clicks the button, and on page load look for the localStorage item and conditionally show the hidden div.
var $hidden = $('.hidden');
localStorage.getItem('show') && $hidden.show();
$('button').on('click',function() {
localStorage.setItem('show',true);
window.location.reload(false);
})
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hidden">hidden</div>
<button>click</button>
First, if your requirement is to have a button be clicked, you'll need a button, not a paragraph.
Next, instead of the visibility property (which still allocates space on the page for the element even when it is not shown), use display (which does not).
Most importantly, if you reload the document, then any local variables you have will be lost. You need to persist some kind of "flag" between page loads. This can be done in a variety of ways (cookies, sessionStorage, localStorage, server-side), but localStorage is probably the simplest.
This code won't actually run, here in the Stack Overflow snippet environment due to sandboxing, but you can see a working version of it here.
See other comments inline:
$(document).ready(function(){
// Check to see if this is a page reload or not by seeing if a value was placed
// into localStorage from a previous page load
if(localStorage.getItem("loadedEarlier")){
// Page has already loaded earlier
$("#test2").css("display","block");
}
$("#btn").click(function(){
location.reload();
});
// Place a value into localStorage
localStorage.setItem("loadedEarlier", "yes")
});
/* No need for JavaScript to initially hide the element which
can cause the usre to see it momentarially before the JS runs.
Set its default display to none instead. */
#test2 { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Click to Reload</button>
<div id="test2"><p id="p2">this is invisible text</p></div>

Fade out current and fade in anchor on JavaScript

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>

Multiple pages in one html page

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.

JQuery $(document).ready(function () not working

This is the first page where I try to open the detail.html;
<a href="detail.html" data-role="none" role="link">
<div class="place">name</div>
<div class="arrow"></div>
<div class="ammount">-€4,<span class="fontsize14">25</span></div>
</a>
I have problems to load the scripts on detail.html (after href link is clicked on first page)
Here is my script in header of details.html(the page I go after href is clicked on first page), Problem is I can NOT get the console test print, that function is NOT called when details.html page is loaded. It only hits after I manually refresh the page
<script>
$(document).bind("pageinit", function(){//or $(document).ready(function ()
console.log('test');
});
</script>
To understand your problem I think you need to first understand how jQuery Mobile "loads" external pages. By default when you click a link to a separate HTML page JQM loads the first data-role="page" on that page and attaches it to the DOM of the first page, the thing is JQM only loads that page div and not any scripts etc. that are outside that container.
If you want to run code for a second page, you either need to include that script on your first page and use event delegation (since the second page is not part of the DOM yet) or include the script withing the second page's date-role="page" wrapper.
Case in point in your case if you want to run code for your details page you either need to include the script on your first page for example assuming you have a div on your detail.html page like the following
<div id="details" data-role="page"> ..rest of your content
</div>
Then on your first page you could do the following
$(document).on('pageinit', '#details', function() {
console.log('test');
});
Or alternatively you can include a script tag withing your "details" page wrapper.
EDIT:
As I mentioned this is the default behavior, however if you wish you can tell jQuery Mobile to do a full post when loading a second page by adding in data-ajax="false" or rel="external" to your link for example
<a href="detail.html" data-ajax="false" data-role="none" role="link">
<div class="place">name</div>
<div class="arrow"></div>
<div class="ammount">-€4,<span class="fontsize14">25</span></div>
</a>
The difference between data-rel="external" and data-ajax="false" is if the second page is basically semantic in that data-rel="external" should be used if the second page is on a different domain.
I made you an working example: http://jsfiddle.net/Gajotres/Eqzd2/
$("#second").live('pagebeforeshow', function () {
console.log('This will only execute on second page!');
});
You can use on instead of live if you are using last version of jQuery.
Also take a look at my article about event flow in jQM page transition: https://stackoverflow.com/a/14010308/1848600

How to pass a javascript/jquery function from one html page to another

I have this page articles
In this page i have nav links on the left, and content loading on the right.
function showonlyone(thechosenone) {
$('div[name|="newboxes"]').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
my nav looks like this
<ul>
<li><a id="myHeader1" href="javascript:showonlyone('articles');" >ARTICLES</a></li>
<li><a id="myHeader1" href="javascript:showonlyone('whitepapers');" >WHITE PAPERS</a></li>
<li><a id="myHeader1" href="javascript:showonlyone('brochures');" >BROCHURES</a></li>
</ul>
and my content is in div like the following
<div id="articles" name="newboxes" style="display:none;">
<div id="whitepapers" name="newboxes" style="display:none;">
<div id="brochures" name="newboxes" style="display:none;">
Basically this page, is an interior page.
I have a home page, that i would like to have links to each section on, so the section i want shows up already so user doesn't have to click again.
Any idea how i do this?
Thank you for any help, and I apologize if i'm not using correct terminology.
if I well understood your question, on page "articles" just call showonlyone function
$(function() { // DOMready
showonlyone('articles');
});
and repeat this code for every internal page, changing the parameter
going by what i understand from your question is that..
u have links on home page..
when user clicks these links you want that particular section to be already opened when the interior page opens
like when user click "articles" then in the interior page the articles div should be visible
for this you will have to use hash tags in the following manner
on your home page..
provide the links with a hash tag like this
http://agencystudy.com/eic/microsites/microsites-02/articles.html#articles
then in your interior page in document ready event
$(document).ready(function(){
$(window.location.hash).show(200);
});

Categories