I am looking for jquery animation similar to this website http://cuberto.com/.
So far i have accomplished this link http://codepen.io/mirmibrahim/pen/MJoGBY through pagePiling.js. Can anyone assist me complete it exactly the way on curberto. I dont know how to load half of the page with image and half with text and open the next section to be from the square animating on first slide.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pagePiling.js plugin - Horizontal scroll</title>
<meta name="author" content="Alvaro Trigo Lopez" />
<meta name="description" content="pagePiling.js plugin by Alvaro Trigo." />
<meta name="keywords" content="pile,piling,piling.js,stack,pages,scrolling,stacking,touch,fullpile,scroll,plugin,jquery" />
<meta name="Resource-type" content="Document" />
<link rel="stylesheet" type="text/css" href="../jquery.pagepiling.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!--script src="../jquery-1.9.1.js"></script-->
<script type="text/javascript" src="../jquery.pagepiling.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
* Plugin intialization
*/
$('#pagepiling').pagepiling({
direction: 'horizontal',
menu: '#menu',
scrollingSpeed: 2000,
anchors: ['page1', 'page2', 'page3', 'page4'],
sectionsColor: ['black', '#1C252C', '#F27B1D', '#39C'],
navigation: {
'position': 'right',
'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Pgae 4']
},
afterRender: function() {
$('#pp-nav').addClass('custom');
console.log("After Render ");
},
afterLoad: function(anchorLink, index) {
// $.fn.pagepiling.setAllowScrolling(false);
console.log("After Load " + index);
if (index == 1) {
console.log("index " + index);
} else if (index == 2) {
}
if (index > 1) {
$('#pp-nav').removeClass('custom');
} else {
$('#pp-nav').addClass('custom');
}
},
onLeave: function(index, nextIndex, direction) {
console.log("After Load " + index);
if (index == 1) {
/* $( "#block" ).animate({
width: "100%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "12em",
borderWidth: "20px"
}, 4000 , function() {
// Animation complete.
//alert("s");
});
*/
$("#block").animate({
width: "58%"
}, 1000, function() {
console.log("animation finished");
$.fn.pagepiling.setScrollingSpeed(500);
});
} else if (index == 2 && nextIndex == 1) {
$("#block").animate({
width: "0%"
}, 3000, function() {
console.log("animation finished");
$.fn.pagepiling.setScrollingSpeed(2000);
});
}
}
});
});
</script>
<style>
#section1 img {
margin: 20px 0;
opacity: 0.7;
}
/* colors
* --------------------------------------- */
#colors2,
#colors3 {
position: absolute;
height: 163px;
width: 362px;
z-index: 1;
background-repeat: no-repeat;
left: 0;
margin: 0 auto;
right: 0;
}
#colors2 {
background-image: url(imgs/colors2.gif);
top: 0;
}
#colors3 {
background-image: url(imgs/colors3.gif);
bottom: 0;
}
/* Overwriting fullPage.js tooltip color
* --------------------------------------- */
#pp-nav.custom .pp-tooltip {
color: #AAA;
}
</style>
</head>
<body>
<ul id="menu">
<li data-menuanchor="page1" class="active">Page 1</li>
<li data-menuanchor="page2">Page 2</li>
<li data-menuanchor="page3">Page 3</li>
</ul>
<div id="pagepiling">
<div class="section" id="section1">
<!--img src="imgs/pagePiling-plugin.gif" alt="pagePiling" /-->
<div class="intro">
<div>
<div style="background:#F6303F;border-left: thick solid #F6303F; height:150px; width:8px; margin-left:42%;" id="block">
</div>
<h1 style="color: white;">DIGITAL</h1>
<p style="color: white;">CREATIVE AGENCY</p>
</div>
</div>
</div>
<div class="section">
<div class="intro">
<h1>Simple to use</h1>
<p>Just use the option direction: 'horizontal' to have it working!</p>
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<h1>Isn't it great?</h1>
<p>Just as you expected!</p>
<div id="colors2"></div>
<div id="colors3"></div>
</div>
</div>
</div>
</body>
</html>
I think pagepiling.js might be the wrong direction because it just animates on one page, rather than animating between two pages.
The way I've handled stuff like this in the past is with a PJAX plugin like Barba.JS, which allows you to add animated transitions between site navigation events. Barba hijacks the page change by changing the URL manually, grabbing new content for the new page, and performing a transition (in which you can animate elements like Cuberto does!) between the old and new pages.
Let me know if this is helpful, or if I missed the point, and I'll try to update my answer accordingly!
EDIT: Just realized this is a seven-month old question, but hopefully this is helpful to someone nonetheless!
Related
I'm trying to use Velocity Js for the first time and I'm having trouble getting it to work. Below is a nav menu that I'm trying to create. Everything in the code works fine except for the Velocity Js bits. The animation for the menu even works, but the menu doesn't open. I included both links that the Velocity JS site told me to include, as well as a page link to velocity.min. js. I tried using one or the other, or both, and nothing worked. What am I missing or doing wrong here?
HTML:
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Testing Velocity JS</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="//cdn.jsdelivr.net/npm/velocity-animate#2.0/velocity.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/velocity-animate#2.0/velocity.ui.min.js"></script>
<scrpt src="velocity.min.js"></scrpt>
<script src="navmenutest.js" async></script>
</head>
<body>
<script>document.body.classList.add('fade');</script>
<div id="container">
<div class="overlay-navigation">
<nav role="navigation">
<ul>
<li>Gallery</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
<li>Custom PC's</li>
</ul>
</nav>
</div>
<section class="home">
<div class="open-overlay">
<span class="bar-top"></span>
<span class="bar-middle"></span>
<span class="bar-bottom"></span>
</div>
</section>
JS:
$('.open-overlay').click(function() {
$('.open-overlay').css('pointer-events', 'none');
var overlay_navigation = $('.overlay-navigation'),
top_bar = $('.bar-top'),
middle_bar = $('.bar-middle'),
bottom_bar = $('.bar-bottom');
overlay_navigation.toggleClass('overlay-active');
if (overlay_navigation.hasClass('overlay-active')) {
top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar');
middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar');
bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar');
overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down')
overlay_navigation.velocity('transition.slideLeftIn', {
duration: 300,
delay: 0,
begin: function() {
$('nav ul li').velocity('transition.perspectiveLeftIn', {
stagger: 150,
delay: 0,
complete: function() {
$('nav ul li a').velocity({
opacity: [1, 0],
}, {
delay: 10,
duration: 140
});
$('.open-overlay').css('pointer-events', 'auto');
}
})
}
})
} else {
$('.open-overlay').css('pointer-events', 'none');
top_bar.removeClass('animate-top-bar').addClass('animate-out-top-bar');
middle_bar.removeClass('animate-middle-bar').addClass('animate-out-middle-bar');
bottom_bar.removeClass('animate-bottom-bar').addClass('animate-out-bottom-bar');
overlay_navigation.removeClass('overlay-slide-down').addClass('overlay-slide-up')
$('nav ul li').velocity('transition.perspectiveRightOut', {
stagger: 150,
delay: 0,
complete: function() {
overlay_navigation.velocity('transition.fadeOut', {
delay: 0,
duration: 300,
complete: function() {
$('nav ul li a').velocity({
opacity: [0, 1],
}, {
delay: 0,
duration: 50
});
$('.open-overlay').css('pointer-events', 'auto');
}
});
}
})
}
})
You misspell the scrpt keyword, It should be script.
<script src="velocity.min.js"></script>
I have some problems with a school assignment. Anyway, when I use startInterval, I assign and intervalID so I can later clear the interval. Unfortunately, it does not clear when you press the "stop this madness" button. Anyone know why?
(if you are wondering about all the background color stuff I used a jquery plugin which I didn't add to this snippet)
var intervalID;
$('.gal').click(function() {
var photoID = jQuery(this).attr("id");
alert(alerts[photoID]);
});
var alerts = {
//row one
"1:1": "This animal is a penguin!",
"1:2": "This animal is a lion!",
"1:3": "This animal is a cat!",
"1:4": "This animal is a giraffe!",
//row two
"2:1": "Cool looking ancient building!",
"2:2": "Cool looking modern building!",
"2:3": "Cool building from dubai!",
"2:4": "Cool building by the water!"
};
$("#stop").click(function() {
clearInterval(intervalID);
});
$(window).load(function() {
animate();
});
function animate() {
intervalID = setInterval(function() {
var width = 25;
$(".gal").animate({
'marginLeft': '-=25px'
});
$(".gal").animate({
'marginLeft': '+=25px'
});
$("#title").animate({
'marginLeft': '+=' + width + 'px'
}, "slow");
$("#title").animate({
'marginLeft': '-=' + width + 'px'
}, "slow");
$("body").animate({
'backgroundColor': 'lightyellow'
}, 1000);
$("body").animate({
'backgroundColor': 'yellow'
}, 1000);
$("body").animate({
'backgroundColor': 'orange'
}, 1000);
$("body").animate({
'backgroundColor': 'red'
}, 1000);
$("body").animate({
'backgroundColor': 'lightpink'
}, 1000);
$("body").animate({
'backgroundColor': 'pink'
}, 1000);
$("body").animate({
'backgroundColor': 'purple'
}, 1000);
$("body").animate({
'backgroundColor': 'blue'
}, 1000);
$("body").animate({
'backgroundColor': 'lightblue'
}, 1000);
$("body").animate({
'backgroundColor': 'cyan'
}, 1000);
$("body").animate({
'backgroundColor': 'green'
}, 1000);
$("body").animate({
'backgroundColor': 'lightgreen'
}, 1000);
}, 0.1);
}
body {
background-color: lightyellow;
}
#title {
display: block;
/*position:absolute;*/
}
.gal {
display: block;
margin: 20px;
width: 250px;
height: 200px;
border: 5px solid black;
}
#stop {
position: fixed;
bottom: 0;
right: 0;
border: 3px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS Functions</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container-fluid">
<button id="stop" class="btn-warning">Stop This Madness!</button>
<h1 id="title" style="margin-left: 20px;" class="text-primary">Image Gallery:</h1>
<div class="row">
<div class="col-md-3">
<img id="1:1" src="http://ngm.nationalgeographic.com/2012/11/emperor-penguins/img/02-airborne-penguin-exits-water_1600.jpg" class="gal">
</div>
<div class="col-md-3">
<img id="1:2" src="http://efdreams.com/data_images/dreams/lion/lion-03.jpg" class="gal">
</div>
<div class="col-md-3">
<img id="1:3" src="https://s3.graphiq.com/sites/default/files/stories/t2/tiny_cat_12573_8950.jpg" class="gal" />
</div>
<div class="col-md-3">
<img id="1:4" src="https://upload.wikimedia.org/wikipedia/commons/0/02/Giraffe_Ithala_KZN_South_Africa_Luca_Galuzzi_2004.JPG" class="gal">
</div>
</div>
<div class="row">
<div class="col-md-3">
<img id="2:1" src="http://cdn.mos.cms.futurecdn.net/78b7453e70727aae7eed989ff2cee83d.jpg" class="gal" />
</div>
<div class="col-md-3">
<img id="2:2" src="http://thegrumpyoldlimey.com/images/buildings/dome_feature.jpg" class="gal" />
</div>
<div class="col-md-3">
<img id="2:3" src="https://d3dupjkkwlat3o.cloudfront.net/399433011453/2071971/576xN?1410992818" class="gal" />
</div>
<div class="col-md-3">
<img id="2:4" src="http://www.jazzhostels.com/blog/wp-content/uploads/2014/09/hemispheric-photo-valencia-spain-cc.jpg" class="gal">
</div>
</div>
</div>
<script></script>
<script src="script.js"></script>
</body>
</html>
Two general points you need to know:
The delay for setInterval() is specified in milliseconds, and you have specified a delay of 0.1 - which means you've tried to schedule your function to run 10000 times per second. In practice JS doesn't let you go under 5ms: any shorter delay specified will be rounded up, but still that means your function will run approximately 200 times per second.
When you call .animate() multiple times on the same element, as you are doing with .gal, #title, and body, it queues up additional animations that will be run after the current ones finish.
Putting those two points together, and every 5ms your code adds multiple animations to the queue, each of which takes a lot longer than 5ms. So even when you call clearInterval(), you've already got tons of animations still queued up and they will take a long time to complete.
You can stop animations currently underway and clear a given element's animation queue using the .stop() method:
$(".gal").stop(true);
But trying to manage ongoing animations using setInterval() is always going to be a bit clunky, especially where you have multiple animations with different times specified. But fortunately the .animate() method lets you provide a callback function that will run after the animation completes, so you can schedule additional processing from there.
You asked in a comment about whether there's a more efficient way to manage the animations: for all those colour changes I'd suggest using an array, then when the current colour change completes call .animate() again for the next colour in the array.
So maybe something like the following, noting that I've removed some of the code that didn't relate to the animations in order to make this answer a bit shorter, and I've split the animation code into three functions to make it clearer for you what each one is doing:
$("#stop").click(function() {
$(".gal, #title, body").stop(true);
});
$(window).load(function() {
animateGallery();
animateTitle();
animateBody();
});
function animateGallery() {
$(".gal").animate({
'marginLeft': '-=25px'
}, "slow").animate({
'marginLeft': '+=25px'
}, "slow", animateGallery); // note the function set as final argument
// - it will be called when animation finishes
}
function animateTitle() {
var width = 25;
$("#title").animate({
'marginLeft': '+=' + width + 'px'
}, "slow").animate({
'marginLeft': '-=' + width + 'px'
}, "slow", animateTitle); // note the function set as final argument
}
var colors = ['lightyellow', 'yellow', 'orange', 'red', 'lightpink', 'pink', 'purple', 'blue', 'lightblue', 'cyan', 'green', 'lightgreen'];
var currentColor = 0;
function animateBody() {
$("body").animate({
'backgroundColor': colors[currentColor]
}, 1000, animateBody); // note the function set as final argument
currentColor = (currentColor + 1) % colors.length;
}
#title { display: block; }
.gal { display: block; margin: 20px; width: 250px; height: 200px; border: 5px solid black; }
#stop { position: fixed; z-index: 100; bottom: 0; right: 0; border: 3px solid red; }
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS Functions</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
</head>
<body>
<div class="container-fluid">
<button id="stop" class="btn-warning">Stop This Madness!</button>
<h1 id="title" style="margin-left: 20px;" class="text-primary">Image Gallery:</h1>
<div class="row">
<div class="col-md-3">
<img id="2:1" src="http://cdn.mos.cms.futurecdn.net/78b7453e70727aae7eed989ff2cee83d.jpg" class="gal" />
</div>
<div class="col-md-3">
<img id="2:2" src="http://thegrumpyoldlimey.com/images/buildings/dome_feature.jpg" class="gal" />
</div>
<div class="col-md-3">
<img id="2:3" src="https://d3dupjkkwlat3o.cloudfront.net/399433011453/2071971/576xN?1410992818" class="gal" />
</div>
<div class="col-md-3">
<img id="2:4" src="http://www.jazzhostels.com/blog/wp-content/uploads/2014/09/hemispheric-photo-valencia-spain-cc.jpg" class="gal">
</div>
</div>
</div>
</body>
</html>
I have a drag and drop feature for my mobile game. Here it is:
https://jsfiddle.net/elchininet/otw3pw13/4/
Unfortunately, I have no idea what's going wrong inside my actual source code.
I think it might be because of all of the libraries I have? I'm new to app making and JavaScript. Here is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset = "utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="popup" id="myPopup2" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15 ">
Close<img src="http://s1.postimg.org/ljwm4953z/Screen_Shot_2015_12_12_at_10_45_52_PM.png" alt="Photo portrait">
</div>
<div data-role="main" class="ui-content">
<div data-role="header" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li><button onclick="location.reload(true)" class ="ui-btn-b">New Pizzas!</button></li>
<li>How To Play</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
<div id="slices">
</div>
<div id="options">
<div data-index="1">1</div>
<div data-index="2">2</div>
<div data-index="3">3</div>
<div data-index="4">4</div>
<div data-index="5">5</div>
<div data-index="6">6</div>
<div data-index="7">7</div>
<div data-index="8">8</div>
</div>
<div id="area">
drop area
</div>
<p><img src="http://s24.postimg.org/j2ynvi0s1/Plus_Orange1.png;"></p>
</div>
</div>
</body>
</html>
CSS
#options div{
background:#666;
color: #FFF;
display: inline-block !important;
height: 50px;
line-height: 50px;
text-align: center;
vertical-align: top;
width: 50px;
}
#slices img{
display: inline-block;
height: 30px;
}
#area{
background: #CCC;
border: 1px solid #666;
margin-top: 20px;
height: 200px;
width: 200px;
}
JavaScript
$( document ).on( "pagecreate", function() {
$( ".photopopup" ).on({
popupbeforeposition: function() {
var maxHeight = $( window ).height() - 60 + "px";
$( ".photopopup img" ).css( "max-height", maxHeight );
}
});
});
var slices = $("#slices");
var options = $("#options");
var area = $("#area");
var selected;
var result;
//---Array of images
var pizzas = [
{image: "http://s23.postimg.org/6yojml8vb/Pizza_One.png", value: 1},
{image: "http://s13.postimg.org/5d8zxnb2b/pizzatwo.png", value: 2},
{image: "http://s12.postimg.org/xfsxldqyx/pizzathree.png", value: 3},
{image: "http://s14.postimg.org/d6tdq0865/pizzafour.png", value: 4}
];
var total = pizzas.length;
//---Make boxes dragables
options.find("div").draggable();
//---When the boxes are dropped
area.droppable({
drop: function(event, ui){
console.log("yes");
if( Number( ui.draggable.attr("data-index") ) == result ){
alert("correct");
}else{
alert("incorrect");
}
}
});
//---Insert random pizza slices
function insertPizzas(){
selected = [];
result = 0;
//---Generate aleatory pieces
var rand
while(selected.length < 2){
//---Random value
rand = Math.floor( Math.random() * total );
//---Sum result
result += pizzas[rand].value;
selected.push( rand );
}
//---Clear the slices
slices.html("");
//---Add the new slices
selected.forEach(function(number){
var img = $("<img/>");
img.attr("src", pizzas[number].image);
slices.append(img);
});
}
insertPizzas();
By your comments I see that you are testing your project locally. Use a local server to test your project. Do not open the HTML directly in your browser from the filesystem. Try with Xampp or Wampp.
By the other hand, put the jQuery code inside a document ready event.
$(document).on("ready", function(){
//--- Put the jQuery code here
}
Here you have your code (with the document ready event) running from an web server:
Just wondering if it would be possible to scroll a page from top to top indefinitely ?
Not going straightly back to the top with #a but showing the top below the bottom after reaching it, also meaning you can see the bottom above the top by scrolling up. A 3d cylinder page ?
Sadly all I found was about blog style infinite top to bottom scroll.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>infinitescroll</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
body {
background: #000;
margin:0;
text-align: center;
overflow-x:hidden;
}
#frame {
width: 100%;
height: 100%;
}
.strip div {
position: relative;
text-align:center;
height: 200px;
}
.strip #div01 {
background-color:#942192;
}
.strip #div02 {
background-color:#5228cc;
}
.strip #div03 {
background-color:#0433ff;
}
.strip #div04 {
background-color:#009292;
}
.strip #div05 {
background-color:#00f900;
}
.strip #div06 {
background-color:#cafa00;
}
.strip #div07 {
background-color:#fffb00;
}
.strip #div08 {
background-color:#ffc700;
}
.strip #div09 {
background-color:#ff9300;
}
.strip #div10 {
background-color:#ff5100;
}
.strip #div11 {
background-color:#ff2600;
}
.strip #div12 {
background-color:#d82253;
}
</style>
</head>
<body >
<div id="container">
<div class="strip">
<div id="div01"><br/>↓ ↑</div>
<div id="div02"><br/>↓ ↑</div>
<div id="div03"><br/>↓ ↑</div>
<div id="div04"><br/>↓ ↑</div>
<div id="div05"><br/>↓ ↑</div>
<div id="div06"><br/>↓ ↑</div>
<div id="div07"><br/>↓ ↑</div>
<div id="div08"><br/>↓ ↑</div>
<div id="div09"><br/>↓ ↑</div>
<div id="div10"><br/>↓ ↑</div>
<div id="div11"><br/>↓ ↑</div>
<div id="div12"><br/>↓ ↑</div>
</div>
</div>
</div>
<script>
$('document').ready(function() {
$(document).scroll(function(){
if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) {
$(document).scrollTop(0);
}
});
});
</script>
</body>
</html>
I did something like that once, but only for the case of list of items - not an arbitrary html.
Basic idea is a virtual list - you have limited number of items on the screen - so called sliding window. While scrolling additional items get pumped up and out of view items get deleted.
In such case infinite scroll is trivial - when you scroll past last item of record set you start loading items at index 0.
For arbitrary markup / styling I don't think it is even possible in 100%. All that absolute positioned elements, floats, etc....
Can you explain me why only the third "copy link" works only if all panels are closed ?
I want my copy link works when it's in a panel and when a panel is open too.
HERE IS MY PAGE:
http://500milligrammes.com/facticemagazine/final/0/
JSFIDDLE
HERE IS MY CODE:
<!DOCTYPE HTML>
<!--[if IE 8]><html lang="en" class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script>
<style>
.panel1,
.panel2 {
display: none;
border: 1px solid #ccc;
background-color: #eee
}
.flip1,
.flip2 {
border: 1px solid #ccc;
background-color: #eee
}
#check,
#check2 {
visibility: hidden;
width: 12px;
height: 12px;
}
span#copy-callbacks,
span#copy-callbacks2 {
float: none;
cursor: pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("span#copy-callbacks").zclip({
path: "ZeroClipboard.swf",
copy: $('#callback-paragraph').text(),
beforeCopy: function() {
$('#copy-callbacks').css('background', 'none');
},
afterCopy: function() {
$('#copy-callbacks').css('background', 'none');
}
});
document.getElementById("copy-callbacks").onclick = function() {
document.getElementById("check").style.visibility = "visible";
}
});
$(document).ready(function() {
$('span#copy-callbacks').hover(
function() {
$(this).css({
"color": "#e0ccb4"
});
},
function() {
$(this).css({
"color": "#000"
});
}
);
$("span#copy-callbacks2").zclip({
path: "ZeroClipboard.swf",
copy: $('#callback-paragraph2').text(),
beforeCopy: function() {
$('#copy-callbacks2').css('background', 'none');
},
afterCopy: function() {
$('#copy-callbacks2').css('background', 'none');
}
});
document.getElementById("copy-callbacks2").onclick = function() {
document.getElementById("check2").style.visibility = "visible";
}
});
$(document).ready(function() {
$('span#copy-callbacks2').hover(
function() {
$(this).css({
"color": "#e0ccb4"
});
},
function() {
$(this).css({
"color": "#000"
});
}
);
$(".flip1").click(function() {
$(".panel1").slideToggle("fast");
});
$(".flip2").click(function() {
$(".panel2").slideToggle("fast");
});
});
</script>
</head>
<body>
<div class="flip1">Click to slide the first panel down or up</div>
<div class="panel1">
when this panel is open, any copy link works !!!
</div>
<div style="margin-top:150px;" class="flip2">Click to slide the second panel down or up</div>
<div class="panel2">
when a copy link is inside a panel, it doesn't work !!!
<br/>
<br/>
<span id="copy-callbacks">Copy link <img src="check.png" id="check" style="display: inline;"></span>
<span style="font-size:0px;" id="callback-paragraph">essaie sans alert</span>
</div>
<div style="margin-top:150px; ">
This one works perfectly when all panels are closed !!
<br/>
<span id="copy-callbacks2">Copy link <img src="check.png" id="check2" style="display: inline;"></span>
<span style="font-size:0px;" id="callback-paragraph2">essaie sans alert</span>
</div>
<script type="text/javascript" src="jquery.zclip.js"></script>
<script type="text/javascript" src="jquery.cbpFWSlider.min.js"></script>
</body>
</html>
ZClip adds an absolutely positioned flash (swf) object which clings to the bottom and when your panels are closed the zclip object container covers the third link and you can't click on it.
See your updated fiddle, I put a border around zclip and you can see that it's right over the link: http://jsfiddle.net/4x3qctno/2/
When you open panels it pushes third link down, but the zclip container stays in the same place and so your link works then.
To fix this, change z-index of zclip object container in CSS like so:
.zclip{
z-index:-1000!important;
}