I'd like to change shiny navbarMenu behaviour - when I click inside or outside, dropdown hide and i need to click again to drop it again. Maybe someone have tried change behaviour on bootstrap manual close data-bs-auto-close="false" inside shiny app?
In html it looks like that:
`
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs- toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
Manual close
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>`
Shiny can be restrictive when it comes to adding your own bootstrap classes to the generic UI functions. You can, however, construct the entire UI using html tags like I've done below.
Notice that I used bootstrapPage and theme = bslib::bs_theme(version = 5) to tell Shiny I want to use Bootstrap 5. I can add any custom bootstrap classes by using a named argument. For example, I used "data-bs-auto-close" = "false".
Here is a reconstruction of the HTML you shared written in R code.
library(shiny)
ui <- bootstrapPage(
theme = bslib::bs_theme(version = 5),
# Navbar
tags$nav(
class = "navbar navbar-light bg-light",
tags$div(
class = "container-fluid",
tags$button(
class = "btn btn-secondary dropdown-toggle",
type = "button",
id = "dropdownMenuClickable",
"data-bs-toggle" = "dropdown",
"data-bs-auto-close" = "false",
"Manual Close"
),
tags$ul(
class = "dropdown-menu",
tags$li(
tags$a(
class = "dropdown-item",
"Menu Item"
),
tags$a(
class = "dropdown-item",
"Menu Item"
),
tags$a(
class = "dropdown-item",
"Menu Item"
)
)
)
)
)
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
Related
in my website which is done in bootstrap, there is a mobile menu, then menu is like below:
<a class="nav-link" href="#" id="shop_submenu" role="button" data-bs-toggle="dropdown" aria-expanded="true" data-bs-auto-close="true">
Rent Costumes
</a>
when user clicks on it, it expands and shows the items inside it. When you inspect it you can see a class 'show' is added and when u click it again the class is removed and it should close:
<a class="nav-link show" href="#" id="shop_submenu" role="button" data-bs-toggle="dropdown" aria-expanded="true" data-bs-auto-close="true">
Rent Costumes
</a>
however its not closing, can anyone please tell me how to close it when user clicks on it again.
this is my live url:
enter link description here
, thanks in advance
which version u used.in bootstrap5 we use data-bs-toggle.otherwise its data-toggle.go thru this https://www.w3schools.com/bootstrap4/bootstrap_dropdowns.asp#:~:text=To%20open%20the%20dropdown%20menu,actually%20build%20the%20dropdown%20menu.
...
Rent Costumes
</a>
i guess you'r using bootstrap4.hope ds helps.https://www.w3schools.com/bootstrap4/bootstrap_dropdowns.asp
i have found an alternate solution for this, i used javascript to check even and odd clicks on the button and changed the style of the submenu accordingly, below is the code:
function myFunction() {
let even = 'block';
let odd = 'none';
let elements = document.getElementsByClassName("dropdown-menu")
Array.prototype.forEach.call(elements, function(element) {
element.style.display === even ? element.style.display = odd : element.style.display = even
});
}
<a class="nav-link" href="#" id="shop_submenu" onclick="myFunction()" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="true">
Rent
</a>
How do you make a navbar you can use on multiple pages that you can change easily?
What I mean is, if you have a big website made of HTML code and you want to change its navbar, you would have to go to every single page and change it, right?
So what I am asking is, how do you make a multi-page navbar that you can change easily?
Something I've done is using JavaScript to create a navbar. In HTML, I have a <div> element with an ID of navbar-slot. Then in Javascript, I write code to stuff a navbar inside with links and all.
var navbar = document.createElement("nav");
var list = document.createElement("ul");
var homeSlot = document.createElement("li");
var home = document.createElement("a");
home.setAttribute("href","index.html");
home.innerHTML = "Home";
homeSlot.appendChild(home);
var aboutSlot = document.createElement("li");
var about = document.createElement("a");
about.setAttribute("href","about.html");
about.innerHTML = "About";
aboutSlot.appendChild(about);
list.appendChild(homeSlot);
list.appendChild(aboutSlot);
navbar.appendChild(list);
document.getElementById("navbar-slot").appendChild(navbar);
But then it occurred to me that, yes, while this is way easier than the "changing everything by hand" approach, it still gets very hard to read when using Bootstrap to refurbish the navbar. So, is there an even easier way?
Simply, use the backtick marker to make a string and save that to the navbar-slot's innerHTML! That's actually quite simple!
const code = `
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent"
aria-label="Toggle navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="nabar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link text-light dropdown-toggle" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Something
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Something</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>`;
document.getElementById("navbar-slot").innerHTML = code;
I'm new to cypress and lately I have to extract text variables within websites using cypress. Now, I've finally figured out how to extract text variables of a specific class/id in html. However, I cannot find the right way to extract the exact nth element within the class/id.
For example, here is my html:
<div class ="main-menu-wrapper align-self-stretch align-items-stretch" id="navbarCollaspse">
<ul region="header" class="clearfix nav navbar-nav navbar-nav-center mx-auto">
<li class="nav-item menu-item--expanded dropdown">
<a href="https://example/subwebsite/aaaaa"
class="nav-link dropdown-toggle main-menu-1" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
TEXTAAAAA </a>
<li class="nav-item menu-item--expanded dropdown">
<a href="https://example/subwebsite/bbbbb"
class="nav-link dropdown-toggle main-menu-2" data-toggle="dropdown"
aria-expanded="false" aria-haspopup="true">
TEXTBBBBBB </a>
<li class="nav-item menu-item--expanded dropdown">
<a href="https://example/subwebsite/ccccc"
class="nav-link dropdown-toggle main-menu-3" data-toggle="dropdown" aria-
expanded="false" aria-haspopup="true">
TEXTCCCCCC </a>
</div>
Here is my cypress javascript code:
cy.visit('https://example/website')
cy.get([class="clearfix nav navbar-nav navbar-nav-center mx-auto"]).each(($el) => {
cy.wrap($el).invoke('text')
.then(text => {
//do something with the text
//Here, I could get TEXTAAAAA TEXTBBBBBB TEXTCCCCCC orderly, however, i want to extract only TEXTBBBBBB
})
})
Now, when I cy.get([class="clearfix nav navbar-nav navbar-nav-center mx-auto"]).each($el) I could get TEXTAAAAA TEXTBBBBBB TEXTCCCCCC. However, now, I only want to get the second element within the class , in this case, TEXTBBBBBB. I tried to reference the way from here but cypress couldn't found the path.
Any ideas on how to get specific element within a class using cypress is a great help! Thanks a million!
If you want to extract the text for a particular element, you can do it by using the index value, it should look something like this. Here we ae extracting the second element.
cy.get('locator').each(($el, index) => {
if (index == 1) {
cy.wrap($el).invoke('text').then((text) => {
//do something with the text
})
}
})
I have some list items which are treated as Tabs in my UI. I also have a 'next' button under every tab and last tab have a 'finish' button. I need to move to next tab when i clicked on 'Next' button. I am working on an Angular2 project with typescript version 2.3.4. So i need some typescript code to work on button click.
While searching, i got some jquery code like,
$('.nav-tabs > .active').next('li').find('a') from how to display next bootstrap tab on button click.
I tried it in my button click(.ts file) and it works!. But i am not sure about the using of jquery in my project. Is it possible to get the element(html) in its typescript file? Or is this is the good possible way to do this?
My list is like,
<div class="row">
<ul class="nav nav-tabs bg-white">
<li class="active"><a data-toggle="tab" href="#BasicInfo">BasicInfo</a></li>
<li id="idAddInfoTab"><a data-toggle="tab" href="#AdditionalInfo">AdditionalInfo</a></li>
<li id="idPlayerIdentity" class="active-border"><a data-toggle="tab" href="#PlayerIdentity">PlayerIdentity</a></li>
</ul>
</div>
Thanks in advance!
I would do something like this
page.ts
//declare 3 variables
isT1Active:boolean = true;
isT2Active:boolean = false;
isT3Active:boolean = false;
...
activate(elem){
//deactivate all first
this.isT1Active = false;
this.isT2Active = false;
this.isT3Active = false;
switch(elem){
case 't1':{this.isT1Active = true;break;}
case 't2':{this.isT2Active = true;break;}
case 't3':{this.isT3Active = true;break;}
}
}
page.html
<div class="row">
<ul class="nav nav-tabs bg-white">
<li [ngClass]="{'active': isT1Active}" (click)="activate("t1")"><a data-toggle="tab" href="#BasicInfo">BasicInfo</a></li>
<li [ngClass]="{'active': isT2Active}" (click)="activate("t2")" id="idAddInfoTab"><a data-toggle="tab" href="#AdditionalInfo">AdditionalInfo</a></li>
<li [ngClass]="{'active': isT3Active}" (click)="activate("t3")" id="idPlayerIdentity" class="active-border"><a data-toggle="tab" href="#PlayerIdentity">PlayerIdentity</a></li>
</ul>
</div>
And you can do same thing to the next button, In assume that each tab will have a next button
I would stay away from jQuery, but instead learn how to better use Angular to control the view. Basically, you want the active class in your template tab to be bound to your component selected model, so that when the selected model is updated, Angular will automatically apply the active class to the matching tab.
In your component, define the array that stores the tab info and define a selectedTab that refers to the specific tab that should be active:
export class AppComponent {
tabs = [
{id:'idBasicInfo', href:'...',label:'BasicInfo'},
{id:'idAddInfo', href:'...',label:'AdditionalInfo'},
{id:'idPlayerIdentity',href:'...',label:'PlayerIdentity'}
];
selectedTab = this.tabs[0]; // which is active by default
}
Then in your template, use these properties to drive the view:
<ul>
<li *ngFor="let t of tabs" [id]="t.id" [class.active]="t===selectedTab">
<a data-toggle="tab" [href]="t.href" (click)="selectedTab=t"> {t.label}} </a>
</li>
</ul>
When a tab is clicked, it will be made the selectedTab and its active class will be set.
Trying to make different colors for different partials based on their type; so far there are 3 types all defined by an integer 1, 2 or 3 and I am struggling to find a way to make the partials in the view appear with different background colors. I am trying to get Red for 1, Blue for 2, Green for 3. I have tried multiple things but none have seemed to work.
I've tried making before_action :set_colours, having if statements in the partial but nothing has worked so far.
Here is the html, calling the type would be done like o.type
<div class="dropdown" style="background-color: <%= set_background(number) %>;">
<button class="btn btn-block" type="button" id="dropdownMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <%=o.id%>, <%=o.user_id%>
</button>
<div class="dropdown-menu btn-block" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item">Order Type</a></li>
<li><a class="dropdown-item"> Event type:</a> <p><%=o.event_type%></p></li>
<li><a class="dropdown-item"> Requirements/Ideas</a> <p><%=o.description%></p></li>
</div>
</div>
You could use a helper that will return the color you need based on the type, for example:
def set_background_color(type)
case type
when 1 then "red"
when 2 then "blue"
when 3 then "green"
end
end
And then use it to set the background color of your div using the style attribute, like this:
<div class="dropdown" style="background-color: <%= set_background_color(o.type) %>;">
<!-- ... -->
</div>