Weird behaviour editing tt_news_template - typo3

I am developing my webpage with the ttnews plugin, and I edited the tt_news_v3_template.html so it shows the first 3 news in my main page. I want it with this format, so I updated the ###TEMPLATE_LIST3###. Thats the new code
<!-- ###TEMPLATE_LIST3### begin
This is the template for the list of news in the archive or news page or search
-->
<div class="news-list3-container">
###NEWS_CATEGORY_ROOTLINE###
<!-- ###CONTENT### begin
This is the part of the template substituted with the list of news:
-->
<!-- ###NEWS### begin -->
<article class="box">
<div class="image-border">
<a href="#" class="image image-left">
<!--###LINK_ITEM###-->###NEWS_IMAGE###<!--###LINK_ITEM###-->
</a>
</div>
<h2><!--###LINK_ITEM###-->###NEWS_TITLE###<!--###LINK_ITEM###--></h2>
<p class="subtitle">###NEWS_SUBHEADER###</p>
<p>###NEWS_CONTENT###</p>
<p>###CATWRAP_B### ###TEXT_CAT### ###NEWS_CATEGORY### ###NEWS_CATEGORY_IMAGE### ###CATWRAP_E###</p>
<p>
Ver Más
</p>
</article>
<!-- ###NEWS### end-->
<!-- ###NEWS_1### begin -->
<div class="row" style="margin-top:15px; display: inline-block; width:100%">
<section class="box" style="width:49%; float:left">
<h2><!--###LINK_ITEM###-->###NEWS_TITLE###<!--###LINK_ITEM###--></h2>
<p class="subtitle">###NEWS_SUBHEADER###</p>
<div class="image-border">
<a href="#" class="image image-full">
<!--###LINK_ITEM###-->###NEWS_IMAGE###<!--###LINK_ITEM###-->
</a>
</div>
<p>###NEWS_CONTENT###</p>
<p>###CATWRAP_B### ###TEXT_CAT### ###NEWS_CATEGORY### ###NEWS_CATEGORY_IMAGE### ###CATWRAP_E###</p>
<p>
Ver Más
</p>
</section>
<!-- ###NEWS_1### end-->
<!-- ###NEWS_2### begin -->
<section class="box" style="width:49%; float:left">
<h2><!--###LINK_ITEM###-->###NEWS_TITLE###<!--###LINK_ITEM###--></h2>
<p class="subtitle">###NEWS_SUBHEADER###</p>
<div class="image-border">
<a href="#" class="image image-full">
<!--###LINK_ITEM###-->###NEWS_IMAGE###<!--###LINK_ITEM###-->
</a>
</div>
<p>###NEWS_CONTENT###</p>
<p>###CATWRAP_B### ###TEXT_CAT### ###NEWS_CATEGORY### ###NEWS_CATEGORY_IMAGE### ###CATWRAP_E###</p>
<p>
Ver Más
</p>
</section>
<!-- ###NEWS_2### end-->
<!-- ###CONTENT### end -->
</div>
</div>
but when I see the page, the two first news are displayed well, with the divs and the labels that I assigned, but the last new duplicate the structure of the first new, instead of using it own. This is the generated code
<div class="news-list3-container">
<article class="box">
<div class="image-border">
<a href="#" class="image image-left">
</a>
</div>
<h2>Noticia 3</h2>
<p class="subtitle"></p><p>subtitle noticia 3<span class="news-list-morelink">[Leer más]</span></p><p></p>
<p>texto noticia 3</p>
<p></p><div class="news-list-category"> Categoría: News </div><p></p>
<p>
Ver Más
</p>
</article>
<div class="row" style="margin-top:15px; display: inline-block; width:100%">
<section class="box" style="width:49%; float:left">
<h2>dsadasdasd</h2>
<p class="subtitle"></p><p>dasdasdasdas<span class="news-list-morelink">[Leer más]</span></p><p></p>
<div class="image-border">
<a href="#" class="image image-full">
</a>
</div>
<p><span style="font-family: sans-serif; line-height: 17.265625px; background-color: rgb(249, 249, 249); ">Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per. Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei. Blandit incorrupte quaerendum in quo, nibh impedit id vis, vel no nullam semper audiam. Ei populo graeci consulatu mei, has ea stet modus phaedrum. Inani oblique ne has, duo et veritus detraxit. Tota ludus oratio ea mel, offendit persequeris ei vim. Eos dicat oratio partem ut, id cum ignota senserit intellegat. Sit inani ubique graecis ad, quando graecis liberavisse et cum, dicit option eruditi at duo. Homero salutatus suscipiantur eum id, tamquam voluptaria expetendis ad sed, nobis feugiat similique usu ex. Eum hinc argumentum te, no sit percipit adversarium, ne qui feugiat persecuti. Odio omnes scripserit ad est, ut vidit lorem maiestatis his, putent mandamus gloriatur ne pro. Oratio iriure rationibus ne his, ad est corrumpit splendide. Ad duo appareat moderatius, ei falli tollit denique eos. Dicant evertitur mei in, ne his deserunt perpetua sententiae, ea sea omnes similique vituperatoribus. Ex mel errem intellegebat comprehensam, vel ad tantas antiopam delicatissimi, tota ferri affert eu nec. Legere expetenda pertinacia ne pro, et pro impetus persius assueverit. Ea mei nullam facete, omnis oratio offendit ius cu. Doming takimata repudiandae usu an, mei dicant takimata id, pri eleifend inimicus euripidis at. His vero singulis ea, quem euripidis abhorreant mei ut, et populo iriure vix. Usu ludus affert voluptaria ei, vix ea error definitiones, movet fastidii signiferumque in qui. Vis prodesset adolescens adipiscing te, usu mazim perfecto recteque at, assum putant erroribus mea in. Vel facete imperdiet id, cum an libris luptatum perfecto, vel fabellas inciderint ut. Veri facete debitis ea vis, ut eos oratio erroribus. Sint facete perfecto no vel, vim id omnium insolens. Vel dolores perfecto pertinacia ut, te mel meis ullum dicam, eos assum facilis corpora in. Mea te unum viderer dolores, nostrum detracto nec in, vis no partem definiebas constituam. Dicant utinam philosophia has cu, hendrerit prodesset at nam, eos an bonorum dissentiet. Has ad placerat intellegam consectetuer, no adipisci mandamus senserit pro, torquatos similique percipitur est ex. Pro ex putant deleniti repudiare, vel an aperiam sensibus suavitate. Ad vel epicurei convenire, ea soluta aliquid deserunt ius, pri in errem putant feugiat. Sed iusto nihil populo an, ex pro novum homero cotidieque. Te utamur civibus eleifend qui, nam ei brute doming concludaturque, modo aliquam facilisi nec no. Vidisse maiestatis constituam eu his, esse pertinacia intellegam ius cu. Eos ei odio veniam, eu sumo altera adipisci eam, mea audiam prodesset persequeris ea. Ad vitae dictas vituperata sed, eum posse labore postulant id. Te eligendi principes dignissim sit, te vel dicant officiis repudiandae. Id vel sensibus honestatis omittantur, vel cu nobis commune patrioque. In accusata definiebas qui, id tale malorum dolorem sed, solum clita phaedrum ne his. Eos mutat ullum forensibus ex, wisi perfecto urbanitas cu eam, no vis dicunt impetus. Assum novum in pri, vix an suavitate moderatius, id has reformidans referrentur. Elit inciderint omittantur duo ut, dicit democritum signiferumque eu est, ad suscipit delectus mandamus duo. An harum equidem maiestatis nec. At has veri feugait placerat, in semper offendit praesent his. Omnium impetus facilis sed at, ex viris tincidunt ius. Unum eirmod dignissim id quo. Sit te atomorum quaerendum neglegentur, his primis tamquam et. Eu quo quot veri alienum, ea eos nullam luptatum accusamus. Ea mel causae phaedrum reprimique, at vidisse dolores ocurreret nam.</span></p>
<p></p><div class="news-list-category"> Categoría: News </div><p></p>
<p>
Ver Más
</p>
</section>
<article class="box">
<div class="image-border">
<a href="#" class="image image-left">
</a>
</div>
<h2>Noticia 2</h2>
<p class="subtitle"></p><p>subtitulo de la noticia 2<span class="news-list-morelink">[Leer más]</span></p><p></p>
<p>Contenido de la noticia 2</p>
<p></p><div class="news-list-category"> Categoría: News, Blog </div><p></p>
<p>
Ver Más
</p>
</article>
</div>
</div>
Note that the 3th new is wrapped in a article class="box" like the first new, instead of being using it own structure. I googled a lot and check the labels, but I have no clue about how to solve it. Someone can give me some advices or tips?
I am using typo3 4.5 and tt_news 3.0.1
Thanks!

