Im fairly new to JS... please be gentle.
Can anyone suggest a way to pull off a delayed autoscroll effect on a block of text?
It's important to mention that my ultimate goal is to use this on a popup modal window, on iOS devices. And because iOS browsers do not display the scrollbar until user interaction, I am resorting to the auto-scroll.
In effect: I would like the page to load, wait a couple of seconds, then have begin to slowly scroll down. The scroll is intended to be a hint to the user that there is more content available, therefore if there is any way to stop or temporarily pause the auto-scroll on user interaction- that would be optimal.
I have searched for my answers a couple of hours now, but between not being able to initialize the found code to my design (again, I'm fairly green), and not being able to find a solution that achieves everything I need - I am turning to brighter minds.
I have set up a fiddle with my HTML and CSS: http://jsfiddle.net/zfMsQ/
Any help is greatly appreciated!
ps: This is my very first post on StackOverflow :)
My code:
Extensive. Linked above.
Here you go: http://jsfiddle.net/zfMsQ/3/
var roll = true;
var max = 0;
var text = $("#content");
function scroll() {
text.scrollTop(text.scrollTop() + 1)
var top = text.scrollTop()
if (top > max) {
max = top
if (roll) {
setTimeout(scroll, 50)
}
}
}
text.on("mouseenter mouseover mousedown", function(){
roll = false;
})
setTimeout(scroll, 2000)
Related
I have a site where I have each section as 100vh so it fills the height of the screen perfectly. The next step I wanted to implement was disabling the regular scrolling, and on scroll force the screen to jump smoothly to the top of the next 100vh section. Here is the example of this animation / feature:
https://www.quay.com.au/
I was having a hard time finding any answers for this as most things just deal with smooth scrolling when clicking on anchors, not actually forcing div relocation when the user scrolls up / down.
I just wanted to know what code I would need do this...
Thanks, been using stack overflow for a while but first post, let me know if there is anything I can do to make this more clear.
disclaimer: this solution needs some testing and probably a bit of improvements, but works for me
if you don't want to use a plugin and prefer a vanilla JavaScript solution I hacked together a small example how this can be achieved with JS features in the following codepen:
https://codepen.io/lehnerchristian/pen/QYPBbX
but the main part is:
function(e) {
console.log(e);
const delta = e.deltaY;
// check which direction we should scroll
if (delta > 0 && currentlyVisible.nextElementSibling) {
// scroll downwards
currentlyVisible = currentlyVisible.nextElementSibling;
} else if (delta < 0 && currentlyVisible.previousElementSibling) {
// scroll upwards
currentlyVisible = currentlyVisible.previousElementSibling;
} else {
return false;
}
// perform scroll
currentlyVisible.scrollIntoView({ behavior: 'smooth' });
e.preventDefault();
e.stopPropagation();
}
what it does is that it listens for the wheel event and then calls the callback, which intercepts the scroll event. inside the callback the direction is determined and then Element.scrollIntoView() is called to let the browser do the actual scrolling
check https://caniuse.com/#search=scrollintoview for browser support, if you're going for this solution
I would like to "restart" a gif from the beginning when I scroll down or up, and come back into view.
So for exemple, my page load, the animation start -> I scroll down or up -> I come back to the div with the gif, the gif has been reset.
I have found this great piece of js in codepen, which is working great when I scroll to the top and come back, but doesn't work when I scroll Down and come back.
https://codepen.io/anon/pen/aWvagO?editors=0010
the code looks like this :
$(window).scroll(function() {
var current = $(this).scrollTop(),
path = '//cdn.pbrd.co/images/5QABxgAp7.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);
});
Is there a simple way to make it work and keeping the code simple like this ?
Thanks a lot
I might be too late and this might be a bad solution. However, I solved a similar problem by having two duplicated gifs and alternating between the two when 'restarting' the gif. This seamlessly restarted the gif when needed, and technically it was the same gif. Hope this helped, Good luck!
I have designed my site with an image gallery that does not display the next / previous arrows until the mouse is rolled over them .next:hover{display: block} This is fine but the site is fluid and I did not think at all that hover (mouse over) does not work on touch screen! I do not want to keep the arrows on constant display unless the device is touch screen only like an ipad for example!
What is the best way to detect if the device is touch only and if so change display: none to display block automatically. Is there a jQuery way of doing this?
I hope this makes sense, I have googled it and search on S.O. but am unable to find a direct answer. That along with the fact that I am a bit (understatement) of a novice when it comes to jQuery!
Thank you for any help
I worked something out like this, the click counter also fires on touch events when I was testing it.
// Detect touchscreen only
var touchscreenonly = true;
var moves = 0;
var clicks = 0;
$("body").mousemove(function() {
moves++;
if (moves > clicks + 1){
touchscreenonly = false;
// now unbind these functions if you like
$(this).unbind("mousemove").unbind("click");
console.log('mouse moved, this is not a touch-only device');
}
}).click(function(){
clicks++;
});
I was in a same situation like you but, I did not wanted to use Modernizr, so as a quick fix I just checked for the window width.Most of the touch devices including tablets falls below the width of <=1024. So I wrote the below piece of code inside document.ready:
$(document).on("ready", function() {
if ( $(window).width() < 1025 ){
//Insert your code to add/display something different for mobile/tablet devices
}
});
Hope it helps someone.
recently, on a wide range of pages, I've seen objects moving on the screen accordingly to scrolling up or down the site. I have searched the forum, but I haven't found a solution to this yet. Is there a jQuery Plugin to achieve this?
Example
(flying cloud guy on the very bottom)
Thanks so much in advance!
It comes down to the left position being changed when amount you've scrolled changes: http://jsfiddle.net/pimvdb/hBHFz/1/.
var elem = $("#a"), // cache for speed
body = $("body");
$(window).bind("scroll", function() {
elem.css("left", body.scrollTop()); // set left to amount scrolled
});
You can view the site at www.highdwellercreative.com/colife. This site is based around the concept the the city will grow as the company grows and we wanted a different feeling then scrolling with the scroll bars provided. I have been working on a keypad style of navigation that consists of four directional arrows (up, down, left, right).
I am currently using setInterval() function to loop the scrollTo Plugin on mousedown() and the clearInterval() function to end the loop on mouseup().
I have also set the interval to repeat at 1 millisecond to achieve smooth scrolling. I have included the code that makes what I have accomplished so far work but it is still a bit rough, especially in Firefox 4. So far this does work in all browsers, including IE, but it could stand to be smoother and I am at a loss of how to accomplish this. Also if you click on one of the navigation buttons and immediately do a right click on it, the page gets stuck scrolling in that direction. Any help on how to improve this would be greatly appreciated.
var rightId;
$('span#right').mousedown(function() {
rightId = setInterval(function(){$.scrollTo('+=5px', {axis:'x'})}, 1);
}).mouseup(function() {
clearInterval(rightId);
});
var leftId;
$('span#left').mousedown(function() {
leftId = setInterval(function(){$.scrollTo('-=5px', {axis:'x'})}, 1);
}).mouseup(function() {
clearInterval(leftId);
});
var upId;
$('span#up').mousedown(function() {
upId = setInterval(function(){$.scrollTo('-=5px', {axis:'y'})}, 1);
}).mouseup(function() {
clearInterval(upId);
});
var downId;
$('span#down').mousedown(function() {
downId = setInterval(function(){$.scrollTo('+=5px', {axis:'y'})}, 1);
}).mouseup(function() {
clearInterval(downId);
});
You could certainly put these all into a single function:
function moveAround(elem,dir,moveAxis) {
var moving;
$(elem).mousedown(function() {
moving = setInterval(function(){$.scrollTo(dir+'=5px', {axis:moveAxis})}, 1);
}).mouseup(function() {
clearInterval(moving);
});
}
moveAround('span#left','-','x');
moveAround('span#right','+','x');
moveAround('span#up','-','y');
moveAround('span#down','+','y');
Just in terms of functionality, you may want to make a double click move you 500px or something. Just so people can get around the city faster. :)
An alternative way to do this would be to use .animate, with a callback function that called the same function (as long as the mousedown was still active).