I would like an angular-strap tab title to have an icon-font an then the text for the title.
The resulting html for the tab list would have to have an li that looks like the following.
<li class="ng-scope active" ng-class="$index == $panes.$active ? $activeClass : ''" ng-repeat="$pane in $panes">
<a class="ng-binding" role="tab" ng-click="$setActive($index)" data-toggle="tab" ng-bind-html="$pane.title" data-index="0">
<i ng-show="loading" class="fa fa-spinner fa-spin"></i> Home
</a>
</li>
How do I express this in angular-strap?
It's very easy to do in strait bootstrap.
You can use escaped html.
So, putting something like this in the title will display the icon
<i ng-show="loading" class="fa fa-spinner fa-spin"></i> Home
Related
We have had a Tumblr page set up for a year with no issues until this past month.
We have a page redirect in our navigation bar. The redirect goes to our main website, WordBrewery.com. The link listed in the redirect is the main URL - http://www.wordbrewery.com.
Now it is redirecting to our site's 404 page and this is added to the end of the URL:
#_=_
I have tried using this script, but it has done nothing:
<script>
if (window.location.hash == "#_=_")
{
window.location.hash = "";
}
</script>
I have also tried replacing the main URL with a shortened Google version but this has not worked either.
Any help would be greatly appreciated.
EDIT:
The hard code that I am able to edit appears like this:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
{block:IfShowAvatar}
<img src="{PortraitURL-128}" class="{AvatarShape}" alt="{Title}" />
{/block:IfShowAvatar}
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 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>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
{block:IfShowTitle}<li class="active">{Title}</li>{/block:IfShowTitle}
{block:IfShowArchiveLink}
<li>{lang:Archive}</li>
{/block:IfShowArchiveLink}
{block:IfShowRandomLink}
<li>{lang:Random}</li>
{/block:IfShowRandomLink}
{block:HasPages}
{block:Pages}<li>{Label}</li>{/block:Pages}
{/block:HasPages}
{block:AskEnabled}
<li>{AskLabel}</li>
{/block:AskEnabled}
{block:SubmissionsEnabled}
<li>{SubmitLabel}</li>
{/block:SubmissionsEnabled}
{block:IfTagMenuList}
<li class="dropdown">
<a href="#" id="tag-menu" data-toggle="dropdown" aria-expanded="true">
{text:Tag Menu Title} <span class="caret"></span>
</a>
<script>
var list = '{text:Tag Menu List}';
list = list.split(',');
var html = '<ul class="dropdown-menu" role="menu" aria-labelledby="tag-menu">';
for(var i=0; i<list.length; i++) {
html += '<li role="presentation"><a role="menuitem" tabindex="-1" href="/tagged/' + list[i] + '">#' + list[i] + '</a></li>';
}
html += '</ul>';
document.write(html);
</script>
</li>
{/block:IfTagMenuList}
{block:IfShowSearch}
<li><a class="icon-search search-overlay-show"></a></li>
{/block:IfShowSearch}
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
I am unsure of how to get rid of the string Tumblr adds to redirected URLs but alternatively you can hard code the link to avoid utilising Tumblr's redirect.
Beneath {block:HasPages} add <li>WordBrewery.com</li>
Let's say that i have this tag :
<a ng-click="leavingMenuPage()" href="#/app/interview" >
<i class="icon ion-android-person"></i>
<p class="pFont" >Görüşme</p>
</a>
Does ng-click will be called first or it will go to the link defined before ??
I am new in ionic, I try to use ion-tabs to navigate, but I am facing some problem with it, my application have two tags "Home" and "Option", "Home" have Sub tabs
tag
_______|_________
| |
Home option
|
sub
my problem is:
When I navigate from "Home" tag to Sub tag, then navigate to "Option tag" and try to return to "Home" tag, I return to sub tag not to "Home" tag.
How can I return to "Home" tag not to Sub tag
This is per design, as every single tab has its own history stack. If you want to use single stack for all tabs, you can't use ion-tabs directive, you have to make it up on your own.
Example by jason-engage from github issue (change as appropriate):
<ion-view class="tabs-container">
<!-- Single UI VIEW -->
<ion-nav-view name="tabview"></ion-nav-view>
<!-- TABS -->
<div class="tabs tabs-icon-top">
<a class="tab-item" ng-click="goTab1()" ng-class="{ active : settings.isTab1}">
<i class="icon ion-ios-flame"></i> Tab1
</a>
<a class="tab-item" ng-click="goTab2()" ng-class="{ active : settings.isTab2 }">
<i class="icon ion-ios-location"></i> Tab2
</a>
<a class="tab-item" ng-click="goTab3()" ng-class="{ active : settings.isTab3, 'has-badge' : settings.numberOfBadges != 0 }">
<i class="icon ion-ios-chatboxes"></i> Tab3 <span class="badge badge-assertive" ng-if="settings.numberOfBages != 0">{{settings.numberOfBadges}}</span>
</a>
<a class="tab-item" ng-click="goTab4()" ng-class="{ active : settingsTab4}">
<i class="icon ion-ios-people"></i> Tab4
</a>
</div>
</ion-view>
dunno whats going on with my image slider under the 'support' tab section its not showing up correctly, its cutting half of it off and looking weird. The main image slider is good. But, when you inspect element all of a sudden the 'support' orbital image slider looks normal. This is with the foundation framework.
here's a link to see the bug:
http://www.omegadesignla.com/virtual/
and some html:
<div class="content" id="panel6">
<div class="row">
<div class="large-4 columns">
<h3> OFLVS Contact Info:</h3>
<ul>
<li>Student Support</li>
<li>Parent Support</li>
<li>Support links and resources</li>
</ul>
</div>
<div class="large-8 columns">
<ul class="example-orbit" data-orbit>
<li>
<img src="imgs/flash3.jpg" alt="slide 1" />
<div class="orbit-caption">
Caption One.
</div>
</li>
<li>
<img src="imgs/flash12.jpg" alt="slide 2" />
<div class="orbit-caption">
Caption Two.
</div>
</li>
<li>
<img src="imgs/flash9.jpg" alt="slide 3" />
<div class="orbit-caption">
Caption Three.
</div>
</li>
</ul>
</div>
</div>
Learn More
Sign Up
</div>
javascript:
$(document).foundation({
tab: {
callback : function (tab) {
$(document).foundation('reflow');
}
},
orbit: {
pause_on_hover: false,
timer_speed: 6000
}
});
I think your error stems from the fact that the orbit slider is in the tab content section. I had a similar error with a range slider in a tab section.
Try reflowing the javascript in a JS file with a tab callback like so:
$(document).foundation({
tab: {
callback : function (tab) {
$(document).foundation('orbit', 'reflow');
}
}
});
EDIT: I've corrected my answer and added a working fiddle.
I want to get the text for all the elements where the icon has error (don't want the one with warning) with class="dropdown-item-icon ctp-img-notification-error"
How can I get that?
In this case I only want the text "unable to load Data", since that is an error
<li ng-repeat="option in options" class="dropdown-item ng-scope">
<a href ng-class="{ selected : isSelected(option)}" ng-click="selectItem(option)">
<div data-ng-if="option.iconCls" class=ng-scope">
<div class="dropdown-item-icon ctp-img-notification-error" data-ng-class="options.iconCls"></div>
<div class="ng-binding">unable to load Data</div>
</div>
</a>
<a href ng-class="{ selected : isSelected(option)}" ng-click="selectItem(option)">
<div data-ng-if="option.iconCls" class=ng-scope">
<div class="dropdown-item-icon ctp-img-notification-warning" data-ng-class="options.iconCls"></div>
<div class="ng-binding">using cache Data</div>
</div>
</a>
</li>
My first thought looks like this:
var errorMessages = [];
element.all(by.css('.dropdown-item-icon.ctp-img-notification-error .ng-binding')).then(function(items) {
items.forEach(function(item) {
item.getText().then(function(message) {
errorMessages.push(message);
});
});
});