I saw a code and i was trying to modify the size of the circles, but i don't know whither i can change it using js or css .Is there any way to change it ?
The full code is from:
https://codepen.io/XTn-25/pen/NWqeBaz
hesr is js code:
/**
* index.js
* - All our useful JS goes here, awesome!
Maruf-Al Bashir Reza
*/
console.log("JavaScript is amazing!");
$(document).ready(function($) {
function animateElements() {
$('.progressbar').each(function() {
var elementPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
var percent = $(this).find('.circle').attr('data-percent');
var percentage = parseInt(percent, 10) / parseInt(100, 10);
var animate = $(this).data('animate');
if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
$(this).data('animate', true);
$(this).find('.circle').circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 14,
fill: {
color: '#1B58B8'
}
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('div').text((stepValue * 100).toFixed(1) + "%");
}).stop();
}
});
}
// Show animated elements
animateElements();
$(window).scroll(animateElements);
});
It seems like it's using this as a dependency. So in order to change the circle size, you need to add size property which defaults to 100:
$(this).find('.circle').circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 14,
fill: {
color: '#1B58B8'
},
size: 300 // <-- here, the size changes the circle radius
})
and in order to stop overlapping the circles, you also need to modify the CSS a little bit by increasing the width of the .progressbar element:
.progressbar {
display: inline-block;
width: 300px;
margin: 25px;
}
So the full example would look like this:
/**
* index.js
* - All our useful JS goes here, awesome!
Maruf-Al Bashir Reza
*/
console.log("JavaScript is amazing!");
$(document).ready(function($) {
function animateElements() {
$('.progressbar').each(function() {
var elementPos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
var percent = $(this).find('.circle').attr('data-percent');
var percentage = parseInt(percent, 10) / parseInt(100, 10);
var animate = $(this).data('animate');
if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
$(this).data('animate', true);
$(this).find('.circle').circleProgress({
startAngle: -Math.PI / 2,
value: percent / 100,
thickness: 14,
fill: {
color: '#1B58B8'
},
size: 300
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('div').text((stepValue * 100).toFixed(1) + "%");
}).stop();
}
});
}
// Show animated elements
animateElements();
$(window).scroll(animateElements);
});
/**
* index.scss
* - Add any styles you want here!
*/
body {
background: #f5f5f5;
}
.progressbar {
display: inline-block;
width: 300px;
margin: 25px;
}
.circle {
width: 100%;
margin: 0 auto;
margin-top: 10px;
display: inline-block;
position: relative;
text-align: center;
}
.circle canvas {
vertical-align: middle;
}
.circle div {
position: absolute;
top: 30px;
left: 0;
width: 100%;
text-align: center;
line-height: 40px;
font-size: 20px;
}
.circle strong i {
font-style: normal;
font-size: 0.6em;
font-weight: normal;
}
.circle span {
display: block;
color: #aaa;
margin-top: 12px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<h1 style="margin:auto;text-align:center;color:skyblue;">Circle Progressbar When Scroll</h1>
<div style="width:100%;height:800px;">↓ Scroll down ↓</div>
<h3>Title (Placeholder)</h3>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="100">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="30.5">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="77">
<div></div>
<p>Testing</p>
</div>
</div>
<div class="progressbar" data-animate="false">
<div class="circle" data-percent="49">
<div></div>
<p>Testing</p>
</div>
</div>
<div style="width:100%;height:500px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
Working on Jquery (Toggle Slider).
On load, the left button should be disabled (currently not working).
After first click, the right button then left button should be enabled.
When we get to the last slide, the right button should be disabled.
(Currently not working)
When the slide goes to first position the slide shouldn't move again
the same for last slide also
Here is my jQuery code for reference.
$(".leftBtn").click(function(e) {
goRight();
});
$(".rightBtn").click(function(e) {
goLeft();
});
function goRight() { // inner stuff slides left
var initalLeftMargin = $(".innerLiner").css('margin-left').replace("px", "") * 1;
var newLeftMargin = (initalLeftMargin - 204); // extra 2 for border
$(".innerLiner").animate({
marginLeft: newLeftMargin
}, 500);
}
function goLeft() { // inner stuff slides right
var initalLeftMargin = $(".innerLiner").css('margin-left').replace("px", "") * 1;
var newLeftMargin = (initalLeftMargin + 204); // extra 2 for border
if (newLeftMargin >= 0){
$(".leftBtn").css("display", "none");
} else {
$(".leftBtn").css("display", "block");
}
$(".innerLiner").animate({
marginLeft: newLeftMargin
}, 500);
}
* {
Box-sizing: Border-box
}
.mycontainer {
white-space: nowrap;
overflow-x: hidden;
width: 204px;
}
.box {
display: inline-block;
border: 2px black solid;
padding: 20px;
width: 200px;
height: 100px;
vertical-align: top;
background-color: pink;
}
.box2 {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="rightBtn" type="button" value="Left">
<div class="mycontainer">
<div class="innerLiner">
<span class="box">
This is box1
</span>
<span class="box">
This is box2
</span>
<span class="box box2">
This is box3
</span>
</div>
</div>
<input class="leftBtn" type="button" value="Right">
You are moving to the correct direction. Here are some tips to fix the code:
Move the button update code to a function to make it easy to update and call.
Show both buttons by default, and hide the correct one depending on new margin.
Call the function with initial margin to disable the correct initial button, before user click anything.
In short,
function updateButtons( newLeftMargin ) {
$(".leftBtn,.rightBtn").show(); // Show both buttons by default
if ( newLeftMargin >= 0 )
$(".rightBtn").hide();
if ( newLeftMargin <= -408 )
$(".leftBtn").hide();
}
updateButtons(0)
Below is a complete snippet. Note that I took the liability to lightly optimise your other code.
function goRight() { // inner stuff slides left
var initalLeftMargin = parseInt( $(".innerLiner").css('margin-left') );
var newLeftMargin = (initalLeftMargin - 204); // extra 2 for border
updateButtons( newLeftMargin );
$(".innerLiner").animate({
marginLeft: newLeftMargin
}, 500);
}
function goLeft() { // inner stuff slides right
var initalLeftMargin = parseInt( $(".innerLiner").css('margin-left') );
var newLeftMargin = (initalLeftMargin + 204); // extra 2 for border
updateButtons( newLeftMargin );
$(".innerLiner").animate({
marginLeft: newLeftMargin
}, 500);
}
function updateButtons( newLeftMargin ) {
$(".leftBtn,.rightBtn").show(); // Show both buttons by default
if ( newLeftMargin >= 0 )
$(".rightBtn").hide();
if ( newLeftMargin <= -408 )
$(".leftBtn").hide();
}
updateButtons(0)
$(".leftBtn").click( goRight );
$(".rightBtn").click( goLeft );
* {
Box-sizing: Border-box
}
.mycontainer {
white-space: nowrap;
overflow-x: hidden;
width: 204px;
}
.box {
display: inline-block;
border: 2px black solid;
padding: 20px;
width: 200px;
height: 100px;
vertical-align: top;
background-color: pink;
}
.box2 {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="rightBtn" type="button" value="Left">
<div class="mycontainer">
<div class="innerLiner">
<span class="box">
This is box1
</span>
<span class="box">
This is box2
</span>
<span class="box box2">
This is box3
</span>
</div>
</div>
<input class="leftBtn" type="button" value="Right">
I'm trying to create a script that moves a div from right to left when the user scrolls vertically. It should do this effect to any div with the class of "sidepara". It should only move the div if it is visible (the user has scrolled to it). I'm having trouble getting the math right.... What is the correct formula to move the div horizontally proportionate to the vertical scroll position?
$(function() {
$(window).scroll(function() {
console.clear();
$(".sidepara").each(function() {
var sY = $(this).position().top - $(window).scrollTop(),
dY = $(this).position().top,
wH = window.innerHeight;
var scrollPercent = (sY / (dY - wH));
var position = (scrollPercent * ($(document).width()));
position = window.innerWidth - position;
$(this).css("margin-left", position);
console.log("scoll Y: " + sY);
console.log("div Y: " + dY);
console.log("div X: " + position);
console.log("window height: " + wH);
console.log("scrollPercent: " + scrollPercent);
console.log("----");
//print number for debugging
$(this).html(position);
});
})
});
html,
body {
margin: 0;
padding: 0;
}
.stretch {
height: 2000px;
}
.sidepara {
color: red;
}
.parallaxContainer {
overflow: hidden;
width: 100%;
height: 256px;
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stretch"></div>
<div class="parallaxContainer">
<!-- <img src="helloworld.png" class="sidepara" /> -->
<div class="sidepara"></div>
</div>
<div class="stretch"></div>
<div class="parallaxContainer">
<!-- <img src="helloworld.png" class="sidepara" /> -->
<div class="sidepara"></div>
</div>
<div class="stretch"></div>
<div class="parallaxContainer">
<!-- <img src="helloworld.png" class="sidepara" /> -->
<div class="sidepara"></div>
</div>
<div class="stretch"></div>
Finally figured out the math! Here is the code for anyone who may like to do something similar.
$(function () {
$(window).scroll(function () {
$(".sidepara").each(function () {
var sY = $(this).position().top - $(window).scrollTop(),
dY = window.innerHeight,
wH = 0;
var scrollPercent = (sY / (dY - wH));
var position = (scrollPercent * ($(document).width() ));
$(this).css("margin-left", position);
});
})
});
html,
body {
margin: 0;
padding: 0;
}
.stretch {
height: 2000px;
}
.sidepara {
font-size: 5em;
color: red;
white-space: nowrap;
}
.parallaxContainer {
overflow: hidden;
width: 100%;
height: 256px;
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stretch"></div>
<div class="parallaxContainer">
<div class="sidepara">hello world!</div>
</div>
<div class="stretch"></div>
<div class="parallaxContainer">
<div class="sidepara">hellow world!</div>
</div>
<div class="stretch"></div>
<div class="parallaxContainer">
<div class="sidepara">hello world!</div>
</div>
<div class="stretch"></div>
So I downloaded a slideshow for my home page. It comes with 2 animated text titles (H2 and H3) that slide in from the left of the screen to center. I am now trying to add an additional line of text (H4) that should slide in from the right... with a few seconds delay.
I already edited the webpage and .css file accordingly, but the javascript I am not too sure I know exactly what to do, and I don't wanna mess it up all together.
I will paste here part of the js file where the title animation is being handled (if necessary I also stick the whole file at the bottom of this post).
// titles animation
$nextSlide.find('div.ei-title > h2')
.css( 'margin-right', 50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginRight : 0 + 'px', opacity : 1 },
this.options.titlespeed, this.options.titleeasing )
.end()
.find('div.ei-title > h3')
.css( 'margin-right', -50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginRight : 0 + 'px', opacity : 1 },
this.options.titlespeed, this.options.titleeasing )
And here's the css file (already edited to include the added text as 'H4'):
.ei-slider{
position: relative;
width: 100%;
max-width: 1999px;
height: 500px;
margin: 0 auto;
}
.ei-slider-loading{
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index:999;
background: rgba(0,0,0,0.9);
color: #fff;
text-align: center;
line-height: 400px;
}
.ei-slider-large{
height: 100%;
width: 100%;
position:relative;
overflow: hidden;
}
.ei-slider-large li{
position: absolute;
top: 20px;
left: 0px;
overflow: hidden;
height: 100%;
width: 100%;
}
.ei-slider-large li img{
width: 100%;
}
.ei-title h4{
position: absolute;
left: 50%;
margin-right: 13%;
top: 30%;
}
.ei-title h2, h3{
position: absolute;
right: 50%;
margin-right: 13%;
top: 30%;
}
.ei-title h2, .ei-title h3{
text-align: right;
}
.ei-title h4 {
text-align: left;
}
.ei-title h2{
font-size: 40px;
line-height: 50px;
font-family: 'Playfair Display', serif;
font-style: italic;
color: #b5b5b5;
}
.ei-title h3{
font-size: 20px;
line-height: 20px;
font-family: 'Open Sans Condensed', sans-serif;
text-transform: uppercase;
color: #000;
}
.ei-title h4{
font-size: 10px;
line-height: 20px;
font-family: 'sans-serif'; italic;
text-transform: uppercase;
color: #f0ffff;
}
/* the thumbs... */
.ei-slider-thumbs{
height: 1px;
margin: 0 auto;
position: relative;
}
.ei-slider-thumbs li{
position: relative;
float: left;
height: 10%;
}
.ei-slider-thumbs li.ei-slider-element{
top: 0px;
left: 0px;
position: absolute;
height: 10%;
z-index: 10;
text-indent: -9000px;
background: #000;
background: rgba(0,0,0,0.9);
}
.ei-slider-thumbs li a{
display: block;
text-indent: -9000px;
background: #666 ;
width: 100%;
height: 100%;
cursor: pointer;
-webkit-box-shadow:
0px 1px 1px 0px rgba(0,0,0,0.3),
0px 1px 0px 1px rgba(255,255,255,0.5);
-moz-box-shadow:
0px 1px 1px 0px rgba(0,0,0,0.3),
0px 1px 0px 1px rgba(255,255,255,0.5);
box-shadow:
0px 1px 1px 0px rgba(0,0,0,0.3),
0px 1px 0px 1px rgba(255,255,255,0.5);
-webkit-transition: background 0.2s ease;
-moz-transition: background 0.2s ease;
-o-transition: background 0.2s ease;
-ms-transition: background 0.2s ease;
transition: background 0.2s ease;
}
.ei-slider-thumbs li a:hover{
background-color: #f0f0f0;
}
.ei-slider-thumbs li img{
position: absolute;
bottom: 10px;
opacity: 0;
z-index: 999;
max-width: 100%;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-box-reflect:
below 0px -webkit-gradient(
linear,
left top,
left bottom,
from(transparent),
color-stop(50%, transparent),
to(rgba(255,255,255,0.3))
);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.ei-slider-thumbs li:hover img{
opacity: -1;
bottom: -1px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
#media screen and (max-width: 830px) {
.ei-title{
position: absolute;
right: 0px;
margin-right: 0px;
width: 100%;
text-align: center;
top: auto;
bottom: 10px;
background: #fff;
background: rgba(255,255,255,0.9);
padding: 5px 0;
}
.ei-title h2, .ei-title h3, .ei-title h4 {
text-align: center;
}
.ei-title h2{
font-size: 30px;
line-height: 24px;
}
.ei-title h3{
font-size: 20px;
line-height: 20px;
}
.ei-title h4{
font-size: 10px;
line-height: 20px;
}
}
And the html/js code on the webpage:
<div class="wrapper">
<div id="ei-slider" class="ei-slider">
<ul class="ei-slider-large">
<li>
<img src="uploads/2016/01/slider-3.jpg" alt="image01">
<div class="ei-title">
<h2>High end Management Tools</h2>
<h3>Available at your fingertips!</h3>
<h4>With the available technologies, we provide the methods and tools that will help society to excel to new heights</h4>
</div>
</li>
<li>
<img src="uploads/2016/01/about-1.jpg" alt="image02" />
<div class="ei-title">
<h2>Enterprises, Administration Managers</h2>
<h3>Improve your Performance!</h3>
<h4>Regardless of your position, we have the solutions for all levels of professionals, and students alike.... </h4>
</div>
</li>
<li>
<img src="uploads/2016/01/home-parallax.jpg" alt="image03" />
<div class="ei-title">
<h2>Stunning Solutions</h2>
<h3>For Remarkable results!</h3>
<h4>We are bringing today's technology to assist the traditional family with promising results.</h4>
</div>
</li>
</ul><!-- ei-slider-large -->
</div><!-- ei-slider -->
</div><!-- wrapper -->
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.eislideshow.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#ei-slider').eislideshow({
animation : 'center',
autoplay : true,
slideshow_interval : 6000,
titlesFactor : 0
});
});
</script>
Oh, and finally, the entire javascript file:
(function( window, $, undefined ) {
/*
* smartresize: debounced resize event for jQuery
*
* latest version and complete README available on Github:
* https://github.com/louisremi/jquery.smartresize.js
*
* Copyright 2011 #louis_remi
* Licensed under the MIT license.
*/
var $event = $.event, resizeTimeout;
$event.special.smartresize = {
setup: function() {
$(this).bind( "resize", $event.special.smartresize.handler );
},
teardown: function() {
$(this).unbind( "resize", $event.special.smartresize.handler );
},
handler: function( event, execAsap ) {
// Save the context
var context = this,
args = arguments;
// set correct event type
event.type = "smartresize";
if ( resizeTimeout ) { clearTimeout( resizeTimeout ); }
resizeTimeout = setTimeout(function() {
jQuery.event.handle.apply( context, args );
}, execAsap === "execAsap"? 0 : 100 );
}
};
$.fn.smartresize = function( fn ) {
return fn ? this.bind( "smartresize", fn ) : this.trigger( "smartresize", ["execAsap"] );
};
$.Slideshow = function( options, element ) {
this.$el = $( element );
/***** images ****/
// list of image items
this.$list = this.$el.find('ul.ei-slider-large');
// image items
this.$imgItems = this.$list.children('li');
// total number of items
this.itemsCount = this.$imgItems.length;
// images
this.$images = this.$imgItems.find('img:first');
/***** thumbs ****/
// thumbs wrapper
this.$sliderthumbs = this.$el.find('ul.ei-slider-thumbs').hide();
// slider elements
this.$sliderElems = this.$sliderthumbs.children('li');
// sliding div
this.$sliderElem = this.$sliderthumbs.children('li.ei-slider-element');
// thumbs
this.$thumbs = this.$sliderElems.not('.ei-slider-element');
// initialize slideshow
this._init( options );
};
$.Slideshow.defaults = {
// animation types:
// "sides" : new slides will slide in from left / right
// "center": new slides will appear in the center
animation : 'sides', // sides || center
// if true the slider will automatically slide, and it will only stop if the user clicks on a thumb
autoplay : false,
// interval for the slideshow
slideshow_interval : 3000,
// speed for the sliding animation
speed : 1000,
// easing for the sliding animation
easing : '',
// percentage of speed for the titles animation. Speed will be speed * titlesFactor
titlesFactor : 0.60,
// titles animation speed
titlespeed : 900,
// titles animation easing
titleeasing : '',
// maximum width for the thumbs in pixels
thumbMaxWidth : 150
};
$.Slideshow.prototype = {
_init : function( options ) {
this.options = $.extend( true, {}, $.Slideshow.defaults, options );
// set the opacity of the title elements and the image items
this.$imgItems.css( 'opacity', 0 );
this.$imgItems.find('div.ei-title > *').css( 'opacity', 0 );
// index of current visible slider
this.current = 0;
var _self = this;
// preload images
// add loading status
this.$loading = $('<div class="ei-slider-loading">Loading</div>').prependTo( _self.$el );
$.when( this._preloadImages() ).done( function() {
// hide loading status
_self.$loading.hide();
// calculate size and position for each image
_self._setImagesSize();
// configure thumbs container
_self._initThumbs();
// show first
_self.$imgItems.eq( _self.current ).css({
'opacity' : 1,
'z-index' : 10
}).show().find('div.ei-title > *').css( 'opacity', 1 );
// if autoplay is true
if( _self.options.autoplay ) {
_self._startSlideshow();
}
// initialize the events
_self._initEvents();
});
},
_preloadImages : function() {
// preloads all the large images
var _self = this,
loaded = 0;
return $.Deferred(
function(dfd) {
_self.$images.each( function( i ) {
$('<img/>').load( function() {
if( ++loaded === _self.itemsCount ) {
dfd.resolve();
}
}).attr( 'src', $(this).attr('src') );
});
}
).promise();
},
_setImagesSize : function() {
// save ei-slider's width
this.elWidth = this.$el.width();
var _self = this;
this.$images.each( function( i ) {
var $img = $(this);
imgDim = _self._getImageDim( $img.attr('src') );
$img.css({
width : imgDim.width,
height : imgDim.height,
marginLeft : imgDim.left,
marginTop : imgDim.top
});
});
},
_getImageDim : function( src ) {
var $img = new Image();
$img.src = src;
var c_w = this.elWidth,
c_h = this.$el.height(),
r_w = c_h / c_w,
i_w = $img.width,
i_h = $img.height,
r_i = i_h / i_w,
new_w, new_h, new_left, new_top;
if( r_w > r_i ) {
new_h = c_h;
new_w = c_h / r_i;
}
else {
new_h = c_w * r_i;
new_w = c_w;
}
return {
width : new_w,
height : new_h,
left : ( c_w - new_w ) / 2,
top : ( c_h - new_h ) / 2
};
},
_initThumbs : function() {
// set the max-width of the slider elements to the one set in the plugin's options
// also, the width of each slider element will be 100% / total number of elements
this.$sliderElems.css({
'max-width' : this.options.thumbMaxWidth + 'px',
'width' : 100 / this.itemsCount + '%'
});
// set the max-width of the slider and show it
this.$sliderthumbs.css( 'max-width', this.options.thumbMaxWidth * this.itemsCount + 'px' ).show();
},
_startSlideshow : function() {
var _self = this;
this.slideshow = setTimeout( function() {
var pos;
( _self.current === _self.itemsCount - 1 ) ? pos = 0 : pos = _self.current + 1;
_self._slideTo( pos );
if( _self.options.autoplay ) {
_self._startSlideshow();
}
}, this.options.slideshow_interval);
},
// shows the clicked thumb's slide
_slideTo : function( pos ) {
// return if clicking the same element or if currently animating
if( pos === this.current || this.isAnimating )
return false;
this.isAnimating = true;
var $currentSlide = this.$imgItems.eq( this.current ),
$nextSlide = this.$imgItems.eq( pos ),
_self = this,
preCSS = {zIndex : 10},
animCSS = {opacity : 1};
// new slide will slide in from left or right side
if( this.options.animation === 'sides' ) {
preCSS.left = ( pos > this.current ) ? -1 * this.elWidth : this.elWidth;
animCSS.left = 0;
}
// titles animation
$nextSlide.find('div.ei-title > h2')
.css( 'margin-right', 50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
.end()
.find('div.ei-title > h3')
.css( 'margin-right', -50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
$.when(
// fade out current titles
$currentSlide.css( 'z-index' , 1 ).find('div.ei-title > *').stop().fadeOut( this.options.speed / 2, function() {
// reset style
$(this).show().css( 'opacity', 0 );
}),
// animate next slide in
$nextSlide.css( preCSS ).stop().animate( animCSS, this.options.speed, this.options.easing ),
// "sliding div" moves to new position
this.$sliderElem.stop().animate({
left : this.$thumbs.eq( pos ).position().left
}, this.options.speed )
).done( function() {
// reset values
$currentSlide.css( 'opacity' , 0 ).find('div.ei-title > *').css( 'opacity', 0 );
_self.current = pos;
_self.isAnimating = false;
});
},
_initEvents : function() {
var _self = this;
// window resize
$(window).on( 'smartresize.eislideshow', function( event ) {
// resize the images
_self._setImagesSize();
// reset position of thumbs sliding div
_self.$sliderElem.css( 'left', _self.$thumbs.eq( _self.current ).position().left );
});
// click the thumbs
this.$thumbs.on( 'click.eislideshow', function( event ) {
if( _self.options.autoplay ) {
clearTimeout( _self.slideshow );
_self.options.autoplay = false;
}
var $thumb = $(this),
idx = $thumb.index() - 1; // exclude sliding div
_self._slideTo( idx );
return false;
});
}
};
var logError = function( message ) {
if ( this.console ) {
console.error( message );
}
};
$.fn.eislideshow = function( options ) {
if ( typeof options === 'string' ) {
var args = Array.prototype.slice.call( arguments, 1 );
this.each(function() {
var instance = $.data( this, 'eislideshow' );
if ( !instance ) {
logError( "cannot call methods on eislideshow prior to initialization; " +
"attempted to call method '" + options + "'" );
return;
}
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
logError( "no such method '" + options + "' for eislideshow instance" );
return;
}
instance[ options ].apply( instance, args );
});
}
else {
this.each(function() {
var instance = $.data( this, 'eislideshow' );
if ( !instance ) {
$.data( this, 'eislideshow', new $.Slideshow( options, this ) );
}
});
}
return this;
};
})( window, jQuery );
My slider in action
The jQuery code of your plugin, the first snipped you attached, is looking for each element (h2 and h3) and animating them one after the other.
Just add the same code for the h4 afterwards, and apply any changes you want to the pixel values.
// titles animation
$nextSlide.find('div.ei-title > h2')
.css( 'margin-right', 50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginRight : 0 + 'px', opacity : 1 },
this.options.titlespeed, this.options.titleeasing )
.end()
.find('div.ei-title > h3')
.css( 'margin-right', -50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginRight : 0 + 'px', opacity : 1 },
this.options.titlespeed, this.options.titleeasing )
.end()
.find('div.ei-title > h4')
.css( 'margin-right', -150 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginRight : 0 + 'px', opacity : 1 },
this.options.titlespeed, this.options.titleeasing )
As you can see, I told it to set margin-right to -150px, to apply the same difference between h3 and h4 as there is between h2 and h3, but you can choose the value that suits your needs best.
I am adapting the Coverflow technique to work with a div. Following is the html:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body,html {
margin: 0;
padding: 0;
background: #000;
height: 100%;
color: #eee;
font-family: Arial;
font-size: 10px;
}
div.magnifyme {
height: 80px;
padding: 80px;
position: absolute;
top: 0px;
left: 0px;
width: 2000px;
}
div.wrapper {
margin: 0px;
height: 470px;
/*border: 2px solid #999;*/
overflow: hidden;
padding-left: 40px;
right: 1px;
width: 824px;
position: relative;
}
div.container {position: relative; width: 854px; height: 480px; background: #000; margin: auto;}
div.nav {position: absolute; top: 10px; width: 20%; height: 10%; right: 1px; }
div.magnifyme div {
position: absolute;
width: 300px;
height: 280px;
float: left;
margin: 5px;
position: relative;
border: 2px solid #999;
background: #500;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="ui.coverflow.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript">
$(function() {
$("div.magnifyme").coverflow();
$("#add").click(function() {
$(".magnifyme").append("<div id=\"div5\">hello world</div>");
$("div.magnifyme").coverflow();
});
});
</script>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="magnifyme">
<div id="div0">This is div 0</div>
<div id="div1">This is div 1</div>
<div id="div2">This is div 2</div>
<div id="div3">This is div 3</div>
<div id="div4">This is div 4</div>
</div>
</div>
<div class="nav">
<button type="button" id="add">Add to Deck</button>
</div>
</div>
</body>
</html>
The coverflow function (included as a js file in the head section) is here. When I click the button, I was expecting it to add a DIV to the already present deck. For some reason, it doesn't show the newly added DIV. I tried calling the coverflow() function after I added the new element but that didn't work either. The modified coverflow function is given here:
;(function($){
$.widget("ui.coverflow", {
init: function() {
var self = this;
this.items = $(this.options.items, this.element).bind("click", function() {
self.moveTo(this);
//$("div.slider").slider("moveTo", self.current, null, true);
});
this.itemWidth = this.items.outerWidth(true);
this.current = 0; //Start item
this.refresh(1, 0, this.current);
this.element.css("left",
(-this.current * this.itemWidth/2)
+ (this.element.parent()[0].offsetWidth/2 - this.itemWidth/2) //Center the items container
- (parseInt(this.element.css("paddingLeft")) || 0) //Subtract the padding of the items container
);
},
moveTo: function(item) {
this.previous = this.current;
this.current = !isNaN(parseInt(item)) ? parseInt(item) : this.items.index(item);
if(this.previous == this.current) return false; //Don't animate when clicking on the same item
var self = this, to = Math.abs(self.previous-self.current) <=1 ? self.previous : self.current+(self.previous < self.current ? -1 : 1);
$.fx.step.coverflow = function(fx) {
self.refresh(fx.now, to, self.current);
};
this.element.stop().animate({
coverflow: 1,
left: (
(-this.current * this.itemWidth/2)
+ (this.element.parent()[0].offsetWidth/2 - this.itemWidth/2) //Center the items container
- (parseInt(this.element.css("paddingLeft")) || 0) //Subtract the padding of the items container
)
}, {
duration: 1000,
easing: "easeOutQuint"
});
/*current = this.current;
$("[id^=div]").each(function() {
if(this.id != "div"+current) {
console.info(this.id + " Current: " + current);
$(this).fadeTo( 'slow', 0.1);
}
});*/
},
refresh: function(state,from,to) {
var self = this, offset = null;
this.items.each(function(i) {
var side = (i == to && from-to < 0 ) || i-to > 0 ? "left" : "right";
var mod = i == to ? (1-state) : ( i == from ? state : 1 );
var before = (i > from && i != to);
$(this).css({
webkitTransform: "matrix(1,"+(mod * (side == "right" ? -0.5 : 0.5))+",0,1,0,0) scale("+(1+((1-mod)*0.5))+")",
left: (
(-i * (self.itemWidth/2))
+ (side == "right"? -self.itemWidth/2 : self.itemWidth/2) * mod //For the space in the middle
),
zIndex: self.items.length + (side == "left" ? to-i : i-to)
});
if(!$.browser.msie)
$(this).css("opacity", 1 - Math.abs((side == "left" ? to-i : i-to))/2);
});
}
});
$.extend($.ui.coverflow, {
defaults: {
items: "> *"
}
});
})(jQuery);
One thing I did notice is that after clicking the button for about 5-10 times, the elements show up but not along with the already present divs but rather below them. I am guessing that this has something to do with the CSS of the magnifyme class (2000px), but I am not sure what it is. Is there any way I can make this work?
You need to write an additional function for the coverflow widget:
add: function(el) {
var self = this;
this.element.append(el)
this.options.items = $('> *', this.element);
this.items = $(this.options.items, this.element).bind("click", function() {
self.moveTo(this);
});
this.itemWidth = this.items.outerWidth(true);
this.moveTo(this.items.length-1);
},
and then call it like so:
$("#add").click(function() {
$("div.magnifyme").coverflow('add', "<div></div>");
});
First, you need to add a references to the jQuery UI core, and it also appears that it requires the jQuery slider plugin.
Second, in your click event you're doing a location.reload, which is refreshing the page from the server, resetting any changes you had made to the page. (if you make the DIVs much smaller you can see one flash in before the page is reloaded).
You are getting a js error on the page -- "$.widget is not a function" because you didn't include the jqueryUI library. http://jqueryui.com/
Also if you remove the location.reload line, your code will work, however, I would rewrite that script block like this, so that everything clearly runs when the document is ready:
<script type="text/javascript">
$(document).ready(function() {
$("div.magnifyme").coverflow();
$("#add").click(function() {
$(".magnifyme").append("<div id=\"div5\">hello world</div>");
$("div.magnifyme").coverflow();
});
});
</script>