I had this problem here javascript - Need onclick to go full distance before click works again that I couldn't seem to figure out how to make it work. So I am going on to plan B which is to try to go from div to div within a scroll. Currently, my HTML looks something like this:
HTML
<div class="outerwrapper">
<div class="innerwrapper">
<div class="holder"></div>
<div class="holder"></div>
<div class="holder"></div>
<div class="holder"></div>
<div class="holder"></div>
<div class="holder"></div>
</div>
</div>
<div class="buttons">
<div id="left">
<div id="right">
</div>
Javscript
$(function () { // DOM READY shorthand
$("#right, #left").click(function () {
var dir = this.id == "right" ? '+=' : '-=';
$(".outerwrapper").stop().animate({ scrollLeft: dir + '251' }, 1000);
});
});
So currently I was trying to get it to move the full 251px first before another click event could fire. The problem is when a user clicks on the arrow multiple times, it resets the event and starts over from within the scroll so instead of going from frame to frame, it could start in the middle of the frame and end in the middle of the frame. Since I haven't been able to figure out how to make the javascript complete its action first so it goes the full 261 px before the event can happen again, I was wondering is there a way to transition from div to div so the user can click as many times as they like and it will transition smoothly from div to div and not end up in the middle once its done?
That's what on() and off() are for :
$(function () {
var buttons = $("#right, #left");
buttons.on('click', ani);
function ani()
buttons.off('click');
var dir = this.id == "right" ? '+=' : '-=';
$(".outerwrapper").animate({ scrollLeft: dir + '251' }, 1000, function() {
buttons.on('click', ani);
});
}
});
Another option would be to not rely on the currently scrolled position, but a variable you keep track of yourself.
$(function () {
$("#right, #left").on('click', function() {
var wrap = $(".outerwrapper"),
dir = this.id == "right" ? 251 : -251,
Left = (wrap.data('scroller') || 0) + (dir);
$(".outerwrapper").animate({ scrollLeft: Left }, 1000);
wrap.data('scroller', Left);
});
});
Related
My website loads "sub-pages" after choosing from a menu and appends it to a empty hidden div.
It's working, but I'm not satisfied with the feeling of it. The website kind of stutters/blinks when swapping the content of the div.
So, what I'm doing is like this:
HTML
<div class="button" id="page1">Button for link</div>
<div class="subContent">
<div class="containerContentBox textLeft">
<div id="placeContent"><!-- Content goes here --></div>
</div>
</div>
In the Javascript I'm trying to smooth out the transition by fading out the main div, change content and then fade it back in as shown below:
JS
var chosenPage = "";
// Click button
$('.button').click(function(){
chosenPage = $(this).attr('id');
$('#placeContent').fadeOut('fast', function(){
$('#placeContent').empty();
showSelectedPage();
});
});
// Apply the page
function showSelectedPage(){
var newPageFile = "/pages/" + chosenPage + ".html";
$.get(newPageFile)
.done(function(data) {
$('#placeContent').html(data);
$('#placeContent').fadeIn('fast', function(){
scrollToContent();
});
}).fail(function() {
console.log('Page not found');
return;
});
}
// Scroll to top of the appended page
function scrollToContent(){
$('html,body').animate({
scrollTop: $(".subContent").offset().top - 40
}, 'slow');
}
Is there a better way of doing this ? I think the blinking/stutter comes from the scrollbar changing height.
I have some gif images on my website that I want to animate once you scroll to that part of the page. I have some JavaScript code that hides those gifs then shows them once you get to that part of the page. The issue I am having is that those gifs start animating before I scroll to that part of the page. Another issue I am having is that once I refresh the page the gifs will sometimes animate, but I would like them to animate each time the page gets refreshed.
Here is the link to my website: http://lam-parker.github.io/my_portfolio_website/
This isn't all of the gifs but here's is the portion of my html where my gifs are:
<div class="row4">
<h1 id="title3">Software Skills</h1>
<div class="col-md-2 col-sm-4 col-xs-6">
<img src="img/software-skills/photoshop.gif">
</div>
<div class="col-md-2 col-sm-4 col-xs-6">
<img src="img/software-skills/indesign.gif">
</div>
</div>
Here is the .show()/.hide() JavaScript I added to the gifs section:
$(window).scroll(function() {
if ($(window).scrollTop() > 70) {
$('.row4').show("slow");
} else {
$('.row4').hide();
}
});
I would appreciate it if someone could help me. Thanks in advance.
I think the only way to 'control' them would be to reassign the src attribute :
Demo
img {
opacity: 0;
}
$(window).scroll(function() {
var current = $(this).scrollTop(),
path = 'animated.gif',
visible = $('img').css('opacity') != 0;
if (current > 200) {
if (!visible) $('img').attr('src', path).fadeTo(400,1);
}
else if (visible) $('img').fadeTo(0,0);
});
Update - by request some code that makes it possible to loop through all animated gifs :
Pen
$(function() {
var target = $('.anigif'),
path = [], zenith, nadir, current,
modern = window.requestAnimationFrame;
target.each(function() {
path.push(this.src);
});
$(window).on('load resize', storeDimensions).on('load scroll', function(e) {
current = $(this).scrollTop();
if (e.type == 'load') setTimeout(inMotion, 150);
else inMotion();
function inMotion() {
if (modern) requestAnimationFrame(checkFade);
else checkFade();
}
});
function storeDimensions() {
clearTimeout(redraw);
var redraw = setTimeout(function() {
zenith = []; nadir = [];
target.each(function() {
var placement = $(this).offset().top;
zenith.push(placement-$(window).height());
nadir.push(placement+$(this).outerHeight());
});
}, 150);
}
function checkFade() {
target.each(function(i) {
var initiated = $(this).hasClass('active');
if (current > zenith[i] && current < nadir[i]) {
if (!initiated) $(this).attr('src', path[i]).addClass('active').fadeTo(500,1);
}
else if (initiated) $(this).removeClass('active').fadeTo(0,0);
});
}
});
It will reinitiate them when they come into view (bottom and top) and fade them out when leaving the screen. All it needs is for the animated gifs to have a common class, assigned to the variable target. If the page contains only gifs and no other <img> tags you could even use $('img') and leave out the class. Looks like quite a bit of code but it has some debouncing and other optimisation.
B-)
You need to use CSS opacity 1 or 0 to show or hide your element. That is only way from "old-school". Second thing is to use relative position and move out of screen. Also you can resize image from original size to 1x1px to original size but that is a bad way.
I have a floating box and I'd like to know how I can stop it from overlapping the footer div by stopping it on the main div where it is only allowed to go.
window.onload = function ()
{
var scrolledElement = document.getElementById('scrolling_box');
var top = scrolledElement.offsetTop;
var listener = function ()
{
var y = scrolledElement.scrollTop || scrolledElement.scrollTop || window.pageYOffset;
if (y >= top-25)
{
scrolledElement.classList.add('fixed');
} else {
scrolledElement.classList.remove('fixed');
}
};
window.addEventListener('scroll', listener, false);
}
I'd like for it to stop at the main div, that is as followed:
<div class="outer">
<div class="main">
<div class="left">
</div>
<div class="right">
<div class="scrolling_box">
the box that is scrolled goes right here
</div>
</div>
</div>
<div id="footer">
Footer goes here
</div>
</div>
I'd like it to be stopped at the main class, I have looked a lot of other tutorials and none that I could port it to plain javascript. I tried including the .stop() but it wound up being only for jQuery sadly. I could not replicated the issue in jsfiddle, sadly.
I tried using float:both, left and right but neither seemed to have worked at all.
Almost Solved Check for Demo
$(window).scroll(function(){
var pos = $('#footer').offset();
var top = pos.top;
var pos1 = $('#scrolling_boxI').offset();
var top1 = pos1.top
//alert(top);
if( $(window).scrollTop()<top-150-top1)
{
$("#scrolling_boxI").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
}
});
I'm sure this is a pretty common question around here but after lots of research I can't seem to find an answer to my question.
So just a little warning; I'm really new into javascript and jQuery etc.
To the question! I'm trying to apply two images which you click on and it scrolls to the next or previous section.
So to get an overview of how it looks, here' a part of the HTML:
<div id="scrollbuttons">
<img id="prev" src="pics/prev.png"></img>
<img id="next" src="pics/next.png"></img>
</div>
And:
<div id="work">
<p class="maintext">blabla</p>
</div>
<div id="gallery">
<p class="maintext">blabla</p>
</div>
<div id="project">
<p class="maintext">blabla</p>
</div>
<div id="finish">
<p class="maintext">blabla</p>
</div>
Javascript:
var actual = "work";
$("#prev").on("click",function(e){
e.preventDefault();
var $prev = $("#"+actual).prev();
if($prev.length == 0){
return;
}
actual = $prev.attr("id");
$('html, body').animate({
scrollTop: $prev.offset().top
}, 1000);
});
$("#next").on("click",function(e){
e.preventDefault();
var $next = $("#"+actual).next();
if($next.length == 0){
return;
}
actual = $next.attr("id");
$('html, body').animate({
scrollTop: $next.offset().top
}, 1000);
});
So what I'm trying to create is when you click on "next", the page should smoothly and automatically scroll to firstly, "work", then to "gallery" etc.
And when you press "prev", the page should again smoothly and automatically scroll back to the previous point.
I have the latest jQuery version and I'd like to not install plugins if it's not absolutely needed.
So I hope this is enough info to get some help, I'd really appreciate it since I'm really new to JS.
Thanks in advance
/Emil Nilsson
You best use a plugin as they already invented the wheel: jQuery ScrollTo
If you don't want to use the plugin, you can still learn from it by checking the code of the non-minified version.
I think you should introduce an indicator like a classname to determine the current active section and move that class together with scrolling when you click prev or next.
$('#scrollbuttons a').click(function (e) {
e.preventDefault();
var el, pos, active = $('#sectionContainer .active');
if ($(this).is('#prev')) {
el = active.prev();
} else {
el = active.next();
}
if (el.length) {
pos = el.offset().top;
$('html, body').animate({
scrollTop: pos
}, 1000);
el.addClass('active').siblings().removeClass('active');
}
});
See the demo.
If you want to integrate this with scroll() event, you also need to move that indicator when the scrollTop reaches a certain section:
$(window).scroll(function(){
var winTop = $(this).scrollTop();
$('#sectionContainer div').each(function(){
var elTop = $(this).offset().top,
elHeight = $(this).height();
if(winTop >= elTop && winTop < elTop + elHeight){
$(this).addClass('active').siblings().removeClass('active');
}
});
});
With scrollbar demo.
I have a responsive site that has an image slider that the user can look through.
Here is the link to that slider:
http://firehousecoffeeco.com
I was able to get the slideshow to return to the first slide when they click the "right" button on the last slide, without the right edge of the last slide ever coming too far into the window. This is done by checking the viewport width against the container div's width (see the left button's click handler below).
My question is: How do I make it so that the same thing that is happening with the last slide happens with the first slide. (no matter what, I never want the container's left edge to go above 0px). I tried to do the same with the first slide as with the last, but it didnt' work, please see below:
Here is the markup of the slider:
<section id="photoGallery">
<div id="slides">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
<!--left and right buttons-->
<div id="left" data-dir="left"></div>
<div id="right" data-dir="right"></div>
</section>
The container div is "slides" and it is what is being moved.
Here is my script's click handlers and transition function:
//click handlers
leftButton.on('click', function(){
var viewport = $(window).width();
var slidesContainerLeftEdge = $('#slides').get(0).getBoundingClientRect().left;
var slidesContainer = $('#slides').width();
if (slidesContainerLeftEdge == 0) { //if on first image (this is not working, help!)
slides.animate({marginLeft: ""+-(slideShowLimiter * 320)+"px"}, 200);
console.log("working");
} else {
transition("+=");
}
});
rightButton.on('click', function(){
var viewport = $(window).width();
var slidesContainerEdge = $('#slides').get(0).getBoundingClientRect().right;
var slidesContainer = $('#slides').width();
if (slidesContainerEdge < viewport + 320) { //if last slide
slides.animate({marginLeft:"0px"}, 200);
} else {
transition("-=");
}
});
function transition(direction) {
slides.animate({marginLeft: ""+direction+""+movement+"px"}, 200);
}
Hopefully you guys can help me out of a jam. Thanks in advance!
if(0 >=slidesContainerLeftEdge > -320){ // if first slide
slides.animate({marginLeft: ($(window).width()-$('#slides').width())+"px"}, 200);
}else{
//...
}
Just to follow the logic here you used for the rightClick, so when it's the first slide on the left, you'll move the slides to the left (by setting the margin-left) so its right matches the right of the window.
See Full Code:
leftButton.on('click', function(){
var viewport = $(window).width();
var slidesContainerLeftEdge = $('#slides').get(0).getBoundingClientRect().left;
var slidesContainer = $('#slides').width();
if (0 >=slidesContainerLeftEdge > -320) {
slides.animate({marginLeft: (viewport-slidesContainer)+"px"}, 200);
} else {
transition("+=");
}
});