I've created a layout with Maqetta. Now I want to add the logic to the layout. Therefore I have downloaded the whole workspace from Maqetta and imported the files/libaries into a new Rails project. At first I had some problems, that Rails didn't loaded the dojo,js file, but I've solved that problem.
Now I have another problem. The page won't render. I've commented everything out except one widget (a button) and this works fine. But if I undo this, nothing happens. Unfortunately I also don't get any warnings/errors or anything like that from dojo.
After a little bit trying, I changed the parseOnLoad property and now I get a warning:
Unhandled Error: Tried to register widget with id==appLayout but that id is already registered
Here is the include tag:
<%= javascript_include_tag "lib/dojo/dojo/dojo", :'data-dojo-config' => "'async':true,
'packages':[{'name':'maqetta','location':'../../maqetta'},{'name':'gridx','location':'../gridx'},{'name':'clipart','location':'../../clipart'},{'name':'shapes','location':'../../shapes'},
{'name':'maqettaSamples','location':'../../../samples'},{'name':'zazl','location':'../../zazl'},{'name':'widgets','location':'../../custom'}]" %>
Here is the HTML part (I have simplified it, and now I'm just useing the example from the tutorial):
<body class="claro" data-maq-flow-layout="true" data-maq-ws="collapse" id="myapp" data-maq-appstates="{}">
<input type="button" data-dojo-type="dijit.form.Button" intermediateChanges="false" label="Search" iconClass="dijitNoIcon" onclick="alert('hi');"></input>
<div
id="appLayout" class="demoLayout"
data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design: 'headline'">
<div
class="centerPanel"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'center'">
<div>
<h4>Group 1 Content</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
</div>
<div>
<h4>Group 2 Content</h4>
</div>
<div>
<h4>Group 3 Content</h4>
</div>
</div>
<div
class="edgePanel"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'top'">Header content (top)</div>
<div
id="leftCol" class="edgePanel"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'left', splitter: true">Sidebar content (left)</div>
</div>
And here is the parser:
require(["dojo/parser","dojo/domReady!"], function(parser){
parser.parse();
});
I'm trying for hours now, and I'm still as clueless as at the beginning. Has somebody an idea what I can try?
Unhandled Error: Tried to register widget with id==appLayout but that id is already registered
This error is because you are parsing twice. Once on load and second in the require statement. The second parse will try registering a second widget with the same id, thus the error.
Remove one of the parsing calls and give the border container a specific width and height.
<div id="appLayout" class="demoLayout"
data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design: 'headline'"
style="width: 800px; height: 400px">
See http://livedocs.dojotoolkit.org/dijit/layout/BorderContainer#setting-sizes, the closest parent for which hasLayout is true (e.g. position:relative) must have a width+height set. Also, set width+height for BorderContainer.
Related
I use the templates plugin for my ckeditor and I input a 2 column structure like this:
<div class="row">
<div class="two_col half">
<p>Info Block One. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<div class="two_col half">
<p>Info Block Two. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
My content editors then edit the content of each div and input whatever text they need to.
The issue I'm having is that when my editors highlight the lorem ipsum text and delete it to start their content, the delete action also deletes the actual div itself, resulting in this:
<div class="row">
<div class="two_col half">
<p>Info Block One. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
Is there something I can do to stop that from happening, I would like the div to remain after the user deletes the lorem ipsum placeholder text.
I'm using version 4.5.4
I don't know how to prevent it from the CK Editor perspective, but from Kentico point of view, you can style the template to have two Editable texts next to each other for those two columns. You can either have two web part zones - one editable text per each or two texts in one zone.
I'v created three websites with TYPO3 V7.6.x. All of them use fluid_styled_content extension. As setup for output I use 10.variables.content < styles.content.get and in template {content -> f:format.raw()}. Whit these all the output html code has lots of blank lines. For example:
<!--TYPO3SEARCH_begin-->
<div id="c26">
<h1>Fachstelle Gesundheitsförderung Uri</h1>
</div>
<div id="c14">
<div class="ce-textpic ce-left ce-above">
<div class="ce-bodytext">
<p><span class="lead-text">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. Dolores et ea rebum. Stet clita , no sea takimata.</span></p>
</div>
</div>
</div>
<div class="row link-box"><div class="col-sm-6"><img src="/fileadmin/_processed_/8/7/csm_teaser-1_f496539e13.jpg" width="720" height="375" class="img-responsive" alt="Gesundheitsförderung" ><div class="link-box-title"><h2>Gesundheitsförderung</h2></div></div><div class="col-sm-6"><img src="/fileadmin/_processed_/8/7/csm_teaser-1_f496539e13.jpg" width="720" height="375" class="img-responsive" alt="Cool & Clean" ><div class="link-box-title"><h2>Cool & Clean</h2></div></div><div class="col-sm-6"><img src="/fileadmin/_processed_/8/7/csm_teaser-1_f496539e13.jpg" width="720" height="375" class="img-responsive" alt="Verein" ><div class="link-box-title"><h2>Verein</h2></div></div><div class="col-sm-6 news-latest"><div class="link-box-description"><p>15. November 2016</p><h3>Projekt Ernährung</h3><p class="teaser">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...</p></div><div class="link-box-title"><h2>News</h2></div></div></div>
<div id="c40">
<h2>Weitere Infos</h2>
<div class="ce-textpic ce-left ce-above">
<div class="ce-bodytext">
<p>NewsletterVeranstaltungenKontakt </p>
</div>
</div>
</div>
<!--TYPO3SEARCH_end-->
How can you remove the unneeded blank lines?
Thanks in advance
Daniel
As Dan already noted: use the f:spaceless VH.
Aside of that you could optimize all templates of your installation, but that is a very painful work as you need to work on a lot of templates. on the other side you will make all these templates unreadable as you loose the structure of indention.
A better approach would be to use extensions and external tools to optimize the resulting html. E.g. there is the extension tidy but that also needs the software tidy to be installed and accessible on your server. Then there are other minifier and compressor extensions.
A last (and possibly the easiest) optimization would be to configure your server (apache) to use compression / gzip for delivery. So those whitespace gets compressed to nearly nothing.
Is it possible to create such a design with Bootstrap: the image taking the top left and surrounded by text on wide devices and the image on top of the text on narrow devices? I am not sure how this positioning would be called and couldn't find a similar example.
I can't say too much without seeing your HTML or CSS. But I can provide an example of how this may work. I will assume your image will be large enough to fill a narrow device.
The CSS attribute and the terminology you would be looking for is "float" some documentation can be found here.
The HTML below is an example of an image with some text in it.
<p>
<img src="example.png" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id pulvinar urna. Cras scelerisque finibus aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut nec interdum metus. Donec iaculis, nisl quis dignissim tincidunt, lorem nulla rhoncus turpis, eu fermentum ante orci a libero. Suspendisse varius nisl ut dui tincidunt, et feugiat eros egestas. Sed rhoncus viverra tellus ut pulvinar. Morbi id enim eget mauris bibendum tristique. Duis gravida ligula metus, quis porta massa mattis facilisis.
<p>
Now for some CSS.
/* This will align your image to the left within a p tag */
.image {
float: left;
margin: 10px;
}
/* To accommodate a smaller screen you will need a media query */
#media screen and (max-width: 640px) {
.image {
width: 100%;
margin: 10px auto;
}
}
I have made a quick JSfiddle with an example here. Hopefully I have provided you with enough to help you with your problem.
I use this jquery plugin for "see more" text:
http://keith-wood.name/moreRef.html
I save from tinymce editor html text into mysql database. Then I display html text in a php page, and I use "see more" text jquery plugin for show only 100 words of text.
My problem is that that plugin doesn't retain html formatted text, but it changes html formatted text into simple text, it remove html tag.
How can I retain text with html tag for display formatting text properly and have also "see more" link?
You can do it with pure css and keep the html in place. Here is a JS fiddle (less and more will not be displayed on IE6,7,8 and the content will be expanded)
http://jsfiddle.net/6sj4e/45/
.text {
height: 50px;
overflow: hidden;
height: 100%\9;
}
input.less-more,
input.less-more:checked ~ label.more,
input.less-more:not(:checked) ~ label.less {
display: none;
}
and the html :
<input id="chbox" class="less-more" type="checkbox">
<div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</div>
<label for="chbox" class='more'>more</label>
<label for="chbox" class='less'>less</label>
Given an HTML document in Nokogiri, I want to remove all <p> nodes with no actual text. This includes <p> elements with whitespace and/or <br/> tags. What's the most elegant way to do this?
This is a simpler fix: it removes both the whitespace and the br tags.
given the HTML
"<p> </p><p>Foo<p/><p><br/> <br> </p>"
Solution:
document.css('p').find_all.each do |p|
# Ruby on Rails Solution:
p.remove if p.content.blank?
# Ruby solution, as pointed out by Michael Hartl:
p.remove if p.content.strip.empty?
end
# document => <p>Foo</p>
I would start with a method like this one (feel free to monkeypatch Nokogiri::XML::Node if you want to)
def is_blank?(node)
(node.text? && node.content.strip == '') || (node.element? && node.name == 'br')
end
Then continue with another method that checks that all children are blank:
def all_children_are_blank?(node)
node.children.all?{|child| is_blank?(child) }
# Here you see the convenience of monkeypatching... sometimes.
end
And finally, get the document and
document.css('p').find_all{|p| all_children_are_blank?(p) }.each do |p|
p.remove
end
There's a more elegant way:
require "nokogiri"
doc = Nokogiri::HTML.parse <<-EOHTML
<div>
<p class="empty_p"></p>
<p class="full_p">Lorem ipsum dolor sit amet, consectetur adipisicing 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>
</div>
EOHTML
# Magic happens here...
doc.at_css("p:first-child:empty").remove
puts doc.to_html