For performance, I am not creating many .HTML files. Instead of it I am creating the page content into a div so it will be show like below
<div id="page1"> first page content</div>
<div id="page2"> first page content</div>
<div id="page3"> first page content</div>
<div id="page4"> first page content</div>
But the problem is, the second page automatically scroll, when I scroll the first page even the second page is hidden.
<button style="position:fixed" onclick="page1.style.display='none';page2.style.display='';">Show page 2</button>
<button style="position:fixed;margin-left:100px" onclick="page1.style.display='';page2.style.display='none';">Show page 1</button>
<div id="page1">
<div>PAGE 1 - 1</div><div>PAGE 1 - 2</div><div>PAGE 1 - 3</div><div>PAGE 1 - 4</div><div>PAGE 1 - 5</div><div>PAGE 1 - 6</div><div>PAGE 1 - 7</div><div>PAGE 1 - 8</div><div>PAGE 1 - 9</div><div>PAGE 1 - 10</div><div>PAGE 1 - 11</div><div>PAGE 1 - 12</div><div>PAGE 1 - 13</div><div>PAGE 1 - 14</div><div>PAGE 1 - 15</div><div>PAGE 1 - 16</div><div>PAGE 1 - 17</div><div>PAGE 1 - 18</div><div>PAGE 1 - 19</div><div>PAGE 1 - 20</div><div>PAGE 1 - 21</div><div>PAGE 1 - 22</div><div>PAGE 1 - 23</div><div>PAGE 1 - 24</div><div>PAGE 1 - 25</div><div>PAGE 1 - 26</div><div>PAGE 1 - 27</div><div>PAGE 1 - 28</div><div>PAGE 1 - 29</div><div>PAGE 1 - 30</div><div>PAGE 1 - 31</div><div>PAGE 1 - 32</div><div>PAGE 1 - 33</div><div>PAGE 1 - 34</div><div>PAGE 1 - 35</div><div>PAGE 1 - 36</div><div>PAGE 1 - 37</div><div>PAGE 1 - 38</div><div>PAGE 1 - 39</div><div>PAGE 1 - 40</div><div>PAGE 1 - 41</div><div>PAGE 1 - 42</div><div>PAGE 1 - 43</div><div>PAGE 1 - 44</div><div>PAGE 1 - 45</div><div>PAGE 1 - 46</div><div>PAGE 1 - 47</div><div>PAGE 1 - 48</div><div>PAGE 1 - 49</div><div>PAGE 1 - 50</div><div>PAGE 1 - 51</div>
</div>
<div id="page2" style="display:none">
<div>PAGE 2 - 1</div><div>PAGE 2 - 2</div><div>PAGE 2 - 3</div><div>PAGE 2 - 4</div><div>PAGE 2 - 5</div><div>PAGE 2 - 6</div><div>PAGE 2 - 7</div><div>PAGE 2 - 8</div><div>PAGE 2 - 9</div><div>PAGE 2 - 10</div><div>PAGE 2 - 11</div><div>PAGE 2 - 12</div><div>PAGE 2 - 13</div><div>PAGE 2 - 14</div><div>PAGE 2 - 15</div><div>PAGE 2 - 16</div><div>PAGE 2 - 17</div><div>PAGE 2 - 18</div><div>PAGE 2 - 19</div><div>PAGE 2 - 20</div><div>PAGE 2 - 21</div><div>PAGE 2 - 22</div><div>PAGE 2 - 23</div><div>PAGE 2 - 24</div><div>PAGE 2 - 25</div><div>PAGE 2 - 26</div><div>PAGE 2 - 27</div><div>PAGE 2 - 28</div><div>PAGE 2 - 29</div><div>PAGE 2 - 30</div><div>PAGE 2 - 31</div><div>PAGE 2 - 32</div><div>PAGE 2 - 33</div><div>PAGE 2 - 34</div><div>PAGE 2 - 35</div><div>PAGE 2 - 36</div><div>PAGE 2 - 37</div><div>PAGE 2 - 38</div><div>PAGE 2 - 39</div><div>PAGE 2 - 40</div><div>PAGE 2 - 41</div><div>PAGE 2 - 42</div><div>PAGE 2 - 43</div><div>PAGE 2 - 44</div><div>PAGE 2 - 45</div><div>PAGE 2 - 46</div><div>PAGE 2 - 47</div><div>PAGE 2 - 48</div><div>PAGE 2 - 49</div><div>PAGE 2 - 50</div><div>PAGE 2 - 51</div>
</div>
The sample in codepen
https://codepen.io/merbin2012/pen/qBMdVKZ?editors=1000
I know the solution, we can save the final scrolling point and we can scroll when come to the first page and we can use scrolltotop, but it is very difficult to manage, because I have more than 30pages.
One possible approach:
Create a main pages wrapper that flexes 1 (occupy available space)
Make your pages overlap each-other using position absolute and set overflow: auto
When a page becomes class "is-active" set its scrollTop to 0
// DOM utility functions:
const el = (sel, par) => (par || document).querySelector(sel);
const els = (sel, par) => (par || document).querySelectorAll(sel);
const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);
// Task: Pages
const elToPage = el("#toPage");
const elPages = el("#pages");
const createPage = (page, i) => {
const elPage = elNew("article", {
className: "page",
innerHTML: `<p><i>Page: ${i+1}</i></p>
<h2>${page.title}</h2>
<div>${page.body}</div>`
});
const elOption = elNew("option", {
textContent: i+1,
value: i,
});
elToPage.append(elOption);
elPages.append(elPage);
};
const showPage = (index) => {
elPages.querySelector(".page.is-active")?.classList.remove("is-active");
elPages.children[index].scrollTop = 0;
elPages.children[index].classList.add("is-active");
};
elToPage.addEventListener("input", (evt) => {
showPage(+elToPage.value);
});
// Grab content and show first page
fetch("https://jsonplaceholder.typicode.com/posts")
.then(res => res.json())
.then(data => {
data.forEach(createPage);
showPage(0);
});
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
#nav {
background: gold;
padding: 1rem;
}
#pages {
position: relative;
background: #ddd;
flex: 1;
}
.page {
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
padding: 1rem;
margin: auto;
opacity: 0;
transition: opacity 0.3s, scale 0.3s;
scale: 0.7;
pointer-events: none;
font-size: 12vmin;
}
.page.is-active {
opacity: 1;
pointer-events: auto;
scale: 1;
}
<nav id="nav">Page:
<select id="toPage"></select>
</nav>
<main id="pages"></main>
Another approach using your HTML sample is to address your comment in your original post:
I know the solution, we can save the final scrolling point and we can scroll when come to the first page and we can use scrolltotop, but it is very difficult to manage, because I have more than 30pages.
A straightforward solution is to: assign a page number attribute to each page element (i.e. your generated HTML content page); add an entry to a key/value object; assign the key to the page number attribute value; assign value to the scrollTop position retrieved just before another page element is displayed.
const pageContainerEl = document.documentElement;
const savedScrollTops = {};
document.querySelectorAll("button[data-page-num]")
.forEach(btn => btn.addEventListener("click", clickHandler));
setActivePage("1");
function clickHandler() {
// 'this' represents the 'button' element that was clicked.
// Get the page number in the 'data-page-num' attribute
// of the clicked button.
const pageNum = this.getAttribute("data-page-num");
setActivePage(pageNum);
}
// 'pageNum' parameter can be a integer (e.g. 4)
// or a string representing an integer value (e.g. "5");
function setActivePage(pageNum) {
// If the 'pageNum' parameter is set to a string
// then convert the string to an integer using the
// built-in 'parseInt()' function.
pageNum = parseInt(pageNum, 10);
// If the value assigned to the 'pageNum' parameter is
// not an integer then exit this function.
if (!Number.isInteger(pageNum)) {
return;
}
// Get the active page element
const activePageEl = document.querySelector(".page.active");
if (activePageEl) {
// If an active page element exists, get it's
// 'data-page-num' attribute value and assign it to
// the variable 'activePageNum'.
const activePageNum =
parseInt(activePageEl.getAttribute("data-page-num"), 10);
// If the requested page number set in the parameter
// 'pageNum' is the same as the active page number
// then exit this function as no more code needs to
// be executed.
if (activePageNum === pageNum) {
return;
}
if (Number.isInteger(activePageNum)) {
savedScrollTops[`pageNum${activePageNum}`] =
pageContainerEl.scrollTop;
}
// Hide the active page element by removing the
// 'active' class name.
activePageEl.classList.remove("active");
}
// Find the page element that has a 'data-page-num'
// attribute value equal to the value assigned to the
// 'pageNum' parameter.
const pageEl = document.querySelector(`.page[data-page-num='${pageNum}']`);
if (!pageEl) {
return;
}
// Display the page element
pageEl.classList.add("active");
// Change the vertical scroll position of the page
// element to the stored scroll top value in the
// 'savedScrollTops' object.
pageContainerEl.scrollTop =
savedScrollTops[`pageNum${pageNum}`] || 0;
}
html {
/* https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior */
scroll-behavior: unset !important;
}
#button-controls {
position: fixed;
display: grid;
grid-auto-flow: column;
grid-gap: 1rem;
width: fit-content;
}
.page {
display: none;
}
.page.active {
display: block;
}
<span id="button-controls">
<button data-page-num="1">Show page 1</button>
<button data-page-num="2">Show page 2</button>
</span>
<div id="page1" class="page" data-page-num="1">
<div>PAGE 1 - 1</div>
<div>PAGE 1 - 2</div>
<div>PAGE 1 - 3</div>
<div>PAGE 1 - 4</div>
<div>PAGE 1 - 5</div>
<div>PAGE 1 - 6</div>
<div>PAGE 1 - 7</div>
<div>PAGE 1 - 8</div>
<div>PAGE 1 - 9</div>
<div>PAGE 1 - 10</div>
<div>PAGE 1 - 11</div>
<div>PAGE 1 - 12</div>
<div>PAGE 1 - 13</div>
<div>PAGE 1 - 14</div>
<div>PAGE 1 - 15</div>
<div>PAGE 1 - 16</div>
<div>PAGE 1 - 17</div>
<div>PAGE 1 - 18</div>
<div>PAGE 1 - 19</div>
<div>PAGE 1 - 20</div>
<div>PAGE 1 - 21</div>
<div>PAGE 1 - 22</div>
<div>PAGE 1 - 23</div>
<div>PAGE 1 - 24</div>
<div>PAGE 1 - 25</div>
<div>PAGE 1 - 26</div>
<div>PAGE 1 - 27</div>
<div>PAGE 1 - 28</div>
<div>PAGE 1 - 29</div>
<div>PAGE 1 - 30</div>
<div>PAGE 1 - 31</div>
<div>PAGE 1 - 32</div>
<div>PAGE 1 - 33</div>
<div>PAGE 1 - 34</div>
<div>PAGE 1 - 35</div>
<div>PAGE 1 - 36</div>
<div>PAGE 1 - 37</div>
<div>PAGE 1 - 38</div>
<div>PAGE 1 - 39</div>
<div>PAGE 1 - 40</div>
<div>PAGE 1 - 41</div>
<div>PAGE 1 - 42</div>
<div>PAGE 1 - 43</div>
<div>PAGE 1 - 44</div>
<div>PAGE 1 - Slighly shorter content than page 2</div>
</div>
<div id="page2" class="page" data-page-num="2">
<div>PAGE 2 - 1</div>
<div>PAGE 2 - 2</div>
<div>PAGE 2 - 3</div>
<div>PAGE 2 - 4</div>
<div>PAGE 2 - 5</div>
<div>PAGE 2 - 6</div>
<div>PAGE 2 - 7</div>
<div>PAGE 2 - 8</div>
<div>PAGE 2 - 9</div>
<div>PAGE 2 - 10</div>
<div>PAGE 2 - 11</div>
<div>PAGE 2 - 12</div>
<div>PAGE 2 - 13</div>
<div>PAGE 2 - 14</div>
<div>PAGE 2 - 15</div>
<div>PAGE 2 - 16</div>
<div>PAGE 2 - 17</div>
<div>PAGE 2 - 18</div>
<div>PAGE 2 - 19</div>
<div>PAGE 2 - 20</div>
<div>PAGE 2 - 21</div>
<div>PAGE 2 - 22</div>
<div>PAGE 2 - 23</div>
<div>PAGE 2 - 24</div>
<div>PAGE 2 - 25</div>
<div>PAGE 2 - 26</div>
<div>PAGE 2 - 27</div>
<div>PAGE 2 - 28</div>
<div>PAGE 2 - 29</div>
<div>PAGE 2 - 30</div>
<div>PAGE 2 - 31</div>
<div>PAGE 2 - 32</div>
<div>PAGE 2 - 33</div>
<div>PAGE 2 - 34</div>
<div>PAGE 2 - 35</div>
<div>PAGE 2 - 36</div>
<div>PAGE 2 - 37</div>
<div>PAGE 2 - 38</div>
<div>PAGE 2 - 39</div>
<div>PAGE 2 - 40</div>
<div>PAGE 2 - 41</div>
<div>PAGE 2 - 42</div>
<div>PAGE 2 - 43</div>
<div>PAGE 2 - 44</div>
<div>PAGE 2 - 45</div>
<div>PAGE 2 - 46</div>
<div>PAGE 2 - 47</div>
<div>PAGE 2 - 48</div>
<div>PAGE 2 - 49</div>
<div>PAGE 2 - 50</div>
<div>PAGE 2 - 51</div>
</div>
Related
i am new to JavaScript and not the best at HTML but have to do the following for school:
I found a Stopwatch HTML-Code and i made a javascript for it, which shall calculate the laborunits(LU) out of the stopped time.
1 LU = 15 minutes (900 seconds)
The problem is, that i cant get the stopped time from the HTML-Site into my JavaScirpt, to calculate the "LU".
I tried document.getElementById and document.getElementsByClassName
with document.getElementsByClassName i always get something like "object htmldivelement"
and with document.getElementById all the variables stay null and i cant figur out, how i can fix that.
do i need to use some other command or what am i doing wrong?
<div class="container">
<!-- controls -->
<input id="start" name="controls" type="radio" />
<input id="stop" name="controls" type="radio" />
<input id="reset" name="controls" type="radio" />
<div class="timer">
<div class="cell">
<div class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell">
<div class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell divider"><div class="numbers">:</div></div>
<div class="cell">
<div class="numbers tenminute movesix">0 1 2 3 4 5 6</div>
</div>
<div class="cell">
<div class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell divider"><div class="numbers">:</div></div>
<div class="cell">
<div class="numbers tensecond movesix">0 1 2 3 4 5 6</div>
</div>
<div class="cell">
<div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell divider"><div class="numbers">:</div></div>
<div class="cell">
<div class="numbers milisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell">
<div class="numbers tenmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell">
<div class="numbers hundredmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
</div>
JAVASCRIPT:
var ae;
var zs = document.getElementById('cell');
var es = document.getElementById('cell');
var zm = document.getElementById('cell');
var em = document.getElementById('cell');
var zsek = document.getElementById('cell');
var esek = document.getElementById('cell');
document.write("<center><h2>Erfasste AEs: </h2></center> <h2>");
document.getElementById('stop').onclick = function() {
zs = zs * 36000;
es = es * 3600;
zm = zm * 600;
em = em * 60;
zsek = zsek * 10;
ae = ((zs + es + zm +em + zsek + esek) / 900) + 1;
document.write(ae);
};
If the stop-button is pressed it shall tell me the calculated
LaborUnits. the problem that if the Stop-Button is pressed, the
JavaScript posts the answer on a "new" blank site, will i try to
solve.
i would appreciate every kind of help and sorry for my patchy english
Start by giving your cells unique ids. Right now you're trying to reference their class. Even if you changed this class designation to id, you wouldn't get the values you expect because they would all share the same id.
<div class="cell">
<div class="numbers tensecond movesix" id="tensecplace">0 1 2 3 4 5 6</div>
</div>
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 6 years ago.
I made an animation with jquery and I find myself with 15400 line of code.
I have 26 div (images) with IDs: .article1, article2, .article3, .article4, ... article26.
When I click on one of them lot of translation will be applied on the others.
I want to decrease the number of code lines, i tried a For loop:
for (var i = 1 ; i<=26 ; i++)
{
$('.article' + i]).click(function(){
-- animations --
}
}
But it seems don't work because the value of i will take the last value of the loop (26) so the click function will work only on the div with id .article26.
Thank you.
this could be a way to manage an animation over many different named elements...
function AnimationCtrl($) {
var els = $('[class^="article"]');
els.click(function(event) {
$(this).toggleClass('is-active');
});
}
jQuery(document).ready(AnimationCtrl);
[class^="article"] {
padding: .5em 1em;
background: cyan;
border: 1px solid lightseagreen;
display: inline-block;
margin: .2em .5em;
cursor: pointer;
transition: 500ms all linear;
}
.is-active[class^="article"] {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="article-1">elemnt number 1</div>
<div class="article-2">elemnt number 2</div>
<div class="article-3">elemnt number 3</div>
<div class="article-4">elemnt number 4</div>
<div class="article-5">elemnt number 5</div>
<div class="article-6">elemnt number 6</div>
<div class="article-7">elemnt number 7</div>
<div class="article-8">elemnt number 8</div>
<div class="article-9">elemnt number 9</div>
<div class="article-10">elemnt number 10</div>
<div class="article-11">elemnt number 11</div>
<div class="article-12">elemnt number 12</div>
<div class="article-13">elemnt number 13</div>
<div class="article-14">elemnt number 14</div>
<div class="article-15">elemnt number 15</div>
<div class="article-16">elemnt number 16</div>
<div class="article-17">elemnt number 17</div>
<div class="article-18">elemnt number 18</div>
<div class="article-19">elemnt number 19</div>
<div class="article-20">elemnt number 20</div>
<div class="article-21">elemnt number 21</div>
<div class="article-22">elemnt number 22</div>
<div class="article-23">elemnt number 23</div>
<div class="article-24">elemnt number 24</div>
<div class="article-25">elemnt number 25</div>
<div class="article-26">elemnt number 26</div>
I have html elements like this:
<div class="content">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
<div class="box">Box 7</div>
<div class="box">Box 8</div>
</div>
I want to use jQuery to make a pagination for these elements and in the script I can modify numbers of elements per page, for example:
num_per_page = 4 then page 1 will show box 1 to box 4 and page 2 will show box 5 to box 8.
Try using .slice()
var num_per_page = 4;
//then page 1 will show box 1 to box 4
// note, `.slice()` uses a 0-based index,
// element at index `3` would be fourth from 0
$(".content .box").slice(0, num_per_page -1).show()
// and page 2 will show box 5 to box 8.
.end().slice(num_per_page).hide()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="content">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
<div class="box">Box 7</div>
<div class="box">Box 8</div>
</div>
You can do,
var noOfBoxesPerPage = 3;
var totalPages = Math.ceil($(".content .box").length / noOfBoxesPerPage);
$(".content .box").hide();
$(".content .box:lt(" + noOfBoxesPerPage + ")").show();
for (i = 1; i <= totalPages; i++) {
$("#page").append("<span>" + i + "</span>");
}
$("#page").on("click", "span", function() {
$(".content .box").show();
var ltCount = ($(this).index()) * noOfBoxesPerPage;
var gtCount = ($(this).index() + 1) * noOfBoxesPerPage;
$(".content .box:lt(" + ltCount + ")").hide();
$(".content .box:gt(" + (gtCount - 1) + ")").hide();
});
Fiddle demo
This will create pages as well as page indexes
Trying to figure out somekind of logic that will let me distribute elements in a sequenced order. What size and position should be randomly generated within a given range (for example, element must be within viewport and the size of the element should be within a defined range such as minimum 10% of viewport, maximum 60%).
I'm not sure what would be the best way to approach something like this, any ideas?
I've attached a sketch below of what it could look like. The layout would be different at each load.
Markup
<div class="container">
<div class="post">Post 1</div>
<div class="post">Post 2</div>
<div class="post">Post 3</div>
<div class="post">Post 4</div>
<div class="post">Post 5</div>
<div class="post">Post 6</div>
<div class="post">Post 7</div>
<div class="post">Post 8</div>
<div class="post">Post 9</div>
<div class="post">Post 10</div>
<div class="post">Post 11</div>
<div class="post">Post 12</div>
<div class="post">Post 13</div>
<div class="post">Post 14</div>
<div class="post">Post 15</div>
</div>
Thanks, this was fun to code. I set some defaults in CSS and then did the logic in JS. Note that the buffer() function is nonlinear; we want most of the buffers to be close to zero and very few of them to be on the larger side, so we use powers of e (2.7⁰/12 = 0.08em to 2.7⁶/12 = 33.62em) for the scale and then multiply them out to get a bigger range of numbers (rather than powers of two divided by 12).
I assume the elements are already chronologically ordered. If not, that shouldn't be hard to do, just sort posts[] and insert them in order using appendChild() on the container.
var defaultMax = Math.exp(6) / 12; // e⁶ / 12 = 33.5em
// random buffer to give for spacing.
// growth is inverse exponential, so larger is less likely
function buffer(min=0.1, max=defaultMax, mult=1) {
return Math.min(max, Math.max(min,
min / 2 + Math.exp(Math.random() * 6) * Math.random() * mult / 12
))+"em";
}
function randomize() {
var posts = document.getElementsByClassName("posts");
for (var p = 0; p < posts.length; p++) {
// random buffered margins, ordered: top right bottom left.
// top is at least 0.1em, right and bottom are at least 0.25em.
// top and bottom are cut in half to limit lost vertical space.
posts[p].style.margin = buffer(0.1, defaultMax, 0.5) + " "
+ buffer(0.25) + " "
+ buffer(0.25, defaultMax, 0.5) + " "
+ buffer();
// random width and height (with sane minimum size: 8em x 5em)
posts[p].style.width = buffer(8);
posts[p].style.height = buffer(5);
}
}
.posts { float:left; background:#000; color:#fff;
padding:0.2em; text-align:center; }
.container { width:50em; max-width:100%; }
<body onload="randomize()">
<div class="container">
<div class="posts">Post 1</div>
<div class="posts">Post 2</div>
<div class="posts">Post 3</div>
<div class="posts">Post 4</div>
<div class="posts">Post 5</div>
<div class="posts">Post 6</div>
<div class="posts">Post 7</div>
<div class="posts">Post 8</div>
<div class="posts">Post 9</div>
<div class="posts">Post 10</div>
<div class="posts">Post 11</div>
<div class="posts">Post 12</div>
<div class="posts">Post 13</div>
<div class="posts">Post 14</div>
<div class="posts">Post 15</div>
</div>
</body>
So I've used Adams code as a base. So HTML and CSS stay the same:
HTML
<body onload="randomize()">
<div class="container">
<div class="posts">Post 1</div>
<div class="posts">Post 2</div>
<div class="posts">Post 3</div>
<div class="posts">Post 4</div>
<div class="posts">Post 5</div>
<div class="posts">Post 6</div>
<div class="posts">Post 7</div>
<div class="posts">Post 8</div>
<div class="posts">Post 9</div>
<div class="posts">Post 10</div>
<div class="posts">Post 11</div>
<div class="posts">Post 12</div>
<div class="posts">Post 13</div>
<div class="posts">Post 14</div>
<div class="posts">Post 15</div>
</div>
</body>
CSS:
.posts { float:left; background:#000; color:#fff; padding:0.2em; text-align:center; }
.container { width:50em; max-width:100%; }
JavaScript
Will change however. Update any of the properties in the options variable to change layout.
var options = {
width: {
min: 10,
max: 60,
unit: '%'
},
height: {
min: 10,
max: 30,
unit: '%'
},
margin: {
min: 5,
max: 10,
unit: 'px'
}
}
function getRandomInt (min, max, unit) {
return Math.floor(Math.random() * (max - min + 1)) + min + unit;
}
function randomize() {
var posts = document.getElementsByClassName("posts");
for (var p = 0; p < posts.length; p++) {
posts[p].style.margin = getRandomInt(options.margin.min,options.margin.max, options.margin.unit) + " " + getRandomInt(options.margin.min,options.margin.max, options.margin.unit);
posts[p].style.width = getRandomInt(options.width.min,options.width.max, options.width.unit);
posts[p].style.height = getRandomInt(options.height.min,options.height.max, options.height.unit);
}
}
I've created a fiddle: http://jsfiddle.net/qsUw7/
I'm trying to make a simple hard coded paging system via html and javascript.
I have given each element an id PM-1, PM-2, PM-3, etc and each page will list 10 of these items.
(I know this is a very inconvenient paging system but it's just for experimental purposes.)
So. my code html is as listed below -
<div id="PM-22">item 1</div>
<div id="PM-21">item 2</div>
<div id="PM-20">item 3</div>
<div id="PM-19">item 4</div>
<div id="PM-18">item 5</div>
<div id="PM-17">item 6</div>
<div id="PM-16">item 7</div>
<div id="PM-15">item 8</div>
<div id="PM-14">item 9</div>
<div id="PM-13">item 10</div>
<div id="PM-12">item 11</div>
<div id="PM-11">item 12</div>
<div id="PM-10">item 13</div>
<div id="PM-9">item 14</div>
<div id="PM-8">item 15</div>
<div id="PM-7">item 16</div>
<div id="PM-6">item 17</div>
<div id="PM-5">item 18</div>
<div id="PM-4">item 19</div>
<div id="PM-3">item 20</div>
<div id="PM-2">item 21</div>
<div id="PM-1">item 22</div>
<span style="text-align:right;"><p>Page 1 2 3</p></span>
And my javascript function as as follows -
<script type="text/javascript">
function PMPaging(num,pg) {
pg *= 10;
var upperlim = num - pg - 10;
var lowerlim = upperlim - 10;
if(lowerlim < 0) { lowerlim =0;}
for(num; num > 0; num--) {
document.getElementById('PM-'+num).style.display = 'none';
while (num <= upperlim && num > lowerlim) {
document.getElementById('PM-'+num).style.display = 'block';
num--;
}
}
}
</script>
Assume first 10 items are showing only on page load and the rest are hidden - Now whenever I run this code, it does show the first 10 items only, but when i click page 2 or 3 nothing happens, and if I click page 1 it shows the last 2 items? wtf? lol, first page is id number "22-13" and second page is "12-2", third page should be "2-1"..Thanks!
Is there a reason you aren't using the JQuery Pagination Plugin? Have a look at the demonstration.
If you need to be able to link to a specific page, have a look at this answer.
I get your point. You can use this modified script for the same purpose. I hope it helps. (You don't have to change your html part.
<script type="text/javascript">
function PMPaging(num,pg) {
pg *= 10;
var upperlim = pg+1;
var lowerlim = upperlim - 10;
if(lowerlim < 0) { lowerlim =1;}
for(i=1; i <= num; i++) {
if(i<=upperlim && i>=lowerlim){
document.getElementById('PM-'+i).style.display = 'block';
}else{
document.getElementById('PM-'+i).style.display = 'none';
}
}
}
</script>
surround your items with this div:
<div class="itms">
<div id="PM-22">item 1</div>
<div id="PM-21">item 2</div>
<div id="PM-20">item 3</div>
<div id="PM-19">item 4</div>
<div id="PM-18">item 5</div>
<div id="PM-17">item 6</div>
<div id="PM-16">item 7</div>
<div id="PM-15">item 8</div>
<div id="PM-14">item 9</div>
<div id="PM-13">item 10</div>
<div id="PM-12">item 11</div>
<div id="PM-11">item 12</div>
<div id="PM-10">item 13</div>
<div id="PM-9">item 14</div>
<div id="PM-8">item 15</div>
<div id="PM-7">item 16</div>
<div id="PM-6">item 17</div>
<div id="PM-5">item 18</div>
<div id="PM-4">item 19</div>
<div id="PM-3">item 20</div>
<div id="PM-2">item 21</div>
<div id="PM-1">item 22</div>
</div>
<span style="text-align:left;"><p>Page 1 2 3</p></span>
then use this code for JS:
function Paginate(itemsPerPage) {
var items = document.querySelectorAll(".itms div"),
iL = items.length || 0;
this.turnPage = function(pageNum) {
var startItem = (pageNum*itemsPerPage) - itemsPerPage;
for (var i = 0; i < iL; i++) {
items[i].style.display = (startItem <= i && i < (startItem + itemsPerPage)) ? "block" : "none";
}
}
}
var P = new Paginate(10);//10 items per page
to turn pages, use:
P.turnPage(2); //2 for the page Number