Develop Reference

Extend and remove toolbar buttons

We have developed a toolbar (bootstrap-navbar) that contains a number of buttons/controls.
This toolbar is working as expected, but now there is a new requirement to provide a mechanism to extend this toolbar with new buttons from the outside (maybe via json configuration...), or to remove the default buttons.
e.g, imagine that we provided this toolbar as a service and there are options to be able to add/remove buttons by configuration or something, currently not sure how...
My main questions are:
What pattern (design pattern) should I use to extend this toolbar(if possible of course :) ). Please keep in mind that someone that wants to extend the toolbar should provide the buttons with the
logic.
How to structure the project
I want to divide the button's functionality into different javascript files
and load them together in the index.html. What's the recommended way to do it?
Note: I cannot use ES6(should support IE11 also :( ) and I don't use node js to have WebPack/Gulp/Grunt
Project structure
myProj
>index.html
>css
>> style.css
>js
>>script.js
Now I want to divide this big script into smaller files (like question 3),
which technique should I use? Maybe require.js (since I don't have the option to compile...
Any example will be very helpful
This is for example of the HTML code and all the handlers logic inside the jsFile
<div class="toggle-button">
<div class="wrapper">
<div class="menu-bar menu-bar-top"></div>
<div class="menu-bar menu-bar-middle"></div>
<div class="menu-bar menu-bar-bottom"></div>
</div>
</div>
<nav id="navi" class="navbar navbar-inverse menuBar">
<div class="container-fluid back">
<div class="navbar-header">
<a class="navbar-brand glyphicon glyphicon-dashboard" href="#"></a>
</div>
<ul class="nav navbar-nav">
<li id="dropdown1" class="dropdown open keep-open">
<a id="qlabel" class="dropdown-toggle glyphicon glyphicon-phone" data-toggle="dropdown" href="#">
<span class="caret"></span></a>
<ul class="dropdown-menu">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<a>
Collapsible Group 1</a>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="nav navbar-nav">
<li ><a id="s_e_1" onclick="dropDown1_1(this)">SubEntry 1.1.1</a></li>
<li ><a id="s_e_2" onclick="dropDown1_2(this)">SubEntry 1.1.1</a></li>
<li ><a id="s_e_3" onclick="dropDown1_3(this)">SubEntry 1.1.1</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible Group 2</a>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<ul class="nav navbar-nav">
<li ><a id="s_e2_1" onclick="dropDown1_1(this)">SubEntry 1.1.1</a></li>
<li ><a id="s_e2_2" onclick="dropDown1_2(this)">SubEntry 1.1.1</a></li>
<li ><a id="s_e1_3" onclick="dropDown1_3(this)">SubEntry 1.1.1</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible Group 3</a>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
</div>
</div>
</div>
</div>
</ul>
</li>
<li></li>
</ul>
<ul class="nav navbar-nav" style="margin-left:25%;">
<form class="navbar-form navbar-left">
<div class="input-group">
<span style="float:left; margin-top:3%; margin-right:3%; color:white;" class="box glyphicon glyphicon-search"></span>
<input type="search" class="form-control" style="height:30px; width:70%;" placeholder="Search" oninput="search(this)">
</div>
</form>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle glyphicon glyphicon-bell" data-toggle="dropdown" href="#" >
<span class="badge badge-danger">2</span><span class="caret"></span>
</a>
<ul class="dropdown-menu notif" style="padding:20%;">
<li>Hello</li>
<hr>
<li>Notif 2</li>
<hr>
<li>Notif 3</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle glyphicon glyphicon-globe" data-toggle="dropdown" href="#">
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>English</li>
<li>Hebrew</li>
<li>Finnish</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-log-in"></span></li>
</ul>
</div>
</nav>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

A great example of a preexisting, widely-used, and well-supported library that does the exact things you are requesting is TinyMCE 4. I highly recommend you look at their source code.
Specifically their Editor class, which contains a good example of configuration options including toolbars and buttons. Also check out AddOnManager, which uses ScriptManager to load the necessary pieces as well as plugins, languages, etc.
It may make you dizzy digging through it all but if you need help there is a big community behind it that could point you in the right direction.

How can I collapse div and open tab with bootstrap or js

I want when I click link and smoot-scrool to down then collapse div and open tab with Javascript.
This code is scrolled
<a data-scroll href="#smootScrool" onclick="callMyFunction('tab-1')"><h4 >Scrool, collapse and open tab authomatic</h4></a>
to here and with handle I can collapse and open tap, but I wan't do it authomatic with Javascript. How can I do it?
<div class="panel-heading"><span id="smootScrool" "> Scrolled Here!</span>
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapse-9" class="collapsed" aria-expanded="false">
<i class="fa fa-angle-down control-icon"></i>
<i class="fa fa-universal-access"> Qeydiyyatsız müraciət</i>
</a>
</h4>
</div>
<div id="collapse-9" class="panel-collapse collapse" aria-expanded="false">
<div class="panel-body">
<div class="row">
<div class="col-md-12 page-content ">
<div class="hr1 margin-top"></div>
<div class="tabs-section">
<!-- Nav Tabs -->
<ul class="nav nav-tabs center-block">
<li class="active"><i class="fa fa-question"></i>TAB 1</li>
<li><i class="fa fa-envelope"></i>TAB 2</li>
<li><i class="fa fa-briefcase"></i>TAB 3</li>
<li><i class="fa fa-legal"></i>TAB 4</li>
</ul>
<!-- Tab panels -->
<div class="tab-content">
<!-- Tab Content 1 -->
<div class="tab-pane fade in active" id="tab-1">
<div class="row">
</div>
</div>
1. Scrool to div (this working)
2. Authomatic collapse div (How can I do?)
3. Authomatic open tab (How can I do?)
Please suggestion best way and code example. Thanks

See the official bootstrap documentation about that, could be helpful or at least give you an better idea how to find a solution: http://getbootstrap.com/javascript/#tabs
Also Jquery UI: https://jqueryui.com/tabs/#mouseover
I hope that these links can be useful

clicking on drop down menu with href="#nav" using doubletaptogo.js causes page to jump down

I have a responsive page with a drop down navigation using doubletaptogo.js, problem is when I click on the #nav link to show the drop down items this causes the page to scroll down so the menu is now at the top of the page.
here is the page: http://goligraphist.com.au/development
I have found that when I remove all the content below the nav this issue is fixed but this obviously isn't an option. I'm new to javascript and this has really got me stuck, any ideas?
Sample Code :
<nav id="nav" role="navigation">
<a href="#nav" title="show menu" class="menu-button">
<img src="img/menu.png" alt="menu icon">
</a>
<a href="#" title="hide menu" class="menu-button">
<img src="img/menu.png" alt="menu icon">
</a>
<ul>
<li class="active">
Home
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
jQuery Script :
<script src="js/doubletaptogo.js"></script>
<script>
$( function() {
$( '#nav li:has(ul)' ).doubleTapToGo();
});
</script>

Putting the following code within DOM ready should stop your page from jumping:
$('[href^=\\#]').on('click', function(event){
event.stopPropagation();
});

I can see what the issue is here.. You have defined the nav further down the page under the main site image, have you tried moving it right at the top of the page so it defaults to this place?
Also have you tried alternatives - I have achieved this same thing using bootstrap:
<nav id="Navbar" class="navbar navbar-fixed-top navbar-inverse" role="navigation" >
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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 class="define-spinner">
</div>
<a class="homeLogo" href="#/"><i class="fa fa-home fa-2x icon-color fa-inverse"></i></a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse" role="navigation">
<ul class="nav navbar-nav">
<li class="controller">
<div id="h2Header"><g:message code="default.title" args="[meta(name:'app.name')]"/> </div>
</li>
</ul>
<ul class="nav navbar-nav navbar-right" >
<li class="dropdown controller">
<a class="dropdown-toggle" role="button" data-toggle="dropdown">
<span id="userMessage">
<span class="glyphicon glyphicon-user"></span>
<g:message code="default.user.label" default="{{user.username}}" />
</span>
<b class="caret"></b>
</a>
<ul class="dropdown-menu dropdown-menu-dark" role="menu">
<li>
<a class="fa fa-gear icon-color" onclick='window.location.href="#/updateusername"' title="${message(code: 'default.username.update', default: 'Update Username')}">
<g:message code="default.username.update" default="Update Username"/>
</a>
</li>
<li>
<a class="fa fa-gear icon-color" onclick='window.location.href="#/updatepassword"' title="${message(code: 'default.password.update', default: 'Update password')}">
<g:message code="default.password.update" default="Update Password"/>
</a>
</li>
</ul>
</li>
<li class="controller">
<a data-ng-controller='UserCtrl' data-ng-click='logout()' title="${message(code: 'security.signoff.label', default: 'Log out')}">
<span class="glyphicon glyphicon-log-out"></span> <g:message code="security.signoff.label" default="Sign Off"/>
</a>
</li>
</ul>
</div>
</div>
</nav>

OK I finally figured this out. Turns out that doubletaptogo.js only works when the nav is at the top of the page and there is no way around this; if the nav is below any other content such as header etc forget about using this script as it will always cause the nav to jump to the top of the page.
I have opted for an alternative drop down that simply uses html and css, no js or jquery needed for this.
See http://goligraphist.com.au/development/ for the update.
That's the end of a major headache.

You can call void(0) for the link like below :
Clickc heere 1
or use e.preventDefault();
$('a[href="#"]').click(function(e){
e.preventDefault();
});
JSFiddle Demo

I think the right way is to write the full URL before the hash (#)
PHP:
<?php
$currentPage = 'http' . ($_SERVER["HTTPS"] && $_SERVER["HTTPS"] != 'off' ? 's' : '') . '://';
$currentPage .= $_SERVER["HTTP_HOST"] . htmlentities($_SERVER["REQUEST_URI"], ENT_QUOTES);
?>
<a href="<?php echo $currentPage; ?>#nav" title="show menu" class="menu-button">
<a href="<?php echo $currentPage; ?>#" title="hide menu" class="menu-button">
Smarty:
..
..

Bootstrap Off Canvas Left navigation Menu

I'm trying to build responsive layout for webpage using bootstrap. I would like to render the webpage normally with header, left navigation on large displays[desktop resolutions]. But I would like to show toggle button if the site is resized to that of tablets or mobile device [OffCanvas Bootstrap]. Below is what i have achieved so far..
JsFiddle : http://jsfiddle.net/BqKNV/222/
Now,I'm having issues with slide animation and left navigation visibility[always hidden]. If anyone can spot where I'm going wrong will be appreciated.. thanks
<section class="offcanvas-layout">
<aside id="aside-menu" class="offcanvas-left nav-collapse collapse">
<div id="leftcontent">
<div class="inner">
<div></div>
</div>
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav nav-pills nav-stacked">
<li> <span class="glyphicon glyphicon-play"></span>United States
</li>
<li> <span class="glyphicon glyphicon-play"></span>Canada
</li>
</ul>
</div>
<!-- /.container-fluid -->
</div>
</aside>
<article class="offcanvas-content">
<div id="header">
<div class="container">
<button class="btn navbar-btn" data-toggle="collapse" data-target="#aside-menu">Click Me</button> <a id="logo">Logo here</a>
<div class="dropdown pull-right"> Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
<div class="searchBox">
<div class="input-group input-group-sm">
<input id="header-search" type="text" class="form-control" placeholder="search..." /> <span class="input-group-btn">
<button class="btn btn-default" type="button" id="search_Button"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
<div id="maincontent">
<div id="maincontentnav">
<p>Main Content Here</p>
</div>
</div>
</article>
</section>

You can use the visible-xs responsive utility class like this...
<button class="btn navbar-btn visible-xs" data-toggle="collapse" data-target="#aside-menu">Click Me</button> <a id="logo">Logo here</a>
http://bootply.com/130279

Bootstrap Collapse hide onClick

freedomcore.com/saverplaces.co.uk/NEW/
In the above site when click the Terms & Conditions or More information on this voucher links just below the Get Voucher button. You will see a div slide down below with the content.
I want it so that if you have clicked Terms & Conditions then go and click More information on this voucher it will hide the "Terms & Conditions" content so that both are not displayed at the same time.
My JavaScript isn't the best this is what I came up with but it does not work:
I have More information on this voucher link this class hide-terms-1 then I have this jQuery code:
$(document).ready(function(){
$(".hide-terms-1").click(function(){
$("#voucher-terms-1").hide();
});
});
This seems to be working kind of but once it is click you can not open it back up again.

HTML:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar menubutton" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="menu">Menu</span>
</a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-search"><img src="images/search_03.png">Search</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>About Us</li>
<li>Research & Innovation</li>
<li>Our Products</li>
<li>Responsibility</li>
<li class="subnav"><a href="#" >Careers</a></li>
<li class="subnav"><a href="#" >Newsroom</a></li>
<li class="subnav"><a href="#" >Contact Us</a></li>
<li class="navfoot">This is a mobile version of our website<br/>
View full site</li>
</ul>
</div><!--/.nav-collapse -->
<div class="nav-search collapse">
<div class="search_box">
<form action="" method="post">
<input type="text" value="Enter Search">Search
</form>
</div><!-- end search_box -->
</div><!--/.nav-search -->
</div>
</div>
</div>
JS:
$('.container a').click(function(){
var $target = $($(this).data('target'));
if(!$target.hasClass('in'))
$('.container .in').removeClass('in').height(0);
});
http://jsfiddle.net/gNUEx/
http://jsfiddle.net/mmfansler/fzbsp/

Let's try in this way:
$(document).ready(function(){
$(".hide-terms-1").click(function(){
$("#voucher-terms-1").collapse('hide');
});
});

This is much better I think
$(".navbar").find("[data-toggle=collapse]").click(function(e){
e.preventDefault();e.stopPropagation();
$(".navbar").find(".collapse.in").collapse("hide");
$($(this).attr("data-target")).collapse("show");
});