...Show More on Accelerated Mobile Pages (AMP) - mobile-website

I am creating an amp for my webpage. It contains lot of description about places. I want to implement ..show more after 4 lines so that user can see other content also in the mobile first fold (Text is dynamic so can be less than 4 lines also. In that case how can i determine that show more will not come) Is this possible with AMP?? Since I cannot use javascript and css solution is not possible for this, please help me in finding alternatives for the same. I have searched a lot about this but no luck so far. Thanks in advance

You can use an amp-accordion for this:
<p>The first four lines...</p>
<amp-accordion disable-session-states>
<section>
<h4>
<span class="show-more">Show more</span>
</h4>
<p>The remaining text... </p>
</section>
</amp-accordion>
Here is a working example.

Related

No <br> by default in tinymce

i've tried many things I've found here on stack, but none seem to help with the
<p> text </p>
<br>
Problem.
What I'm asking is how to switch off by default the <br> making by tinymce.
I know shift-enter does the trick, but I have a user generated site, and having to edit each tinymce input... Well takes too much time.
Thanks.
Try to use
echo str_replace('<br>',' ',$variable_that_echoing);

How to easily set the app main page in Intel XDK?

The App Designer in Intel XDK allows us to easily add and remove pages to our apps. In this case, I use the Intel's App Framework. I haven't tried another frameworks.
The page hierarchy is something like this:
index.html
--- page #p-1
------ sub-page #sp-1-1
------ sub-page #sp-1-2
--- page #p-2
------ sub-page #sp-2-1
While adding and removing pages is easy, it is quite difficult to set the "main page", i.e. first page to be displayed when app starts. If I don't want to delete some of my pages using App Designer, then the only thing I can do is to edit the HTML.
This is the typical form of nested tags:
<div id="p-1" class="upage">
<div id="sp-1-1" class="upage-content hidden"></div>
<div id="sp-1-2" class="upage-content"></div>
</div>
By placing hidden next to upage-content, the sub-page will be inactive. So we don't have to reorder the lines of codes.
But the rule for upage is different. We have to reorder the lines of codes. For example:
<div id="p-2" class="upage">
</div>
<div id="p-1" class="upage">
</div>
This is surely inconvenient if we have many lines. With the editor, perhaps we can collapse the nested tags before moving our codes to avoid mistakes.
Is it really the best way to set the app main page or I just don't know that there are options somewhere in Intel XDK?
The editor is somewhat limited, and is constantly evolving. To my knowledge, this is the only way to set the App's main page. If you find this process clunky, it may be in your best interest to propose an enhancement or a new feature on their product's forums. (They have a pretty active community)
Their support forum is here: https://software.intel.com/en-us/forums/intel-xdk

Objective C Hpple to get commented element information

I'm starting my iPhone programming adventure, with a simple HTML scraping. I'm using the Hpple library to do the job, and I have a question...
Suppose I have the following html to parse...
<div>
<div> A <!-- Comment 1 --></div>
<div> B </div>
<div> C <!-- Comment 2 --></div>
</div>
How can I retrieve the commented parts? They don't show up on the objects... I was checking the docs but there's nothing pointing to that direction.. (also googling "hpple comment" doesn't produce the best results...).
thanks in advance.
Comments are not considered part of the content and are stripped out by pretty much all parsers except humans.
Similarly, you can't ask the parser to tell you how many spaces and newlines are between the first two <div> elements.

Question marks where should be an X

I'm using Zend Framework and Twitter Bootstrap for a website. From twitter bootstrap I'm using things like the alert:
<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
Where an X is supposed to appear, appears a question mark (?). I have my charset as UTF-8.
That is not the only thing that is happening but in many places where I'm supposed to have Spanish characters what appears is a question mark. Does anybody know what's wrong? Thanks!
Dito, you might just put an simple x there instead of the multiply sign. You can also check out if it works with this HTML entity:
×
I've learned that encoding is a very difficult topic. There is the doctype declaration in your document – but there is also the web server (apache?) declaration and even a PHP setting. You can check out your website settings by hitting cmd+I (ctrl+i on a pc/linux) in FireFox.
My Hex editor told me that it is × and not x .
Remove charset from your meta in html and try again. Also, try to replace that with a 'real' x.

How to get Facebook comments count in HTML5 without using a <div>?

The Facebook comments count can be done in three different ways: (without directly using JS)
<fb:comments-count href="http://example.com" />
<iframe src="http://www.facebook.com/plugins/comments.php?href=example.com" />
<div class="fb-comments-count" data-href="http://example.com">0</div>
The issue, however, is that doing something like this messes things up:
<p><div class="fb-comments-count" data-href="http://example.com">0</div> comments</p>
...because a <div> is firstly, not valid inside a <p> tag and secondly, looks wrong (though this could be fixed with CSS).
Basically, my question is: is there a way to do the above without using a <div> (a <span> for example), bearing in mind that I want to use the HTML5 method and (if possible!) want to avoid using javascript?
Clarification: I would like to avoid writing extra JS in the page simply because the MVC view currently looks nice and clean and I would prefer to keep it that way. Obviously, I'm still including the Facebook Connect library.
So, one solution would be to use a DIV instead of a P as the outer element.