In an AMP page menu, we have some sections with out any children. In this case we would like to link to the section header directly. We could not do this. Any help/pointers in this area would be greatly appreciated. For example, in the following code, would like to link to "Nested Section 2.1", clicking on which should take to the target page directly (and not open the section).
<amp-accordion>
<section>
<h4>Section 1</h4>
<p>Bunch of content.</p>
</section>
<section>
<h4>Section 2</h4>
<amp-accordion class="nested-accordion">
<section>
<h4>Nested Section 2.1</h4>
<p>Bunch of content.</p>
</section>
<section>
<h4>Nested Section 2.2</h4>
<p>Bunch of more content.</p>
</section>
</amp-accordion>
</section>
I actually know very little about AMP pages and still trying to learn more about it but based from the AMP's official documentation,amp-accordion's behavior are the following:
An amp-accordion can contain one or more <section>s as its direct children.
Each <section> must contain exactly two direct children.
The first child (of the section) must be one of h1, h2, ..., h6, header, and is the heading of the section.
The second child (of the section) can be any tag allowed in AMP HTML and is the content of the section.
Clicking/tapping on the heading of a section expands/ or collapses the section.
You may want to also check 10 Important Accelerated Mobile Pages (AMP) Components You Should Know for helpful insights.
Hope that helps!
Don't place these sections into an accordion and match their style to the accordion headers, e.g.:
<amp-accordion>
<section>
<h4>Section 1</h4>
<p>Bunch of content.</p>
</section>
<section>
<h4>Section 2</h4>
<div>
<h4>Nested Section 2.1</h4>
<amp-accordion class="nested-accordion">
<section>
<h4>Nested Section 2.2</h4>
<p>Bunch of more content.</p>
</section>
</amp-accordion>
</div>
</section>
<amp-accordion>
<section>
<h4>Section 1</h4>
<p>Bunch of content.</p>
</section>
<section>
<header>
Google
</header>
<p></p>
</section>
<section>
<header>
Google
</header>
<p></p>
</section>
<section>
<h4>Section 2</h4>
<amp-accordion class="nested-accordion">
<section>
<h4>Nested Section 2.1</h4>
<p>Bunch of content.</p>
</section>
<section>
<h4>Nested Section 2.2</h4>
<p>Bunch of more content.</p>
</section>
</amp-accordion>
</section>
Related
I'm working on a web app with Bootstrap. In the mobile version it looks the way I want: the header on the top, below is a girl image, and below is the description of the application.
In desktop version I want to have header on top left, right under that description, and a girl image at the right side. Unfortunately, the girl image makes a big gap between the header and the description.
How can I get rid of that gap?
To recap, I want to move the description upper, to have it just under header, in that way.
Part of html, responsible for it:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="container mt-lg-4">
<div class="row">
<p class="col-sm-6 mt-lg-5 mt-sm-1 h1"><strong>Find perfect product for your skin</strong></p>
<img src="https://via.placeholder.com/200" class="col-sm-6" />
<div id="description" class="col-sm-6">
PrimerAI will examine your skin and find the perfect product for your skin's needs.
</div>
</div>
</div>
You have two competing layouts here, involving not just ordering but containing structure. The simplest solution might be to repeat the image and show it as needed.
Also, use semantic elements in your page structure, like headings and paragraphs, to wrap text. It's important for accessibility and it's just good practice. The strong element is intended to add emphasis, but headings already have it so I've used CSS to get bold text.
.text-bold {
font-weight: bold;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="container mt-lg-4">
<div class="row">
<div class="col-sm-6">
<h1 class="mt-lg-5 mt-sm-1 text-bold">Find perfect product for your skin</h1>
<img src="https://via.placeholder.com/500x600" class="img-fluid d-sm-none" />
<p id="description">
PrimerAI will examine your skin and find the perfect product for your skin's needs.
</p>
</div>
<div class="col-sm-6">
<img src="https://via.placeholder.com/500x600" class="img-fluid d-none d-sm-block" />
</div>
</div>
</div>
you can try that, I just add d-flex align-items-center to center verticaly the title with the image
<div class="container bg-success">
<div class="row">
<div class="col-md-6 d-flex align-items-center">
<h1>Find perfect product for your skin</h1>
</div>
<div class="col-md-6">
<img src="https://picsum.photos/id/1082/1000/1000?blur=8" class="img-fluid" />
</div>
<div>
PrimerAI will examine your skin and find the perfect product for your skin's needs.
</div>
</div>
</div>
I end up with a lot of code like:
<section layout:fragment="content" th:remove="tag">
<p>content section</p>
</section>
and
<section th:switch="${session['SOME_KEY'" th:remove="tag">
<section th:case="${'BadCredentialsException'}" th:remove="tag">
Invalid username/password
</section>
<section th:case="${'UsernameNotFoundException'}" th:remove="tag">
Invalid username/password
</section>
<section th:case="${'DisabledException'}" th:remove="tag">
Account is blocked, contact your admin
</section>
<section th:case="*" th:remove="tag">
Something went wrong
</section>
</section>
Note the th:remove="tag" to not display the in this case section tags as I don't neem them.
Is this the proper way to do this?
Since Thymeleaf 2.1 there's a sythetic th:block tag available. It's container attribute that is removed after execution (see documentation).
So you end up with code like this :
<th:block layout:fragment="content">
<p>content section</p>
</th:block>
I would remove the space between the header and the beginning of the collapsible, I would appreciate if you can help
<div data-role="page">
<div data-role="header">
<h1>Test</h1>
</div>
<div data-role="collapsible-set" data-corners="false">
<div data-role="collapsible">
<h3>Title</h3>
<p>Content</p>
</div>
<div data-role="collapsible">
<h3>Title 2</h3>
<p>Content 2</p>
</div>
</div>
</div>
[Here is a link with a picture. I would remove the space between the header and the beginning of the collapsible][1]
[1]: http://afines.com/foro/space.jpg
"There's a 15px padding .... on the content div"
This appears to have been answered here to some extent. Also, when inspecting the .ui-collapsible-set element using Chrome's Developers tools option I found that there is provision for margin which is set at .5em.
In order to completely remove the space between a header and a collapsible-set the margin requires adjusting using the <style> tag:
.ui-collapsible-set {
margin: 0 0;
}
Please help,
jquery mobile multipage wont work when a page is called from another page. It only displays the buttons but doesnt navigate to its internal pages when clicked. It works fine when the page is access directly.
<!-- Page 1-->
<div data-role="page" id="description" data-title="Description">
<div data-role="header" data-position="fixed" data-theme="d">
<!-- header 1-->`enter code here`
</div>
</div>
<div data-role="content">
<!--- content 1-->
</div>
<div data-role="footer" data-position="fixed" data-theme="d">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li>Description</li>
<li>Physicians</li>
</ul>
</div>
</div>
</div>
<!-- Page 2-->
<div id="Physicians" data-role="page" data-title="Physicians">
<div data-role="header" data-position="fixed" data-theme="d">
<!-- header 2 -->
</div>
<div data-role="content">
<!-- content 2 -->
</div>
<div data-role="footer" data-position="fixed" data-theme="d">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li>Description</li>
<li>Physicians</li>
</ul>
</div>
</div>
</div>
Try adding to the anchor the attribute rel="external".
Example:
Description
try giving <div data-role="page" first for your second page
When you call this page from another page, it ONLY loads the div[data-role="page"] of that page, not the other div in this multi-page file!
Actually to be precise, when you link to a page from another page, ONLY the code inside the div you are targeting is pulled in via AJAX, even if you had JS in the <head> that won't get loaded either.
Try linking to this page with an external link and you'll find it works fine.
What would be the best way to do the list as in the image. When I tried doing as in the code text gets squashed into the image.
<div data-role="page" id="wrapper">
<div data-role="content">
<div class="stacked-list">
<img src="images/icon_s1.jpg" alt="Online Subscription" class="ui-li-thumb"/>
<div class="para">
<h3 class="ui-li-heading">Online Subscription</h3>
<p class="ui-li-desc">Online access to complete company profiles plus tools & analysis</p>
</p>
</div>
</div>
</div>
</div> <!-- /page -->
Image of End Result http://move.clanteam.com/images/stacked-list_08.jpg
Try list items with thumbnails?
Docs:
http://jquerymobile.com/demos/1.0a4.1/#docs/lists/lists-thumbnails.html
http://jquerymobile.com/demos/1.0a4.1/docs/lists/lists-readonly.html