You have to set
plugin.tt_news.alternatingLayouts = 3
In your Typoscript Setup. tt_news will use only 2 alternating Layouts by default.

Related

How to put 2 element on each other

I have 2 hr tags in an email body and I want to place them on top of each other.
This is what I have tried:
<div>
<div><hr color="gray" width="500" align="left"></div>
<div><hr color="teal" width="250" align="left" margin="-15px"> </div>
</div>
I have tried several different tags and until now I can see both hr tags one above/before the other.
Simply add position absolute to your divs.
div{
position: absolute;
}
In the absence of other responses, I would suggest a table structure (since in emails you would already be using tables), and then a simple border-bottom or border-top, to achieve this.
If you want 15px of teal on the left, and the rest gray:
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="15" style="border-bottom:1px solid teal">
</td>
<td style="border-bottom:1px solid grey">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</td>
</tr>
</table>

How to vertical align material ui Checkbox

Simple put, I'd like to vertical align the Checkbox from Material UI.
Try changing alignItems style property of FormControlLabel.
This worked for me:
<FormControlLabel
sx={{ alignItems: 'flex-start' }}
control={
<Checkbox
sx={{
marginTop: -1,
}}
/>
}
/>
This took me a while to track down, but this solution for another forum was the one that worked:
<FormControl fullWidth>
<FormControlLabel
style={{display:'table'}}
control={<div style={{display:'table-cell'}}><CustomizedCheckbox/></div>}
label={<div className="disclaimerandnotes">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>}
/>
</FormControl>
Since MUI is based on Flexbox, you can simply override its alignItems property:
<FormControlLabel
control={
<div style={{ alignSelf: 'start' }}>
<Checkbox checked={isChecked()} onChange={check.toggle} />
</div>
}
label="Toggle Checkbox"
/>
You can probably make it even leaner by overriding the checkbox component style.

