I am using iron-router with a meteor application. A strange thing is happening. Certain links for routes (for instance /purchase) is taking me to the middle or the bottom of the page. The behavior seems to be random. Is there any way to ensure these take you to the top of the page?
Tell the window to scroll top when navigated to a route:
route: {
name: 'name'
template: 'template'
onAfterAction: function () {
scrollTop();
}
}
function scrollTop() {
window.scrollTo(0, 0);
}
Try using okgrow:router-autoscroll package.
meteor add okgrow:router-autoscroll
Scroll to top is okay for a forward journey in your site but If a user wants to go back it will put them back at the top of the previous page. The autoscroll package maintains the page position so when you click back it scrolls to where you were. It also has support for hash tag anchors
Related
When setting navLinks: true, fullcalendar makes anchor elements without a href property. That makes my page navigate to page root on click.
To resolve this issue tempraraly i have implemented this quick fix:
viewRender: function (view, element) {
var elements = $("[data-goto]");
elements.prop("href", "javascript:void(0)");
}
Now i cant say for certain that this issue is related this project beeing a .net mvc project with knockout or the way browsers handle anchor clicks without href.
If anyone could shed some light on this for me it would be much appritiated.
I'm using FullCalendar v3.9.0
This was due to Sammy.js not being set up correctly.
When clicking a link without a href tag sammy would redirect to root page automaticly.
Resolve by catching navigation to "/" and doing nothing.
Sammy(function () {
this.get('/', function () {
console.log("/");
});
}).run();
I am following this example https://kadira.io/academy/meteor-routing-guide/content/rendering-blaze-templates
When I click on my links the whole page is being reloaded. Is there any way to load only the template part that is needed and not the whole page?
Edit: Also I noted another problem. Everything that is outside {{> Template.dynamic}} is being rendered twice.
Here is my project sample. https://github.com/hayk94/UbMvp/tree/routing
EDIT: Putting the contents in the mainLayout template and starting the rendering from there fixed the double render problems. However the reload problems happen because of this code
Template.mainLayout.events({
"click *": function(event, template){
event.stopPropagation();
console.log('body all click log');
// console.log(c0nnIp);
var clickedOne = $(event.target).html().toString();
console.log('This click ' + clickedOne);
//getting the connID
var clientIp = null // headers.getClientIP(); // no need for this anymore
var clientConnId = Meteor.connection._lastSessionId;
console.log(clientIp);
console.log(clientConnId);
Meteor.call("updateDB", {clientIp,clientConnId,clickedOne}, function(error, result){
if(error){
console.log("error", error);
}
if(result){
}
});
}, // click *
});//events
Without this event attached to the template the routing works without any reloads, however as soon as I attach it the problem persists.
Do you have any ideas why this code causes such problems?
EDIT 2 following question Rev 3:
event.stopPropagation() on "click *" event probably prevents the router from intercepting the click on link.
Then your browser performs the default behaviour, i.e. navigates to that link, reloading the whole page.
EDIT following question Rev 2:
Not sure you can directly use your body as BlazeLayout target layout.
Notice in the first code sample of BlazeLayout Usage that they use an actual template as layout (<template name="layout1">), targeted in JS as BlazeLayout.render('layout1', {});.
In the tutorial you mention, they similarly use <template name="mainLayout">.
That layout template is then appended to your page's body and filled accordingly. You can also change the placeholder for that layout with BlazeLayout.setRoot() by the way.
But strange things may happen if you try to directly target the body? In particular, that may explain why you have content rendered twice.
Original answer:
If your page is actually reloaded, then your router might not be configured properly, as your link is not being intercepted and your browser makes you actually navigate to that page. In that case, we would need to see your actual code if you need further help.
In case your page does not actually reload, but only your whole content is changed (whereas you wanted to change just a part of it), then you should make sure you properly point your dynamic templates.
You can refer to kadira:blaze-layout package doc to see how you set up different dynamic template targets in your layout, and how you can change each of them separately (or several of them simultaneously).
You should have something similar in case you use kadira:react-layout package.
This is a different problem from a similar question about 'reload'. This use case has to use 'withReplaceState' to handle back button reloading.
I've found the FlowRouter documentation for FlowRouter.withReplaceState(fn), but I've been unable to find specific code examples and can't get it working.
My problem is with Isotope, a plugin that moves elements around when window is resized. User sometimes visits Isotope page, goes to another page, re-sizes window, then presses "back" button to return to Isotope page. Page has to reload to re-trigger the Isotope layout correctly for the new window size.
This is my route. How would I use FlowRouter.withReplaceState() to ensure that user who clicks back button is not seeing the cached page?
FlowRouter.route( '/work', {
action: function() {
BlazeLayout.render( 'body-static', {
content: 'work',
});
},
});
I've got a list of menu items and each is an a tag. Inside those, I've got notification bubbles insides a div. When the notification div is clicked, I'd like to first follow the a tag (the hash is always to a Meteor route, using Iron Router) before it executes the click event attached to the div. Since reverse-propagation hasn't existed since the netscape days, I thought maybe that click event could store a function as a callback when the route changes? Has anyone tried to do something similar? Couldn't find anything in the Iron Router docs about it. I'm currently mitigating the problem with a few Session vars, but would like to clean it up.
Without seeing what your code is currently doing (or even better, a simplified example), I am guessing a bit at what you are trying to do. Maybe you have something like this:
<div id="bubblething">Click Me!</div>
With a click event:
'click #bubblething': function() {
// Do the bubble thing.
}
But the problem is you'd like to trigger the click event after you route but the click is happening to early. Would it be possible to change it to something more like this:
<div id="bubblething">Click Me!</div> //no <a> tag.
With the click event handling the actually routing first then moving on:
'click #bubblething': function(){
Router.go('/yourroute'); // First you route
{ ... } // Code to handle the notification bubble.
}
You may have to update your styling a bit do to the lack of am <a> tag but that should be pretty simple. The routing is handled by the click and then other things happen. You can parameterize this so that instead of calling an id you call a class and inject the route.
I have a vertical menu inside a jScrollPane in a ASP.NET page. When the user clicks a menu choice it displays content in another panel relating to the selection. How can I make sure that the selected menu choice is in view when the page refreshes.
I'm looking for the same solution myself. You may have some success with my temporary solution using the scrollToElement api. Providing you can locate the specific menu item using a jquery selector you can have jScroll automatically jump to it in the scroll pane. eg
$(window).load(function()
{var api=$('#yourMenu').data('jsp');
api.scrollToElement($('.selectedOption'));
});
This will require the latest version of jscrollpane (http://jscrollpane.kelvinluck.com)
I wanted the same solution, and found this, which wasn't much help.
I eventually got it to work.
The position of the scrollbar is saved to localstorage, then when the page loads again, either by refresh or back from another page, if localstorage has a value greater than 0 which represents the top of the scrollbar (default, unscrolled position), it scrolls to that position.
var element = $(".scroll-pane").jScrollPane({showArrows:!0});
if(void 0 != element) {
var api = element.data("jsp");
$(function() {
0 < parseInt(localStorage.getItem("ScrollPosition")) && api.scrollToY(parseInt(localStorage.getItem("ScrollPosition")));
$(".scroll-pane").bind("jsp-scroll-y", function(b, a) {
localStorage.setItem("ScrollPosition", a)
}).jScrollPane()
})
};