We Keep Coding

pagination div pages with jquery

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

Continuing to Show/Hide a div based off user selection throughout time on website

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)?

How to make a div clickable then opens up a pannel or div using ajax on that same area

i want make a div clickable in such away that it open a new i.e pannel or div with ajax ( without refreshing page ) for example when you click a message on your various messenger on you phone it opens up a conversation page or div or pannel or section

Here is a working example: https://jsfiddle.net/Twisty/e7bp5ty7/
HTML
<div class="tabbed">
<input name="tabbed" id="tabbed1" type="radio" checked>
<section>
<h1> <label for="tabbed1" data-rel="message-0">Message 1</label> </h1>
<div id="message-0" class="message-content">
I want this specific div to be clickable... for example when I click the message it opens the message in full without refreshing the page
</div>
</section>
<input name="tabbed" id="tabbed2" type="radio">
<section>
<h1> <label for="tabbed2" data-rel="message-1">Message 2</label> </h1>
<div id="message-1" class="message-content">
Another Test message.
</div>
</section>
</div>
CSS
.message-content {
display: none;
margin: 7px;
}
JQUERY
$(document).ready(function() {
$(".tabbed label").click(function() {
var mID = $(this).attr("data-rel");
$("#" + mID).toggle("slow");
});
});
By adjusting the HTML a bit, we can add a few classes and attributes to help us in the long run. We hide the message content using CSS and then when the label is clicked, we bind an event to it using JQuery. Using .toggle() we can Hide/Show it each time it's clicked. The slow just helps animate it, but can be fast or omitted all together.

Use jQuery bind: $("#your_div_id").bind("change keyup", function() {/* do something interesting here */} );

load div from remote html page and append it in current page [duplicate]

This question already has answers here:
Jquery load function that will append onto HTML already present
(3 answers)
Closed 8 years ago.
i need to load a div from a remote html page to the current page based on user selected image.
the process is when the user clicks any image in the sidebar in the current page, say, load_page.html it will load the required div from snippets.html and append it to the container div
following is my html code for container div in load_page.html :-
<div id="container">
<div class="section">
<h2>example heading</h2>
<p>this is an example paragraph.</p>
</div>
</div>
following is the code of the single image (which will be clicked by the users to load the required div):
<div class="load_snippet" data-snippet="1">
<img src="image.png" alt="image"/>
</div>
when the user clicks on the above image/div the data-snippet value is sent as request to load the div with same id in the snippets page
following is the code in the snippets page:
<div class="section" id="1">
<p> this is a snippet. i will be loaded when the user requests me </p>
</div>
following is the jquery code which should load the div:
$(function(){
$('.load_snippet').on('click', function(){
var snippet = $(this).data('snippet');
$('#container').load('assets/snippets.html #'+snippet);
});
});
it is not working perfectly it clears all the contents in the container div.i just want it to be appended in the container div.
and in my snippets page there is only html divs.
please help

Well - if you want append new content just create a div where you can place your content then:
$(function(){
$('.load_snippet').on('click', function(){
var snippet = $(this).data('snippet');
$('#container').append($('<div>').load('assets/snippets.html #'+snippet));
});
});

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.