I have tried using command like scrollTo(0) and packages like okgrow:router-autoscroll. I have read through many pages online. I am completely unable to make it so that when I load a new template via route (Iron Router) it automatically scrolls to the top.
Edit: I have tried all of the following to no avail:
$(window).scrollTop()
$('body, html').scrollTop()
$('body').scrollTop()
$(document).scrollTop()
window.scrollTo(x, y)
For those of you with the same issue. I ended up solving this with problem in all browsers with the following code:
Template.templateName.onRendered(function(){
$('.wrapper-header')[0].scrollIntoView();
});
This should work in all browsers as it did for me, and remove the necessity for flowrouter and Iron Router autoscroll addons.
Hope this helps!
Related
I am using Storybook version 3.3.15 on Windows 7 running node version 6.3.1 and npm version 3.10.6.
On running storybook, I see 'No panels Available' message in the bottom of the page where actions panels are rendered. I have imported addon-actions in addons.js: import #storybook/addon-actions/register and the module is also present in node_modules folder. I am not getting any errors regarding this during webpack compliation or in browser console.
How do I make the Action Panel appear?
Note: I cannot update the Node and NPM versions because I am working on a professional level app wherein lots of people are involved and its a very big codebase.
In my case they were simply hidden and in the wrong orientation. Had to use the D and A keyboard shortcuts to make them appear again.
in my case just hitting d worked
For me the whole main menu disappeared at one point. The only thing that helped was running sessionStorage.clear() in the console and then refreshing the page.
First of all, check if you have the addon panel set to show/hide in the dropdown menu at the top left of the Stoybook UI screen, also check the dropdown item called 'change addons orientation' (mine was changed and was bumped off screen because of screen width).
If that doesn't work, try setting the options in the storybook config.js file:
In the Storybook config.js file you can add an options parameter for some default settings, this includes setting the visibility and position of the addons panel.
import { addParameters } from '#storybook/react';
// settings for storybook - show and position addon panel
addParameters({
options: {
// display panel that shows addon configurations
showPanel: true,
// where to show the addon panel --- #type {('bottom'|'right')}
panelPosition: 'bottom',
}
});
In my case I was missing the .storybook/addons.js file. It looks like this became a requirement in a recent version because the actions add-on used to work fine for me initially.
To clarify potential confusion:
As the documentation specifies, you need to have a addons.js file in your hidden .storybook/ directory (most likely at the root of your project) even if all it contains is just this 1 line.
import '#storybook/addon-actions/register';
I Just found out it by trying different keys on my keyboard:
If you press "S" - it switches Sidebar in StoryBook Of
and On! Try it!
My Browser: Chrome, Operating system: Mac OS
In Mac I solved it by pressing fn + s.
I was having this problem; hitting S would shift my components without showing the sidebar, and even after clearing my localStorage and sessionStorage I could barely see the edge of my sidebar.
Then, I realized that I had zoomed in to see my components more closely, and that the sidebar was hiding/showing, but just off-screen.. I just needed to zoom out. 🤦♂️
Sharing here in case anyone makes the same mistake.
I had a similar problem and installing #storybook/addons (in addition to the steps you mentioned) fixed it.
Run:
npm i -D #storybook/addons
My site works fine when the data is in a template, but once I try to route to it using iron:router, a background image and most remaining content no longer appear. (Some of the content still appears with working css, JS components so I know that those files are being read. Also, when inspecting the element, all the text, images are still visible in the code, but not the website.
This works fine (index.html):
<body>
{{>home}}
</body>
This adds another {{>home}} section, but the new section is having issues rendering as explained above (router.js):
Router.map(function() {
this.route('home', {path: '/'});
});
Are you on the latest iron:router? I had a similar problem, and inquired about it in this pull request:
https://github.com/iron-meteor/iron-router/issues/1051
Latest response indicates this should be fixed now!
You've followed the wrong tutorial :( There are plenty of tutorials and articles out there explaining to define routes like you did.
However, the Iron Router project page explains how to define routes differently.
For more information on routes, have a look at this article about Iron Router as well.
Fixed: problem was not with iron:router but rather that not all elements were loaded into the page yet. Document.ready() works fine when I directly called template.
Issue is that when iron:router loads the template, the new page elements are being loaded after the JS files were already called (JS that animates the images/text in).
Solution: use rendered instead of document ready:
Template.MyTemplate.rendered = function(){
}
Currently, the only solutions I have found for animating between routes is just fade out the current page onBeforeAction and fade in the new page onAfterAction. But this is just lame.
I want to try to execute some really sleek transitions like these.
I believe this requires having multiple pages rendered on the page at the same time, but that seems very resources intensive and doesn't even seem to use iron router at all.
Any ideas how I can implement this?
I use a solution like this http://meteorpad.com/pad/5kii9SRbbnjiTHeQe
The MeteorPad doesn't allow to use IronRouter, so my example doesn't use it. In IronRouter you can use action() method to set "currentPage" session variable and always render "transitioner" template. Something like this:
Router.map(function() {
this.route('home', {
path: '/',
action: function() {
Session.set('currentPage', 'home');
this.render('transitioner');
}
});
this.route('about', {
action: function() {
Session.set('currentPage', 'about');
this.render('transitioner');
}
});
});
I use a wrapper for this. It also helps me to define transition styles and directions.
And be careful with subscriptions/unsubscriptions, becouse previous page will react to subscriptions changes before the transition is compelete!
This question seems to get asked a fair amount and there is no definitive solution, and a lot of answers out there are getting stale, or at least not applicable to the latest iron-router and Meteor 1.0.
I just did a bunch of searching around for the best answer and at least today it seems the packages for this are:
https://github.com/percolatestudio/momentum-iron-router/
and
https://github.com/ccorcos/meteor-transitioner/
The former hasn't been updated in a little while but has lots of commits. The latter has few commits but may be being actively worked on.
I'm in progress on trying them out so if I remember I'll check back in.
I've recently built and launched this page: http://www.thaiestatenetwork.com
It works great in Chrome, Safari, Firefox and even IE10, but in IE8 and 9 all I get is a blank page.
I've read through post here on SO about similar issues and based on that I've tried this:
going over my templates in an attempt to find DOM errors.
Tried setting position:static on html and body
commented out #font-face in my CSS (since I was getting an error in IE on BrowserStack related to #font-face)
Checked for potential CORS issues. Found none.
None of it works.
Strangely too, when I tunnel to my local dev machine through BrowserStack, everything works like a charm.
I should add that the site is built using router https://github.com/tmeasday/meteor-router and runs on Heroku using this build pack: https://github.com/oortcloud/heroku-buildpack-meteorite
I really hope someone out there has that fresh pair of eyes that will lead me on the right track.
I've solved it!
The issue turned out to be related to the way I was initializing Google Analytics (GA). I was doing this:
Template.menu.created = function() {
// GA initialization code here
};
I had to do this:
Template.menu.rendered = function() {
if ( typeof ga === 'undefined' ) {
// GA initialization code here
}
};
So basically I was attempting to initialise GA on first creation of my menu template, but instead I had to latch on to the rendered callback and add a conditional to make sure I only initialise GA once.
Overall I am not thrilled with my approach to initialising GA, but that is another matter entirely. It works.
I tried following the tutorial at http://help.adobe.com/en_US/AIR/1.5/devappshtml/WS5b3ccc516d4fbf351e63e3d118666ade46-7f11.html#WS5b3ccc516d4fbf351e63e3d118676a3fc7-7fea but just can't get it right.
I have an app with an iFrame. Dynamically loading into the iFrame are pages from a website. To ensure any links in these pages open in the local client browser, the iFrame content needs to call a function in the parent to launch the link as desired.
So the child iFrame needs to call the following function in the parent:
function openInBrowser(url) {
air.navigateToURL(new air.URLRequest(url));
}
How can I achieve this using the bridge technique?
Greg.
Ok, I guess the good old read the instructions worked! Although not in the above page, but a link from that page... ;(
I followed the tutorial at: http://help.adobe.com/en_US/AIR/1.5/devappshtml/WS5b3ccc516d4fbf351e63e3d118666ade46-7e5c.html
and it worked very well!
Greg.