Develop Reference

Can I hide the text and button of my mean-menu jquery?

So basically I'm using a template for my site and adjusting accordingly. The site defines the menu-bar to be hidden on start and it appears on scroll down.
The text and menu button however, always appear on start. I cant understand how I can also tell the text (email and phonenumber) to stay hidden with the rest of the menu-bar.
<header id="sticky-header" class="header-fixed">
<div class="header-area">
<div class="container sm-120">
<div class="row">
<div class="col-md-9 col-sm-10" style="height: 70px; width: 930px">
<div class="col-md-4 col-sm-6">
<div class="logo text-upper">
<h6>xxxx / xxx 004 x8 / info#testsite.de</h6>
</div>
</div>
<div class="menu-area hidden-xs">
<div class="hamburger hamburger--collapse">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<nav class="hamburger-menu">
<ul class="basic-menu clearfix">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</header>
/* menu last class added */
$('ul.basic-menu>li').slice(-2).addClass('menu-p-right');
/* TOP Menu Stick */
win.on('scroll',function() {
if ($(this).scrollTop() > 1){
$('#sticky-header').addClass("sticky");
}
else{
$('#sticky-header').removeClass("sticky");
}
});
/* meanmenu */
$('#mobile-nav').meanmenu({
meanMenuContainer: '.basic-mobile-menu',
meanScreenWidth: "767"
});
/* hamburgers menu option */
$('.hamburger').on('click', function() {
$(this).toggleClass('is-active');
$(this).next().toggleClass('nav-menu-show');
});

$(document).on('scroll',function(){
$(".hamburger-menu").slideDown(); //i have used slide down function for animation, you can change class or add css display type changing properties
})
.makescroll{height:1000px;}
.hamburger-menu{display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header id="sticky-header" class="header-fixed">
<div class="header-area">
<div class="container sm-120">
<div class="row">
<div class="col-md-9 col-sm-10" style="height: 70px; width: 930px">
<div class="col-md-4 col-sm-6">
<div class="logo text-upper">
<h6>xxxx / xxx 004 x8 / info#testsite.de</h6>
</div>
</div>
<div class="menu-area hidden-xs">
<div class="hamburger hamburger--collapse">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
<nav class="hamburger-menu">
<ul class="basic-menu clearfix">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Kontakt</li>
<li>Impressum</li>
</ul>
</nav>
<div class="makescroll">Extended scroll</div>
</div>
</div>
</div>
</div>
</div>
</header>

Bootstrap Wizard Issues

I am trying to use the twitter bootstrap wizard (http://vinceg.github.io/twitter-bootstrap-wizard/) and for some reason when the first tab/pill the next button is showing that it is disabled. The button does work when I click on it, but it doesn't appear to be fully active.
Here is video of the functionality I am seeing. You will notice that when the tab first opens tab 1 is selected. The progress bar is a 0% and the next button is showing disabled. When I click next it does move to the next tab. When I go back to the first tab, the progress bar has the correct width for tab 1 and now the next button for tab 1 is no longer disabled. Ideally I would like this functionality to work from the beginning.
YouTube Video:
https://youtu.be/zq9yCCUJQ68
HTML:
<div class="row">
<div class="col-md-12">
<ul class="nav nav-pills">
<li><a id="mywebsitesLink" data-toggle="tab" href="#mywebsites">My Websites</a></li>
<li><a data-toggle="tab" href="#billing">Billing</a></li>
<li><a data-toggle="tab" href="#suppport">Support</a></li>
<li><a data-toggle="tab" href="#newWebsite">Add a new website</a></li>
</ul>
<div class="tab-content">
<div id="mywebsites" class="tab-pane fade">
<!-- <div class="col-md-4 website-container">
<strong>Website URL: </strong><p>https://powerfastwebsites.com</p>
<strong>Website Admin Login: </strong><p>https://powerfastwebsites.com/wp-admin</p>
<strong>Plan: </strong><p>Basic</p>
<button type="button" class="btn btn-primary">Upgrade Plan</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>
<div class="col-md-4 website-container">
<strong>Website URL: </strong><p>https://powerfastwebsites.com</p>
<strong>Website Admin Login: </strong><p>https://powerfastwebsites.com/wp-admin</p>
<strong>Plan: </strong><p>Basic</p>
<button type="button" class="btn btn-primary">Upgrade Plan</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>
<div class="col-md-4 website-container">
<strong>Website URL: </strong><p>https://powerfastwebsites.com</p>
<strong>Website Admin Login: </strong><p>https://powerfastwebsites.com/wp-admin</p>
<strong>Plan: </strong><p>Basic</p>
<button type="button" class="btn btn-primary">Upgrade Plan</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>
<div class="col-md-4 website-container">
<strong>Website URL: </strong><p>https://powerfastwebsites.com</p>
<strong>Website Admin Login: </strong><p>https://powerfastwebsites.com/wp-admin</p>
<strong>Plan: </strong><p>Basic</p>
<button type="button" class="btn btn-primary">Upgrade Plan</button>
<button type="button" class="btn btn-danger">Cancel</button>
</div>-->
</div>
<div id="billing" class="tab-pane fade">
<h3>Billing</h3>
<p>Some content in menu 2.</p>
</div>
<div id="suppport" class="tab-pane fade">
<h3>Support</h3>
<p>Some content in menu 2.</p>
</div>
<div id="newWebsite" class="tab-pane fade">
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav nav-pills" id="myTab">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Forth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
</ul>
</div>
</div>
</div>
<div id="bar" class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
2
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;">First</li>
<li class="previous">Previous</li>
<li class="next last" style="display:none;">Last</li>
<li class="next">Next</li>
</ul>
</div>
</div>
</div>
</div>
</div>
JS
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({
'onTabShow': function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index+1;
var $percent = ($current/$total) * 100;
$('#rootwizard .progress-bar').css({width:$percent+'%'});
},
'tabClass': 'nav nav-pills',
'onNext': function(){alert("You hit next");}
});
});