How can I do drop caps in Tinymce Editor?

​I use ASP.NET MVC Project and has here Tinymce plugin editor
Choosing character by shortcut format or choosing character by custom button.
How can I do Drop Caps ?
Sample Photo
You can make that by wrapping the first letter with <span class="drop-cap">.
Alternatively use <span class="drop-cap drop-cap-reversed"> for reversed color.
.drop-cap {
float: left;
padding: 5px;
margin-right: 5px;
font-family: Georgia;
font-size: 60px;
line-height: 50px;
color: #263238;
}
.drop-cap-reversed {
color: #fff;
background-color: #263238;
}
<html>
<head>
</head>
<body>
<p>
<span class="drop-cap">L</span>ed cursus ante dapibus diam. Sed nisi. Nulla quis semat nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Vestibulum lacinia arcueget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.sed cursus antedapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.Sed dignissim lacinia nunc.sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.Vestibulum lacinia.
</p>
<span class="drop-cap drop-cap-reversed">L</span>ed cursus ante dapibus diam. Sed nisi. Nulla quis semat nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Vestibulum lacinia arcueget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.sed cursus antedapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.Sed dignissim lacinia nunc.sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.Vestibulum lacinia.
</p>
</body>
</html>
There are several ways to do it but they all require some level of CSS. This page shows two good examples:
https://css-tricks.com/snippets/css/drop-caps/
You can use style_formats in TinyMCE to allow people to apply a class to text. You can use content_css to pass CSS to the editor that will then render that content as you want it based on the applied class.

