I'm using the fabulous UI Bootstrap for Angular but am having difficulty getting an onclick event raised.
Here is the code:
<ul class="dropdown-menu" role="menu">
<li><a><img src='/Content/Images/dept_cargo.png'/> CARGO</a></li>
<li><a><img src='/Content/Images/dept_commercial.png'/> COMMJ</a></li>
<li><a><img src='/Content/Images/dept_executive.png'/> EXECJ</a></li>
<li><a><img src='/Content/Images/dept_travel.png'/> TVL</a></li>
</ul>
{{ currentDepartment }}
I've tried every combination: putting the ng-click="behaviour()" variously inside the li, the a and the img, but nothing seems to work.
What am I doing wrong?
(ideally I'd just like to change the value of a scope variable but I'm thinking calling a behaviour to do the work is better practice)
This question is not the same as suggested above. The other question is to do with scope, whereas I would be happy just to be able to execute an alert(); from one of my li's.
You must have an issue in the js code where you set up the controller but if you set it up right, your html should look like this:
<ul class="dropdown-menu" role="menu">
<li ng-click="behaviour()"><a><img src='/Content/Images/dept_cargo.png'/> CARGO</a>
</li>
<li ng-click="behaviour()"><a><img src='/Content/Images/dept_commercial.png'/> COMMJ</a>
</li>
<li ng-click="behaviour()"><a><img src='/Content/Images/dept_executive.png'/> EXECJ</a>
</li>
<li ng-click="behaviour()"><a><img src='/Content/Images/dept_travel.png'/> TVL</a>
</li>
</ul>
and in your js:
function myCtrl($scope) {
$scope.behaviour = function () {
alert('asd');
};
}
and here is a working sample: http://jsfiddle.net/97u2jp6d/1/
<ul class="dropdown-menu" role="menu">
<li><a ng-click="behaviour()"><img src='/Content/Images/dept_cargo.png'/> CARGO</a></li>
Make sure you have $scope.behaviour = function() {} defined inside of the controller for that code snippet.
You don't need more than this:
HTML
<ul>
<li ng-click="doSomething()">item 1</li>
<li ng-click="doSomething()">item 2</li>
<li ng-click="doSomething()">item 3</li>
<li ng-click="doSomething()">item 4</li>
<li ng-click="doSomething()">item 5</li>
</ul>
Controller
$scope.doSomething = function () {
console.log('doing something');
}
http://plnkr.co/edit/52C2daC9jugCOOaNBDvP
Related
I have a menu like this on my WordPress site:
<ul id="menu-main-menu" class="clearfix"><li id="menu-item-397" class="menu-item-397">About us</li>
<li id="menu-item-1001" class="menu-item-object-custom menu-item-has-children has-dropdown menu-item-1001">OFFER
<ul class="nav-dropdown">
<li id="menu-item-454" class="not_on_mobile menu-item-has-children has-dropdown menu-item-454">PROBLEM
<ul class="nav-dropdown">
<li id="menu-item-1569" class="menu-item-1569">Test</li>
<li id="menu-item-1572" class="menu-item-1572">Test</li>
</ul>
</li>
<li id="menu-item-1063" class="not_on_mobile menu-item-has-children has-dropdown menu-item-1063">PROBLEM
<ul class="nav-dropdown">
<li id="menu-item-1242" class="menu-item-1242">Test</li>
<li id="menu-item-1243" class="menu-item-1243">Test</li>
</ul>
</li>
<li id="menu-item-508" class="not_on_mobile menu-item-has-children has-dropdown menu-item-508">PROBLEM
<ul class="nav-dropdown">
<li id="menu-item-670" class="menu-item-670">Test</li>
<li id="menu-item-1133" class="menu-item-1133">Test</li>
<li id="menu-item-1427" class="menu-item-1427">Test</li>
</ul>
</li>
<li id="menu-item-673" class="menu-item-673">Ortodoncja</li>
<li id="menu-item-443" class="not_on_mobile menu-item-object-custom menu-item-has-children has-dropdown menu-item-443">PROBLEM
<ul class="nav-dropdown">
<li id="menu-item-1820" class="menu-item-1820">Test</li>
</ul>
</li>
<li id="menu-item-1160" class="menu-item-object-custom menu-item-1160">Test</li>
<li id="menu-item-741" class="menu-item-741">Test</li>
</ul>
</li>
<li id="menu-item-523" class="menu-item-523">Test</li>
</ul>
The problem is that on mobile, when I click on elements that I called PROBLEM, the URL is triggered and it expands another level of menu but in the same time enters an url I just clicked.
I thought that the fix for this could be to replace this PROBLEM URL's by a link like #menu_on_mobile
All of those PROBLEM url's are the first 'a' items in li which has a 'not_on_mobile' class.
I tried to do it like this:
document.querySelectorAll(".not_on_mobile a:first-child").forEach(a => a.setAttribute('href', '#menu_on_mobile'));
But the problem is that it replaces URL in all 'a' element in not_on_mobile class.
How to edit it to replace only the first element in 'li' and work only on mobile?
Try to select the items this way .not_on_mobile>a. In this way, only the first elements will be selected without taking all the children's elements inside.
I hope I understood the task correctly
document.querySelectorAll(".not_on_mobile>a").forEach(a => a.setAttribute('href', '#menu_on_mobile'));
I want to create a link in a Bootstrap tab. I have 3 tabs and I want one of them where I will click and a new page will be opened. Please let me know how I can do it.
Here is my HTML code.
<li><a data-toggle="tab" href="google.com" id="btnRent" style="background: #f4762a;">Rent/Lease/PG/Shop</a></li>
And I am using this jQuery...
<script type="text/javascript">
$(document).ready(function()
{
$(#btnRent).click(function()
{
var go_to_url = "www.google.com";
document.location.href = go_to_url;
});
});
</script>
But it's not working. I want to open a new page when someone clicks on the "Rent/Lease/PG/Shop" tab.
you can try inside your click function:
window.location = url;
or window.open(url);
it should do the trick..
you don't need javascript for that, just use the target parameter inside your 'a' tag like this:
<li><a data-toggle="tab" href="https://google.com" target="_blank" id="btnRent" style="background: #f4762a;">Rent/Lease/PG/Shop</a></li>
The best way to do this is to create another "" element inside your tab ""
<ul class="nav nav-tabs">
<li class="active">Home<a href="http://www.google.com>Click here</a></li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
If you want a direct click just do this
<ul class="nav nav-tabs">
<li><a href="http://www.google.com>Click here</a></li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
Trying to make javascript horizontal menu, but can't get second button to open its own items, (when i click the second button it opens the items that are for the first button) here is current code:
JavaScript:
$(document).ready(function() {
$(".menu-button,.menu-button1").click(function() {
$(".menu-bar").toggleClass("open");
});
})
HTML:
<ul class="menu">
<li title="home">menu</li>
<li title="pencil">pencil</li>
<li title="about">about</li>
</ul>
<ul class="menu-bar">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
<ul class="menu-bar">
<li>Menu1</li>
<li>About</li>
</ul>
Before I start my answer, let me explain jQuery a bit.
$(".menu-button,.menu-button1").click(function() {
$(".menu-bar").toggleClass("open");
});
This broken down:
$(".menu-button,.menu-button1").click(function() { -> When any item with class menu-button OR class menu-button1 is clicked
$(".menu-bar").toggleClass("open"); ->Toggle the "open" class for all elements in your page with class menu-bar.
Since you call all the menus instead of the specific one you want, it opens both of them.
So, be more specific by - for starters - using IDs, or unique/identifying classes:
JS:
$(document).ready(function() {
$(".menu-button.home").click(function() {
$(".menu-bar.home").toggleClass("open");
});
$(".menu-button.pencil").click(function() {
$(".menu-bar.pencil").toggleClass("open");
});
})
HTML:
<ul class="menu">
<li title="home">menu</li>
<li title="pencil">pencil</li>
<li title="about">about</li>
</ul>
<ul class="menu-bar home">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
<ul class="menu-bar pencil">
<li>Menu1</li>
<li>About</li>
</ul>
I agree with M.Doye's comment about using .each (but sorry, I can't answer directly).
I want to add that, it will be much easier with that kind of HTML structure I think:
<ul class="menu">
<li title="home">
Show Menu 1
<ul class="menu-bar">
<li>Menu1
</li>
</ul>
</li>
<li title="pencil">
Show Menu 2
<ul class="menu-bar">
<li>Menu2
</li>
</ul>
</li>
</ul>
The, click on the link and use .next() or .siblings or closest... to show the right ul.
But of course you'll have to rewrite you CSS :)
Here is updated code
$(document).ready(function () {
$(".menu-button,.menu-button1").click(function () {
$(this).siblings(".menu-bar").toggleClass("open");
})
})
<ul class="menu">
<li title="home">menu
<ul class="menu-bar">
<li>Menu1</li>
<li>About</li>
</ul>
</li>
<li title="pencil">pencil
<ul class="menu-bar">
<li>Menu0</li>
<li>Home2000</li>
<li>About</li>
<li>Parent</li>
<li>About</li>
</ul>
</li>
</ul>
here is a jsfiddle
I'm currently searching for a solution for sorting a nested list with Tinysort.js
My HTML
<ul class="speechlev1">
<li data-title="indo-european" data-ratio="48">Indo-European
<ul class="speechlev2">
<li data-title="albanian" data-ratio="100">Albanian</li>
<li data-title="armenian" data-ratio="75">Armenian</li>
<li data-title="balto-slavic" data-ratio="75">Balto-Slavic</li>
<li data-title="celtic" data-ratio="34">Celtic</li>
<li data-title="germanic" data-ratio="78">Germanic</li>
<li data-title="greek-phrygian" data-ratio="23">Greek-Phrygian</li>
<li data-title="tokharian" data-ratio="0">Tokharian</li>
</ul>
</li>
<li data-title="nilo-saharan" data-ratio="43">Nilo-Saharan</li>
<li ata-title="sepik" data-ratio="42">Sepik</li>
<li data-title="sino-tibetan" data-ratio="28">Sino-Tibetan
<ul class="speechlev2">
<li data-title="chinese" data-ratio="13">Chinese</li>
<li data-title="tibeto-burman" data-ratio="34">Tibeto-Burman</li>
</ul>
</li>
<li data-title="uto-aztecan" data-ratio="60">Uto-Aztecan</li>
</ul>
Javascript
$(document).ready(function() {
tinysort('.speechlev2>li',{attr:'data-ratio'});
});
Result:
Indo-European
Tokharian
Chinese
Greek-Phrygian
Celtic
Tibeto-Burman
Armenian
Balto-Slavic
Nilo-Saharan
Sepik
Sino-Tibetan
Germanic
Albanian
Uto-Aztecan
Should be:
Indo-European
Tokharian
Greek-Phrygian
Celtic
Armenian
Balto-Slavic
Germanic
Albanian
Nilo-Saharan
Sepik
Sino-Tibetan
Chinese
Tibeto-Burman
Uto-Aztecan
I have set up a CodePen to show my problem:
http://codepen.io/anon/pen/QbPVox
My problem is that tinysort sorts the li also between different parents. How can I fix that
Can somebody help me with that?
Just sort each of your lists separately:
$(document).ready(function() {
$('.speechlev2').each(function() {
tinysort($('li', this), {attr:'data-ratio'});
});
});
Basically i want to click on a tab and a drop down menu appears then when you re-click the same tab or any of the others I want it to hide that tab/show the other tab if clicked on the same/other tab.
I tried
$('.click').click(function() {
$(this).find('.sub-nav-list').toggleClass('active');
});
and tried
$('.click').click(function() {
$('.sub-nav-list').removeClass('active');
$(this).find('.sub-nav-list').toggleClass('active');
});
but cant work it out! any insight? Thanks
html:
<nav class="secondary-nav">
<ul class="list clearfix">
<li class="leaders click">Leadership <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Management</li>
<li>Board of Directors</li>
</ul>
</li>
<li class="contact click">Contact Info <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Email Notification</li>
<li>Information Request</li>
</ul>
</li>
<li class="docs click">Documents <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Governance Documents</li>
<li>Press Release</li>
<li>Reports & Presentations</li>
<li>Sec Filings</li>
<li>Frenquently Asked Questions</li>
<li>Tax Information</li>
</ul>
</li>
<li class="research click">Research <span class="arrow">></span>
<ul class="sub-nav-list">
<li>Dividends and Distributions</li>
<li>Stock Information</li>
<li>Analyst Coverage</li>
<li>Market Makers</li>
</ul>
</li>
</ul>
</nav>
I can see at least two possible issues there.
1) sub-nav-list is not a children of click element. If they are on the same level something like that might work:
$('.click').click(function() {
$(this).parent().find('.sub-nav-list').toggleClass('active');
});
2) You have these elements generated dynamically - so you need use on with selector of any parent element that exists before you dynamically generate your sub-menus (let say nav-list):
$(".click").on("click", ".nav-list", function() {
$(this).parent().find('.sub-nav-list').toggleClass('active');
});