So in my site, when a button is clicked,I dynamically generate a div, which contains a grid of images. It goes like this:
$('.prod-images').click(function(){
var prodImages = generateProdImagesGrid(this);
$('#prod-images-grid').html(prodImages).show();
});
This works fine. And I have another button which will close this div on click.
Now this div can be taller than the screen and require vertical scrolling. The problem is that because of all the CSS/styles in this page, this div always opens only at the scroll position where it was closed. So when I open it first time, it is scrolled to the top and everything is fine. Now, suppose I scroll this div halfway down and then close it. Next time when it is opened, it opens at that scroll position.
I tried doing:
$('#prod-images-grid').html(prodImages).scrollTop(0).show();
This does not work (at least in chrome) because the div is not fully rendered when the scrollTop() call is executed.
The only way I can make this work is to give a long delay between the div rendering and the scrollTop call like so:
$('#prod-images-grid').html(prodImages).show();
window.setTimeout(function(){
$('#prod-images-grid').scrollTop(0);
},10000); //call scrollTop after 10 seconds
As you can imagine, this is not at all a good solution. Does anyone have any suggestions on how I can render the div so that when its visible, it is scroll to its top position?
Doing:
$('#prod-images-grid').html(prodImages).scrollTop(0).show();
means that it's the <div id="prod-images-grid"> which gets scrolled; since this div has no content, it cannot be scrolled.
Rather do:
$(document).scrollTop(0);
$('#prod-images-grid').html(prodImages).show();
The 0 argument of scrollTop can of course be modified to point to the position of the document where you want your dynamically generated div to show.
You can handle a function after the contents is showing whith this propety of .show():
$( ".target" ).show(interval, handler);
Like this:
$('#prod-images-grid').html(prodImages).show(1, function() {
$('#prod-images-grid').scrollTop(0);
});
(you can change 1 for any other value)
Related
My site has a div where content is loaded using the Ajax load method. When any of several links on the home page is clicked, another div on that page is loaded with the content from the selected url. Here's the div:
<div class="main_text">
<div id="C2"><span style="color:black">MTX</span></div>
</div>
Here's the script:
<script>
function ShowAjax(type) {
var filename = "text_" + type + ".htm"
$( "#C2" ).hide().load( filename ).fadeIn(500);
}
</script>
The problem is when I load a new page into a div using the AJAX script shown above, the new page doesn't always load at the top if I had scrolled down on a different page before loading the new page.
I would like the new content to load at the top of the div, not somewhere farther down the page.
I have tried two things so far. The first one is calling scrollTop right after the load:
$(" #C2 ").scrollTop();
The second one is a script at the top of each page to fire on document ready:
<script>
$(document).ready(function(){
$(this).scrollTop(0);
window.scroll(0,0);
console.log("ready to scroll top");
});
</script>
The console.log shows in the dev console, but it doesn't scroll to the top or start at the top.
How can I get the pages to load with the Ajax load method and always appear at the top of the div, with the first line of the text showing instead of starting somewhere down the text (for example, starting on paragraph 3)? Or alternatively how can I force it to scroll to the top after page load?
First, you appear to be using scrollTop wrong. Scrolltop with no argument tells you WHERE the scrollbar is on the element, if there is one. Scrolltop with an argument of a height sets the scrollbar. So $("#C2").scrollTop() would probably return 0 since the element probably has no scrollbar. And since you never use the value, it wouldn't do anything. You also probably want to change the scrollbar of the entire document. In reality you would need something like this:
$(document).scrollTop( $(target).offset().top );
Here is an example in jsbin. Scroll down to the bottom to see the buttons to click, and then it will bring the document scroll to bring the target element to the top of the viewport.
offset returns an object with top and left properties. Giving the position of the element relative to the document. .position gives the position relative to the parent. Using that top number, you can then use that in scrollTop to change the position of the document.
scrollTop then takes that number (the top position of the element) and scrolls the document (or other element) to that position.
It also sounds to me like you are trying to make the element at the top of the page receive the content, regardless of which div was clicked?
If that's the case, then either directly select that element
$('#topElement').hide().load( filename ).fadeIn(500);
Or use one of the actual ajax methods that load is the shortcut for, and target that element in the success callback
$.ajax({
url: filename,
success: function( response ){
$("#topElement").hide().html(response).fadeIn(500);
}
)
I have gone through all related questions. But didn't find any answer.
My question is i have scrollable div tag, a chat window, in which images can be dropped as well. I have span tag at the end of every message so using this code the div tag scrolls properly to the bottom.
var EndChat = $(myid);
var chat_target = EndChat.find('span').last();
EndChat.scrollTo(chat_target, 1000);
But When i append Image after resizing it, It doesn't get to the bottom. It stop at 1/4th of the image.
And when the chat loads in the beginning, if there are many images, the scrolling stops even more far from the bottom. Please Help
Why don't you scroll to the bottom of the chat using:
EndChat.scrollTop(EndChat[0].scrollHeight);
It works: http://jsfiddle.net/shawn31313/mb6JA/
In order to make sure the images have loaded before scrolling, attach an event to the load, something like this:
$('.chat img').on('load', function() {
var chat_target = EndChat.find('span').last();
EndChat.scrollTo(chat_target, 1000);
});
If I'm not mistaken, whenever an image in .chat is loaded, it'll trigger the scroll to the footer. You could modify it as necessary :)
I installed jScrollPane on my website and can't make it work.
My website works as follows: from the main page, pages are loaded dynamically using jQuery's load() method. In the page I load I have the following script to launch jScrollPane:
$(function(){
$('.scroll-pane').jScrollPane();
});
Which seems to be called. No problems so far I guess. The problem is that the page, at the beginning, is not long enough to need a scrollbar. I have hidden content that shows up only on specific actions (i.e. clicking on a button shows the content of a certain paragraph), and when I click to show the content of a hidden div, the scrollbar doesn't appear.
I also tried to call $('.scroll-pane').jScrollPane(); as I show the new content (i.e. in the event that triggers .show() on the hidden div I also call $('.scroll-pane').jScrollPane();) but I had no success with that either.
Can anyone help me?
Thanks
EDIT:
I forgot to mention the structure of the page: I have a div which has class="scroll-pane" and is loaded with the page load and it contains small hidden divs that show up when clicking on particular areas. I would like to add a scroll bar to the div with the class scroll-pane in order to make the content of the showed div scrollable (right now the content stays in the size of the div but it's not scrollable since no jScrollPane scroll bar is shown).
Update:
I tried to put $('.scroll-pane').jScrollPane(); in the callback of the .show() method of my divs and tried to put class="scroll-pane" to those divs that appear, but again nothing is shown (the scroll bar doesn't appear and the div is not scrollable).
Check this demo provided by the developer of the plugin
http://jscrollpane.kelvinluck.com/examples/invisibles.html
When the element is first shown you simply have to (re)initialise the
scrollpane (or you could even use autoReinitialise if you like) and
its width and height will be calculated correctly.
All that you need is
$(function(){
$('.scroll-pane').jScrollPane({autoReinitialise: true});
});
and may be the recent version of the plugin
I suggest to use css visibility property instead auto reinitialising. Each time you call show() method, jScrollPane reinitialises itself. This takes time and has impact on animation.
If you use, say, slide..() methods, then animation starts properly, but scrollable container (and its elements) appears little bit later, and that looks bad.
var wrapper = jQuery('#gallery-album-preview-wrapper');
if (wrapper.css("visibility") == "hidden") {
wrapper.css("visibility", "visible").css("display", "none");
}
if (wrapper.is(":hidden")) {
wrapper.slideDown(1000);
} else {
wrapper.slideUp(1000);
}
I am working on a page where on the bottom sits an element, that is activated by tapping on it. The element then expands (instantly) in height to reveal its content. It's done by adding a class (".active") with jQuery to that element.
The things .active really adds is a display block, and some height. However every time you tap it, the browser jumps back to top. If I comment out the addClass part in the javascript, it behaves normal.
Just for the heads up, the anchor tag does not have a "href=#".
As a temporary fix you could put the screen back into position each time it is clicked..
$('.troublemaker').click(function(e){
var currentScroll = $(document).scrollTop();
setTimeout( function(){ $(document).scrollTop( currentScroll ); }, 10 );
});
I've been looking around for answers and everything I apply to my own code doesn't seem to work. I have a DIV with content. When I click on a link the DIV fades out, the content changes via the jQuery .html event and then the DIV fades back in. This gives the illusion of a gentle page change on my site. This DIV has a jScrollPane which works fine before any links are pressed.
What is happening however is that the scroll pane 'draggable area' stays the same size when the content is re-written and there is more or less, or even if there is no need for one at all.
I need to get the scroll pane 'draggable area' to change size in relation to the new content and I need it to scroll back to the top inbetween the .fadeTo fade out and in effect.
I've tried some of the following:
function showhome() {
$('#infohome').stop(true,true).fadeTo(100,0)
$('#infohome').delay(100).html("NEW CONTENT")
$('#infohome').stop(true,true).delay(200).fadeTo(100,1)
refreshNav();
function refreshNav() {
var element = $('.scroll-pane').jScrollPane({scrollToY(0, animate)});
var api = element.data('jsp');
}
As well as:
myJScrollPane.getVerticalScrollbar().setValue(int Pos);
and a few others.
As always, any help would be greatly appreciated.