I am trying to customize a photo gallery in Squarespace. A test gallery can be found here - http://dzrtgrls.squarespace.com/gallery/test-2/4011897 . What I would like is to have the next or previous images load so that the prev - / + next navigation is at the top of the browser window. So it seems I need to somehow append each url with #content so the content div is at the top of the window whenever the previous or next links are used. Is there a way to do this with javascript or jquery?
Do you mean you want to make the content div scroll so that it's at the top of the page? You can do that with scrollIntoView:
document.getElementById('content').scrollIntoView();
Related
How to make a function, when someone click on a nav link to scroll down to certian position, like home top 0px, content top 400px, footer top 100px etc...(Javascript or jquery
You could add a call to one of the html elements with an ID associated with it.
For example: localhost:8000/your_page/#your_element which will scroll the screen to the location of the element on the page.
Let's say I have a situation like this:
The page is 4000 pixels long.
The user has scrolled down the page, so 1000 pixels of content are hidden above the viewport.
Then, the user clicks a button, and content of arbitrary length is loaded via AJAX at the top of the page, pushing the button (and the content the user was looking at) below the viewport.
I've tried writing a Javascript callback to scroll down to the content the user was looking at before they clicked the button, but the experience is not seamless (a scroll "up" when new content is inserted, followed by a scroll back "down").
Is there any way to keep the viewport fixed on the content the user was looking at?
This is a simplified example, but should get the point across.
<div style="height: 1000px; width:1000px;" id="top-div">some content above the fold</div>
<button id="button">Click Me</button>
<img src="img.jpg" alt="Some image the user was looking at when they clicked the button." />
<script>
$("button").click(function() {
$.get('/new/content', function(response) {
$("#top-div").before(response);
});
});
</script>
Delay displaying the new content
The closest to an elegant solution that comes to mind is to delay displaying the new content until it's within or below the viewport. In other words, don't change the height of any major layout elements that are above the viewport; change them when they are within or below the viewport, when it won't do any harm. Display them when it's safe to do so.
For example, the user scrolls to the bottom third of a very tall page. While they're down there, some Ajax content of a new or different size is loaded near the top of the page, but it's not displayed yet. The user scrolls back up through the page, and once all of the affected layout area scrolls into view, the new content is displayed, as if it was loaded just then.
Basically, when Ajax content is loaded, retrieve the scroll position of the layout element, and either display the content or add it to a queue, based on the current scroll position of the page. Anytime the user scrolls the page or clicks on an anchor tag (or any action that changes the scroll position of the page), check the queue to see if there's any content that still needs to be displayed, and determine if it can now be safely displayed.
Make the content collapsible
Another option is to have the Ajax content appear in a collapsible format. It could be displayed initially in a small size that doesn't affect the page layout (if the layout element is above the viewport). The user can then click on the content to toggle between the collapsed format and the full version or, in a variation of the previous idea, it could automatically expand when the layout element is scrolled into view.
Check out this fiddle:
http://jsfiddle.net/FYEYB/
Here's the important code:
$("button").click(function() {
//cache the org height
var orgHeight = $("#content").height();
//run your ajax request.
mockAjax(function() {
//in the callback ajust the height
$(window).scrollTop($(window).scrollTop() + $("#content").height() - orgHeight);
});
});
Basically in the callback of your ajax request, add the difference in the height of the container to what it was before. You will probably need to add a check to make sure the new content was indeed added above the viewport, but I'll leave you to figure that out.
I am using this JQuery plugin to show (Scroll to Top) button, but I want this link or button to be appeared after scrolling down of specific part of the page. For instance, inside the body tag I have many divs and many discription but I want the (scroll to Top) link to be appeared after scrolling down the third div inside the body.
What should I do to get this issue?
looks like you just have to set the top to the position of your div:
try changing
var top = $(document.body).children(0).position().top;
to
var top = $('#your_div').offset().top;
How to auto-hide page's header and footer, and show it by moving the mouse cursor's over one of them.
i am not know what you want but i have a small solution that you need.
hide the header footer after some sec on page load. and show the header and footer when user mouseover the top or bottom ' spaces where we still omit a object or space [blank area].
using jQuery you could do it like this:
http://return-true.com/2010/03/creating-a-slide-up-footer-using-jquery/
Demo here: http://return-true.com/examples/SlidingFooterExample.html
He's done it using onclick, you could easily change it to mouseover.
I'm wondering, is it possible to collect the height of a specific div container from a separate page with JavaScript? I'm using jQuery btw and I'm in need of comparing heights of div containers.
Edit: To clarify a bit more, I load content from a specific div in a separate page using jQuery. This content is faded into a different container with dynamic height. But in the small fraction of time before the content arrives, it shrinks down to it's min-height.
What I've done so far is collecting the height of the container before and after the load. But it only works after I've loaded content once. Because I don't have the height before it's been loaded the first time.
If the relationship between the pages is opener and [popup|child] window, then yes.
If not, you are going to run into a security wall. (unrelated pages should not have access to each other)
So, if the "other" page is a popup window that your page launched, or a child iframe that your page "launched", then yes.
I would use the jQuery .height() method to obtain the height, but how you get the object is up to you (depends on what attribute info you have etc.)
//get from popup
var otherDiv = popupWinRef.document.getElementbyId('id');
//get from iframe
var otherDiv = window.frames[frameIdOrIndex].document.getElementById('id');
alert($(otherDiv).height());
Well, you can't get it until AFTER it's loaded via jQuery. Then you need to make sure you're not having a conflict between two divs with the same ID.
From your comments it sounds like you are using ajax to load content from another page, you'll likely have the load div hidden... So I would position the loading div absolutely out of the viewport but not hidden. then get the height of your desired div but make sure you access it using the loading div and your desired div... something like this:
#divToLoadContent { position: absolute; left: -99999em; top: 0; } /* don't hide this div */
Script
var height = $('#divToLoadContent #myDesiredDiv').height();