I have two views and each view contains an link with data-action attribute to call jQuery function called toggle menu like this:
<div id="hide-menu" class="btn-header pull-right">
<span>
<a href="javascript:void(0);" class="toggleMenu" data-action="toggleMenu" title="Collapse Menu")">
<i class="fa fa-reorder"></i>
</a>
</span>
</div>
jQuery:
toggleMenu: function () {
if (!$.root_.hasClass("menu-on-top")) {
$('html').toggleClass("hidden-menu-mobile-lock");
$.root_.toggleClass("hidden-menu");
$.root_.removeClass("minified");
} else if ($.root_.hasClass("menu-on-top") && $.root_.hasClass("mobile-view-activated")) {
$('html').toggleClass("hidden-menu-mobile-lock");
$.root_.toggleClass("hidden-menu");
$.root_.removeClass("minified");
}
}
one of the views calls the function properly but the another doesn't, What is the possible reason for that??
in fact I haven't known the actual reason of the issue, maybe as Ramesh said in the comments was the problem.
I solved it by putting the function in the same document (not in another js file) and in the element, I have used onClick attribute to execute the function.
<div id="hide-menu" class="btn-header pull-right">
<span>
<a href="javascript:void(0);" class="toggleMenu" onclick="toggle()" title="Collapse Menu">
<i class="fa fa-reorder"></i>
</a>
</span>
</div>
<script>
function toggle() {
if (!$.root_.hasClass("menu-on-top")) {
$('html').toggleClass("hidden-menu-mobile-lock");
$.root_.toggleClass("hidden-menu");
$.root_.removeClass("minified");
} else if ($.root_.hasClass("menu-on-top") && $.root_.hasClass("mobile-view-activated")) {
$('html').toggleClass("hidden-menu-mobile-lock");
$.root_.toggleClass("hidden-menu");
$.root_.removeClass("minified");
}
}
</script>
Related
My simple jQuery function works fine if I click an anchored link on page-1 (body turns black fine) BUT if I have the same anchored link on another page-2 to link back and anchor to my page-1 the function doesn't work? It goes back to page-1 fine but body on page-1 doesn't turn black as expected?
HTML on page-1:
<div id="offcanvas">
<a href="#key-features" class="nav-link">
<span>Key features</span>
</a>
</div>
HTML on page-2:
<div id="offcanvas">
<a href="page-1.htm#key-features" class="nav-link">
<span>Key features</span>
</a>
</div>
jQuery:
$("#offcanvas a").click(function(){
$('.offcanvas').offcanvas('hide');
$("body").css('background-color', '#000000')
});
Many thanks in advance for your help.
B]
So I manage to find the solution, this works:
$("#offcanvas a").on("click", function() {
if (window.location.hash) {
$("body").css('background-color', 'black');
}
:)
please use below html structure
you have not define id on html structure
<div id="offcanvas">
<a href="#key-features" class="nav-link">
<span>Key features</span>
</a>
</div>
We upgraded from Angular 4 to Angular 8.1 and a lot of our drop downs are broken. From what I can tell they all contain these two style classes: the class js-dropdown and js-dropdown-menu. We can't find where these style classes are coming from or how they work. It's hard to search these terms on google because there's no way to have a must-include for hyphens, that I know of. Here's an example of the html:
<div class="select-wrapper" id="searchOption">
<li class="dropdown nav__item is-parent" tabindex="0" style="outline: 0" (blur)="closeDropdown($event)">
<div class="select-dropdown js-dropdown">
<span class="selection">{{ searchType }}</span>
<i class="nav__icon nav__icon--dropdown"></i>
</div>
<ul class="details-search nav__menu js-dropdown-menu">
<li (click)="optionSelected($event, 1)">
<a class="nav__link">Option 1</a>
</li>
<li (click)="optionSelected($event, 2)">
<a class="nav__link">Option 2</a>
</li>
<li (click)="optionSelected($event, 3)">
<a class="nav__link">Option 3</a>
</li>
</ul>
</li>
</div>
Does anyone have any insight to the class js-dropdown and js-dropdown-menu and how to fix them after this upgrade?
Update: so i think i found out where the js-dropdown style class comes from.... it doesn't come from any style... it's just used as a label and component.js looks for that label to show or hide it. The now is that component.js function isn't getting called. Anyone know how to fix this?
$('#app-container').on('click', '.js-dropdown, .js-dropdown-menu > *', function(event){
event.preventDefault();
var that = this;
var parent = $(this).closest('.is-parent');
//is our dropdown open?
if(!parent.hasClass('is-open')){
//... then open it.
parent.addClass('is-open');
//handle clicking away
$(document).one('click', function closeMenu(docEvent){
//if the parent does not contain the clicked element...
if($(parent).has(docEvent.target).length === 0) {
//close it.
parent.removeClass('is-open');
} else {
// else, set up another listener to check the next user click.
$(document).one('click', closeMenu);
}
});
} else {
// ...else we close it.
parent.removeClass('is-open');
}
event.stopPropagation();});
Figured it out. We were not loading a components.js file (as well as other scripts) in the angular.json file. Our previous version of angular did not contain an angular.json file.
I have an issue with the <a href="#"> in my AngularJS app.
My main issue is on the:
<em class="fa fa-bars"></em>
navigation.html -> this is a template of navigation directive.
<nav class="sidebar col-xs-12 col-sm-4 col-lg-3 col-xl-2 bg-faded sidebar-style-1">
<h1 class="site-title"><em class="fa fa-rocket"></em> Brand.name</h1>
<em class="fa fa-bars"></em>
<ul class="nav nav-pills flex-column sidebar-nav">
<li class="nav-item"><a class="nav-link active" href="index.html"><em class="fa fa-dashboard"></em> Dashboard <span class="sr-only">(current)</span></a></li>
</ul>
<em class="fa fa-power-off"></em> Signout</nav>
index.html
<body ng-app="test" class="body-bg" ng-style="bgimg" ui-view>
</body>
app.js
var app = angular.module("test", ["ui.router");
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
// login route
.state("login", {
url:"/",
controller: "LoginController",
templateUrl: "pages/login/login.html"
})
// admin route
.state("admin", {
url:"/admin",
controller: "AdminController",
templateUrl: "pages/admin/admin.html"
})
And currently I am doing a SPA routing using ui-sref of ui-router.
The problem is everytime I click the button, I get redirected to the default state $urlRouterProvider.otherwise('/');.
How I can do something similar to that HTML href="#" with AngularJS ui-sref?
Or is there other ways?
from the code in the question I can say that, the normal usage of href will result in redirection so you need to use data-target, can you please try this?
<a data-target="#menu-toggle" data-toggle="collapse" class="btn btn-default"><em class="fa fa-bars"></em></a>
JSFiddle: here
if you have jQuery (which you probably do)
inside your head tag...
<script>
$(document).ready(function(){
$('[href="#menu-toggle"]').click(function(event){
event.preventDefault();
})
});
</script>
Basically keeps the link from routing via window navigation.
You can easily test by pasting this code into your browser console..
$('[href="#menu-toggle"]').click(function(event){
event.preventDefault();
})
You can use a combination of href and ng-click to solve your problem.
<em class="fa fa-power-off"></em> Signout</nav>
Where signOut() is a function on your controller.
1.Just remove the href tag completely from your anchor tag. It's still a perfectly valid tag without it. (or) href="javascript:void(0);"
for your reference: Angular-UI-Router: should i avoid href with ui-router?
I'm use Font awesome icons in my vBulletin style and i want to change the (minus) icon to (plus) when click ! Is there a way to do it ?
<a rel="nofollow" style="float:left" href="#" onclick="return
toggle_collapse('forumbit_$forumid')">
<span style="color:#24356C;" >
<i class="fa fa-minus-square-o fa-2x"></i>
</span>
</a>
I think this question(and the answer) can help you do what you want :)
Change an element's class with JavaScript
Assign an id to your icon, e.g.
<i class="fa fa-minus-square-o fa-2x" id="i-1"></i>
The id can be dynamic value like 'i-$forumid' depend on how you generate your html.
In your toggle_collapse('forumbit_$forumid') function,
Add
var e = document.getElementById('i-1');
if (e.classList.contains('fa-plus-square-o')) {
e.classList.toggle('fa-plus-square-o');
} else {
e.classList.add('fa-plus-square-o');
}
or
function toggle_collapse(forumID) {
...
var iconID = 'i-' + formumID.replace('forumbit_','')
var e = document.getElementById(iconID);
if (e.classList.contains('fa-plus-square-o')) {
e.classList.toggle('fa-plus-square-o');
} else {
e.classList.add('fa-plus-square-o');
}
...
}
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/