I am looking for some information from some front end experts on how to go about creating a custom wrap around js carousel gallery. The idea is simple really I have a carousel of images, text, or whatever and when I get to the end I want it to wrap around. I don't want the content to simply fadeIn and out to the next piece of content. This is a gallery of div's currently but suppose it's images or whatever have you.
HTML
<div id="outside-container">
<div id="inside-container" class="cf">
<div class="items" id="item1"></div>
<div class="items" id="item2"></div>
<div class="items" id="item3"></div>
<div class="items" id="item4"></div>
</div>
</div>
<div id="directions">
<h4 id="left-button">Left</h4>
<h4 id="right-button">Right</h4>
</div>
CSS
#outside-container{
display: block;
width: 400px;
height: 125px;
overflow: hidden;
border: 1px solid #000;
margin: 0px auto;
}
#inside-container{
display: block;
width: 800px;
overflow: hidden;
height: 100%;
}
.items{
float: left;
margin: 0px;
width: 200px;
height: 100%;
}
#item1{ background: green; }
#item2{ background: red; }
#item3{ background: blue; }
#item4{ background: yellow; }
#directions{
display: block;
width: 400px;
margin: 0px auto;
text-align: center;
}
#left-button, #right-button{
display: inline-block;
cursor: pointer;
margin: 10px;
}
JS
var move = 0;
$("#left-button").click(function(){
move += 200;
$("#inside-container").animate({
marginLeft: move+"px"
}, 500);
});
$("#right-button").click(function(){
move -= 200;
$("#inside-container").animate({
marginLeft: move+"px"
}, 500);
});
Here is the codepen. So to sum all this up. I am asking for a way to create an infite loop for a gallery. I have always programmed these sorts of things to come to an end and then the user has to go back the other way. If this sounds confusing follow check out the codepen. Thanks in advance.
Here you go
http://codepen.io/nickavi/pen/cpFCE
But for the love of god, please don't use jQuery animate... at least add velocity.js to it, or the GSAP plugin, you don't even have to alter your JS you just add it in and it replaces the animate function with a more efficient one.
Cheers JBSTEW
First set move to the default slider and margin reset amount:
var move = 200;
Then, set the container margin to slide left by the move amount:
var margin_reset = (move * -1) + 'px'
$("#inside-container").css('margin-left', margin_reset);
Then, adjust the animation margin slide using move variable again, and execute a function when the animation is complete that moves the last/first item to the beginning/end of the container using prepend/append.
$("#left-button").click(function(){
$("#inside-container").animate({
marginLeft: 0
}, 500, function() {
$(this).prepend( $(this).find('.items:last') )
.css('margin-left', margin_reset);
});
});
$("#right-button").click(function(){
$("#inside-container").animate({
marginLeft: (move * -2) +"px"
}, 500, function() {
$(this).append( $(this).find('.items:first') )
.css('margin-left', margin_reset);
});
});
To avoid an initial draw jump, you could change the default css #inside-container as:
#inside-container{
...
margin-left: -200px;
}
see: Codepen
Related
I am using the skrollr library and I couldnt really find many useful explanations on its official page(github) so Ive been reading on stackoverflow etc. I still have trouble understanding how to use skrollr and its data-attributes.
After researching, I tried to implement 4 things, of which only one works..If anyone could tell me what I am doing wrong and the skrollr data attributes, it would be amazing.
What is the difference of data-100 and data-100p ?
when to use data-start attribute? It does not seem to change anything, whether or not im using it?
I dont quite understand the css requirements to make the animations work-data-attributes without the css is not enough but I confused what to do here.
In my code I tried to do 4 animations:
a. change opacity from 'visible' to not visible (opacity of 0) / works (as the only animation)
b. change opacity but from not visible to visible / does not work
c. make two div's slide away (left to left and right to right) /does not work
d. zoom into the picture while scrolling /dows not work
I made a jsfiddle, so you could see it better and also included my code in here. Thank you!!!
https://jsfiddle.net/codingcodingcoding/44yb72ps/2/
html:
<div class="one" data-0='opacity: 1' data-100='opacity: 0'>
</div>
<div class="two" data-100="opacity: 0" data-200="opacity: 1"></div>
<div class="three">
<div class="three-left" data-200="left: 0%;">
</div>
<div class="three-right" data-200="left: 50%;">
</div>
</div>
<div class="four" data-0='transform: scale(1.0,1.0);' data-150p='transform: scale(1.3, 1.3);opacity: 1;' data-200p='opacity: 0; transform: scale(6, 6);'></div>
<div class='section' data-bottom-top="background-position: 50% 100%" data-top-bottom="background-position: 50% 0%">
</div>
css:
.one {
background-image: url('http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050');
width: 100%;
height: 100%;
}
.two {
background-color: red;
width: 100%;
height: 100%;
}
.three {
width: 100%;
height: 100%;
display: block;
.three-left {
width: 50%;
height: 100%;
left: 0%;
background-color: green;
}
.three-right {
width: 50%;
height: 100%;
left: 50%;
background-color: yellow;
}
}
-four {
width: 100%;
height: 100%;
background-color: yellow;
}
js:
( function( $ ) {
// Init Skrollr
var s = skrollr.init({
render: function(data) {
}
});
} )( jQuery );
Please check out this fiddle. If you add items to the #scroll div, the scroll-bar is fixed - it just stays at the "beginning". What I want to achieve is to move scroll-bar automatically when a new item is being appended to the parent. Is it possible to do this via magic of CSS? :)) Or only JS gonna solve it?
Code:
HTML
<div id="scroll">
<div class="addElement">FIRST</div>
<div class="addElement"></div>
<div class="addElement">LAST</div>
</div>
<button id="add">ADD NEW ELEMENT</button>
CSS
#scroll {
overflow: auto;
overflow-y: hidden;
width: 200px;
height: 150px;
background: red;
position: relative;
display: flex;
align-items: center;
}
.addElement {
margin: 5px;
height: 60px;
width: 55px;
background: green;
flex: 0 0 auto;
}
JS
var scroll = $('#scroll');
var addButton = $('#add');
var item = 1;
addButton.click(function() {
scroll.append(`<div class="addElement">ITEM ${item}</div>`);
item++;
});
Thank you for any suggestion!
I've updated your fiddle to demonstrate a jQuery method of doing this:
https://jsfiddle.net/93gz3u1L/11/
I just added the following using scrollLeft (You can remove the animation if needed):
addButton.click(function() {
scroll.append(`<div class="addElement">ITEM ${item}</div>`);
item++;
scroll.animate({
scrollLeft: scroll.get()[0].scrollWidth
});
});
You can use the css Direction property, setted to rtf! (right to left)
#scroll {
...
direction: rtl;
}
but you will need to prepend the elem instead of append it to the parent.
https://jsfiddle.net/k6Lhv3u6/1/
I was looking through some of the posts and I found most my answer however it's still not working properly for me.
http://jsfiddle.net/5n5MA/619/
The bar you see on the jsfiddle should be catching lower than the top because there is a fixed header that will be there on my main site this secondary bar is supposed to go below it. I can get it to be fixed on jsfiddle but not on my site. And as you can see it is shrinking when it changes to fixed.
HTML:
<header>
<img class="logo" src="images/headerLogo.png">
<p class="about lighter">ABOUT US</p>
<p class="contact lighter">CONTACT US</p>
<img class="getStarted" src="images/getStarted.png">
</header>
<div class="mainSection1">
<h1>SAVE TIME & MONEY</h1>
<h2 class="lighter">CONCIERGE HAS ALL THE ANSWERS</h2>
<p>$79.99 VALUE<br>FREE FOR YOUR CLIENTS</p>
<img class="getStarted" src="images/getStarted.png">
</div>
<div class="subBar">
<p class="first">VALUE</p> <p class="second">SERVICES</p> <p class="third">BRANDS</p> <p class="fourth">HOW IT WORKS</p>
</div>
JS:
var nav = $('.subBar');
if (nav.length) {
var fixmeTop = nav.offset().top -100;
$(window).scroll(function () {
var currentScroll = $(window).scrollTop();
if (currentScroll >= fixmeTop) {
$('.subBar').css({
position: 'fixed',
width: '100%',
top: '73px',
left: '0'
});
$('header').css(
'box-shadow', 'inherit'
);
} else {
$('.subBar').css({
position: 'static'
});
$('header').css(
'box-shadow', '0px 5px 9px #515151'
);
}
});
}
css:
.subBar {
background: #F1F1F2;
height: 65px;
}
.subBar p:first-child {
margin-left: 15%;
border-left: 1px solid #bbbdc0;
}
.subBar p {
float: left;
border-right: 1px solid #bbbdc0;
width: 17%;
text-align: center;
height: 44px;
margin-top: 0px;
padding-top: 21px;
font-weight: lighter;
}
This is because the div .subBar is not given any width.
Because of this it's width get shrinked when it's position becomes fixed, taking it to be auto by default.
So specify a fixed width. It will take that width in any position.
Also, you need to have some margin on left and right so that it stays the same as you want.
You can make the following changes:
.subBar {
background: #F1F1F2;
height: 65px;
width:100%;
}
Another more accurate solution:
Change in the jquery
if (currentScroll >= fixmeTop) {
$('.subBar').css({
position: 'fixed',
top: '72px'
});
} else {
$('.subBar').css({
position: 'static',
width:'auto';
});
}
Check the FIDDLE.
Issue has been solved! I decided to make a second navbar that starts hidden than is shown when I scroll down enough. It seems to be way less jumpy and isn't taking the original bar out of the dom (which messes with other elements below it).
I'm looking for the best way to do a progress bar (in my case it's a life bar for a game) in an html5 canvas.
I don't know if it's better to use javascript and dom element, or draw this bar directly in the canvas.
I need an update function, for example myBar.updateValue(40), and I need to show the new bar without refresh all the page or all the canvas, of course.
Do you know something like that? An existing script? Thanks!
It’s very easy in HTML/CSS:
<style>
#progress-holder{width:400px;height:20px;background:grey}
#progress{width:0;height:100%;background:black}
</style>
<div id="progress-holder">
<div id="progress"></div>
</div>
<script>
var progress = document.getElementById('progress');
function updateValue(perc) {
progress.style.width = perc+'%';
}
updateValue(40);
</script>
DEMO: http://jsbin.com/EGAzAZEK/1/edit
And animating with CSS: http://jsbin.com/EGAzAZEK/3/edit
HTML:
<div class='progress'>
<div class='progress-bar' data-width='//Enter a percent value here'>
<div class='progress-bar-text'>
Progress: <span class='data-percent'>//This is auto-generated by the script</span>
</div>
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 15px;
width: 100%;
height: 100%;
position: relative;
color: #fff;
}
.progress {
position: relative;
width: 100%;
height: 30px;
}
.progress-bar {
margin-bottom: 5px;
width: 0%;
height: 30px;
position: relative;
background-color: rgb(66, 139, 202);
}
.progress-bar-text {
position: absolute;
top: 0px;
width: 100%;
text-align: center;
/*
Do not change the values below,
unless you want your text to display away from the bar itself. */
line-height: 30px;
vertical-align: middle;
}
jQuery:
$('.progress-bar').each(function (){
var datawidth = $(this).attr('data-width');
$(this).find("span.data-percent").html(datawidth + "%");
$(this).animate({
width: datawidth + "%"
}, 800);
});
Link to JSFiddle
The HTML data-width attribute is used to track the percent the bar should be set to. Change it to your liking.
The jQuery script works with ALL progress bars on your page (See the JSFiddle, so you don't have to copy and paste the same jQuery for every new progress bar.
(Just be sure to keep the structure of the HTML, or change it to your liking).
The div "progress" is just an expander, it can be named whatever your want - without you having to change the jQuery.
EDIT:
If you can use Javascript & HTML, don't use a canvas. Canvas (imho) are good for only 1 thing: Seat bookings for concerts, theaters and alike.
I am writing a small animation to a div: Flag flips when you click on it. On the click, the image has to change.
HTML:
<div id="lang"></div>
...
<div id="langnl" class="invisible">
<img id="flag" src="en.jpg" onclick="change(-1,'en')"/>
</div>
<div id="langen" class="invisible">
<img id="flag" src="nl.jpg" onclick="change(-1,'nl')"/>
</div>
CSS:
.footer #lang {
float:right;
width: 30px;
height: 20px;
text-align:center;
}
.footer #lang img {
width: 30px;
height: 20px;
margin: 0px auto;
border-radius: 5px;
}
JS:
if (!flipping) {
flipping = true;
$('#flag').animate( {
width: 0,
}, flipTime, function () {
$('#lang').html($('#lang'+lang).html());
}).animate( {
width: 30,
}, flipTime, function () {flipping = false;});
}
My observations: The first flag flip works, but does not animate the second part, because I remove #flag, and replace it. The next flips do not work, because flipping is still false.
How to solve this, and continue animating, but replacing the content of the div?
The problem was that I has two divs with the same ID, not that I was changing the div I was animating.