I am trying to implement a script which changes images "every time" user scrolls down.
I read something about and I think the best practice is replace images once user reach a specific scroll position.
The website will have 3 main sections:
1) introduction: the core message + "instruction" to use;
2) animation: when user scrolls down, the animation will show. So every 10 pixel (or more/less) the image changes but the user keeps seeing the same section. It is a sort of GIF in which user has the control of the timing. It is useful in order to let the user able to see every drawing (or to go faster if they don't want to see all).
3) conclusion: last message + my contact.
Each section will have "100% of the device height" and "100% of the device lenght" (each device will have its own dimension). These numbers are just useful to let you understand.
In other words, the "animation" will follow this path:
1) first image at 0 pixel (from top, for example);
2) second image at 10 pixel (from top, for example) which replaces the first one;
3) third image at 20 pixel (from top, for example) which replaces the second one;
4) fourth image at 30 pixel (from top, for example) which replaces the third one;
ecc.
Do you know a way to implent this script?
I would fire an event every time the page is scrolled then get the position of the top of the target element, and then do my logic there. Here is a code sample:
// can be any target
$(body).scroll( function () {
// your even fired on scroll - get the offset of the closet parent element
// you will likely loop here
var position = $("elementYouWantToGetOffSetFor").position();
if(position.Top >= previousElementsTop) // guessing you need to check it against closest sibling
{
// then do your image swap here
$("yourtargetimage").src("pathtowherethisis");
}
});
Related
I am having a number (10) of objects which are clickable, but struggling with moving a selected one to the middle of the scroll view. You can see on the image below that number four is selected but not in the middle.
I tried to use:
myScrollView.scrollToHorizontalOffset(myScrollView.scrollableWidth / 2, true)
But it always bring the whole scroll view into the middle. Can anyone help with making it working? Thank you in advance.
Since You didn't put the Angular tag, I am assuming you are using the Typescript flavor of Nativescript.
In order to do this, you'd have to find a way keep track of your base (starting point) and your target (the one that the user just clicked) so that you can get there x offsets and animate the scroll from one to another.
Here's an example in your code behind:
export function() {
const base = page.getViewById('label1') as Label;
const target = page.getViewById('label2') as Label;
myScrollView.scrollToHorizontalOffset(target.getLocationRelativeTo(base).x, true);
}
Now, the code above will just do a minimum scroll to get to your target element (and you can use a different element other than the example label). But if you want to make it center, you can add an additional offset depending on how wide your scroll container is.
eg.
myScrollView.scrollToHorizontalOffset(target.getLocationRelativeTo(base).x + (myScrollView.width / 2), true);
Note that this is my hypothesis from something similar I've done before (just not needing to be center). So might need to play with the additional offset.
EDIT: (This is how to make it work specifically according to the OPs need)
myScrollView.scrollToHorizontalOffset(target.getLocationRelativeTo(base).x - (myScrollView.scrollableWidth / 2)), true);
I have a slide show of captions that move on side arrow clicks, and I need to change an image in the page once certain captions (labeled by individual ID's) hit position().left === 0.
I am able to get their location through .position().left, but that only happens upon load. How can I get the program to always listen for location? scrollLeft() doesn't work due to the nature of the scrolling settings and an interval does not give me the precision I want.
if ((($('#captionthree').position()).left) === 0) {
//removes initial image
$("img").remove('#imgone');
//appends the new image
$('#imagecontainer').append('<img id="imgtwo">');
}
I'm doing this on top of fullpage.js, if that paints a better picture.
Any help is appreciated!!
I'm relatively new to coding, so bear with me. I'm trying to create a menu (for an app) that appears when the user taps and holds on the screen. Basically I'm looking to make a menu similar to the Pinterest app click and hold menu functionality. (see it here: http://techcrunch.com/2013/07/31/pinterests-mobile-app-gets-path-like-animations-readies-personalization-options/ )
I've found the code to create something similar (http://www.jqueryscript.net/menu/Animated-Arc-Popup-Menu-with-jQuery-CSS3-Transitions.html) but I'd like it to appear where the user holds on the screen, not in a fixed location. I've talked with a professor about this and he suggested using offset(), but I'm not quite sure how to implement it. The menu would be hidden until the user triggers it.
Some general advice for programming is to break the program down into the smallest logical pieces you can and tackle those little pieces one at a time. a
attempt to alert a message upon clicking somewhere on the page, or in your active area
then try to create a 100 by 100 black box (div element) anywhere on the page when you click somewhere
Then try to get the box to appear where you clicked using the offset as your professor suggested
Then change what you previously did to be on mousedown and have another function happen on mouseup to remove that black box.
Once you have all that you can style that black box to look like a menu, and have functional buttons on it. You could create/destroy the menu item each time you click, or you could create it once, and toggle it's visibility / position on mousedown / mouseup.
Continue to check your work after every small step to ensure you have no errors. I recommend working in a html file on your local machine, at jsfiddle.net, some javascript editing software (I don't know any), or a combination of those.
Here's some help to get you started https://jsfiddle.net/rz7dayfy/ Click the orange box to try it out.
var myDiv = document.getElementById('myDiv');
myDiv.addEventListener('mousedown', function(e){
xPos = e.clientX - myDiv.offsetLeft;
yPos = e.clientY - myDiv.offsetTop;
alert('myDiv clicked at x: ' + xPos + ', y: ' + yPos);
});
It creates an event listener on the area in question, sounds like that would be the body of your page. Then it finds the x y coordinates of where that area was clicked. Y axis starts at 0 at the top and increases positively as you go down. X axis starts at 0 on the left and increases positively as you go right. The offset is because jsfiddle creates some padding around your results in the results window.
Please visit http://lindseymotors.com/v and click the photo up top of the silver truck. When the expanded view pops up, there is a row of photos below the main photo. When you click on them, it switches to that photo and says "Viewing" over the image you selected.
I need this to also scroll left or right (depending on which one is clicked) to focus on the one that says "viewing" in the middle of the photo reel.
The image being viewed is accessible by using $('#vehiclePhotoPreview'+photoID)
I've tried something like this, but it doesn't work.
var currentPhotoPosition = $('#vehiclePhotoPreview'+photoID).position();
$('.vehicleDetailExpandedPhotoReel').scrollLeft(currentPhotoPosition.left);
$().posotion gives you absolute position unfortunately. It won't be helpful in this case.
var increment = $('#vehiclePhotoPreview' + photoID).width() + 10; //10 would be the space between each image
$('.vehicleDetailExpandedPhotoReel').scrollLeft(photoID * increment); //assuming that photoID is always sequential
That essentially will get the position by using the active number and the current increment to set the scroll position.
I have a list of divs, and everytime I want to go to the next div I press a key. I need to check if that div is offscreen, and if so, I need to move the screen to show that div either using anchors or another method.
What is my best option for doing this?
Just to clairify, offscreen in my case means something that can't be seen right now without scrolling down. So if you are on the StackOverflow Home Page at the top, the last question on the entire page is offscreen.
Best option is to scroll your page to the element by getting its y-offset, and checking window height and calculating where to scroll page and then you can animate your page to that point.
//height of your div
var scroll = 250;
//animate from actual position to 250 px lower in 200 miliseconds
$(window).animate({"scrollTop": "+="+scroll+"px"}, 200);
so this is not the complete code but it might give you the idea.
check out jquery scrollTop
hope it helps,
Sinan.