I want to display a title rendered via angular. It works fine in browsers like chrome or firefox and also in internet 9 and 10.
The ng-app is defined in the html tag.
The title tag looks like this:
<title>
{{resultListQuery.selectedPropertiesSummary}} in {{resultListQuery.geoCodingResult.locationName}}
</title>
Can anyone help me please? Do you need more informations about the app?
You can use $window.document.title to set your title without binding.
You have to use:
<title ng-bind-template="foo {{pageTitle}} bar"></title>
Alternatively you may also use ng-bind, but ng-bind-template has the additional advantage that it allows you to have multiple {{}} expressions within.
This is the cross browser solution. ng-bind and ng-bind-template would never work because they use element.text(), which never works with on IE8.
myModule.run(function($interpolate, $window) {
...
$rootScope.$watch(function() {
return $interpolate(myTitleTemplate)($myScope);
}, function(title) {
$window.document.title = title;
})
...
});
Related
I need to get the headline and the text separately out of a text content element. The reason is, to give the editor a simple way to add a content for a complicated section in my html theme.
I am new to TYPO3 an we run V11.5.16! I read and watched some tutorials and I got most of my site already working! Contents are dynamic and multilinguale so far.
To get contents from backend, I use Backend Layouts and copy the content from styles.content.get inside my setup.typoscript. I think this is the common way to do it, and as I said, it works. I output them using {contentXY->f:transform.html()} or {contentXY->f:format.raw()}.
For a text content element, I get something like:
<div id="c270" class="frame frame-default frame-type-text frame-layout-0">
<header>
<h2 class="">Headline</h2>
</header>
<p>Some Text</p>
</div>
Is it possible to get only "Headline"? And if so, it hopefully works also for getting out separately "Some Text"
Something like: {contentXY->f:transform.html(filterBy('h2'))}
Thanks in Advance!
EDIT:
According to Peter Krause's answer: I know, there is an extra content element for headers. But I need the text content element, because for the places in the html, I need header AND text. And the editors are technically not savy enough to fill in different content elements. Please don't ask in more detail. ):
You can handle header and body of an CE seperately, but not in a page context.
In page context you get the result from rendering the CEs, which is a string (with HTML).
For each CE there is a rendering information, which nowadays is also FLUID.
Depending on your installation it probably is FSC (ext:fluid_styled_content) or a Bootstrap extension.
This means: there are FLUID templates which can be overriden and modified.
In these templates you have access to each field of a CE separately.
Look for the templates stored in the defined paths (in TSOB) and add your own path for overides:
lib.contentElement {
templateRootPaths {
1 = ...
2 = ...
3 = ...your path...
}
partialRootPaths {
1 = ...
2 = ...
3 = ...your path...
}
layoutRootPaths {
1 = ...
2 = ...
3 = ...your path...
}
}
Thanks for all hints! I think, for my requirement, there is no solution out of the box. So i made a custom CE with Mask and edited the template html. For non-technical editors, it is the best solution in terms of data input. I hope this stands for future upgrades...
There is a page on my site with two sets of tabs, each tab's link is ajax-driven but has a proper href in case javascript is not enabled. I'm about to implement an ajax 'back-button' solution using a plugin such as jQuery Address.
My problem/confusion with this solution is that a page's default content is still loaded before the javascript has a chance to parse the hash and load the correct content. If I initially hide the content, non-javascript users will never see anything. If I don't initially hide the content, the user will see the wrong page for a moment before it gets updated (besides the extra overhead of first loading the wrong tab and then the correct tab).
What are the best / most common approaches to dealing with this?
Thanks, Brian
If you use hashes, you will always have the wrong content first. You need to use a server-side solution with the HTML5 History API to avoid this. Read more
You can use:
https://github.com/browserstate/ajaxify
And have the tabs render on the server side with something like if ( $_GET['tab'] === '2' ) // render 2
I think this is a good question. Have you tried using the <noscript> tag to include css that shows the content that's hidden initially for JS users. Something like this:
<style type="text/css">
#area-1, #area-2 { display: none; }
</style>
<noscript>
<style type="text/css">
#area-1, #area-2 { display: block; }
</style>
</noscript>
Hope this helps!
I have a strange result happening when loading a Partial View using jQuery Ajax into the DOM, but only when viewing the result using IE8.
The Partial View in question (for example purposes only) looks like this;
<aside>Example test</aside>
When the result comes back from the Ajax call it appears to look exactly as above. However when viewing the DOM using the developer tools in IE8 the result looks like this;
<aisde/>
Example test
</aside/>
As a result the element is not recognised and the text does not sit within it. Also the style sheet class for 'aside' is not being applied. This only happens in IE8 as far as I can see.
Any one got any suggestions, other than do not use custom tags?
Thanks in advance
You need to make sure the DOM recognizes HTML5 elements. Essentially you will have to do:
document.createElement('aisde');
Have a look at this link. Without creating the element older IE browsers will not see or style the elements.
The common practice around these issues is to load a html5 fix javascript file within a conditional comment block. The script does a createElement on all new html5 node types.
<!--[if lte IE 8]>
<script src="html5.js" type="text/javascript"></script>
<![endif]-->
Does anyone know how to change text language from Recaptcha?
I've already tried:
<script type="text/javascript">
var RecaptchaOptions = {
lang : 'fr',
};
</script>
But it doesn't change.
For the reCAPTCHA V2 widget you can override the default interface language detection as a parameter to the javascript. See the new docs.
<script src="https://www.google.com/recaptcha/api.js?hl=fr"></script>
set your lang at last of api address (persian "farsi"):
https://www.google.com/recaptcha/api.js?hl=fa
find your language short name in https://developers.google.com/recaptcha/docs/language
Append &hl=fr to the public key.
Appending the language code to your public key work very well :
define('RECAPTCHA_PUBLIC_KEY', '__YOUR_PUBLIC_KEY_HERE__&hl=fr');
echo recaptcha_get_html(RECAPTCHA_PUBLIC_KEY);
So you can remove your JavaScript from your code. Or leave it if you use other options, but remove "lang:'fr'"
If you mean the language in the actual images that you are trying to solve, unfortunately you can't change the language of that text, at least not yet. The only thing you can change is the language of the interface (the text/prompt in the widget, etc.).
Response to comment: well, according to the docs, you seem to have it right. Is this code place in the same page where the widget appears?
The docs also say:
you need to add the following code in your main HTML page anywhere before the <form> element where reCAPTCHA appears (this will not work if placed after the main script where reCAPTCHA is first invoked)
so also make sure that this code is placed before the <form> tag which encloses the reCAPTCHA widget.
RecaptchaOptions is never working.
Another solution is to add a parametrt hl= langCode while we including the captcha script
<script type="text/javascript" src="'. $server . '/challenge?k=' . $pubkey . &hl=de">/script>
You pasted the incorrect js. There should not be a comma after lang: 'fr'. The correct code is:
<script type="text/javascript">
var RecaptchaOptions = {
lang : 'fr'
};
</script>
For example,
Text Here
will print out as...
Text Here(../somepage/page.aspx?qs=asdf)
In IE, it looks normal (doesn't print the url). Any ideas why this is acting in this fashion?
Extrapolating from Brett's answer, on Firefox 25, this CSS style removes the offending href:
#media print {
a:link:after,
a:visited:after {
content: "" !important;
}
}
Also, if you're using Twitter Bootstrap as a framework, this:
a[href]:after{
content:"";
}
... will do the trick! (at least in bootstrap 3)
The answer was in the css framework we are using (Blueprint). There was the below line in the style file:
a:link:after,a:visited:after{content:"(" attr(href) ")";font-size:90%}
Guess this might help others who use Blueprint.
If you want to to be more specific - say remove links within a table, then you could do the following with jQuery.
$(".tableclass tr td a").removeAttr("href");
Just add this in your layout page (Master Page)
a[href]:after {
content: none !important;
}
There is also the semantic reason to print the url next to the link.
Imagine you print the document without the url. You cannot be sure to completely understand the text as it is meant by the author.
It can be necessary for a quote to print the source as well. That is important i.e. for academic texts.
Indeed Bretts answer is correct.
You can avoid this problem altogether on the screen by including the media attribute on the print style link as follows
<link href="../../Content/blueprint/print.css" rel="stylesheet" media="print" type="text/css" />