I have items that are created from the backend, I do not have an exact value, the pagination of the items have to be created starting quantity of item.
If have 16 itens the paginations is: 1 - 2 - 3 - 4
The other problem is the scroll, need to go up or down depending on which page number you are.
jsfiddle
$('.pagination .page1').on('click', function(e){
event.preventDefault();
$('.container').animate({
scrollTop: '-=185'
});
});
$('.pagination .page2').on('click', function(e){
event.preventDefault();
$('.container').animate({
scrollTop: '+=185'
});
});
I create a more general pager:
$('.pagination li').on('click', function (e) {
event.preventDefault();
var container = $(this).parent().prev();
var pagerNum = parseInt($(this).text()) > 1 ? parseInt($(this).text()) : 0;
var scrollTo = $('.item').eq((pagerNum * pagerNum));
$(this).parent().prev().animate({
scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
});
});
.container {
background: red;
width: 300px;
height: 185px;
overflow: hidden;
}
.item {
width: 100%;
background: blue;
height: 40px;
margin: 5px 0;
}
ul {
padding: 0;
margin: 0;
width: 300px;
text-align: center;
}
ul li {
display: inline-block;
list-style-type: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
<div class="item">item6</div>
<div class="item">item7</div>
<div class="item">item8</div>
<div class="item">item9</div>
<div class="item">item10</div>
<div class="item">item11</div>
<div class="item">item12</div>
</div>
<ul class="pagination">
<li>1
</li>
<li>2
</li>
<li>3
</li>
</ul>
Related
Hi I have a question regarding the issue as title.
There is Page 1 with jQuery controlling to show the div, section 1 and section 2, as below.
$('.section2,.click1').fadeOut(0);
$('.click2').on('click', function() {
$(this).fadeOut(0);
$('.section1').fadeOut();
$('.section2, .click1').fadeIn();
});
$('.click1').on('click', function() {
$(this).fadeOut(0);
$('.section2').fadeOut();
$('.section1, .click2').fadeIn();
});
a {
display:block;
}
.section-wrapper {
position: relative;
width:400px;
height: 140px;
}
.section-box {
width: 100%;
height: 100%;
}
.section1 {
background: red;
}
.section2 {
position: absolute;
top: 0;
left: 0;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="click2">Click to section2.</a>
<a class="click1">Click to section1.</a>
<div class="section-wrapper">
<div class="section-box section1">
I am section 1, default section.
</div>
<div class="section-box section2" id="Section2">
I am section 2.
</div>
</div>
However, when I am at Page 2, there's a button need to link me to the section 2.
Go to Page 1 Section 2
How can I call the jquery function to show the section 2 and hide the section 1?
This is more generic
$(function() {
$('.click').on('click', function() {
let sectionNumber = $(this).data("section");
$(".click").show();
$(this).fadeOut(0);
$('.section-box').not(".section"+sectionNumber).fadeOut();
$('.section'+sectionNumber).fadeIn()
});
let hash = "#section2" // change to location.hash when happy
let section = hash ? hash.substring(1).replace("scrolldown&","") : "section1";
if (hash) {
let sectionNumber = hash.replace(/\D+/,"");
$("[data-section="+sectionNumber+"]").click()
}
});
a {
display: block;
}
.section-wrapper {
position: relative;
width: 400px;
height: 140px;
}
.section-box {
width: 100%;
height: 100%;
}
.section1 {
background: red;
}
.section2 {
position: absolute;
top: 0;
left: 0;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="click" data-section="2">Click to section 2.</a>
<a class="click" data-section="1">Click to section 1.</a>
<div class="section-wrapper">
<div class="section-box section1">
I am section 1, default section.
</div>
<div class="section-box section2" id="Section2">
I am section 2.
</div>
</div>
You could check for hash tag in page url and show/hide the element.
Edited
$(document).ready(function(){
if(window.location.hash) {
var hashVal = window.location.hash.substring(1);
if(hashVal == "Section2"){
var divId = "#"+hashVal; //id of the section 2 element
$('.section1').fadeOut();
$('.section2, .click1').fadeIn();
var pos = $(divId).offset().top; //top position relative to the document
$('body, html').animate({scrollTop: pos});
}
} else {
// No hash value
}
});
I'm trying to simulate scroll using jquery and I technically can, It just feels really rough and awkward.
JS:
$(document).ready(function(){
$(this).bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta / 120 > 0) {
movePage();
}
});
var page1top = 0;
function movePage() {
page1top = page1top - 1;
// page1 is the page that i want to move up when people scroll down.
$('#page1').css('top': page1top + '%');
}
});
HTML:
<div id='container'>
<div id='page1'></div>
</div>
CSS:
#container {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
z-index: -100;
}
#page1 {
width: 100%;
height: 500%;
z-index: 0;
}
I'm just wondering how I would make this smooth. No plugins please, thanks.
You're looking for jquery animate. Check fiddle for demonstration.
$('.to-target').click(function(){
$('html, body').animate({
scrollTop: $("#target").offset().top
});
});
.box {
width: 100vw;
height: 100vh;
}
.long {
background-color: aqua;
}
.short {
background-color: beige;
height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxes">
<div class="long box">
<button class="to-target">Go to Target</button>
</div>
<div id="target" class="short box">
</div>
</div>
Replace .css() with .animate() and scroll to the selector you want smoothly:
$target = $('#someEl');
$('html, body').animate({
scrollTop: $target.offset().top
}, 200);
i am new learner of jquery and javaScript.
i want to create a slider with a big image section and a section of thumbs.
slider should slide automatically i have coded so far is working on click or hover but i dont know how to set it on auto please help me how to modify my code. code and slider screen shoot is given below.
slider image
$("document").ready(function()
{
$("#thumbs a").mouseenter(function()
{
var smallimgpath = $(this).attr("href");
$("#bigimage img").fadeOut(function()
{
$("#bigimage img").attr("src",smallimgpath);
$("#bigimage img").fadeIn();
});
return false;
});
});
</script>
#imagereplacement{
border: 1px solid red;
width:98%;
height:400px;
margin:auto;
padding-top:8px;
padding-left:10px;
}
#imagereplacement p{
text-align:inline;
}
#bigimage{
/* border: 1px solid green; */
margin:auto;
text-align:center;
float: left;
}
#thumbs{
/*border: 1px solid yellow;*/
margin: 110px 10px;
text-align:center;
width:29%;
float: right;
}
#thumbs img{
height:100px;
width:100px;
}
//This is where all the JQuery code will go
</head>
<body>
<div id="imagereplacement">
<p id="bigimage">
<img src="images/slider1.jpg">
</p>
<p id="thumbs">
<img src="images/slider1.jpg">
<img src="images/slider2.jpg">
<img src="images/slider3.jpg">
</p>
try with this example, please let me know in case of any more question from you :
$("document").ready(function(){
var pages = $('#container li'),
current = 0;
var currentPage, nextPage;
var timeoutID;
var buttonClicked = 0;
var handler1 = function() {
buttonClicked = 1;
$('#container .button').unbind('click');
currentPage = pages.eq(current);
if ($(this).hasClass('prevButton')) {
if (current <= 0)
current = pages.length - 1;
else
current = current - 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", -604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {
currentPage.hide();
});
currentPage.animate({
marginLeft: 604
}, 800, function() {
$('#container .button').bind('click', handler1);
});
} else {
if (current >= pages.length - 1)
current = 0;
else
current = current + 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", 604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {});
currentPage.animate({
marginLeft: -604
}, 800, function() {
currentPage.hide();
$('#container .button').bind('click', handler1);
});
}
}
var handler2 = function() {
if (buttonClicked == 0) {
$('#container .button').unbind('click');
currentPage = pages.eq(current);
if (current >= pages.length - 1)
current = 0;
else
current = current + 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", 604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {});
currentPage.animate({
marginLeft: -604
}, 800, function() {
currentPage.hide();
$('#container .button').bind('click', handler1);
});
timeoutID = setTimeout(function() {
handler2();
}, 4000);
}
}
$('#container .button').click(function() {
clearTimeout(timeoutID);
handler1();
});
timeoutID = setTimeout(function() {
handler2();
}, 4000);
});
* {
margin: 0;
padding: 0;
}
#container {
width: 604px;
height: 453px;
position: relative;
}
#container .prevButton {
height: 72px;
width: 68px;
position: absolute;
background: url('http://vietlandsoft.com/images/buttons.png') no-repeat;
top: 50%;
margin-top: -36px;
cursor: pointer;
z-index: 2000;
background-position: left top;
left: 0
}
#container .prevButton:hover {
background-position: left bottom;
left: 0;
}
#container .nextButton {
height: 72px;
width: 68px;
position: absolute;
background: url('http://vietlandsoft.com/images/buttons.png') no-repeat;
top: 50%;
margin-top: -36px;
cursor: pointer;
z-index: 2000;
background-position: right top;
right: 0
}
#container .nextButton:hover {
background-position: right bottom;
right: 0;
}
#container ul {
width: 604px;
height: 453px;
list-style: none outside none;
position: relative;
overflow: hidden;
}
#container li:first-child {
display: list-item;
position: absolute;
}
#container li {
position: absolute;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<h1>HTML Slideshow AutoPlay (Slide Left/Slide Right)</h1>
<br />
<br />
<div id="container">
<ul>
<li><img src="http://vietlandsoft.com/images/picture1.jpg" width="604" height="453" /></li>
<li><img src="http://vietlandsoft.com/images/picture2.jpg" width="604" height="453" /></li>
<li><img src="http://vietlandsoft.com/images/picture3.jpg" width="604" height="453" /></li>
</ul>
<span class="button prevButton"></span>
<span class="button nextButton"></span>
</div>
</center>
Here an example i've created that create an auto slider CodePen Demo and JSFiddle Demo
I've used an object literal pattern to create slide variable just to avoid creating many global function and variable. Inside document.ready i've initialised my slider just by calling slide.init({....}) this way it makes it easy to reuse and work like plugin.
$.extend(slide.config,option)
this code in simple words override you're default configuration defined in config key
as i mentioned in my above comment make a function slider() and place seTimeout(slide,1000) at bottom of your function before closing
Here in this code its done in animate key of slide object it is passed with two parameter cnt and all image array, If cnt is greater then image array length then cnt is set to 0 i.e if at first when cnt keeps on increment i fadeout all image so when i make it 0 the next time the fadeToggle acts as switch
if On then Off
if Off the On
and calling function slider after a delay makes it a recursive call its just one way for continuously looping there are many other ways i guess for looping continuous you can try
well i haven't check if all images Loaded or not which is most important in slider well that you could try on your own.
var slide = {
'config': {
'container': $('#slideX'),
'delay': 3000,
'fade': 'fast',
'easing': 'linear'
},
init: function(option) {
$.extend(slide.config, option);
var imag = slide.getImages();
slide.animate(0, imag);
},
animate: function(cnt, imag) {
if (cnt >= imag.length) {
cnt = 0;
}
imag.eq(cnt).fadeToggle(slide.config.fade, slide.config.easing);
setTimeout(function() {
slide.animate(++cnt, imag);
}, slide.config.delay);
},
getImages: function() {
return slide.config.container.find('img');
}
};
$(document).ready(function() {
slide.init({
'contianer': $('#slideX'),
'delay': 3000,
'fade': 'fast',
'easing': 'swing'
});
})
body {
margin: 0;
padding: 0;
}
.contianer {
width: 100%;
height: 100%;
position: relative;
}
.container > div,
.container > div >img {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="slideX">
<div id="img1">
<img src="http://imgs.abduzeedo.com/files/articles/magical-animal-photography-gregory-colbert/5.jpg" />
</div>
<div id="img2">
<img src="http://cdn-5.webdesignmash.com/trial/wp-content/uploads/2010/10/great-dog-photography-016.jpg" />
</div>
<div id="img3">
<img src="http://onlybackground.com/wp-content/uploads/2014/01/marble-beautiful-photography-1920x1200.jpg" />
</div>
</div>
HTML:
<div class="inline-wrapper">
<div class="inline-blocks" id="f">123</div>
<div class="inline-blocks" id="s">123</div>
<div class="inline-blocks" id="t">123</div>
<div class="inline-blocks" id="fo">123</div>
</div>
CSS:
html, body {
width: 100%;
height: 100%;
/* overflow: hidden;*/
}
.inline-wrapper{
width: 400%;
height: 100%;
font-size: 0;
position: relative;
}
.inline-blocks{
display: inline-block;
width: 25%;
height: 100%;
vertical-align: top;
position: relative;
}
>.inline-blocks:nth-child(1){
background-color: #000;
}
.inline-blocks:nth-child(2){
background-color: blue;
}
.inline-blocks:nth-child(3){
background-color: red;
}
.inline-blocks:nth-child(4){
background-color: green;
}
How can I slide them without ID?
In fact this is the work of the slider. But I can not understand the logic.
Want to understand how flipping without ID.
We must check the blocks and give them Ńurrent class.
Auto Slide
HTML:
<div class="inline-wrapper">
<div class="inline-blocks" id="f">123</div>
<div class="inline-blocks" id="s">123</div>
<div class="inline-blocks" id="t">123</div>
<div class="inline-blocks" id="fo">123</div>
</div>
jQuery:
(function () {
var numDivs = $('.inline-wrapper').children().length; //Count children ELements
var counter = 1;
function slide(time, counter) {
var $currentDiv = $('.inline-wrapper .inline-blocks:nth-child(' + counter + ')'); //get next element
var position = $currentDiv.position(); //get position of next element
if (numDivs > 1) {
$('html,body').animate({
scrollLeft: position.left
}, time / 2); //Animate to next element
}
};
$('.inline-blocks').on('click', function () {
counter = counter + 1;
slide(2000, counter);
});
})();
DEMO
I'm adapting this vertical slider for an pessoal project, but when i click into up or down arrow this works but without any animation. I wanted it to happen a up or down glide smooth depending on the clicked button. This the adapted JS:
// JavaScript Document
$(function() {
$("section#canais").hover(function() {
$("section#buttonsubir").fadeIn();
$("section#buttondescer").fadeIn();
}, function(){
$("section#buttonsubir").fadeOut();
$("section#buttondescer").fadeOut();
});
$(".cnext").click(function(e) {
e.preventDefault();
$("section#canais ul").css({'height' : ''}).animate({top:275}, function(){
$("#canais ul li").last().after($("#canais ul li").first());
$(this).css({'down':'0', 'height':'auto'});
});
});
$(".cprev").click(function(e) {
e.preventDefault();
$("#canais ul li").first().before($("#canais ul li").last().css({'top':-275}) );
$("section#canais ul").css({'height':''}).animate({top:275}, function(){
$("#canais ul li").first().css({'margin-left':'0'});
$(this).css({'left':'0', 'height':'auto'});
});
});
});
Here's my JsFiddle. Thanks.
You need to change a few things - first you need the ul to be positioned absolutely:
#left-content #canais-links {
position:absolute;
}
Then you need to fix your jQuery (the animation should be 36px as that is the height of your lis: in your css)
$(".cnext").click(function (e) {
e.preventDefault();
$("section#canais ul").css({
'height': ''
}).animate({
top: 36 + "px"
}, function () {
$("#canais ul li").last().insertBefore($("#canais ul li").first());
$(this).css({
'top': 0
});
});
});
$(".cprev").click(function (e) {
e.preventDefault();
$("section#canais ul").css({
'height': ''
}).animate({
top: -36 + "px"
}, function () {
$("#canais ul li").first().insertAfter($("#canais ul li").last());
$(this).css({
'top': 0
});
});
});
Example
You may want to wrap your ul in a div with a set height and overflow hidden so you can't see the divs once it goes up / down
Updated Fiddle
Another option...which would allow you to display all five items at once would be to use clone() and then remove the hidden element after the animation was completed. An example is here: http://jsfiddle.net/jme11/5Y54k/
I like the approach from Pete a lot but some benefits of this approach is that it uses css for showing and hiding the up and down arrows, reducing your jQuery code and because it's not dependent on positioning, it winds up making your markup and css smaller as well.
HTML:
<div id="left-content">
<div id="img-canais"></div>
UP
<ul id="canais-links">
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
<li>
Page 4
</li>
<li>
Page 5
</li>
</ul>
DOWN
</div>
CSS:
#left-content {
width: 203px;
}
.direction {
opacity: 0;
transition:opacity .25s linear;
text-align: center;
display: block;
width: 203px;
}
#left-content:hover .direction {
opacity: 1;
}
#canais-links {
list-style: none;
margin: 0 0 25px 0;
padding: 0;
height: 300px;
display:block;
overflow:hidden;
}
#canais-links li {
height: 36px;
width: 100%;
background-color: #253B6B;
display: block;
margin-top: 25px;
}
#canais-links li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
font-weight: bold;
color: #FFF;
text-decoration: none;
display: block;
height: 36px;
text-align: center;
}
jQuery:
$('.cprev').click(function () {
$('#canais-links li:first-child').clone().insertAfter('#canais-links li:last-child');
$('li:first-child').slideUp('slow', function(){
$('li:first-child').remove();
});
});
$('.cnext').click(function () {
var copieditem = $('#canais-links li:last-child').clone()
copieditem.insertBefore('#canais-links li:first-child').hide();
$('li:first-child').slideDown('slow', function(){
$('li:last-child').remove();
});
});