I'll try to explain what I need:
When I enter the index.php page the button LINK_1 is active. When I switch to LINK_2 this becomes active.
I only have one index.php page where only include parts of external pages in PHP.
Page_1
With the code I found this is working.
HTML:
<menu id="nav">
<ul>
<li><i class="fa fa-tachometer fa-lg"></i><p class="desc_menu">BTN_1</p></li>
<li><i class="fa fa-cogs fa-lg"></i><p class="desc_menu">BTN_2</p></li>
<li><i class="fa fa-envelope-o fa-lg">EMAIL</i><p class="desc_menu">COMUNICATIONS</p></li>
<li><i class="fa fa-rocket fa-lg"></i><p class="desc_menu">EXIT</p></li>
</ul>
</menu>
JAVASCRIPT:
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
$("#nav ul li a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
$(this).addClass("activ");
})
});
I have two navigation systems. The main menu at the top where I navigate using the global variable "nav" and then I have another system which use the global variable "op".
Page_2
When I click the (index.php?nav=1&p=1, 2 or 3) the class activ in button LINK_2 disappears. I need it to continue active.
What I'm not doing well for this happen?
Thanks
When you click index.php?nav=1&op=1, is the page at index.php?nav=1&op=1 loaded? Or it does not reload because you have a preventDefault() there for the click event?
I assume the page at index.php?nav=1&op=1 is loaded when you click. In this case, you need to change your JavaScript to parse the nav query out, find the link with that nav number, and set it to be active. This should be inside the click handler of the green links.
Related
I have a ul list, where one li elements has a thumbs up, and other haves a thumbs down, when i click each of the thumbs i add a class green or red depending of the type of thumb, but only one can be active or with color, if on of them is selected i need to remove the class of the other that is given a color (green, or red)
The problem is that i cant get the element to check if has the class or not.
My code:
$('.approved').click(function (event) {
event.preventDefault();
$(this).toggleClass('bg-green');
});
$('.not-approved').click(function (event) {
event.preventDefault();
console.log($(this).parent().find('.approved').hasClass('bg-green'));
$(this).toggleClass('bg-red');
});
html:
<div class="options-tools pull-right">
<ul class="list-unstyled list-inline">
<li><i class="fa fa-thumbs-up approved" aria-hidden="true"></i></li>
<li><i class="fa fa-thumbs-down not-approved" aria-hidden="true"></i></li>
</ul>
</div>
Basically when i click on thumbs down (.not-approved), i add the color class 'bg-red', but before i need to chech if the "thumbs up" is active(bg-green).
What im doing it wrong?
Have you tried to do $('.approved').hasClass('bg-green'). hasClass can help you identifying if an element has a specific class. This is a boolean so it will return true if it has the class, otherwise false. You do not need to get the parent and then find the class. You can just select the class if you not the identifier.
I am currently using bootsrap.
I have a main navigation menu.
I am linking each section on the main nav drop down menu to another page with a specific ID, which is a set of tabs on another page.
(Visual Composer Tabs - Wordpress)
The hash change function below shows the top of the page for a second however it then still scrolls to the hash...
Update HashChange Not Working
$(window).on('hashchange',function(e){
document.body.scrollTop = 0;
e.preventDefault();
});
UPDATE - JQUERY NOT WORKING
$('.link-2').click(function() {
$('html,body').animate({ scrollTop: $("#1234567891011").offset().top });
});
I am linking it directly this way so that the tab appears as active when the link is clicked.
My code is below.
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="http://myURL#123456789">Title<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a class="link-2" href="http://myURL#1234567891011">Tab Link 1</a>
</li>
<li>
<a class="link-3" href="http://myURL#1234567891011">Tab Link 2</a>
</li>
</ul>
</li>
The problem is when the link is opened it automatically goes to that tab section with that ID, which cuts out half of the information before the tabs.
I need it to load at the top of the page but still keep the tab active. How can i do this with Jquery?
Alter your hash not to trigger the scroll
Change your hash to: #tab_1234567891011
in the page you want to navigate get the id of the tab by splitting this hash
id = window.location.hash.split('_')[1];
activate the tab with the new id:
$('#'+id).tab('show');
I have a dropdown menu which toggles on click, and I've gotten rid of jQuery completely so that I can toggle the menu using just AngularJS. The problem is that if the dropdown section is visible, then you have to click the button again to hide it. So the only way to toggle the menu is to use the button right now, and I want users to be able to close the menu by simply clicking somewhere on the page that isn't the menu.
So here's my code right now:
<button type="button" class="btn btn-nav dropdown-toggle" aria-expanded="false" ng-click="showMenu = !showMenu">
{{ getNavTitle() | translate }} <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" ng-class="{ show: showMenu === true }">
<li>
<a id="hottest" ng-click="nav.replaceTo('/one')" ng-class="{active: subnav === 'top'}"><big>{{ 'subnav-one' | translate }}</big></a>
</li>
<li>
<a id="latest" ng-click="nav.replaceTo('/two')" ng-class="{active: subnav === 'latest'}"><big>{{ 'subnav-two' | translate }}</big></a>
</li>
<li>
<a id="friends" ng-click="nav.replaceTo('/three')" ng-class="{active: subnav === 'fans'}"><big>{{ 'subnav-three' | translate }}</big></a>
</li>
</ul>
AngularJS:
$scope.showMenu = false;
So this works. With jQuery I would just listen for a tap somewhere on the page which wasn't one of the three drop down links and the toggle button, and close the menu. But with AngularJS, I'm unsure how to go about doing that.
I guess you're using bootstrap. You could use angular-bootstrap or the bootstrap.js itself. I think the auto close feature should already be implemented there.
If you wanna implement it yourself add a click event handler, which closes the menu, to the body with 'once', so the handler will be executed once and then removed from the event listeners.
I am working on one scenario in that I have menu which toggle on one button.
When I click on that Menu button it opens fine.
Problem persist with this code:
When I click on anywhere it toggle with open and close.
Now What I need is
When I click on anywhere on window menu should close but only when it is in open state. toggle only when it is in open state.
HTML Code :
<section id="wrapper"> <!-- Sidebar -->
<aside id="sidebar-wrapper">
<div class="togglebtn"></div>
<ul class="sidebar-nav">
<li class="sidebar-brand"> <a href="#" class="ripple">
<div class="icon"><i class="demo-icon icon-meeter"></i></div>
<div class="nav-label"> <span>Dashboard</span></div>
</a>
</li>
</ul>
</div>
</aside>
</section>
JavaScript code:
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
e.stopPropagation();
$("#wrapper").toggleClass("toggled");
});
$("body").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
Any help would be much appreciated.
Just change your $("body").click function:
$("body").click(function () {
$("#wrapper").removeClass("toggled");
});
Right now what's happening is that you are "toggling" the class every time any part of the body is clicked. Toggling turns a class on or off depending on its current state. You need to just ensure that it is removed when the body is clicked.
You can actually use toggleClass to accomplish this, but you must tell it you are wanting to remove the class by passing it a state parameter.
$("#wrapper").toggleClass("toggled", false);
See the jQuery documentation for toggleClass: http://api.jquery.com/toggleclass/
I have created a menu for my website which you can find here:
http://jsfiddle.net/nq9Nt/9/
When click a category on the menu it opens that category on my main navigation?
Is something conflicting or have I placed my Javascript in the wrong place?
So I want to be able to click a category and show the sub-categories but it just won't work. Also is there a way to keep open the category you clicked after you change page?
Thank you
<ul class="nav">
<li>Category 1
</li>
<li class="drop">Category 2
<ul id="sub1">
<li>Item
</li>
<li>Item
</li>
</ul>
</li>
<li class="drop">Category 3
<ul id="sub1">
<li>Sticker
</li>
<li>Sticker
</li>
</ul>
</li>
<li>Category 4
<ul id="sub1">
<li> Mural
</li>
<li>Mural
</li>
</ul>
</li>
$(".drop")
.on('click', function () {
$(this).find('ul').toggle();
})
Actually at least on jsfriddle animation works and if you replace href of your anchors from '#' to a real url you will be redirected to another page, so first make sure that you've attached jquery library in head of the document (since you use it in your script), then move your script to the bottom of the page, right before tag 'body' closes.
About keeping the state of the opened categories after refresh - usually it is made on server side while generating template by adding class, for example 'active', to current link and then, using css, corresponding category (or a hierarchy of categories) is set to be opened (li.active ul {display: block;} for example). Well, actually you could do the same trick - use js to find out current url with the help of window.location.pathname value and match it with a href value of your navigation links and then assign class 'active' to the found element (or its parent, it is up to your css)
You can add a class drop to li in 4th Category, so it will work as others. And remove that onclick if you don't plan to use it.
http://jsfiddle.net/nq9Nt/10/
Here the example,
jsbin
You have gave the anchor href with #, So It reloads the page. And also you have gave the onclick method, But it doesn't there.