I think the issue is happening because it is within another tab pane. I tried to append the HTML using JQuery using this and it seems to have resolved the issue.

How to open a accordion item and fire its shown event?

I have an event handler for the show.bs.collapse-Event of a bootstrap accordion.
$('.collapse[data-location]').on('show.bs.collapse', function (e) {
//Do Something...
}
This event handler is executed, if the user opens it. So far ok.
Now I want to open a specific item via Jquery:
$('.panel-collapse').collapse('show');
The specific item is opening, but the above event handler is not fired.
So how can I open a accordion item, with respecting every show.bs.collapse-Event handler?
This is my HTML, if this does matter:
<div class="panel-group accordion">
<div class="panel panel-bordered panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#location1">Hamburg</a>
</h4>
</div>
<div class="panel-collapse collapse" id="location1" data-location="1" style="position:relative">
<div class="panel-body">
<div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Zeitraum</li>
<li role="presentation">Vergleich</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="TabTimespan1"></div>
<div role="tabpanel" class="tab-pane" id="TabCompare1"></div>
</div>
</div>
</div>
</div>
</div>
<!-- .... -->
</div>

Ng-click and ng-show don't work on dynamical content (angular)

Why Ng-click and ng-show don't work on dynamical content, while if i try to switch static tabs everything works fine? What do i need to do, so i could click trough profiles tabs? How to achieve desired effect with smallest code footprint? I hope you guys can help me.
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active"><a ng-click="tab=1" data-toggle="tab" aria-expanded="true" style="cursor: pointer;">Subscriber</a></li>
<li class=""><a ng-click="tab=2" data-toggle="tab" aria-expanded="true" style="cursor: pointer;">Devices</a></li>
<li class="" ng-repeat="p in profiles"><a ng-click="tab=p.uid" data-toggle="tab" aria-expanded="true" style="cursor: pointer;">{{p.name}}</a></li>
</ul>
<div class="tab-content">
<!-- subscriber tab -->
<div class="tab-pane active" ng-show="tab==1" ng-init="tab=1">
<div class="row">
<div class="col-xs-12">
sssssssssssssssssssssssssssssssss
</div>
</div>
</div>
<!-- subscriber tab -->
<!-- devices tab -->
<div class="tab-pane active" ng-show="tab==2">
<div class="row">
<div class="col-xs-12">
dddddddddddddddddddddddddd
</div><!-- /.row -->
</div><!-- /.tab-pane -->
</div><!-- /.tab-pane -->
<!-- devices tab -->
<!-- profiles tab -->
<div class="tab-pane active" ng-repeat="p in profiles" ng-show="tab==p.uid">
<div class="row">
<div class="col-xs-12">
ppppppppppppppppp
</div><!-- /.row -->
</div><!-- /.tab-pane -->
</div><!-- /.tab-pane -->
<!-- profiles tab -->
</div><!-- /.tab-content -->
</div>
Let say for example that i have profiles object:
$scope.profiles=[
{
"Name" : "Jhonny",
"uid" : "00000"
},
{
"Name" : "Ken",
"uid" : "00001"
},
{
"Name" : "Zelda",
"uid" : "00002"
}]
Thank you in advance!

Set a function for your ng-click directive.
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="" ng-repeat="p in pies"><a ng-click="setTab(p)" >{{p.name}}</a></li>
</ul>
<div class="tab-content">
<!-- profiles tab -->
<div class="tab-pane active" ng-repeat="p in pies" ng-show="tab==p.id">
<div class="row">
<div class="col-xs-12">
{{p.name}}
</div><!-- /.row -->
</div><!-- /.tab-pane -->
</div><!-- /.tab-pane -->
<!-- profiles tab -->
</div><!-- /.tab-content -->
</div>
</div>
</div>
</div>
Javascript :
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.tab = 1;
$scope.setTab = function(p){
$scope.tab = p.id;
}
$scope. pies = [
{name:"kakaolu",id:1},
{name:"kestane",id:2},
{name:"fisne",id:3},
];
}
Jsfiddle

