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
Related
I am making a website using HTML and I wanted to put one navigation bar on every page so I created a separate HTML for navigation but I don't know how to put it on every page. this is a small part of my navigation HTML code what do I have to do to put it on every page. and I am not meant to use PHP.
<body>
<div id="nav" class="menu">
<ul>
<li class="active"><i class="fa fa-home" aria-hidden="true"></i>Home </li>
<li> <i class="fa fa-user" aria-hidden="true"></i>Profile
<div class="sub-menu-1">
<ul>
<li>Daniel</li>
<li>Robel</li>
<li>Yohanes</li>
</ul>
</div>
</li>
<li><i class="fa fa-code" aria-hidden="true"></i>Interest
<div class="sub-menu-1">
<ul>
<li>Daniel</li>
<li>Robel</li>
<li>Yohanes</li>
</ul>
</div>
I think you should use iframe (tag of HTML)
which shows one HTML page's O/P on other else change only 2nd iframe's O/P
Take only navigation bar in first iframe and all other HTML pages in 2nd iframe
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
I have a mobile menu that has some anchored links that scroll to a certain section of the page when clicked. The problem with this is when I click one of these links, due to the fact that a new page is not loading, the menu remains open.
I wish to implement a solution whereby if one of these links are clicked, the menu closes by default. I have tried to hide the menu on click using JS but I think my logic may be wrong. Any help would be great.
Here is the code for my menu.
<div id="my-id" class="uk-offcanvas custom_canvas">
<div class="uk-offcanvas-bar">
<div class="uk-panel">
<a class="btn btn primary remove_image-div" onclick="UIkit.offcanvas.hide([force = false]);">
<img src="img/remove_icon.png" class="remove_image" alt="remove">
</a>
<ul class="mm-list mm-panel mm-opened mm-subopened" id="mm-0">
<li class="offcanvas_li">
<a class="offcanvas_open" title="Samples" href="index.html#sample-section">Samples</a>
</li>
<li class="offcanvas_li">
Packages
</li>
<li class="offcanvas_li">
About
</li>
<li class="offcanvas_li">
Contact
</li>
<li class="offcanvas_li">
Blog
</li>
<li class="offcanvas_li">
<a class="offcanvas_open" title="We Love" href="we_love.html">We Love</a>
</li>
</ul>
</div>
</div>
</div>
I'm not familiar with UIkit.offcanvas plugin but with a little sense I can answer you that you can add them (the links) all the attribute onclick="UIkit.offcanvas.hide([force = false]);"
A better (generic) solution is to "listen" to their click event, then, run offcanvas command.
Something like:
$('.offcanvas_li a').click(function() {
UIkit.offcanvas.hide([force = false]);
});
This works
<script>
function myFunction() {
UIkit.offcanvas.hide([force = false])
}</script>
<button onclick="myFunction()">Close Panel</button>
I fail to understand why href is not working on a tag for data-toggle="dropdown" . When I hit the Lists tab, i should be routed to the google website.
FIDDLE HERE
Simple HTML:
<div class="btn-group">
Lists
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
</div>
From Bootstrap documentation (http://getbootstrap.com/javascript/#dropdowns):
To keep URLs intact with link buttons, use the data-target attribute
instead of href="#".
So your code should be
<a data-target="http://www.google.es" target="_blank" href="http://www.google.es" class="btn btn-default dropdown-toggle">Lists</a>
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
Futhermore, you can find more information about how to get menu dropdown using hover instead of click: How to make twitter bootstrap menu dropdown on hover rather than click
A simple jQuery solution:
$('#menu-main > li > .dropdown-toggle').click(function () {
window.location = $(this).attr('href');
});
But the better solution is to replace the data-toggle attribute with data-hover
So your final code will be:
<div class="btn-group">
Lists
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
</div>
Remove: data-toggle="dropdown"
It's work for me.
In my Application one of div has scroll property.Inside div,I templated table with more than 100 rows.user can add/delete rows with contextMenu
contextMenu has 4 options names are AddTop,AddBottom,Delete and Edit.The thing is here If user right click on any row,contextMenu should be stick to that row even If user scroll the table.Right now It's not happening.
I written following code for contextMenu.
<div id="contextMenu" class="dropdown clearfix">
<ul class="dropdown-menu-r" role="menu" aria-labelledby="dropdownMenu">
<li id="addTop"><a tabindex="-1" href="#"> <span class="new-icons new-icons-add-top"></span> Add Top</a></li>
<li id="addBottom"><a tabindex="-1" href="#"> <span class="new-icons new-icons-add-bottom"></span> Add Bottom</a></li>
<li id="delete"><a tabindex="-1" href="#"><span class="new-icons new-icons-delete"></span> Delete</a></li>
<li id="edit"><a tabindex="-1" href="#"><span class="new-icons new-icons-edit2"></span> Edit</a></li>
</ul>
</div>
once user rightclick on any row of the table.following function will run.
var domEle=document.getElementById("contextMenu"),
xPosition=event.pageX,
yPosition=event.pageY;
domEle.style.display="block";
domEle.style.left=xPosition+"px";
domEle.style.top=yPosition+"px";
After completion of the following function,contextMenu coming untill it's fine.The problem is If I scroll contextMenu not sticking to that particular position.
I hope,you guys understand What I am trying to explaining.
can anyone help me.
Thanks.
Try implement your code with something like that:
http://www.pixelbind.com/make-a-div-stick-when-you-scroll/