I have been trying for days.
What i want to do is use the options in the navigation menu that i have to trigger onload event in java script/jquery. However, the events just doesnt fire up. I have tried using onselect and onclick as well but with no avail.
The event should bring data into my template.
Maybe im making a mistake that i just cant see. or is there another better way to do this?
This is my Navigation bar. You can see the onselect functions that i was trying to use.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">MEK Steel</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li class="dropdown" >
About <b class="caret"></b>
<ul class="dropdown-menu">
<li>
About Us
</li>
<li>
History
</li>
<li>
<a href="about.html#privacyPolicy" >Privacy Policy</a>
</li>
<li>
Terms and Conditions
</li>
<li>
Disclaimer
</li>
</ul>
</li>
<li class="dropdown" class="active">
Manufactured Products <b class="caret"></b>
<ul class="dropdown-menu">
<li onselect = "steelProducts()">
Steel Products
</li>
<li onselect = "steelDoors()">
Steel Doors
</li>
<li onselect="digitalSafes()">
Digital Safes
</li >
<li onselect="securityEq()">
Security Equipment
</li>
<li onselect="storageSol()">
Storage Solutions
</li>
<li onselect="steelFur()">
Steel Furniture
</li>
</ul>
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
This is my javascript. i have only written one for testing purposes
function showTemplate(template, data){
var html = template(data);
console.log(html);
$('#content').html(html);
}
function securityEq(){
source = $("#productsTemplate").html();
secEqTemp = Handlebars.compile(source);
showTemplate(secEqTemp, data);
}
$(document).ready(function () {
$('a').on('click', function (){
alert($(this).html());
});
});
You need to reference the anchor and not the list tag.
Fiddle
After you explained what you were trying to do
#Chax im trying for the onselect to work before the a tag does. like i want to load data and put it in my template and then show the page.
I came up with this code
$(document).ready(function(){
$('a').click(function(){ // Bind a click event to my <a> tag
var linkValue = $(this).attr('data-link'); // Retreive the value of data-link aka where we want to go
// Do something, your logic
window.location.href = linkValue; // Load the new page
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-link="http://www.google.com">I'm a link</a>
<!-- Notice that the tag below doesn't have a href attribute but does have a data-link attribute-->
What this code does is simple. We bind a click event onto every <a> tag in the DOM. When one of our tag is clicked, we execute the function. Note that you can differenciate button using a switch. Then we call the window object and make it call the call the page we want.
check this jsfiddle When i place the js code inside the html using <script> it works and events are fired
Related
In my navbar there is a project submenu completed and ongoing both two are also a submenus containing abc project for completed submenu and ongoing submenu consist bcd project. when I click on completed its shows the abc project and when I click on ongoing its shows the bcd project but also redirect me to the page of bcd project .So the problem is I want bcd project page to appear only when I click on bcd project 'a' tag not on ongoing submenu click.it work fine for completed submenu. The flow should be I click on project menu then ongoing menu and then bcd project then clicking bcd project redirecting me to its page. but the flow here is project -> ongoing->redirecting to bcd project. On going menu also work when I first click on it , it doent redirect me but if I first open completed menu and then ongoing menu the problem is coming.
<nav class="navbar navbar-default navbar-fixed-top probootstrap-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html" title="uiCookies:FineOak"></a>
</div>
<div id="navbar-collapse" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li class="dropdown" >
<a data-toggle="dropdown" class="dropdown-toggle">Projects</a>
<ul class="dropdown-menu" >
<!-- <form> -->
<li class="dropdown-submenu dropdown" >
<span>Completed</span>
<ul class="dropdown-menu">
<li>ABC Project</li>
</ul>
</li>
<li class="dropdown-submenu dropdown">
<span>Ongoing</span>
<ul class="dropdown-menu">
<li>BCD Project</li>
</ul>
</li>
<!-- </form> -->
</ul>
</li>
<li>Career</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<!--TO PREVENT CLOSING OF MAIN MENU WHEN CLICKED ON SUB MENU -->
<script>
$('ul.dropdown-menu').on('click', function (event) {
// The event won't be propagated up to the document NODE and
// therefore delegated events won't be fired
event.stopPropagation();
});
</script>
I've following Bootstrap HTML code :
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li class="projects" class="dropdown"><a class="dropdown-toggle projects" data-toggle="dropdown" href="#"><span class="projects">Projects</span></a>
<ul class="dropdown-menu">
<li>List</li>
<li>Add new project</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Now I want to hide the drop-down menu using jQuery code i.e. I want to hide the drop-down menus List and Add new project.
I want this to be done in document-ready function. You can add the specific ids to the suitable tag to make the thing work.
Thanks.
$( document ).ready(function() {
$("ul.dropdown-menu").children().hide();
});
So I've spent the last 48 hours trying everything I found under the sun and cannot get anywhere, so I'm leaving it up to all of your fantastic, smart brains.
I just started using bootstrap not too long ago, I have a NAV bar that has 4 items: Home, Services, Download, and Contact.
The Services item is the only one that will have a dropdown.
The dropdown works perfectly on desktop/laptop browsers, but on my phone (android using chrome browser) it doesn't work so great.
On mobile, because of screen size, Bootstrap turns the whole nav bar into a dropdown menu, so the "services" dropdown is inside a parent dropdown. When I click "services" to get the dropdown menu with all the services, I see for a split second that the dropdown is opening because i see a glimpse of the text, then immediately the parent and services div will close.
<!-- start navigation -->
<script type="text/javascript">
$('body').on('touchstart.dropdown'.'.dropdown-menu', function(e){e.stopPrpagation(); })
</script>
<nav class="navbar navbar-default navbar-fixed-top templatemo-nav" role="navigation">
<div class="container">
<div class="navbar-header">
<img src="images/Logo-banner.jpg" height="auto" width="auto" />
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right text-uppercase">
<li>Home</li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu">
<li>Computer, Tablet & Phone Services</li>
<li>On Site Services</li>
<li>Remote Services</li>
<li>Managed Services</li>
<li>New & Used Computer Sales</li>
<li>Custom Built Computers</li>
</ul>
</li>
<!--<li>About</li>-->
<li>Download</li>
<!--<li>Contact</li>-->
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<!-- end navigation -->
I've looked up many problems on here, some say to use a javascript function similar to this one:
<script type="text/javascript">
$('.dropdown li, .dropdown a').click(function(e) {
e.stopPropagation();
});
</script>
Others say you need to manually show/hide the dropdown.
So far nothing has worked for me. I'm self taught programmer so as detailed as you can put it would be greatly appreciated. If you need anything else let me know,
Thanks,
I have simple Bootstrap 3 toggle navigation :
<ul class="nav navmenu-nav clearfix" >
<li class="navmenu-brand dropdown clearfix">
<i class="fa fa-home"></i><i class="title"> Menu item 1 </i><span class="fa fa-chevron-left"></span>
<ul class="dropdown-menu" role="menu">
<li class="clearfix">
test 1
</li>
<li class="clearfix">
test2
</li>
</ul>
</li>
<li class="navmenu-brand dropdown clearfix">
<i class="fa fa-video-camera"></i><i class="title"> menu item 2 </i><span class="fa fa-chevron-left"></span>
<ul class="dropdown-menu" role="menu">
<li class="clearfix">
Test 3
</li>
<li class="clearfix">
Test 4
</li>
</ul>
</li>
</ul>
I need when click on Test 1 and go to that page,to that part of menu be open on that page.Etc, if I click on test 3,url take me on test 3 page ,to have open second part of menu...
I try with similar problems, but no result,when go to page,menu is collapsed.
Bootply Link
I don't have much time but I am going to suggest a procedure for you. so I suggest you save the variable with Jquery using cookies:
you might need to call this: <script src="/path/to/jquery.cookie.js"></script> and on github plugin link is right here: jquery cookie
Now give an id to all of your dropdowns link
<i class="fa fa-video-camera"></i><i class="title"> menu item 2 </i><span class="fa fa-chevron-left"></span>
add an event listener to get the id of the dropdown link being click:
just like it is done here: get id of item clicked
store the value in a variable known as myVariable
$.cookie('cookieName', 'myVariable');
you can set expiry date
$.cookie('cookieName', 'myVariable', { expires: 1 });//expires after a day
in the other page, you read the cookie and store it in new variable:
newVariable = $.cookie('cookieName');
use that variable for your dropdown to be enabled
$(newVariable).dropdown('toggle');
Other things you might want to check is: send variables -cookies method in javascript, Open a dropdown automatically, store id of a link
I'm having an issue getting the collapsible navigation bar to load on a page - the button appears when you shrink the screen, but when I click on it, nothing happens. The console isn't throwing me any errors, so I'm assuming there must be something wrong with my css/javascript, but I don't really know what.
If it matters, I'm linking through with the Bootstrap CDN on my page - I don't know if that requires me to include the plugins manually or not (I don't think it would but I'm not sure).
The following is my HTML and Javascript link-ins:
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Operation Pulse</li>
<li>Forum</li>
<li class="dropdown">
Media <b class="caret"></b>
<ul class="dropdown-menu">
<li>News & Updates</li>
<li>Indie Pulse</li>
<li>rec</li>
<li>Geeks and Giggles</li>
<li class="divider"></li>
<li>Podcasts</li>
</ul>
</li>
<li class="dropdown">
Info <b class="caret"></b>
<ul class="dropdown-menu">
<li>About Us</li>
<li>FAQ</li>
<li>Crew</li>
<li>Contact Us</li>
</ul>
</li>
</ul>
</div>
JS
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js" type="text/javascript"></script>
Change the data-target= in the button to.. .navbar-collapse
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
Most of the time, boostrap.js file reference two times.
In our case, it was referenced twice, one in master and others by mistake in the inner pages (Page layout in SharePoint Case).