Click on a link and open appropriate tab

I am experimenting with bootstrap, angularjs. So I pushed nav-tabs inside modal-window and open this modal by a link's click. But I want to open appropriate tab straight on click. If i click on travel, I want to get to the travel tab etc. What I should use to solve this problem? Maybe I need to simulate click or something like this?
http://jsfiddle.net/3kgbG/1056/
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<div class="hobbies">
hobbies & interests
</div>
<div class="row padding-top group-icons">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<a href="#" data-toggle="modal" data-target="#myModal">
football
</a>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<a href="#" data-toggle="modal" data-target="#myModal">
travel
</a>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<a href="#" data-toggle="modal" data-target="#myModal">
history
</a>
</div>
</div>
</div> <!--popUp container-->
<!-- Modal -->
<div id="myModal" class="modal fade popUp" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h2 class="h2-style">My Hobbies</h2>
<hr class="hr_line"/>
</div>
<div class="modal-body">
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#bartending" aria-controls="bartending" role="tab"
data-toggle="tab">bartending</a></li>
<li role="presentation"><a href="#football" aria-controls="football" role="tab"
data-toggle="tab">football</a>
</li>
<li role="presentation"><a href="#travel" aria-controls="travel" role="tab"
data-toggle="tab">travel</a>
</li>
<li role="presentation"><a href="#history" aria-controls="history" role="tab"
data-toggle="tab">history</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content" ng-controller="HobbiesCrtl">
<div role="tabpanel" class="tab-pane fade" id="{{hobby.id}}" ng-repeat="hobby in hobbies">
<div class="container padding-top">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<img src="{{hobby.img}}" alt=""
style="width: 70%; margin: 0 auto; display: block">
</div>
<div class="col-xs-12 col-sm-6 col-md-9 col-lg-9">
{{hobby.description}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--popUp container-->
<!--angular Ctrl-->
myApp.controller('HobbiesCrtl', function($scope, $http){
$scope.title = "my hobbies";
$http.get(window.location + 'js/hobbies.json').success(function(data) {
$scope.hobbies = data;
})
} );
this is my json file:
{
"id": "football",
"img": "http://images.fastcompany.com/upload/adidas-jabulani-ball.jpg",
"description": " ball with the foot to score a goal. Unqualified, the word football is understood to refer to whichever form of is the most popular in the"
},
{
"id": "travel",
"img": "http://thumbs.dreamstime.com/z/travelling-world-21448211.jpg",
"description": " ball with the foot to score a goal. Unqualified, the word football is understood to refer to whichever form of is the most popular in the"
},

As soon as you are using the same controller for the view and modal window, so they are sharing the same $scope.
You can create scope variable like activeTab, and set in on click:
<a href="#" data-toggle="modal" ng-click="activeTab == 'football'" data-target="#myModal">
football
</a>
In your modal window just toggle active class if scope variable activeTab has neccessary value:
<li role="presentation" ng-class="{active: activeTab == 'football'}"><a href="#football" aria-controls="football" role="tab"
data-toggle="tab">football</a>