Hi,
I am facing with some problems .In shopping cart link at header i used drop down,but when i changes the media size into responsive (mobile) so it should be simple hyperlink but it works as drop-down.This works according to bootstrap markup.
So can anyone tell me how to change the markup so in desktop media size it will works as drop-down and in mobile device it should be like as link
here as mark-up for whole header links
<div class="row">
<div class="col-md-12">
<ul class="nav navbar-nav navbar-right">
#Html.Widget("header_links_before")
#Html.Action("AdminHeaderLinks", "Common")
#*<li>
#Html.Action("TaxTypeSelector", "Common")
</li>
<li>
#Html.Action("CurrencySelector", "Common")
</li>
<li>
#Html.Action("LanguageSelector", "Common")
</li>*#
#if (Model.IsAuthenticated)
{
<li>#Model.CustomerEmailUsername</li>
<li>#T("Account.Logout")</li>
}
else
{
<li>#T("Account.Register")</li>
<li>#T("Account.Login")</li>
}
#if (Model.AllowPrivateMessages)
{
<li>
#T("PrivateMessages.Inbox")<span>#Model.UnreadPrivateMessages</span>
</li>
if (!string.IsNullOrEmpty(Model.AlertMessage))
{
<script type="text/javascript">
$(document).ready(function () {
displayPopupNotification('#Html.Raw(HttpUtility.JavaScriptStringEncode(Model.AlertMessage))', 'success', false);
});
</script>
}
}
#if (Model.ShoppingCartEnabled)
{
<li id="topcartlink" class="dropdown">
<a href="#Url.RouteUrl("ShoppingCart")" class="ico-cart dropdown-toggle" data-toggle="dropdown">
<span class="cart-label">#T("ShoppingCart")</span>
<span class="cart-qty">#T("ShoppingCart.HeaderQuantity", Model.ShoppingCartItems)</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
#Html.Action("FlyoutShoppingCart", "ShoppingCart")
</ul>
</li>
}
#if (Model.WishlistEnabled)
{
<li>enter code here
<a href="#Url.RouteUrl("Wishlist")" class="ico-wishlist">`enter code here`
<span class="cart-label">#T("Wishlist")</span>
<span class="wishlist-qty">#T("Wishlist.HeaderQuantity", Model.WishlistItems)</span>
</a>
</li>
}
#Html.Widget("header_links_after")
</ul>
</div>
</div>
Please check the image link as below
http://imageupper.com/i/?S0200010090013K14096405471629783
http://imageupper.com/i/?S0200010090023K14096405471629783tw
Try this:
$('.dropdown-toggle').click(function(e) {
e.preventDefault();
setTimeout($.proxy(function() {
if ('ontouchstart' in document.documentElement) {
$(this).siblings('.dropdown-backdrop').off().remove();
}
}, this), 0);
});
Related
I have the following code, I am trying to get an id in the SPAN and it is not accepting values in any type of tag that is located inside ....
<div class="col-lg-12 col-md-12" id="contenedorListaTarea">
<ul class="nav nav-tabs align-items-lg-start mb-1" data-bind="foreach: loterias">
<li class="nav-item" name="loteria" data-bind="click:namerjarClickLoteria">
<a class="nav-link fontSizeTab" data-bind="text: nombre,style: { backgroundColor: color},attr:{id:id+nombreCorto}">
<span data-bind="attr:{id:nombreCorto}" >0.00</span>
</a>
</li>
</ul>
</div>
If I understand you correctly your problem is that any tag placed in <a> tag is to being rendered. The reason for that to happen is that your <a> tag is using text: nombre binding which is replacing anything you have put inside it.
I removed that binding and <span> started to appear in it with working attr binding.
var viewModel = function() {
this.loterias = ko.observableArray([
{
nombre: 'test',
color: 'red',
id: 'test-id',
nombreCorto: 1,
namerjarClickLoteria: function(){
}
},
{
nombre: 'test',
color: 'green',
id: 'test-id',
nombreCorto: 2,
namerjarClickLoteria: function(){
}
}
]);
return this;
}
ko.applyBindings(viewModel(), $('#contenedorListaTarea')[0]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="col-lg-12 col-md-12" id="contenedorListaTarea">
<ul class="nav nav-tabs align-items-lg-start mb-1" data-bind="foreach: loterias">
<li class="nav-item" name="loteria" data-bind="click:namerjarClickLoteria">
<a class="nav-link fontSizeTab" data-bind="style: { backgroundColor: color},attr:{id:id+nombreCorto}">
<span data-bind="attr:{id:nombreCorto}" >0.00</span>
</a>
</li>
</ul>
</div>
So I have multiple LI's like below as it's a menu and I am trying to create a drop-down but for some reason, my jQuery code is not working. Can someone help me?
FYI I can't change HTML as it's dynamically generating in Shopify. I can only change jQuery and CSS
<li class="grid__item lvl-1 ">
<a class="site-nav lvl-1 light-body">Furry Artist</a>
<ul class="subLinks inactive">
<li class="lvl-2">
Erdbeer Joghurt
</li>
<li class="lvl-2">
Jeson RC
</li>
</ul>
</li>
$( document ).ready(function() {
$("ul.subLinks").addClass("inactive");
});
$('a.site-nav.lvl-1').click(function() {
$(this).find("ul.subLinks").toggleClass('active-drop-down');
});
.inactive {
display:none;
}
.active-drop-down {
display:block !important;
}
Your issue is $(this).find... in the a click handler - at this point, this is the a.
.find() looks at the selectors children - but the menu is not a child of the a, it's a sibling.
Change to
$(this).closest("li").find("ul.subLinks"...
(maybe $(this).next().toggleClass... with a caveat on .this() that it's always the very next element).
Updated snippet:
$('a.site-nav.lvl-1').click(function() {
$(this).closest("li").find("ul.subLinks").toggleClass('active-drop-down');
});
.inactive {
display:none;
}
.active-drop-down {
display:block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol>
<li class="grid__item lvl-1 ">
<a class="site-nav lvl-1 light-body">Furry Artist</a>
<ul class="subLinks inactive">
<li class="lvl-2">
Erdbeer Joghurt
</li>
<li class="lvl-2">
Jeson RC
</li>
</ul>
</li>
</ol>
I have created a nav-bar which consists of a dropdown list. How do I retrieve the user selected option and display it in my Home component? The list items displayed are directly from a JSON file and I am not using the "select-option" tags for it. Is there anyway to do this with my code?
Header.component.html
<nav class="navbar navbar-expand-sm">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="navbar-brand" href="#room" class="dropdown-toggle" data-toggle="dropdown" role="button"> Rooms </a>
<ul class="dropdown-menu" >
<li *ngFor="let room of room_list.rooms">
<a class="navbar-brand" href="#room" [routerLink]="['./room']" routerLinkActive="router-link-active">{{room.name}}</a>
</li>
</ul>
</li>
<li>
<a class="navbar-brand" href="#home" [routerLink]="['/']" routerLinkActive="router-link-active" >Home</a>
</li>
</ul>
</div>
</nav>
Header.component.ts
export class HeaderComponent implements OnInit {
room_list: any;
constructor() {
}
ngOnInit() {
//this.room_list = roomlist.default;
this.room_list =JSON.stringify(roomlist.default);
this.room_list=JSON.parse(this.room_list);
console.log(roomlist);
}
For your issue related to #freddy 's answer #V_stack
<li .. (click)="selectedRoom(room)" (blur)= "DropdownBlur = true " >
(blur) will lose focus of drop-down after the condition written after it will be true.
TS file, initialize DropdownBlur with false and set it to true when you want to close the drop-down
DropdownBlur = false;
...
selectedRoom(room):void {
console.log(room);
this.DropdownBlur = true;
}
On the li you can make a call when the user clicks
<li .. (click)="selectedRoom(room)" >
Header.component.ts
selectedRoom(room):void {
console.log(room);
}
I'm trying to make a bootstrap dropdown menu open/close on hover, but with a delay of 250ms for desktop only.
JavaScript:
$(document).ready(function() {
if ($(window).width() > 767) {
$(".dropdown-toggle").click(function() {
return false;
});
var hoverTimeout;
$(".dropdown-toggle, .dropdown-menu").hover(function() {
hoverTimeout = setTimeout(function(){
$(this).parent(".dropdown").addClass("open");
}, 250);
},function() {
clearTimeout(hoverTimeout);
setTimeout(function() {
$(this).parent(".dropdown").removeClass("open");
}, 250);
});
}
});
HTML
It's the normal bootstrap structure suggested in the documentation:
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="happyMenu">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">
Title
</a>
<ul class="container dropdown-menu">
<li>
<a href="#">
List Title
</a>
<ul>
<li>
<a href="#">
List Item
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
The jQuery code above does not add the open class to the parent of dropdown-toggle.
Here is the solution I came up with using JavaScript setTimeout with no changes in HTML structure:
$(document).ready(function() {
if ($(window).width() > 767) {
$(".dropdown-toggle").click(function() {
return false;
});
var hoverTimeout;
$(".dropdown-toggle").hover(function() {
var element = $(this).parent(".dropdown");
hoverTimeout = setTimeout(function(){
element.addClass("open");
}, 250);
},function() {
clearTimeout(hoverTimeout);
var element = $(this).parent(".dropdown");
hoverTimeout = setTimeout(function() {
element.removeClass("open");
}, 250);
$(".dropdown-menu").hover(function(){
clearTimeout(hoverTimeout);
},function(){
setTimeout(function() {
element.removeClass("open");
}, 250);
});
});
}
});
I'm building my website here and I would like my left menu to be shifted down when the dropdown menu opens so that they don't overlap. Here's the HTML code:
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
PROJECTS
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li>NAPOLI</li>
<li>PORTRAITS</li>
</ul>
</li>
<li>BIO</li>
<li>CONTACT</li>
<li>BLABLABLA</li>
</ul>
</div>
Anyone could help?
Thanks!
Javascript problem with fadein fadeout
$(document).ready(function(){
$(".nav > li > a").bind("click", function(){
$('.dropdown-menu').fadeOut();
$(this).parent().find('.dropdown-menu').fadeIn();
});
});
What you could do is override the css for the class dropdown-menu.
What I did in the inspector was under .dropdown-menu remove the styles
position:absolute;
float:left;
.dropdown-menu {
position:relative !important; <-- or static
float:none !important;
}
This will make the drop down menu have its own space and not hover over the rest of your menu. But something is also wrong with your toggle. It seems to be broken. The markup looks fine. Did you tamper with the javascript or something?
So for your javascript problem, it is a little hard to test it but try this:
Revised: Based On http://getbootstrap.com/javascript/
$(document).ready(function() {
$('.dropdown').on('show.bs.dropdown', function () {
$('.dropdown-menu',this).fadeIn();
});
$('.dropdown').on('hide.bs.dropdown', function () {
$('.dropdown-menu',this).fadeOut();
});
}
You can achieve this by overriding the bootstrap defaults for absolute positioning and dropdown toggling:
.dropdown.open .dropdown-menu {
display: block;
position: static;
float: none;
width: 200px;
}
And then to keep the menu open, a little bit of JS:
$('#myTabDrop1').on('click', function(e) {
// Remove active tab
$('#myNavbar').find('nav > li.active').removeClass('active');
$(this).parent().addClass('active').addClass('open');
});
New HTML
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
PROJECTS
<ul class="dropdown-menu" role="menu">
<li>NAPOLI</li>
<li>PORTRAITS</li>
</ul>
</li>
<li>BIO</li>
<li>CONTACT</li>
<li>BLABLABLA</li>
</ul>
</div>
JSFiddle