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.
Related
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 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");
}
});
I have several pages of a manga in .png format, around 300, and I would like to set up a section on my website so that users can read the manga, browsing through the pages using two arrows ("next page" and "previous page"). I don't care about animations between pages. The perfect example of what I want to achieve is MangaFox (not the whole website, just the window where you can read the manga).
The basic setting is: a 300px wide menu with the chapters list on the left, and manga pages appearing to the right. Either in the menu or below where the manga page img, two arrows let you go to the previous or next page.
I thought about using iframes: links to HTML pages containing each manga page would target the iframe and appear in it. However, this requires me to ceate an HTML page for each page, and set the links to the previous and next page manually. I would have 300 html pages, so this would be too heavy and time consuming.
I also tried linking the chapters list directly to the .png files, but the images are not styled as I would like (at least in Chrome, they don't appear in the center of the page, but rather in the upper left corner) and I would still have to set the previous and next arrows link manually.
Whai I dream of is:
- there's a list of the .png files, that sets a fixed order for the pages;
- a dropdown list in the left menu can point directly to a certain page in the list;
- the previous and next arrows recognize which image is being shown, and a click on the arrows skips to the next or previous item on the list. If there's no page before the current one, the "previous" arrow disappears; same for the "next" arrow in case the item is the last on the list.
Maybe there's a way simpler way to do it I didn't think of, but I can't find it.
Thank you in advance for your help!
(P.S.: I'm not using WordPress, just plain HTML, CSS and PHP)
Here's the simplest way I can think of doing this:
Left arrow
<a id="leftArrow" href="#{n-1}"></a>
Right arrow
<a id="rightArrow" href="#{n+1}"></a>
Set up onhashchange function that reads location.hash and sets the src attribute of the img element utilizing an array of pages you've defined somewhere:
window.onhashchange = function(){
var img = document.query('img');
var left = document.query('#leftArrow');
var right = document.query('#rightArrow');
var pageNumber = parseInt(location.hash);
//put some error handling here for edge cases, then...
img.src = imagesArray[pageNumber];
left.href = '#' + (pageNumber - 1);
right.href = '#' + (pageNumber + 1);
};
The page links in your side menu would have href="#{page number}" and would trigger the onhashchange function when clicked, updating the image and the arrows.
Hope this helps.
If Have a div say
<div style="position:absolute;top:0%;left:94%;width:40px;height:40px;"/>
when viewed on different screen resolution the 94% starts to slide to the right, is that normal behavior.
The div is relative to the document, so when the window resize's , I want it to move along with the window.
I hope I am making sense. As I have it right now, it stays close to where I placed it, but as the screen gets larger or the doc is viewed on a higher resolution, it starts to shift.
Question: How can I position a div absolutely with percents and keep it in the correct position when the screen size/ resolution changes.
Edit:
Here is what I am trying to do. I am writing an application in which a user can pick some items from a tool box, drag and drop onto a window sort of like Visual Studio, except the result is not a form its an HTML page. I got all this working and it works just fine. My problem started when I started testing on different screens and resolutions the end result is always different from the screen the user used to create the html page. Every thing in the page is absolutely positioned except the main content area which is relative, it contains all the absolutely positioned Items.
What I had tried was the percent left and top values for the items on the screen, and that was what lead to my original question, at the suggestion of calculating my own values I tried this
var currH = $(window).height();
var currW = $(window).width();
var rW = currW / OrgWidth; //Orignal Width of the window when the item was placed
var rH = currH / OrgHeight; //Orginal height of the window when the item was placed
var x =$("#Button_Tools").offset().left * rW;
var y =$("#Button_Tools").offset().top * rH;
$("#Button_Tools").css("left", x.toString() + "px");
$("#Button_Tools").css("top", y.toString() + "px");
I calculate this when the window first loads to and it moves the button to the exact same location the percent value moved it to.
What am I doing wrong? Any Takers.
You can't position a div absolutely with percents and expect it to behave the same in every screen. Since you are using percentage, the value will be proportional to the size of the screen. 94% of 1000 is different than 94% of 1500.
You can set the right attribute instead of the left, something like:
<div style="position:absolute;top:0%;right:20px;width:40px;height:40px;"/>
You could also compute this value in the page load event based on the current width of the page, this way you guarantee that the position will be the same even when the window is resized.
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.