Is there a way to have content above slicknav menu when responsive? Im trying to move it from being at the top of the page, im trying to get:
====CONTACT DETAILS====
====LOGO====
====SLICKNAV====
Not sure what you have already tried - but you would normally use the prependTo property to place where the menu goes.
e.g.
<div id="d1">Before</div>
<div id="d2">some other content</div>
<div id="d3">third row of content</div>
<div>
<ul style="display:none">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</div>
<div id="d4">4th row of content</div>
and script
$('ul').slicknav({
prependTo:'#d3'
});
Please see this JSFIDDLE for an example of the above
Related
I have this HTML
<div class="pageContent">
<aside class="left-cont">
<ul class="btn-menu" >
<li ng-repeat="tab in tabs" ><a class="ng-scope ng-binding" href="#" ng-click="show={{tab.id}}"> {{tab.name}}</a> </li>
</ul>
</aside>
<section class="main-content" ng-show="show === 1">
<h1> {tab.title}}</h1>
<p>{{tab.content}}</p>
</section>
<section class="main-content" ng-show="show === 2">
<h1> {{tab.title}}</h1>
<p>{{tab.content}}</p>
</section>
<section class="main-content" ng-show="show === 3">
<h1> {{tab.title}}</h1>
<p>{{tab.content}}</p>
</section>
</div>
And I have three problems with it:
1)ng-click="show={{tab.id}}"shows me the right id number in the dom, for instance, id=1 does show <a class="ng-scope ng-binding" href="#" ng-click="show=1">but I do get an error in my console - Error: [$parse:syntax] http://errors.angularjs.org/1.3.8/$parse/syntax?p0=%7B&p1=invalid%20key&p2=7&p3=show%3D%7B%7Btab.id%7D%7D&p4=%7Btab.id%7D%7D Why is that? I have tried to to write tab.id instead of {{tab.id}}, but it doesn't even fetch the element.
2) I want the section tags to be appended whenever there's a click on the a, but I can not do so since the section tags aren't wrapped in the li tags (when I do put them in the li they do fire, but that's not what I want). How do I bind these two different elements?
3) I want each section to append the content of its specific tab for the section that has - ng-show="show === 1" I want tab.title and tab.content of the tab that has the id=1, and so on..
How is that all possible?
Help is very much appreciated here
#HarishR is right: this is not the AngularJS way to do things. The imperative way of doing things would be to have an ng-click set the isActive property to true on an instance of tab.
Then the directive would would watch the isActive property and change class accordingly.
Since you probably don't want to reinvent the wheel, you could consider using Angular strap ( http://mgcrea.github.io/angular-strap/#/tabs#tabs ) or check out this code https://github.com/angular-ui/bootstrap/blob/master/src/tabs/tabs.js.
I'm learning AngularJs and I got to a small brick wall...
when I want to split items into tabs, my template is exactly the same for all the tabs, the only small change if the model used in the ng-repeat, as an example:
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="tier6">
<div ng-include="'partials/vehicles-6-details.html'"></div>
</div>
<div role="tabpanel" class="tab-pane fade" id="tier8">
<div ng-include="'partials/vehicles-8-details.html'"></div>
</div>
<div role="tabpanel" class="tab-pane fade" id="tier10">
<div ng-include="'partials/vehicles-10-details.html'"></div>
</div>
</div>
This way I have to create 3 exact files, where the template is:
<ul class="list-unstyled list-inline list-tier">
<li ng-repeat="tank in tankInfoLevel6" data-sortby="{{playersByTankId[tank].length}}">
<span class="badge">{{playersByTankId[tank].length}}</span>
<img ng-src="{{tankInfo[tank].image}}" alt="" class="tank-img"
pop-over title="Tank fans" fans="tanksFans[tank]" />
<br><b>{{tankInfo[tank].name_i18n}}</b>
<br>({{tankInfo[tank].type_i18n}})
</li>
</ul>
and the only change is tankInfoLevel6 by tankInfoLevel8 and tankInfoLevel10 respectively.
How can I use a simple file?
I've tried:
<div ng-include="'partials/vehicles-details.html'"
ng-init="tierTanks = tankInfoLevel6"></div>
and also with onLoad and onInclude without any good results.
The output is showing the last tab contents in all tabs, so it seems that it loads all but the last call with tankInfoLevel10 is the one that overrides all the tabs.
Is there a way to make this work neatly?
What about ng-repeat?
<div ng-repeat="tankItem in tankItems">
<div ng-include="'partials/vehicles-details.html'"></div>
</div>
In template use tankItem.
Wouldn't a directive work better here, using an attribute to pass/reference the tankItems list?
When using a UI Boostrap tabset along with nested sticky states created with ui-router and ui-router-extras, I have an issue where navigating to a tab's state via URL will select the first tab along with the correct tab. It should only activate the tab whose state matches the URL route.
Here's what the tabset looks like:
<div style="position:relative">
<tabset>
<tab heading="Dashboard" ui-sref="LMS.Dashboard" ui-sref-active="active"></tab>
<tab heading="Modules" ui-sref="LMS.Modules" ui-sref-active="active"></tab>
<tab heading="Messages" ui-sref="LMS.Messages" ui-sref-active="active"></tab>
<tab heading="Settings" ui-sref="LMS.Settings" ui-sref-active="active"></tab>
</tabset>
<div ui-view="Dashboard" class="tab-content" ng-show="$state.includes('LMS.Dashboard')">
<h2>Dashboard</h2>
{{test}}
</div>
<div ui-view="Modules" class="tab-content" ng-show="$state.includes('LMS.Modules')">
<h2>Modules</h2>
</div>
<div ui-view="Messages" class="tab-content" ng-show="$state.includes('LMS.Messages')">
<h2>Messages</h2>
</div>
<div ui-view="Settings" class="tab-content" ng-show="$state.includes('LMS.Settings')">
<h2>Settings</h2>
</div>
</div>
I have a plunker here:
http://plnkr.co/edit/sQB58YKntDwNIUpAdLmT?p=preview
To see the issue, select a tab other than 'Dashboard', then reload the "live view" frame.
Another way is to open it in a window, switch the tab, then reload.
I have the same issue. Add active="false" to disable default behavior and use ui-sref-active to add active class.
<tab ui-sref-active="active" active="false">
Edit
While this method seems to works, it produces error because false is not assignable.
Edit 2
Combining ng-init with a local scope variable seems to do the trick.
<tab ui-sref-active="active" active="isActive" ng-init="isActive=false">
In your case, it might be simpler to just add an active variable for each tab. See this plunker:
http://plnkr.co/edit/73lm068buZf851h47FVQ?p=preview
I had exactly the same thing. After searching for while, I decided the "value" ui-bootstrap offers around tabs is not worth the effort. My simple manual implementation:
<ul class="nav nav-tabs">
<li ng-class="{active:$state.current.name == 'properties.edit.basic'}"><a ui-sref="properties.edit.basic">Basic</a></li>
<li ng-class="{active:$state.current.name == 'properties.edit.marketing'}"><a ui-sref="properties.edit.marketing">Marketing</a></li>
<li ng-class="{active:$state.current.name == 'properties.edit.rooms'}"><a ui-sref="properties.edit.rooms">Rooms</a></li>
<li ng-class="{active:$state.current.name == 'properties.edit.images'}"><a ui-sref="properties.edit.images">Images</a></li>
<li ng-class="{active:$state.current.name == 'properties.edit.rates'}"><a ui-sref="properties.edit.rates">Rates</a></li>
<li ng-class="{active:$state.current.name == 'properties.edit.availability'}"><a ui-sref="properties.edit.availability">Availability</a></li>
</ul>
<ui-view></ui-view>
For my angular application , i have created left nav menu. On click of link ,corresponding page is opening. My problem is I want to change active link color to blue whereas other links are in white color. When I click another link from menu ,that link should be in blue and remaining are in white.
I do not know how to do this in angular. With Jquery , its easy for me. But angular makes me nervous.
My left nav is
<div class="leftNavList">
<div class="leftNavManageHeading"><span "mSans300 font14">Manage</span></div>
<ul class="nav manageNav">
<li ng-click="isCollapsed2 = !isCollapsed2">
<div class="listOuterWrapper">
<div class="listInnerWraper">
<span class="mSans300">Usage</span>
</div>
</div>
</li>
<li ng-click="isCollapsed3 = !isCollapsed3">
<div class="listOuterWrapper">
<span class="mSans300">Payment</span>
</div>
<div class="listInnerWraper">
<div collapse="!isCollapsed3">
<ul class="paymentNav mSans30 font14">
<li>PaymentMethod</li>
<li>PaymentHistory</li>
</ul>
</div>
</div>
</li>
<li ng-click="isCollapsed4 = !isCollapsed4">
<div class="listOuterWrapper">
<div class="listInnerWraper">
<span class="mSans300">Account</span>
</div>
</div>
</li>
</ul>
</div>
Step 1: In ng-init declare a variable.
ng-init="activelink=0"
Step 2: Now in ng-cick of link change the value of activelink.
<li><a href="" ng-click="activelink=1"</a></li>
<li><a href="" ng-click="activelink=2"</a></li>
Step 3: Declare a class linkcolor that defines the color of the active link.
Step 4: Now use ng-class="{ 'linkcolor' : activelink==1 }" expression for both the link.
Step 5: The links will change to
<li><a href="" ng-click="activelink=1" ng-class="{ 'linkcolor' : activelink==1 }" </a></li>
<li><a href="" ng-click="activelink=2" ng-class="{ 'linkcolor' : activelink==2 }"</a></li>
The expression activelink==1 will return true or false depending on the value of activelink.
I would recommend looking into ui-router , it has active states (these are the pages of your app) which do all these css and state changing from the view rather than having the logic in your controller and there are many powerful tools to make your app function better in less code..
In your nav:
<ul>
<li ui-sref-active="active" class="item">
<a href ui-sref="route1">route1</a>
</li>
</ul>
And thats it! Your currently active state/ view will apply the ui-sref-active="active" class to that li element. where "active" is the class name which is applied.
I'm stuck in the position where I have to work with some pre-generated html elements. For example I have a list like this
<ul>
<li class="product>
<div class="name">product 1</div>
<div class="price">$199</div>
</li>
<li class="product>
<div class="name">product 2</div>
<div class="price">$299</div>
</li>
</ul>
Since the AngularJs has been talking all about dynamically generated content via js, I wonder if there is a way that I can loop through the pre-generated html elements to initialize the models?