I have a "TabsPage" which is the first page of app. I use this.tabs.select(3) inside ionViewDidEnter of this page to select the 4th tab. This opens the 4th tab as the default tab but the div with class of .scroll-content doesn't have top margin so it goes up behind header. However if I use timeout like:
setTimeout(() => {
this.tabs.select(3);
}, 5000)
Everything seems okay when 4th tab is opened. What do you think the problem can be?
This sounds like an issue with your declaration of the type of life cycle event you are using. You declare the tab after the view has been created and I suspect there is a miscommunication between the firing of the tab select and the creation of the view itself ( that's why you are using a setTimeout() which is really hacky ) .
You can read up more on the life cycle events here under the section Lifecycle events
What you could try is to hit ionViewWillEnter(){} and set the tab without a timeout.
There is also a tab input property which you should be able to use in your tab tag.
<ion-tabs selectedIndex="3">
selectedIndex (number)
The default selected tab index when first loaded.
If a selected index isn't provided then it will use 0, the first tab.
Because the selected index is defined in the tabs components sitting in the view there should be no issues with view initialization of the tab.
Related
With this code I want to create an event listener for whenever chrome storage updates.
I want 2 things to happen when the event listener is triggered:
The code will console log the updated values. This part works.
I want the HTML for the extension (the document that opens in the corner when you click the icon) to update and render the data value that is in chrome storage. This is that part I need help with.
chrome.storage.onChanged.addListener(function(changes, namespace) {
//part 1
console.log('New data type is %s. New value is %s',
changes['type'].newValue, changes['data'].newValue)
//part 2
document.getElementById('output').innerHTML =
changes['data'].newValue
});
I realize that calling "document" inside the function doesn't make sense, but I'm unsure how to move forward to get it to render in the extension's HTML.
I tried creating an event listener for when the context menu is accessed (users can update the chrome storage but clicking a button in the context menu) but I couldn't get it to work. Also the event should trigger when chrome storage is updated, not when the context menu is simply accessed.
Right now I get this error:
Error in event handler: TypeError: Cannot set property 'innerHTML' of null
(There is an element with id 'output', so that isn't the problem)
Thanks for your help!
The background script runs in a separate hidden background page. It's not related to the browserAction or pageAction popup page, it doesn't have any of the popup page elements, its DOM is empty except for the auto-generated script tags of the background scripts.
The popup is also a separate page and just like any normal page its environment/DOM exists only when the page is shown. You can't modify it when it's not shown. You can't show it from your code in general case either.
Solution 1
Put that onChanged listener in popup.js script that's loaded in your popup.html (declared as "browser_action": {"default_popup":"popup.html"} in your manifest.json) using the standard <script src="popup.js"></script> tag. It will update the popup page if it's shown, and to display the current values when the popup opens read them with chrome.storage.local.get or chrome.storage.sync.get depending on which storage you're using in your extension.
Solution 2
Use chrome.notifications API to show a small notification at the bottom of the screen, see also the official demo extensions.
Solution 3
Use chrome.browserAction.setBadgeText to display short text like a temperature right under the extension icon. Don't forget to declare at least "browser_action": {} in your manifest.json.
I am using app-route and iron-pages with a paper-toolbar to display my views.
On one of my views, main-view, displays a randomly chosen image which changes each time the page is loaded. Every time main-view is selected from the toolbar, the page should reload so that a new image will be shown.
The problem is, if I am already at the /main-view url and I select it from the toolbar it doesn't refresh the page. Is there any way to do this?
you should definitely add on-tap to render new images. Your image won't change, because iron-pages are observing some value (specified in selected property) so, when you click on main-view and route property already had value "main-view", observer will not trigger.
Adding on-tap on element that is handling changes will make it always trigger.
Some easy example:
<iron-pages selected="{{route}}" attr-for-selected="name">
<example-element name="main-view" on-tap="handleClick" id="main"></example-element>
<another-element name="second-view"></another-element>
</iron-pages>
and inside handleClick function something like:
handleClick: function() {
this.$.main.renderImage();
}
Of course inside main-view element you can declare renderImage function which will handle rest of the logic
And don't forget to make some debounce since you don't want to propably render 20 new images in 1 second. You can use Polymer native debounce function
You can read more about it here: https://www.polymer-project.org/1.0/docs/devguide/instance-methods
As you can infer from the title, this is an interesting & frustrating bug. I have a normal select element in an Angular partial with the following code:
<select ng-options="availweek.weekNumber as availweek.weekNumber for availweek in availableWeeks | orderBy: 'weekNumber':'reverse'"
ng-model="selectedWeek.weekNumber"
ng-change="viewPrevWeek(selectedWeek.weekNumber)"
style="color: black">
</select>
This element displays a list of numbers (representing weeks) and triggers the viewPrevWeek function when one is changed. That function is below- it just passes the week and reloads the partial to reflect data relevant to the selected week:
$scope.viewPrevWeek = function (week) {
if (week <= $scope.totalWeeksAvailable) {
$localStorage.active_week = week;
$state.reload();
}
}
My issue is that, on iOS 10 only, if a user changes the selected week via the dropdown (thus triggering viewPrevWeek), the dropdown will then pop up on any click of any button in the rest of the app.
This is precisely as annoying as it sounds- so if a user selects a something in the dropdown and decides to navigate to a new page, the dropdown reappears when clicking to expand the nav. The behavior is as if the dropdown retains focus after selection, so any click in the app also registers as a click on the dropdown, which causes the selector to open.
This only occurs if the week is actually changed- if the user opens the dropdown and selects the choice that was defaulted at page load, this doesn't happen.
I'm at a loss for how to get to the bottom of this- it doesn't occur on Android phones, nor when I use Chrome or other dev tools to force a phone screen resolution on desktop. It occurs on both Safari and Chrome in iOS 10, and doesn't occur in either browser in iOS 9 - so I'm pretty sure this is related to changes in iOS 10.
Not sure if you've solved this one yet, but we had the same problem and came up with a fix.
It seems that iOS 10 has something funky going on in the time between the native dropdown closing and when the code in your ng-change method gets fired. We found that the browser acted like the dropdown was still open and would trigger again when clicking any link, despite our ng-change event firing correctly.
We drew some inspiration from this thread: https://stackoverflow.com/a/24056865/542124 and set a timeout inside our method. This allows for iOS to finish closing the native dropdown UI, and finish whatever else it needs to do, before executing our code. In your example, this is how we would approach it;
$scope.viewPrevWeek = function (week) {
if (week <= $scope.totalWeeksAvailable) {
$timeout(function() {
$localStorage.active_week = week;
$state.reload();
}, 1000);
}
}
We'll give it a second to finish, show some sort of loading spinner to signify to the user that something is happening, and that should allow enough time to pass to resolve the issue.
I have a tabbar in my trigger.io app and currently have the setactive parameter set on the function element for each tab, so when selecting a tab it highlights the tab. While this works as expected I noticed if I go back using the back button on android or a built in soft button in app
( history.back() )
The highlight is lost. Now I understand why it would get lost as its only explicitly told to highlight when tapped but I was wondering if there is a way to programmatically trigger the highlight or active state so when I navigate between tabs and use the back button it will keep the highlighted state properly for each tab section?
Easiest would probably to add an event listener to update the button state with:
forge.event.backPressed.addListener(callback, error)
Also see: https://trigger.io/docs/current/api/core/event.html
This is a strange bug that occurs on the iPhone 5 when navigating back to a previous page.
Here's the steps to reproduce the bug on an iPhone 5:
Select a menu option that directs to a new page
From the new page press the browser back button
Try and navigate to the same page again using the same menu
An example page to try this on is here. On this page, select 'Javascript Tutorials' from the first menu on the page. Then follow steps above...
In my situation there is no go button to follow the link (like the second menu on the example page). The option is followed when clicked. The problem with this is that because the page you returned from is selected in the menu, you are unable to navigate to it. You cant re-select it.
My question: Is this a known iOS 7 bug? And is there a solution? My search has come up empty so far.
My JS code selects the first option when the menu is generated on page load. And as said, this bug only occurs on the iPhone.
This is not an iOS 7/iPhone 5 bug.
I can recreate it in Chrome on Windows 7.
As you said,
"because the page you returned from is selected in the menu,
you are unable to navigate to it"
The menu is pre-selected because of autocomplete behavior
When you press browser "back" in step 2 (versus page refresh), browser remembers the state you left the select in
https://stackoverflow.com/a/2699400/1175496
When you re-select an option that is already selected
You haven't changed anything; so the change event doesn't fire
Scripts listening for that event (as with the onChange attribute in your example) won't send you to the page
I fix this by putting autocomplete="off" attribute on the form element containing your select;
this prevents number 1, which prevents number 2.