I'm trying to allow custom "template code" within the source code editor. My code snippets would always look like {* anything here *}. It mostly works, but if used inside an HTML tag things gets scrambled.
I'm already using allowedContent: true, when starting CKEDITOR.
Example:
<p style="{* some "short code" of mine... *}">Text</p>
turns into
<p style="{* some " short="" code"="" of="" mine...="" *}"="">Text</p>
And
<p {* tet_pos_is_inside *}>Fuss</p>
into
<p {*="" tet_pos_is_inside="" *}="">Fuss</p>
Any advise ?
Thanks,
Sebastian
My advise would be to never use them inside tags, it sounds like a nightmare to configure. What is the requirement you are trying to fill with those?
You could go around this issue with pre- and post processing using classes, data attributes and/or custom attributes. For example you could use something like his:
<p class="tet_pos_is_inside_val-12345 foo-val-12345">I love horses</p>
<p data-tet_pos_is_inside="12345" data-foo="">I love bunnies</p>
<p tet_pos_is_inside="12345" foo="">I love cats</p>
Well,
apparently there was a simple solution to solve my current problem:
<p style="{* some 'short code' of mine... *}">Text</p>
works ! Note the use of singe-quotes inside the double quotes.
IOW, as long as there is a <tag attr="val"> then val can be anything except containing more double quotes.
Thanks for the comments.
Related
I feel really stupid: I just read this question How to get html elements with multiple css classes and the answer was very clear and straightforward but when I try to apply it on this HTML
<div class="header group">
I am completely unable to make it work.
Here are some of the variations I have tried
//*[contains (#class, ’header’) and contains (#class, ‘group’)]
//div[contains (#class, ’header’) and contains (#class, ‘group’)]
//div[contains (#class, ’header’)]
What am I missing here? Should be straightforward, shouldn't it?
Testing in Chrome Canary.
Updates
The invalid typographical apostrophes above happened when I copy-pasted into this form. I was using ' in the actual console.
I was playing around on an archived version of the page at the Wayback Machine (WM) and nothing worked. However, when trying on the live version, everything worked as expected (the problem with the live version was that the final element I was "aiming" at currently is missing but will return later on, therefore I used WM). Any ideas why // seems broken on WM? Even if WM adds a few levels of divs, // should be transparent about that, shouldn't it?
Just use this xpath.
//div[#class='header group']
you should use something like this
<xpath expr="//div[hasclass('header') and hasclass('group')]" position="replace">
<t>
xxxxxx
</t>
</xpath>
Using Spring / Thymeleaf i18n, I'd like to create a HTML paragraph message like "Click here", in which there is a link only for the word "here". What is the best way to do this?
The way I tried doesn't look nice and also results in a like break:
In messages.properties file:
error.generic.click=Click
error.generic.here=here
And in the HTML file:
<p th:text="#{error.generic.click}"></p><p><a th:text="#{error.generic.here}" th:href="#{/contact}"></a></p>
Answer
Your way seems okay to me. If you just want to fix the newline issue go ahead with the following one:
<p>
<span th:text="#{error.generic.click}"></span>
<a th:text="#{error.generic.here}" th:href="#{/contact}"></a>
</p>
The span will make "Click" stay on the same line as "here". However i'd just go for a link that say "Click here" instead of just "here".
For example in german you could say "Hier klicken". "Hier" would mean "here" and "klicken" would mean "click". The Problem is that the meaning for the words changed but the position didn't. You would end up with a link saying "klicken" instead of "Hier".
Not recommented
There is another approach, but it has some drawbacks. You could use:
<p th:utext="#{error.generic}"></p>
with the following messages.properties:
error.generic=Click here
The drawback on this one is that you can't use th:href anymore. I would not recomment this way. However this can be helpfull when using no th:* and just plain html tags. So i wanted to mention it.
to display and style my tweets on my website I use somethiong like this code:
<a
class="twitter-timeline"
href="https://twitter.com/YourNickname"
data-widget-id="xxxxxxxxxxxxxxxxxxx" <!--you will haveyour own number http://stackoverflow.com/questions/16375116/what-is-data-widget-id-in-twitter-api-how-i-can-get-the-data-widget-id-->
data-chrome="noheader nofooter noborders noscrollbar transparent" <!--tweak these for the looks-->
data-tweet-limit="5"
data-link-color="#FFFFFF"
data-border-color="#FFFFFF"
lang="EN" data-theme="light" <!--light or dark-->
height="447"
width="255"
data-screen-name="yourName"
data-show-replies="false"
data-aria-polite="assertive">
Tweets by #YourName
</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
I'm looking for a way to remove images in case they are twitted.
Looking for a solution I've found this:
https://dev.twitter.com/discussions/19073
They suggest to add a line
data-src-2x="false"
to my code.
This solution, sadly, doesn't seem to work for me.
If any of you have solved this problem, a hint would be much appreciated!
Cheers!
The following answer is no longer relevant due to recent changes by twitter!
In the configuration options when creating the widget there is a checkbox labeled 'auto expand photos'. Uncheck this, but be aware it takes
I'm trying to use ember animated outlet (found here) and, I can not for the life of me get it to work, I understand that instead of using {{outlet}} I need to use {{animated-outlet}} and use {{link-to-aniamted}} instead but it seems to be switching like normal. I also know that I need to include the js after the ember.js and also I am including the css file it comes with, so I'm kind of stumped on this. :(
For my basic view, I'm using
<script type="text/x-handlebars" data-template-name="application">
<div class='wrapper'>
#include('includes.globals.header')
<div class='content row' id='content'>
{{animated-outlet}}
</div>
#include('includes.globals.footer')
#include('includes.js.navigation')
</div>
</script>
and my link looks like:
{{#link-to-animated 'index' animations="main:slideLeft"}} Home #{{/link-to-animated}}
So, is there something i'm missing? Do I need to add something in my app.js? IF you need more code or info, just ask and I will edit this question! Thanks a lot in advance! I'm new to ember, so please take it easy!
You need to specify 'name' in the animated-outlet helper.
{{animated-outlet name="main"}}
The readme explains it: https://github.com/billysbilling/ember-animated-outlet/blob/master/README.md#use-animated-outlet-instead-of-outlet
It's very strange but I haven't found a really good solution by googling joomla style intro text.
I want that the current output:
<div class="item-content">
<p>Intro Text</p>
<p>Full Text</p>
</div>
to be replaced by:
<div class="item-content">
<div class="introtext"><p>Intro Text</p></div>
<div class="fulltext"><p>Full Text</p></div>
</div>
I was sure that Joomla itself should have declared such a class for introtext or at least should have a configurable option for that.
What I do NOT want:
A Joomla 1.x or Joomla 1.5 solution
A manual way until there is not
an extension-base solution (which is more more strange!)
UPDATE after {THIS} answer
Now I have a problem with $this->item->introtext, $this->item->fulltext and $this->item->text.
I expect $this->item->introtext to show ONLY introtext, but it also contains the contents AFTER READ MORE.
What property should I use to only include contents BEFORE READ MORE, not anything else?
I don't expect that the $this->item->introtext content be affected by Show Intro Text parameter in article options. It is expected that only $this->item->text cares about it. Am I right?
Note: $this->item->fulltext works as expected and outputs only the contents AFTER the READ MORE.
In case of disabling Show Intro Text parameter in article options, all of the 3 variables, return the text after READ MORE. This should really be considered as a bug.
It would be more wisely to have a variable to return only intro text (in any situation), a variable to return only full text (in any situation), and a variable to include/exclude introtext according to the article parameter: Show Intro Text
All you need to do is add a template override. You need to make a copy of this file:
/JOOMLA INSTALL/components/com_content/views/article/tmpl/default.php
Make any changes to the code that you want, then upload it here:
/JOOMLA INSTALL/templates/flexibility/html/com_content/article/default.php
Simple as that.
In Joomla 3.3.0 it just works as you expected:
<div id="introtext"><?php echo$this->item->introtext; ?></div>
<div id="fulltext"><?php echo $this->item->fulltext; ?></div>
(in templates/your_template_name/html/com_content/article/default.php)