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>
Related
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 am working with angular. When I click a button, I get a dropdown with some choices. How can I change the button image or button and text when I click on it? The goal is for it to return to its original state when it is clicked again.
I leave the image here to understand better.
The button in my case will be an image.
What I want is this: I click the button and open the dropdown, in that dropdown, when I click Start, I want the image of the button to be changed (or the button) and Start to be Pause. If you do the same again, the opposite happens ... that is, if you have Pause, pressing it changes the button and Pause becomes Start.
It is possible? Can anyone help me?
Example, my code
Codepen
HTML
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<img src="">
</button>
<div class="dropdown-menu">
<a class="dropdown-item">Start</a>
<a class="dropdown-item">Add new</a>
</div>
</div>
I am working with angular, if anyone can help me get the solution using their resources, I really appreciate
Use a variable to store the current state and toggle view using it's value.
app.component.ts :
currentState : string = 'pause'
app.component.html :
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<!-- Image is to be shown by default -->
<img src="1.png" *ngIf="currentState=='pause'"">
<!-- Image is to be shown on clicking start -->
<img src="2.png" *ngIf="currentState=='start'"">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" *ngIf="currentState=='pause'" (click)="currentState='start'">Start</a>
<a class="dropdown-item" *ngIf="currentState=='start'" (click)="currentState='pause'">Pause</a>
</div>
</div>
add a function to onChange and do it there,
<div class="dropdown">
<button (change)="changeImg()" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<img src="{{imgSrc}}">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" *ngIf="isStarted">Start</a>
<a class="dropdown-item" *ngIf="!isStarted">Pause</a>
<a class="dropdown-item">Add new</a>
</div>
</div>
in ts,
isStarted:boolean = false; // default to pause
imgSrc:any;
changeImg(){
// We can even write the simplest code instead the below line.
// isStarted = false ? true : false;
isStarted = !isStarted;
imgSrc = isStarted ? startImageSrc : pauseImageSrc;
}
hope this works, did not test :)
I have this template
<ng-template #thumbnailTemplate let-context="thumbnailContext">
<div id="{{context.divId}}">
<button type="button" data-toggle="modal" (click)="showEnlargeImage(context)">
<img id="{{context.imgId}}" src="{{context.imgSrc}}"/> <!-- this will have width, height=80-->
</button>
<a *ngIf="this.isEditing" href="#" id="{{context.closeId}}" onClick="deleteThumbnailfromContainer(context)"></a>
</div>
</ng-template>
The <a> is shown dynamically depending on the value of isEditing. This part works fine. On clicking <a>, I expect that deleteThumbnailfromContainer gets called and the page doesn't redirect because deleteThumbnailfromContainer returns false. But the page gets refreshed. I also think that deleteThumbnailfromContainer is not getting called because deleteThumbnailfromContainer has an alert which doesn't pop up.
deleteThumbnailfromContainer(thumbnailContext:ThumbnailContext){
console.log("delete thumbnail clicked ");
let index = this.thumbnailContainerRef.indexOf(thumbnailContext.viewRefId);
console.log("deleting index "+index);
this.thumbnailContainerRef.remove(index);
alert();
return false;
}
The generated html looks like follows (looks alright to me).
<a _ngcontent-c9="" href="#" onclick="deleteThumbnailfromContainer(context)" id="close-button-1"></a>
I can't figure out why the code isn't working correctly here.
I think you should try this out.
<a *ngIf="this.isEditing" href="javascript:void(0)"
(click)="deleteThumbnailfromContainer(context)" id="close-button-1"></a>
I am trying to put html in the bootstrap popover and the content shows nicely but when I click on my links inside the popover it just goes to the parent 'OpenRecent' method on the anchor tag that triggers the popover. You can see below in the data-content html the different ways I try to call the function I want. How can I achieve this?
<ul id="RecentSearches" class="nav nav-tabs nav-stacked well" data-bind="foreach: CurrentItems">
<li>
<div>
<input type="checkbox" class="checkbox inline" data-bind="value: $data.TransId,
checked: $root.ItemsSelected"/>
<a href="#"
data-bind="text: $data.Description + '-' + $data.County,
attr:
{
id: $data.TransId,
'data-title': $data.Description
},
click: $root.OpenRecent"
data-trigger="hover"
rel="popover"
data-html="true"
data-content="<a data-bind='click: $parent.Print.bind($data)'>Print</a> |
<a data-bind='click: app.RecentSearches.Print.bind($data)'>Print 2</a>
<a data-bind='click: $parent.Email'>Email</a> |
<a data-bind='click: $parent.SaveToPDF'>PDF</a> |
<a data-bind='click: $parent.SavetToCSV'>CSV</a>">
</a>
</div>
</li>
</ul>
The HTML is your data-content will not have been bound by Knockout, as it was added dynamically later.
One option is to add a way to identify the links (class) and then use an unobstrusive approach to adding an event handler.
$("ul").on("click", ".print", function(event) {
var context = ko.contextFor(this);
context.$root.Print(context.$data);
event.preventDefault();
});
I am not sure why your OpenRecent function is getting called. It appears to me that bootstrap creates the popover outside of the element that it is triggered on. So, this would not be a parent of the popover. If you are still having an issue with that part, then maybe you could get it working in jsFiddle.
Here is a fiddle with the unobtrusive handler: http://jsfiddle.net/rniemeyer/Edww3/