I'm developing an Ionic app using Ionic 2.
I implemented tabs in a couple of pages. But in one page, tabs need to be placed at the bottom and on other page, it needs to be positioned at top. Tabs in both these pages are different.
For example, on Page A, tabs need to placed at bottom and on Page B, it needs to be on top
In app.module.ts, I gave the following code
IonicModule.forRoot(MyApp, {
tabsPlacement: 'top',
platforms: {
android: {
tabsPlacement: 'top'
},
ios: {
tabsPlacement: 'top'
},
windows:
{
tabsPlacement: 'top'
}
}
}),
The above code, places the tabs on both pages at the top.
My question is, is there a way I can specify the tabs position specific to pages?
Thanks!
If there are two different tabs to be used on two different pages you can simply use the tabsPlacement attribute on the component to position the tabs at top or bottom of the page. Remove the tabs placement from your config and add tabsPlacement attribute on individual tabs html
<ion-tabs tabsPlacement="top"> // specify bottom to position at the bottom
...
<ion-tabs>
Related
Im writing a python script which reads from a file and plots graphs in seperate html files with plotly.I would like to have a button to redirect from one page to another(load from disc).I've come across this :
updatemenus = list([
dict(type="buttons",
buttons=list([dict(label = 'Next',method = 'update', args = ['shapes', []])])
)])
layout=go.Layout(title="Iteration_Number:"+str(counter_iter),updatemenus=updatemenus)
But this is used for updating data or changing layout. What i want is open another html page from disc on button click. Is that possible ?
I have also seen this :
import webbrowser
url = "file:///home/tinyOS/Simulation_"+str(counter_iter+1)+".html"
webbrowser.open(url)
Which helps me open a new page but again i want it to happen when clicking on the button.Any ideas? Thanks a lot !
From the question I understand that you want a group of buttons on the plotly graph, that are going to open a plotly graph in new tab.
So you need not use plotly buttons for this requirements.because they are mainly used for restyle, relayout, etc., so there is no relation between these buttons and opening links in new tabs.
I would recommend having simple html buttons which on click are going to take you to the new tab.
A simple way to do it will be, wrap the plot in a div set to relative positioning and make the div wrapping the button absolute positioned and position it anywhere over the graph, please refer the below example and let me know if this solves your issue!
Solution:
import plotly.plotly as py
import plotly.graph_objs as go
import plotly.offline as py_offline
from IPython.core.display import display, HTML
py_offline.init_notebook_mode()
display(HTML("""
<style>
.wrapper{
position:relative;
}
.button-group{
position:absolute;
top:40px;
left:90%;
z-index: 30000;
}
.button-group a{
display:block;
}
</style>
"""))
What is happening in the above piece of code is, first we include the necessary packages, then styles needed!
data = [go.Bar(
x=['giraffes', 'orangutans', 'monkeys'],
y=[20, 14, 23]
)]
display(HTML("""
<div class="wrapper">
<div class="button-group">
Google It
Yahoo It
</div>"""
+str(py_offline.plot(data, filename='plot_name' ,output_type="div", include_plotlyjs=False))
+ '</div>'))
The main piece of code, with which we embed the buttons is shown above, first we define the plotly plot , then using display and html functions, we can embed the buttons inside a div with class button-group and with CSS we position that button.
Please do try the above code and let me know if there are any doubts regarding the working!
I want to change default front page sensenet slider,which should cover full page of browser.I changed height of slides to 100% in file system and content explorer i also added li{height:100%} and img{height:100%}enter image description here
I also want to hide/remove by default slider name which show on images.
There're two things to modify:
Open /Root/Global/renderers/Slider.ascx and change 'snmaxheight' in the slider config (line 117.)
snmaxheight: window.innerHeight
Add the following to the slider .css file (/Root/Global/styles/snSlider.css)
.orbit-container li .text {
display: none;
}
I have a shiny dashboard app with 3 tabs and a notification menu. I am trying to track user activity on the dashboard and wish to log each of their clicks on the dashboard.
The code in server.R for the tabset panel is as below:
output$tabs1=renderUI(
tabsetPanel(type="tab",
tabPanel(id="OverallTab","Overall Activity"),
tabPanel(id="Tab1","Tab 1 details"),
tabPanel(id="Tab2","Tab 2 details"))
Part of my notification code is as below:
output$notiMenu <- renderMenu({
all_nots <- apply(u_notd, 1, function(row) {
notificationItem(text = row[["notification"]], icon("users"))
})
dropdownMenu(type = "notifications", .list = all_nots)
})
I am trying to use shinyjs to write to a dataframe if a user clicks on either of the tabs or notification menu as below:
tab1_clicled=""
tab2_clicked=""
noti_clicked=""
shinyjs::onclick("notiMenu",print("Notification clicked"),noti_clicked="YES")
shinyjs::onclick("Tab1",print("Tab1 clicked"),tab1_clicled="YES")
shinyjs::onclick("Tab2", print("Tab2 clicked"),tab2_clicled="YES")
df=as.data.frame(tab1_clicked,tab2_clicked,noti_clicked)
I face 2 issues here,
1) the on click option doesn't appear to work for the tab panels, using the shinyjs reference(here), I see that there is only a mention of using on click for the tabset panel and not for each tab panel?
2) I'm unable to modify the value of tab1_clicked inside the onclick function. It throws an error saying: Unhandled error in observer: unused argument (tab1_clicled = "YES")
Appreciate any help.
I just quickly skimmed your code and I can see two errors. The first parameter of onclick is the ID of the element. In your case, you want the ID of the actual tab button, but unfortunately the way tabs work in shiny, "Tab1" is actually the ID of the container of the tab panel but it's not the id of the tab button itself. Look at the HTML of a shiny app and you'll see that. Tabs are a bit weird and annoying and it's really difficult to deal with the tab buttons themselves in shiny.
Secondly, The second argument of onclick is the expression, but you're trying to run two expressions print("Tab1 clicked") and tab1_clicled="YES". You need to wrap these in {} so that it's considered one expression, like this:
onclick(id, {print("Tab1 clicked"); tab1_clicled="YES"}
But unfortunately getting the id of the tab button is difficult so I don't think onclick will be useful for that
I have made a collapsible section for the portfolio (extensive) gallery on my one page website. The gallery has Isotope filters applied to it. On default only the header is shown, but when clicking on the header, the filter names and gallery should be unhidden (content hidden via CSS using display:none) as per JQuery code below:
$(document).ready(function () {
$('h5').click(function () {
$(this).toggleClass("open");
$(this).next().toggle();
}); //end toggle
}); //end ready
When I click the header, it expands the filter names, but gallery content isn't displayed. This only happens after clicking one of the filters. When toggling the collapsible section, the gallery remains shown as intended.
So the only problem is the initial unhiding of the gallery. I think by clicking the header, the "Show all" filter or other relevant div has to be reloaded/refreshed in order for the gallery to appear. I've tried multiple commands, but can't seem to find the correct one.
Thank you for the help and let me know if you need any more information.
Apologies for the delay, but please find setup via link below:
http://www.davidmaes.eu/#work
Thanks for the help.
I took a look at the site and isotope doesn't have time to calculate the image sizes, so it's giving the UL container a height of 0: <ul class="portfolio-wrap isotope" style="position: relative; overflow: hidden; height: 0px;"> which is why the images aren't showing up.
When the user clicks a filter, isotope recalculates the images sizes and applies it to the UL, and voila, the images reappear.
You can manage this by using the imagesloaded script, which will only call isotope once the images have finished loading.
Here's the isotope documentation on integrating isotope with imagesloaded.
Can any one help me in this:
I have three tabs, the first is message tab, the last is home tab.
If i tap button in home view, it should take me to 'message' tab. This is working fine.
But when i have a badge value in 'message' tab , badge value is not removed when the tab is shifted to 'messages'.
Thanks in advance.
When you set the value on a UITabBarItem like this;
[tabBarItem setBadgeValue:#"2"];
You can remove it like this;
[tabBarItem setBadgeValue:nil];
P.S: Please consider adding more tags (such as ios, iphone, cocoa-touch, etc) to your future posts.