{{ apos.singleton(data.page, 'BLPHeroDisclaimerOptionONe', 'apostrophe-rich-text', { addLabel:"Hero Disclaimer",
toolbar:
['Bold','Superscript','Italic',
'Subscript', 'Superscript', 'Link', 'Unlink', 'Anchor'],
styles: [
{ name: 'paragraph', element: 'p' }
]
}) }}
in the obove code we had Anchor tag and i had enter the id of a div to which i want page to scroll to but its not working at all ,
Any idea ?
Can you you confirm in your rendered HTML is all looking correct?
You are getting both a Jump Link and a <div id="someId">Important Content</div>
Related
I want to design the ion-menu and implement css in the menu but where we will write the css i am not getting as there is no app.css is available.
I want to add the categories and inside that i want to add sub categories but from the web service. How to do this please help me.
I have tried but i am able to show the menu options static not dynamic which i will get from the api.
Please guide me what to do.
<ion-app>
<ion-menu contentId="content" side="start">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div *ngFor="let p of pages">
<ion-menu-toggle *ngIf="p.url">
<ion-item [routerLink]="p.url" routerDirection="root" routerLinkActive="active">
<ion-icon [name]="p.icon" slot="start"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-item button *ngIf="p.children?.length > 0" (click)="p.open = !p.open" [class.parent-active]="p.open"
style="font-weight: 500;" detail="false">
<ion-icon slot="start" name="arrow-forward" *ngIf="!p.open"></ion-icon>
<ion-icon slot="start" name="arrow-down" *ngIf="p.open"></ion-icon>
<ion-label>{{ p.title }}</ion-label>
</ion-item>
<ion-list *ngIf="p.open">
<ion-menu-toggle>
<ion-item *ngFor="let sub of p.children" class="sub-item" style="padding-left: 20px;
font-size: small;" [routerLink]="sub.url" routerDirection="root" routerLinkActive="active"
style="--ion-text-color: var(--ion-color-primary);">
<ion-icon [name]="sub.icon" slot="start"></ion-icon>
<ion-label>
{{ sub.title }}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</div>
</ion-content>
</ion-menu>
<ion-router-outlet [swipeGesture]="false" id="content" main></ion-router-outlet>
</ion-app>
I want the dynamic data to display in the side menu and design the side menu.
app.component.ts
pages = [
{
title: 'Main',
url: '/home',
icon: 'home'
},
{
title: 'Categories',
children: [
{
title: 'categories',
url: '/categories',
icon: 'arrow-dropright'
},
{
title: 'wishlist',
url: '/wishlist',
icon: 'arrow-dropright'
}, {
title: 'Your Orders',
url: '/your-orders',
icon: 'arrow-dropright'
}, {
title: 'My Profile',
url: '/profile',
icon: 'play'
}
]
}, {
title: 'Offers',
children: [
{
title: 'categories',
url: '/categories',
icon: 'play'
},
{
title: 'wishlist',
url: '/wishlist',
icon: 'play'
},
]
}, {
title: 'LogOut',
url: '/user-login',
icon: 'log-out'
}
];
Use style below ion-content
for example this will make your ion-menu background black.Like that do for other elements inside your menu
<style>
ion-content{
background:black;
}
</style>
You can add app.componet.scss in src directory. And you have to add styleUrls to Component decorator like below:
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
encapsulation: ViewEncapsulation.None
})
</head>
<body>
<div id="add">
<div data-i18n="key">You have to Click here to find better result</div>
// If I am using that way that translate complete div and remove link from my text.
<div data-i18n="key">You have to</div> Click here <div data-i18n="key3">to find better result</div>
// If I am using that way code working fine but for this I have to use 3 keys for single sentences. Is it possible to fix this by single key ?
<script>
i18next
i18next.use(window.i18nextBrowserLanguageDetector)
i18next.use(window.i18nextXHRBackend)
.init({
debug: true,
tName: 't',
handleName: 'localize',
selectorAttr: 'data-i18n',
targetAttr: 'i18n-target',
optionsAttr: 'i18n-options',
useOptionsAttr: true,
parseDefaultValueFromContent: true,
initImmediate: true,
fallbackLng: false,
interpolation: {
"escapeValue": true,
"prefix": "{{",
"suffix": "}}",
"formatSeparator": ",",
"unescapePrefix": "-",
"nestingPrefix": "$t(",
"nestingSuffix": ")"
},
detection: {
order: ['querystring', 'cookie', 'navigator', 'htmlTag'],
lookupCookie: 'i18next',
lookupLocalStorage: 'i18nextLng',
caches: ['cookie'],
},
"backend": {
"loadPath": "/locales/{{lng}}/{{ns}}.json"
}
}, function(err, t) {
jqueryI18next.init(i18next, $);
$('#add').localize();
});
</script>
</body>
This code translate complete div
a) Add the tag to your translated text. -> One key
"key": "You have to Click here to find better result"
and
<div data-i18n="html:key">You have to Click here to find better result</div>
to set innerHTML
b) Interpolate the a tag into translation. -> Two keys
"key": "You have to {{link}} to find better result"
with:
$('#add').localize({ link: 'Click here', interpolation: { escapeValue: false }});
translate Click here using i18next.t directly
Here is my plunker example: http://plnkr.co/edit/Tc9FRHAEoQlOqy7sk1Ae?p=preview
What I'm trying to do:
Bind the checkbox html from field04 in my data to the cell using cellTemplate and still have access to its ng-click function.
Code in app.js:
var app = angular.module('app', ['ui.grid', 'ngSanitize']);
app.controller('MainCtrl', ['$scope', '$log', function ($scope, $log, $sce) {
$scope.myViewModel = {
someProp:'abc',
showMe : function(){
alert(this.someProp);
}
};
$scope.gridOptions = {
};
$scope.gridOptions.columnDefs = [
{ name: 'field01', field: 'field01' },
{ name: 'field02', field: 'field02'},
{ name: 'field03', field: 'field03', cellTemplate: '<input type="checkbox" ng-model="row.entity.field03" ng-click="$event.stopPropagation();getExternalScopes().showMe()">'},
{ name: 'field04', field: 'field04', cellTemplate: 'viewTemplate2'},
{ name: 'field05', field: 'field05', cellTemplate: 'viewTemplate2'}
];
$scope.gridOptions.data = [
{
"field01": "one",
"field02": "01",
"field03": false,
"field04": '',
"field05": '',
},
{
"field01": "two",
"field02": "02",
"field03": false,
"field04": '',
"field05": '',
},
{
"field01": "three",
"field02": "03",
"field03": false,
"field04": '<input type="checkbox" ng-model="row.entity.field03" ng-click="$event.stopPropagation();getExternalScopes().showMe()">',
"field05": '<div><img class="icon" alt=""/></div>',
}
];
$scope.toggle = function() {
alert("toggled");
}
}]);
Code from index.html:
<body>
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" external-scopes="myViewModel" class="grid"></div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-sanitize.min.js"></script>
<script src="app.js"></script>
<script type="text/ng-template" id="viewTemplate2">
<span ng-bind-html="row.entity[col.field]"></span>
</script>
</body>
I am achieving the correct effect in field03 if I write the html in the columnDef. Thanks to TomMorgan's plunker here: http://plnkr.co/edit/9eRg9Yjl2ooeSuWMJ8x2?p=preview.
I can fill the cellTemplate with html from the data in field05.
Why is it not working for my checkbox in field04?
I'm new to angularjs and its difficult to separate "ui-grid" solutions from "ng-grid" solutions. I appreciate the help.
I am not sure if I understand your code.
You shouldn't put html code in your data. So I changed it to:
$scope.gridOptions.data = [
{
"field01": "one",
"field02": "01",
"field03": false,
"field04": '',
"field05": '',
},
{
"field01": "two",
"field02": "02",
"field03": false,
"field04": '',
"field05": '',
},
{
"field01": "three",
"field02": "03",
"field03": false,
"field04": '',
"field05": '',
}
];
Next: In your cell template pass a reference to the value that changes:
{ name: 'field03', field: 'field03', cellTemplate: '<input type="checkbox"
ng-model="row.entity.field03" ng-click="$event.stopPropagation();
getExternalScopes().showMe(row.entity.field03)">'}
Note that function showMe() now has a parameter:
showMe(row.entity.field03)
In the external scope you should react to the parameter:
$scope.myViewModel = {
someProp:'abc',
showMe : function(value){
alert('toggled to: '+value);
}
};
(You don't really need someProp)
The $scope.toggle() function can be removed, or can be called from showMe().
Furthermore, I added some debugging help to your html to show you that the binding works pretty well:
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" external-scopes="myViewModel" class="grid"></div>
<hr>
{{gridOptions.data | json}}
</div>
Here is a Plunker. Is that what you want?
Update:
Here is another Plunker that has the checkbox in column 4.
Here is a Plunker with appScope, external-scopes don't work anymore.
I've made some changes to work with new appScope:
{ name: 'field03', field: 'field03', cellTemplate: '<input type="checkbox"
ng-model="row.entity.field03" ng-click="grid.appScope.showMe(row.entity.field03)">'}
In the scope you should react to the parameter but I've pulled from myViewModel and just created a function inside $scope:
$scope.showMe : function(value){
alert('toggled to: '+value);
};
You can test code from version 15 against my version 16. My new version runs ok but 15 no.
You need to use $sce to tell ng-bind-html that HTML content you are binding is safe.
I have forked your plunker and the solution for your question is http://plnkr.co/edit/JyTaF8niJlf9Wpb775kb?p=preview
app.filter('unsafe', function ($sce) {
return $sce.trustAsHtml;
});
You have to use this filter with ng-bind-html
I'm using Bootstrap X-editable in a Rails app. I would like to replace the word empty in a table cell with the name of the field.
The X-editable documentation says the emptytext will replace it.
But, the following doesn't work - I still get empty.
<a href="#" class="answer" data-type="textarea" emptytext="Description" data-pk="1" data-resource="task" data-source="/tasks" data-name="longdesc" data-url="/tasks/<%= task.id %> ">
This is the javascript:
$(".answer").editable
placement: 'bottom'
Thanks for the help.
it's not emptytext="Description" but data-emptytext="Description".
<a href="#" class="answer" data-type="textarea" data-emptytext="Description" data-pk="1" data-resource="task" data-source="/tasks" data-name="longdesc" data-url="/tasks/<%= task.id %> ">
You can also do it in javascript instead of inline html.
$('.answer.description').editable({
placement: 'bottom',
emptytext: 'Description'
});
EDIT about HTML5
Look here about HTML5 data-attribute. This is why all the x-editable's settings start with data-*.
EDIT Answering your comment
You can do like in the official demo Look at the sex select with the prepend data (and display tweak):
$('#sex').editable({
prepend: "not selected",
source: [
{value: 1, text: 'Male'},
{value: 2, text: 'Female'}
],
display: function(value, sourceData) {
var colors = {"": "gray", 1: "green", 2: "blue"},
elem = $.grep(sourceData, function(o){return o.value == value;});
if(elem.length) {
$(this).text(elem[0].text).css("color", colors[value]);
} else {
$(this).empty();
}
}
});
Or you can directly add a sourceData with {value: 0, text: 'Null'}
or you can use
$('.answer').editable({
placement: 'bottom',
defaultValue: 'Description' // for default value
});
I'm trying to get a link in a truetype fornt with sIFR3. It's working fine for all ordinary <h1> and <h2> items, but not for links within a <h2>. sIFR is replacing the <a> correctly, but the result is invisible. When I click the area where the text should be, it follows the link. Even with a pointer cursor. But where's my text?
Replacer:
sIFR.replace(vagroundbtf, {
selector: '#summary_normalx h2'
, css: [
'.sIFR-root { color:#000000; font-weight : bold;} a {color:#333333; text-decoration: none;} '
]
,wmode: 'transparent'
});
HTML-snippet:
<div id="summary_normal">
<div id="article_92" class="entry clearing">
<div id="summary_normalx">
<h2>
This is the title
</h2>
:
BTW: when I remove the css-clause, links are visible in the right font but in default look (blue underlined).
Any ideas?
Roel
try this:
sIFR.replace(vagroundbtf, {
selector: '#summary_normalx h2'
, css: [
'.sIFR-root { color:#000000; font-weight : bold;}',
'a {color:#333333; text-decoration: none;}'
]
,wmode: 'transparent'
});
btw. I do prefer Cufón over sIFR nowadays