Since I first posted this issue, I have decided upon an approach but either it is just plain wrong or improperly implemented.
ISSUE
I have several pages containing div content and using jQuery Masonry for the layout. These pages have cross referencing links via anchors pages. E.g the fifth content div on page A links to an anchor on the ninth div on page B.
The issue is the anchor positions don't properly exist until Masonry finishes - i.e. the anchors work fine with Masonry turned off, but links end up going to the top of the pages when Masonry is functioning.
Attempted Solution
I am presuming that I need to stall the anchor seeking action until Masonry has finished up but I can't figure out how to implement my presumed method of calling a scroll function after Masonry has completed.
Am I even close with the way I am trying to code it:
/* Masonry */
jQuery(document).ready(function() {
var $container = $('#items');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
columnWidth : 470,
isAnimated: true
});
});
//Call Scroll function after Masonry complete
msnry.on( 'layoutComplete', function( msnryInstance, laidOutItems ) {
if (window.location.hash) {// Scroll function
setTimeout(function() {
$('html, body').scrollTop(0).show();
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top -20
}, 1000)
}, 100);
};//End scroll function
}); // End Masonry complete function
});
While it would be nice to have a smoothscroll solution. I would be more than humbly grateful to just get to the right part of the page.
PS - I am also aware that there may be an issue with getting an accurate or consistent response from Masonry jQuery masonry how to call layoutComplete
Related
I have a slideshow plugin called flexslider which is only displayed after the page has fully loaded and all images have been downloaded.
I also have an anchor tag on this page which is being invoked before the page has fully loaded.
This is causing the anchor tag to be in the wrong place as the page height has changed to accommodate the slideshow.
You can see what I mean here: http://ypc.org.au/ministries/form#transform2015
I've duplicated the page and removed the slideshow and it seems to work but I need it working with the slideshow:
http://ypc.org.au/ministries/form2#transform2015
Can someone suggest how I could make the anchor tag load only after the page has fully loaded? Or is there something simple I am missing?
Thanks!
Edit:
I think this might be how flexslider is loading the page:
<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
This is probably your solution. Use this jQuery code.
<script type="text/javascript">
$(window).load(function() {
$(".your-anchor-tag").fadeOut();
});
</script>
I had the same problem, because i was using a slideshow, and because of other responsive elements so i can't determine the height of the images for example.
You can use a JQuery script, this can postpone the anchor link after the page is loaded, i added an offset of 20 px also (if you have a sticky menu bar you can make this space bigger).
$(document).ready(function() {
if(window.location.hash) {
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top - 20
}, 500);
}
});
This is driving me a little crazy as I just can't get it to work :(!
I have jQuery tabs set-up as follows (all working) :
$(".tabs_area" ).tabs({
fx: { duration: 'slow', opacity: 'toggle' }
});
I then have a scroll to anchor focus mechanism (again works fine in terms of the function itself) :
$('.tabs_area li a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 500,'easeInOutExpo');
event.preventDefault();
});
My problem is that sadly they won't work simultaneously. When I click the tab, it correctly displays the corresponding tab content BUT it doesn't scroll you to the start of this content. You have to click the tab again for it to then do the scroll to the content, which isn't good.
Sadly the reason I need is that I am using this on a mobile website, and when you click the tab, although it does actually change the content, it is bellow the tabs menu, and therefore below the visible area of the screen, hence why I want it to swap the content then scroll you down to this so you can see it, and of course with one click only.
So I think I need to combine the scroll functionality within the tabs set-up code... somehow... as a callback or something... but I just keep breaking it :(!!
Any help would be so much appreciated.
Thanks in advance,
TJ
Why don't you use the show option for jQuery Tabs?
Seems to do what you wish to do.
Check the solution
$(".tabs_area" ).tabs({
show: function(e,ui){
$('html, body').stop().animate({
scrollTop: $(ui.tab.getAttribute('href')).offset().top
}, 500,'easeInOutExpo');
}
});
I want to automatically scroll to a particular div which is at the bottom of the page my [data-role="page"], but it's not working. The scroll bar still remains at the top but I want it to scroll down when the page loads. Let me know if you need better explanation. Thanks in advance.
You can bind to the pageshow event and then use the $.mobile.silentScroll() method to scroll the desired element into view. Here is an example:
$(document).delegate('.ui-page', 'pageshow', function () {
//get the offset of the element
var offset = $(this).find('[some-element]').offset().top;
//now scroll to the element
setTimeout(function () {
$.mobile.silentScroll(offset);
}, 0);
});
Here is a demo: http://jsfiddle.net/JNSRn/
The setTimeout allows the scroll to run after everything else that has been queued to run actually runs.
You can change the .ui-page selector to an ID or class to only run this code on a specific page or on a specific set of pages, currently it will run the event handler when any jQuery Mobile pseudo-page is shown.
Docs for $.mobile.silentScroll(): http://jquerymobile.com/demos/1.1.1/docs/api/methods.html (Bottom of page)
You can try creating a anchor tag and clicking it (you don't even need to attach it to the DOM, for example
var a = $('<a />').attr('href', '#myParticularDiv').click();
I have an annoying issue, I want to reload the page I am on programmatically, whilst maintaining a page transition, but I don't want to double it up in the DOM!
Can you post your relevant code? What function do you use?
You are aware of the properties of changePage?
$.mobile.changePage("#pageId", { allowSamePageTransition : true, reloadPage: true } );
Otherwise you can always remove the previous page yourself
$('#pageId').live('pageshow',function(event, ui){
$(ui.prevPage).remove();
});
This is my accordion: http://muso-syndicate.com/accordion/index9.htm - N.B. only currently styled for SF, FF, doesn't currently work in IE
If you select a 2nd category header once another one has been opened, it doesn't re-focus on the new header. By example, click on 'Classical' then scroll down and select 'Jazz', it doesn't automatically scroll back up to the top of the 2nd category.
Ideally, I'd like to add a 'scrollTo' function to '.bind' to the jQuery UI library. However, I have tried various solutions suggested on StackOverflow but none seem to work for me!
As the categories will vary in height as more content is added, I'd prefer not to use a solution that uses a fixed pixel scrollTo solution as this will require constant altering as new content is added to each category.
Any suggestions would be greatly appreciated as several folk seem to be scratching their heads on this one!
UPDATE:
I've got much closer to a solution for this but still requires some tweaking to stop the focus occasionally scrolling past the category header. Please see code below:
$(function() {
$( "#categories" ).accordion({
collapsible: true,
autoHeight: false,
active: -1,
change: function(event, ui)
{
$("#categories").bind("accordionchange", function(event, ui)
{
$("#categories").animate({scrollTop: $(ui.newHeader).offset().top}, 1);
});
},
});
});