Pasting text that triggers the scroll leaves cursor in visually the wrong location

See what I mean by going here: https://codemirror.net/demo/indentwrap.html
Paste in something large enough to trigger scrollbar, you may need to remove existing text first:
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
The cursor will appear not in the correct location until you type or move it. Has anyone seen this or know of a solution or workaround?
Edit:
If I put listeners for pasting and do a refresh() and scrollIntoView() it seems to work most of the time... but doesnt always seem effective if I'm posting between content for some reason.
Although it has the small side affect of always having a 17px padding on the right side... adding padding-right: 17px !important to .CodeMirror-sizer seems to fix the problem.
The problem seems to have been caused by when the scrollbar appears, it makes the scrollbar visible, and also adds the 17px right padding to the sizer (so the text doesn't run under the scrollbar). The cursor appears to be positioned based on if that padding was never added until the user types or does something that would move the cursor. By always having that right padding, we don't run into this problem.
The small side affect doesn't matter much to me so I'm happy with this workaround, however... if someone else finds a better solution I'd like to see it.

selection of text and then split it into three parts with jQuery for AJAX

I would like to take a bunch of HTML inside a container(DIV) then let the user select part of it. Its not an "editable area" that I am looking for. As we dont want the user to be able to overwrite/change the text. Just mark it.
After the user has selected it, I would like to know what was selected BUT also WHERE that selected part IS.
Eg.
We have a bullet list and the users selects bulletline 3 and 4.
We have some Headline1 and three paragraphs. Then the user selectes part of the middle paragraph. I would like to know where in that paragraph.
I've research a little and from what I understand MSIE has a problem with selection, if it comes to the startPos and endPos of the selection.
Secondly, what if the marked text is multiple times inside the whole container?
Here is an example:
<div id="markable">
<h1>Here is a nice headline</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non
tempor metus. Ut malesuada posuere nunc eu venenatis. Donec sagittis tempus
neque, tempus iaculis sapien consectetur id.</p>
<p>Nulla tempus porttitor pellentesque. Curabitur cursus dictum felis quis tempus.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Quisque fringilla massa id libero commodo venenatis.</p>
<ol>
<li>here is a bullet line #1</li>
<li>here is a bullet line #2</li>
<li>here is a bullet line #3</li>
<li>here is a bullet line #4</li>
<li>here is a bullet line #5</li>
<li>here is a bullet line #6</li>
</ol>
<h2>here is a sub-headline</h2>
<p>Aenean auctor fringilla dolor. Aenean pulvinar tortor sed lacus auctor cursus.
Sed sit amet imperdiet massa. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos himenaeos. Fusce lectus neque, rhoncus et
malesuada at, blandit at risus. Vivamus rhoncus ante vel erat mollis
consequat.</p>
</div>
The problem is here if the user selects "tempus" its not good enough to know the word, I also need to know WHICH of the words (what paragraph/headline/bullet element) it is.
Reason is that we want "readers" to be able to spot things of interest/attention. Sometimes whole paragraphs, sometimes just a single word or headline.
The perfect solution
would be if we somehow could detect in which "element" (counting from top I guess) in the DOM that is selected. Secondly how much (start and end point) inside that particular element.
Because then we could do some sort of Ajax back to our ASP.NET which tells the backend what has been marked and then do what ever ...
I've found some online-code editors that does a BUNCH of the above + a lot more than needed, but believe the solution is much more simple on this one. Just cant find the proper way to get started with a jQuery solution.
In hope of a jQuery Yoda reading this. :-)
Sorry this is only a partial answer this will give you indexes of elements in which the selection starts and ends in all browsers, but the offsets of the beginning and end of selection will only work in Gecko and WebKit browsers. IE only supports a TextRange object which is a bit of a mystery to me and a bit of a pain to work with (the link at the bottom of this answer has an example of implementation covering all browsers)
This solution returns indexes of elements that the selection contains (in relation to your #markable container) and indexes of start and end selection (in relation to their containing nodes).
In this example I am using events to capture the elements which contain the selection (this gets around browser differences) but you can easily do this without events as well (for Firefox, Opera, Chrome and Safari) as the Range object gives you anchorNode and focusNode which are the DOM nodes in which the selection starts and ends respectively (more info here http://www.quirksmode.org/dom/range_intro.html)
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script>
var end;
var start;
indexes = new Array();
var endIndex;
var startIndex;
$(document).ready(function(){
$("#markable").mouseup(function(event){
end = event.target;
indexes.push($("*", "#markable").index($(end)));
//normalize start and end just in case someone selects 'backwards'
indexes.sort(sortASC);
event.stopPropagation()
})
$("#markable").mousedown(function(event){
indexes.length=0;
start = event.target;
event.stopPropagation()
indexes.push($("*", "#markable").index($(start)));
})
$(".button").click(function(){
sel = getSel();
alert("Index of the element selection starts in (relative to #markable): "+indexes[0] +"\n" +
"Index of the of the beginning of selection in the start node: "+ sel.anchorOffset+"\n" +
"Index of the element selection ends in (relative to #markable): "+ indexes[1]+"\n"+
"Index of the of the end of selection in the end node: "+ sel.focusOffset)
})
})
function sortASC(a, b){ return (a-b); }
function sortDESC(a, b){ return (b-a); }
function getSel()
{
    var txt = '';
     if (window.getSelection)
    {
        txt = window.getSelection();
             }
    else if (document.getSelection)
    {
        txt = document.getSelection();
            }
    else if (document.selection)
    {
        txt = document.selection.createRange();
            }
    else return;
return txt;
}
</script>
</head>
<body>
<div id="markable">
<h1>Here is a nice headline</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non
tempor metus. Ut malesuada posuere nunc eu venenatis. Donec sagittis tempus
neque, tempus iaculis sapien consectetur id.</p>
<p>Nulla tempus porttitor pellentesque. Curabitur cursus dictum felis quis tempus.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Quisque fringilla massa id libero commodo venenatis.</p>
<ol>
<li>here is a bullet line #1</li>
<li>here is a bullet line #2</li>
<li>here is a bullet line #3</li>
<li>here is a bullet line #4</li>
<li>here is a bullet line #5</li>
<li>here is a bullet line #6</li>
</ol>
<h2>here is a sub-headline</h2>
<p>Aenean auctor fringilla dolor. Aenean pulvinar tortor sed lacus auctor cursus.
Sed sit amet imperdiet massa. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos himenaeos. Fusce lectus neque, rhoncus et
malesuada at, blandit at risus. Vivamus rhoncus ante vel erat mollis
consequat.</p>
</div>
<input type=button class=button value="Get selection data">
</body>
</html>
And here is a link which will give you more of a cross browser solution (scroll down to example 2)
http://help.dottoro.com/ljjmnrqr.php
EDIT: For IE you need to use document.body.createTextRange() to get a text range. I am still not sure how you get the equivalent of anchorOffset but the following link might be helpful:
http://bytes.com/topic/javascript/answers/629503-ie-selection-range-set-range-start-click-position-get-char-offset
Here is a cross browser library that will do all you want for you
http://code.google.com/p/rangy/