I've tried a couple different ways of doing this but I can't seem to get polymer to print the html or the breaks in the lines of the paragraphs (Need lines to break!). Pulling data via json call.
<div layout horizontal left>
<story-text storytext="{{ resp[0].body.und[0].value }}"></story-text>
</div>
OR?
<div layout horizontal left>
<div>{{ resp[0].body.und[0].value }}</div>
</div>
Thanks in advance!
I almost gave up. I searched and searched and found this:
https://github.com/Juicy/juicy-html
Is working!
Related
I asked this question in a Wordpress forum with no response. So trying here in hope of an answer or suggestion.
I'm using the Wordpress Twenty Seventeen theme (here) and the multi-panel homepage. My menu is a series of "custom links" which navigate to anchors in each of the homepage panel sections.
The navigation to the anchors is not consistent. Some land where they are supposed to, and others land after the intended location. When I inspect the page code, the only difference in the panel sections is where 'tabindex' gets set.
The ones that work show tabindex set at ‘panel-content’ level:
<div class="panel-content" id="noted" tabindex="-1">
<div class="wrap">
<div class="entry-content">
<p><a name="noted"></a> </p>
<h2>Noted</h2>
The ones that land incorrectly have tabindex set in the “a” anchor link.
<div class="panel-content" id="video">
<div class="wrap">
<div class="entry-content">
<p><a name="video" tabindex="-1"></a></p>
<h2>A Video is Worth a Thousand Words</h2>`
It seems random from panel section to panel section. I didn't do anything differently when creating the page. I have never dealt with tabindex before.
Any suggestion on how to correct this, so the anchors land where intended?
Thanks in advance, Mike
This issue is resolved. Turned out to be a Wordpress plugin issue.
https://wordpress.org/support/topic/tabindex-for-home-homepage-panels/#post-10781852
The Close Button seems to be a good way for displaying a notice which the user can click away. But its usage remains rather elusive to a newb.
I have placed one on a page:
<div>
<div class="callout" data-closable="slide-out-left">
<button class="close-button" data-close>×</button>
<p>whatever notice text</p>
</div>
But now I am unaware of any way of changing its color the Zurb way, or where to find closing animation options other than this one I use above. I would like the button to be colored e.g. as a Zurb success, and a fade out effect rather than the confusingly fast slide out effect. How do I go about that?
Actually I would also like the button to tightly wrap around the notice text, not take up the whole line width. Is that doable in any Zurb-idiomatic way?
Thanks!
To change the color of close button or other style, you can code the CSS like
.close-button{
color:red;
}
If you are using SASS you can customize the variables.
http://foundation.zurb.com/sites/docs/close-button.html#sass-reference
The animations you can use are:
slide-in-down
slide-in-left
slide-in-up
slide-in-right
slide-out-down
slide-out-left
slide-out-up
slide-out-right
fade-in
fade-out
hinge-in-from-top
hinge-in-from-right
hinge-in-from-bottom
hinge-in-from-left
hinge-in-from-middle-x
hinge-in-from-middle-y
hinge-out-from-top
hinge-out-from-right
hinge-out-from-bottom
hinge-out-from-left
hinge-out-from-middle-x
hinge-out-from-middle-y
scale-in-up
scale-in-down
scale-out-up
scale-out-down
spin-in
spin-out
spin-in-ccw
spin-out-ccw
http://foundation.zurb.com/sites/docs/motion-ui.html
You can add the callout to a column 1 to 12 wide (although 12 wide is what you already have with the callout on its own). Here I have added it to a 2 wide column. By removing the slide-out method it uses the default fade-out.
<div class="row">
<div class="small-2 columns">
<div class="success callout" data-closable>
<button class="close-button" data-close>×</button>
<p>whatever notice text</p>
</div>
</div>
</div>
I am using Masonry - the HTML version
I have a div:
<div id="container" class="js-masonry" data-masonry-options='{ "itemSelector": ".item"}'>
within I have about 10:
<div class="item">
<img src="<?php the_field('image'); ?>" alt="<?php the_title(); ?>">
<p></p>
<a style="text-decoration:underline;" class="link-port" href="<?php the_field('link'); ?>" target="_blank"><?php the_title();?></a>
<p></p>
</div>
The problem is that when the page loads first time (uncached) the first few items show normally, but further down the page they stack on top of each other. They also overlap the footer.
If you either refresh the browser (or rotate the device) then all works fine but this is obviously not ideal for new visitors.
The JS was at the bottom of the page, but I moved to the top and it still did the same.
Has anyone come across this before?
Many thanks.
Aha! imagesLoaded seems to be the answer, full details here: http://masonry.desandro.com/appendix.html#imagesloaded
I have been using display.none, for the hid-whens for example, all the hidden fields were kept in a section and section was hidden from web by using Display.none.
This is working for Internet Explorer till IE 9, but for IE 10 all the hidden fields are shown.
Can anyone help in this matter. Any alternative or approach.
Without seeing the page it sis very difficult to guess.
Try validating the html through one of the many online html validators as something may not be closed or Notes might have given you an unwanted code addition .
Try adding a background color to the css #wrapper to make sure the css is being called.
Take a copy of the form and start removing all other elements one section at a time to see if something else is causing the issue.
Add {meta http-equiv="X-UA-Compatible" content="IE=10;IE=9; IE=8; IE=7; IE=EDGE" /} as the very top meta tag and see if that fixes it. Replace the curly braces obviously.
All the best in finding the issue.
It sounds like just the section element is getting hidden. Without seeing the code I can't tell why that changes between ie 9 and 10 but ie is famous for having varying behavior between versions.
One alternative that comes to mind: You could wrap the section and the fields in a DIV element using pass thru HTML and set that div's style to display:none. That is pretty standard and should work across browsers.
Update: To give you an idea what I'm talking about, check out this jsfiddle.
HTML:
<form>
<div class="wrapper">
<input type="text" name="Field 1" /><br />
<input type="text" name="Field 2" /><br />
<input type="text" name="Field 3" />
</div>
<span>Some text that won't be hidden.</span>
</form>
CSS:
.wrapper {
#display:none;
}
You can remove the # next to the display:none and see the difference, even in IE 10.
You'll need to look closely at the HTML being rendered by Domino and make sure that in fact all the fields you are trying to hide are surrounded by the DIV that is hidden.
I have a site that was built and handed over to me, so I'm not as familiar with ModX as I'd like to be. That said, I've built my own templates, tpls and the like.
However, and existing MIGX using template is giving me fits. It used to display all the items in the list properly - one image, and three text fields. Now, it randomly will stop displaying one item.
When I say random, I don't mean that it switches around when you refresh the page - I mean right now item #4 isn't being displayed (even in source code, nothing appears). But if I were to delete any other item, that #4 might just show up again, and a different item start disappearing.
I'm at a loss here. I see no special characters in the text fields. Even if there were, that wouldn't explain how an item will work then not work then work again based on making changes to other items.
Please let me know what other information I can provide to assist in troubleshooting this.
Below is all the relevant code I can think of.
Template:
<div id="content">
[[!getImageList?
&tvname=`management`
&docid=`[[*id]]`
&tpl=`management_tpl`
&limit=`0`
]]
<div class="clear"></div>
</div><!-- #content -->
management_tpl:
<div class="management_box">
<div class="management_img">
<img src="[[+image:phpthumbof=`w=100&z=1`]]" alt="[[+pagetitle]]" />
</div>
<div class="management_content">
<h2>[[+name]]</h2>
<h3>[[+position]]</h3>
[[+descr]]
Show more
</div>
<div id="[[+name:stripString=` `]]" class="fulldescr">
<img src="[[+image:phpthumbof=`w=100&z=1`]]" alt="[[+pagetitle]]" />
<h2>[[+name]]</h2>
<h3>[[+position]]</h3>
[[+fulldescr]]
</div>
<div class="clear"></div>
</div>
Thanks,
Chris
For anyone who finds this in the future - my MIGX plugin was outdated and had some flaws that caused this. Updating the plugin fixed everything.