So in my bootstrap 3.3.6 I have a menu that includes links.
In smaller sizes the menu becomes a dropdown menu and I want , when a menu item is clicked , the menu to go away.
I guess I can do something like
function closeMenu(){
//? uhm, what?
}
document.getElementByClass ("menuLink").addEventListener("closeMenu",findit,false);
but I dont have a clue what to set inside my function, so the dropdown will go back up again
Any help?
Thanks
I figured a way.
Inside the div with the links, I set a controller and ng-click for every link.
<ul class="nav navbar-nav navbar-right" ng-controller="navCtrl" >
<li><a ng-click="menuLinkClicked()" href="#/"> Home </a></li>
<li><a ng-click="menuLinkClicked()" href="#jake"> Jake</a></li>
<li><a ng-click="menuLinkClicked()" href="#amir"> Amir</a></li>
</ul>
and in my controller
app.controller('navCtrl',['$scope',
function ($scope) {
$scope.menuLinkClicked = function () {
document.getElementById("navbar").className="navbar-collapse collapse";
};
}
]);
navbar is the id of the menu that collapses in smaller screens. I use document.getElementById("navbar") to get it and then change its class to make it dissappear.
Related
<ul>
<li (click)="AddColor($event)">ONE</li>
<li (click)="AddColor($event)">TWO</li>
<li (click)="AddColor($event)">THREE</li>
</ul>
AddColor(e){
e.srcElement.style.color="blue"
}
I have the above list when i click any one of the li item out of 3, the clicked label color should be changed. when i click another all item colors should be revert back to original and change color of current clicked item.
#Mehdi said, you should not access DOM directly untill there is a need.
Always keep in mind, drive your view with data rather than accessing
DOM directly
I have forked and working snippet https://plnkr.co/edit/fgINMc?p=preview
When using Angular, you don't want to directly manipulate the DOM element. Rather let angular deal with it.
In your example, you can generate your list from an array you declare in the code like so
export class YourClass{
links:any;
activeLink = -1;
//...
constructor(){
this.links = ['ONE','TWO','THREE']
}
//...
}
and then in your template you could have :
<ul>
<li *ngFor="let link of links; let i = index"
(click)="activeLink = i"
[ngClass]="activeLink == i? 'blue' : '' " >
</li>
</ul>
and declare a css class blue :
.blue{
color:blue;
}
I've made dropdown using angular-ui-bootstrap
public/partials/partial2.html
<ul ...
<li class="dropdown" dropdown>
<a href="admin/partial2" role="button" class="dropdown-toggle" dropdown-toggle> brand list </a>
<ul class="dropdown-menu" role="menu">
<li>.....
</ul>
obviously href="admin/partial2" route(by angular-route) to same partial page( so same entire page ) and do nothing
but I need hand emoticon when user put mouse-over the anchor
Can I have this effect without specifying "href" attribute?
Yes, use css for that, create a rule for your anchor class (dropdown-toggle) in this case as follows:
.dropdown-toggle:hover {
cursor: pointer;
}
you can use <a> without href, but it's just like a spam inside your script.
For example, you have a text inside the div or, say, span, as in:
<span>Sitemap</span>
or, you have <ul> <li> in your dropdown menu, then you can add NEW Selector in your stylesheet(or CSS).
for example:
.mymenu li {
cursor:pointer;
}
From the code, I can explain that, you just need cursor:pointer, to make it happen. that's all.
if you set the cursor inside li, all li's will have that pointer.
to make it specific, I mean, if you need the pointer for only one scope, say, menu or dropdown menu where li or ul is used, you can add new selector then.
Well, being straight forward the problem is my $scope.$apply() is also not digesting the changes to rerun the translate directive.
I show you the HTML with applied translation directive and jQUERY code to change the class on resize of the windows (client).
HTML for menu:
<div id="navigation" ng-cloak>
<div class="container-fluid">
BRAND NAME
<ul class='main-nav'>
<li ng-class="{'active':activeLink == 'home'}">
<a href="#/">
<span>Home</span>
</a>
</li>
<li ng-class="{'active':activeLink == 'planning'}" data-trigger="hover">
<a href="#" data-toggle="dropdown" class='dropdown-toggle'>
<span>Planning</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<a href="#" data-toggle="dropdown" class='dropdown-toggle'>Goals</a>
<ul class="dropdown-menu">
<li>
{{'TOP_MENU.GOAL_LIST' | translate}}
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
HERE is the JQuery Code to make it responsive for screen size changes.
function checkLeftNav() {
var $w = $(window),
$content = $("#content"),
$left = $("#left");
if ($w.width() <= 840) {
if (!$left.hasClass("mobile-show")) {
$left.hide();
$("#main").css("margin-left", 0);
}
if ($(".toggle-mobile").length == 0) {
$("#navigation .user").after('<i class="fa fa-bars"></i>');
}
if ($(".mobile-nav").length == 0) {
createSubNav();
}
} else {
if (!$left.is(":visible") && !$left.hasClass("forced-hide") && !$("#content").hasClass("nav-hidden")) {
$left.show();
$("#main").css("margin-left", $left.width());
}
$(".toggle-mobile").remove();
$(".mobile-nav").removeClass("open");
if ($content.hasClass("forced-fixed")) {
$content.removeClass("nav-fixed");
$("#navigation").removeClass("navbar-fixed-top");
}
if ($w.width() < 1200) {
if ($("#navigation .container").length > 0) {
versionFluid();
$('body').addClass("forced-fluid");
}
} else {
if ($('body').hasClass("forced-fluid")) {
versionFixed();
}
}
}
}
Now What my solution was to get he nav element scope on which the jquery is applying class and call the $apply() on its scope. which is not working.
Solution Code:
$(window).resize(function(e) {
checkLeftNav();
// get the scope of element and apply $apply()
var sc = angular.element('.mobile-nav').scope();
sc.$apply();
});
But still when ever the screen size is changed to mobile view less than 840 I can see direct code values instead of translated text in menu like this. and When I change back to screen width more than 840 it shows correct translated text. I am experimenting this on chrome on my pc by resizing. I checked on mobile its not translating there too.
AngularJS provides two-way data binding, not two way everything binding. It's not intended to be used this way. $apply() only looks at the data model - it is the function you call when you want to say "Hey, Angular, I've updated the data model, come have a look!" That is literally its only purpose. There is no method in Angular designed to look at the DOM itself for changes - that's very inefficient and against Angular's philosophies anyway, which is why it ships without jQuery.
You might want to evaluate other frameworks that better support this kind of thing. However, if you really wish to do this you can easily convert it into a proper AngularJS module. The best way is to simply paste all of this code into a controller, and then change the window resize binding to use Angular's $window service, like:
var windowElement = angular.element($window);
windowElement.bind('resize', function() {
// Do my calculations here.
});
With your calculations would you compute the same variables but you would store them in scope variables and then adjust your template to use them. For example, what you're doing with $(".toggle-mobile").remove(); could be replaced by:
if (windowElement.width > 840) {
// Other code here
$scope.isMobile = false;
} else {
$scope.isMobile = false;
}
and in your template:
<i class="fa fa-bars"></i>
Give it a whirl, play with it for a week or two, and you'll never go back to jQuery. It takes a lot of getting used to, but once you do you realize how broken the whole "I'm looking at my template and have no idea what mystery event handlers are bound to all this stuff" concept was to begin with.
I want to make make menu such that when I click on menu item, active menu item text color should remain same as hovering effect... I used a:active but it works only till page/content gets opened... once page gets opened its effect is lost.. What should I do..??
Suppose I'm having 'black' color as default for menu item text color, its color changes to 'white' on hovering and again 'black' when content gets loaded.. It should remain 'white' until I click on another menu item i.e. 'active' menu item should persist its color.(this should be the case for all menu items). What will I have to do to achieve this effect?
I'm new to javascript and jquery....
If, when you click, the page re-loads, then you need to somehow, in your back-end code, add a classname (say "selected") to the selected element. Then apply the same CSS rules to that element as :hover.
Otherwise, if you're not refreshing the page, and relying on jQuery to maintain a 'selected' type of state, do something like this:
HTML:
<ul id="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
jQuery:
$('#menu li').click(function(){
$('#menu li').removeClass('selected'); // remove selected from any other item first
(this).addClass('selected'); //add selected to the one just clicked.
});
CSS
#menu li{color:black;background:white;}
#menu li:hover, #menu li.selected{
color:white;background:black;
/* CSS properties here will be applied to both hovered */
/* and last-clicked item*/
}
you should use class sequence
1-a:link
2-a:visited
3-a:hover
4-a:active
Thanks for the help Faust, your solution really worked for me. One quick edit though, I think there needs to be a "$" symbol in front of the "(this)," or at least that's what worked for me. So:
$('#menu li').click(function(){
$('#menu li').removeClass('selected'); // remove selected from any other item first
$(this).addClass('selected'); //add selected to the one just clicked.
});
Brain freeze here.
What I want to do is have the Suckerfish drop down menu link to be active on the current page in the drop down as well as the top item.
I.e. below, in the Articles menu item, I'd like to have the top item "Articles" active at the same time that either Categoryone or Categorytwo is active. (Archives is a single level menu item, included here just FYI.)
I have php set up to generate a body tag with the title of the page, so the body tag for the page Categoryone is <body id="Categoryone">
HTML:
<ul class="sf-menu">
<li id="Archives-menu" class="current">Archives</li>
<li id="Articles">Articles<ul>
<li id="Categoryone-menu" class="current">Categoryone</li>
<li id="Categorytwo-menu" class="current">Categorytwo</li></ul></li>
</ul>
CSS:
#Archives #Archives-menu a, #Categoryone-menu #Categoryone-menu a, #Categorytwo-menu #Categorytwo-menu a
{
color:#fff;
}
If I throw this in #Articles #Articles-menu a to try and make Articles active, then all the links in the drop down are active.
You have not given much info about that you are truing to do. But here is my guess: Your selector is off. Try this:
#Archives a , #Archives-menu a , .current
{
color:#fff;
}
Also remove the current class from those items and add it to the appropriate item dynamically when the user is on the right page. (Maybe Sukerfish does that for you?)