I tried to scroll the div tag in the right side but this is not worked. But the scroll left function and scroll right with animation is perfectly works. But i want to scroll right without animation I tried code something like this
$().ready(function(){
$("#container").scrollLeft(500); //This works
return hus;
});
function hus(){
$("#container").scrollLeft(-200); //This is not work
}
But i want to scroll the right side without animation how can i do it?
I am not sure what you mean about "scroll right".
$("#container").scrollLeft(500)
scroll the div to the x-position of 500px (This works)
$("#container").scrollLeft(-200) scroll the div to the x-position of -200px, this is not a valid position since the minimum value is 0px, this is the left-most position, and you can't expect that it will "float" to the right side like a circle loop
scrollLeft: leftPos - 800 doesn't "scroll right" as you thing, it scroll the div element to the left, too
So, as I guest, there are 2 posible case that match your problem
Let's begin with:
var leftPos = $('#container').scrollLeft();
We suppose that:
leftPos = 1000, this is current x-position of the div
scrollWidth = 10000, obtain from $('#container')[0].scrollWidth
width = 500, obtain from $('#container').width()
If you want to move 200px to the right from current position, that is 1200, you can use:
$("#container").scrollLeft(leftPos + 200);
If you want to move to the right position that is "200px away" from the right side, that is 10000-500-200, you can use:
$("#container").scrollLeft(scrollWidth - width - 200);
Hope this can solve your problem. (Sorry, my grammar is not very well)
You can set a duration of 0 or 1 ms which would do the trick:
var leftPos = $('#container').scrollLeft();
$("#container").animate({
scrollLeft: leftPos - 800
}, 0);
An element is set to the left side by defaults. In this sense, there's no way you can scroll the element "in the right side" (a.k.a. to the left) at the very beginning.
In your case:
1. $("#container").scrollLeft(500); //This works
This would work because you just move the element to the right side for 500px.
2. $("#container").scrollLeft(-200); //This is not work
This would not work since you are already on the left-most side, you are not able to scroll an element out of the outer box.
3. var leftPos = $('#container').scrollLeft();
$("#container").animate({
scrollLeft: leftPos - 800
}, 500);
});
I am not sure what do you mean by "work perfectly" in this case, due to the lack of the context.
If what you want is to move the element "to the left" without animation, you may simply set $('#container').scrollLeft('200');
(since you already set the element to scroll to right for 500px at the very beginning.)
You may check on jsFiddle for the example. If you want to turn off the animation effect, you can just set the duration to 0.
Related
I am trying to create a page which contains a bunch of blocks (that would usually contain 'overflow: hidden' text that can be expanded by clicking on the box). But when I click on the box to adjust its height (to show all the text) I also want to bring that box into focus by using ScrollTop. It looks weird if you click on the box to expand its height if it remains out of view within the browser window.
I have a jQuery function that animates the height change and animates the ScrollTop repositioning nicely, however it often looks very choppy to me. It's not consistent. Sometimes it's pretty smooth, other times it'll adjust the box's height and then very abruptly scroll, which has a very unpleasant herky jerky effect. Adding to the odd behavior, is that I cannot scroll the window manually using my mouse for several seconds after the function completes. It's as if it's blocking manual mouse scroll.
I've created a little jsfiddle (sans text that I would usually place inside the right-hand boxes).
jsfiddle
$(document).ready(function() {
$(".right").click(function() {
var currentHeight = $(this).height();
$(this).animate({
height: (currentHeight == 100 ? 200 : 100)
}, 400, function() {
var offset = $(this).offset();
$('html, body').animate({
scrollTop: offset.top
}, 1000);
});
});
});
Maybe I am misunderstanding you, but the way you have it set up, the height will change, and then after it completes, it will move the scroll position, at a slower speed even.
Don't you want to do these at the same time and speed, instead of sequentially?
$(".right").click(function () {
var currentHeight = $(this).height();
$(this).animate({
height: (currentHeight == 100 ? 200 : 100)
}, 400);
var offset = $(this).offset();
$('html, body').animate({
scrollTop: offset.top
}, 400);
});
Demo: http://jsfiddle.net/NpdDN/
Also, this will essentially "block" mouse scroll during the animation, because it is continually setting an absolute scroll position, overriding anything your mouse does.
okay heres the scenario. I have a one page website with may sections using anchor links. Whe the user is on a secondary layout (page) and when they click on to go to a section on the main page again, for some reason the graphics dont load properly until a scroll happens. All I want to do is whenever the main layout is loaded, no matter which anchor it loads to, simply scroll the page up or down by 1 pixel.
$.scrollTo({ top: '+=100px', left: '+=0px' }, 800);
I tried the above, but this code simply takes the user 100 pixels from the top. I don't want that to happen, i.e. not from the top but from where ever the user is on screen.
use jquery scrollTop() to set the scroll position to the current scroll position + 1:
$(window).scrollTop($(window).scrollTop()+1);
I have a similar problem. I want to scroll down 1 pixel and then 1 pixel up, so the user hopefully won't notice anything at all. I did this:
window.scrollBy(0, 1); // 0 pixels horizontal and 1 pixel down
window.scrollBy(0, -1); // 0 pixels horizontal and 1 pixel up
UPDATE:
But I might end up using JQuery instead. All I want is the scroll event to fire and I can do that with:
$(window).scroll();
A pure JavaScript solution without the jQuery overhead:
window.scrollY += 100;
With jQuery (and a fancy animation):
var cur = $(window).scrollTop();
$(window).animate({scrollTop: cur + 100});
$("html, body").animate({scrollTop: ($(window).scrollTop() + 1)});
I have a row of images that are moving left or right with animate(). I am trying to make these images loop infinitely so when you click next the last image moves to the first position. Why doesn't $(this).css("left", "-320px"); work in the if statement below.
$("#right").click(function(){
$("#sliderWindow").find("img").each(function(i) {
var left = $(this).css("left");
$("#imageContainer" + i).animate({"left": "+=220px"}, "slow");
left = parseInt(left);
left += 220;
left = left + "px";
if(left === "1220px") {
//Why doesn't this work?
$(this).css("left", "-320px");
}
});
});
That code is pretty messed up. :P But I think your statement is working, if only for an instant.
I'm going to assume that the <img>s returned by find("img") are the same as your elements with ID "imageContainerN". In which case, the problem is probably that you are setting its position while it is in the middle of an animation. It probably ends up at -320px at that moment and remains there until the next animation tween which likely happens a few milliseconds later.
You could try something more like this (the important part is swapping the order of the animation and test)...
$("#right").click(function() {
$("#sliderWindow").find("img").each(function() {
if (this.offsetLeft >= 1220) {
$(this).css("left", "-320px");
}
$(this).animate({left: "+=220px"}, "slow");
});
});
Reason
Consider what happens when you set up an animation in jQuery.
1) jQuery sees you want to go +220px from current position
2) Let's say the image is currently at 100px... then jQuery says, "Okay, I'll take you from 100px to 320px over the course of, say 1 second
3) jQuery now forgets about the image's current position and just calculates where it should be to satisfy the original animation parameters on each tween
After the animation begins, you then do your if statement to reposition the element, so the following might be what happens over time...
1) Animation calculated based on parameters (current position 100px, desired position 320px)
2) After 10 millisecond, the image moves to 102.2
3) Your code executes (pretend it returned true for the current 102.2 position)
4) Your code repositions the image to -320px
5) The animation tweens again after 10ms and moves the image to 104.4px (it now appears that your image was never moved to -320px)
6) The animation tweens again and moves the image to 106.6px
7) The animation tweens again and moves the image to 108.8px
8) And so on until the image ends up at 320px
I hope that makes sense. I haven't actually looked at the jQuery animation code, but this is likely what was happening.
I have div with images inside it and need to scroll it left and right. I,ve managed to get the scrolling to work, but now I need it to stay in the displayable area.
I need to use jQuery
$('#next').click(function() {
$('#slides').animate({left: '-=80',}, 2000, function() {});
});
$('#prev').click(function() {
$('#slides').animate({left: '+=80',}, 2000, function() {});
});
The two "buttons" is used to scroll.
How do I get the slides' position.left to stay between 0 and -1120 ?
This will be the bottom of my slideshow. The large images will be at the top.
How do I change the z-index of a div ?
You change the z-index using css:
div.class {
z-index: 60;
}
You should get the width of your displayable area then by making use of the width() method.
If you have the maximum width you can use you can easily implement a check before your animation. So if the new width (current - 80) is bigger than 0, fine ... animate it. If not, don't.
Same for scrolling to the right. If it's bigger than your displayable area's width, then don't scroll.
EDIT
You changed your question slightly, so to get the current left value you can check it with:
$('#element').offset().left
This returns the current integer value of your left attribute. Thus again you can verify its current value and compare it with the one that it'd be like after you animated it. If it's too big or too small, don't scroll.
You can check the css left value is in the interval:
if(parseInt($('#slides').css('left')) > -1120 && parseInt($('#slides').css('left')) < 0){
....//animate here
}
I'm writing a simple tooltip that can hold HTML tags. Please check http://jsfiddle.net/Qkwm8/ for the demo.
I want the tooltip box to show properly regardless of the position of element, in this case <a>, that shows tooltips on mouseover event.
The tooltips are shown fine except when <a> floats right (or is at the end of the line) or at the bottom of the screen where it doesn't show properly, it appears off the screen
If the <a> floats right, or at the end of the line, or is at the bottom of the screen, I want the tooltip to change position so it remains visible
Thank you.
Update demo link
here's the complete result: http://jsfiddle.net/Qkwm8/3/
You can use the document width to check how wide the html document is and adjust the left position accordingly. Say:
//set the left position
var left = $(this).offset().left + 10;
if(left + 200 > $(document).width()){
left = $(document).width() - 200;
}
I used 200 here because you are setting your tooltip to 200px wide. Something similar can be done with height.
There is also a window width but I always get confused about the difference so you should check which one gives you better results.
An example of the bottom of the page is:
//set the height, top position
var height = $(this).height();
var top = $(this).offset().top;
if(top + 200 > $(window).height()){
top = $(window).height() - 200 - height;
}
Again, using 200 since you are setting your tooltip to 200px height.
$('a.show-tooltips').mouseover(function() {
if(($(this).parent()).css('float')) =="right") add the proper class to left
else -> the proper class the right
....
}