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
Related
Using Framework7, I created a toolbar. It worked great for the iOS theme. However, when I tested it on the material theme, it was on the top. I found some Framework7 documentation that pointed me to the "toolbar-bottom" class. However, the page-content acted as if the toolbar was still on the top, and the padding-top property was incorrect. I would not like to hard code overrides on the Framework7 css.
Here is my structure:
<div class="page navbar-fixed toolbar-fixed">
<div class="navbar">...</div>
<div class="page-content">...</div>
<div class="toolbar toolbar-bottom">...</div>
</div>
TL;DR read the docs you dumb OP
See this documentation page. In order for the CSS to work correctly, the toolbar must be before the page-content. Your format should look like this:
<div class="page navbar-fixed toolbar-fixed">
<div class="navbar">...</div>
<div class="toolbar toolbar-bottom">...</div>
<div class="page-content">...</div>
</div>
I would like to change the call to action button on the landing page of my website to a social icons element. How do I edit the HTML code to do this? I am using the "Paris - Business" theme. Thanks.
There is some documentation on how to do this, if you search the web. For example, my own site has a basic example of what to look for Landing Page Button Removal.
In that case, you could replace the code that makes the button with your own code.
That being said, there's some new features you can use that would make the content editable. Weebly just introduced "Sections". Sections allows you to have different sections on a page, and with that you can also drag and drop into the Header area. (See Screenshot)
*BUT, before you go ahead and do this, I should note that Weebly plans on making these changes to the newer themes, in the near future. When Paris would be done, or if it will be done, is anybody's guess.
Depending on the design of your Theme, this might be slightly different, so please keep that in mind.
Basically, for the Paris Theme, what was:
<div class="banner-wrap wsite-background">
<div class="container">
<div class="banner">
<h2>{headline:text global="false"}</h2>
<p>{headline-paragraph:text global="false"}</p>
<div class="button-wrap">{action:button global="false"}</div>
<span id="contentArrow"><span></span></span>
</div>
</div>
</div>
Would become:
<div class="banner-wrap wsite-background">
<div class="container">
{{#header}}
<div class="banner">
{content}
<span id="contentArrow"><span></span></span>
</div>
{{/header}}
</div>
</div>
*If you are customizing a Theme, I might also recommend making a custom page type, specifically with these changes.
If you want to use Sections, for the content area of the page it would look something like:
<div class="main-wrap">
{{#sections}}
<div class="container">{content}</div>
{{/sections}}
</div>
**Note: There isn't any documentation yet, and I have not tested this, so wsite-background may not be needed... but don't take my word for it.
I'm using Ratchet to build a prototype for a mobile app.
I have a
<nav class="bar bar-tab bar-footer">
...
</nav>
element in page A and page B.
When using data-transition from page A to page B (using push.js), the element disappears.
Another element
<header class="bar bar-nav">
...
</header>
is displaying in both page A and B.
Any idea?
Did you have
<nav class="bar bar-tab bar-footer">
...
</nav>
in
<div class="content">
block?
Try use this structure:
<header class="bar bar-nav">
...
</header>
<div class="content">
...
</div>
<nav class="bar bar-tab">
...
</nav>
Same issue, If I refresh page B, the menu will appear again.
Had a similar issues with ratchet v2.0.2.
My case: two pages A and B. When transitioning from A to B the footer would not display. A refresh on B would display the footer. Page A did not have a bar-footer, page B did.
Reading through the docs I've found the statement that bars are updated based on their presence in the original page.
So the workaround: make sure that all pages have the bar blocks when the transition is made with push.js
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.
Using the following code snippet, the splitter is displayed fine on the first tab that appears after transition to the current page, however the splitter doesn't show up properly in the subsequent tabs.
<div dojoType="dijit.layout.TabContainer" class="fitToHeight fitToWidth" tabStrip="true">
<div dojoType="dijit.layout.ContentPane" class="fitToHeight fitToWidth" title="Tab_1">
<a4j:include
viewId="/view/syllabus/syllabusManagement.xhtml"
id="container_syllabus">
</a4j:include>
</div>
<div dojoType="dijit.layout.ContentPane" class="fitToHeight fitToWidth" title="Tab_2">
<a4j:include
viewId="/view/student/studentManagement.xhtml"
id="container_student">
</a4j:include>
</div>
Here's is the snippet of employeeManagement.xhtml/syllabusManagement.xhtml
<div dojoType="dijit.layout.BorderContainer" design="sidebar"
liveSplitters="true" class="fitToHeight fitToWidth">
<div class="leftPanel" dojoType="dijit.layout.ContentPane"
minSize="5%" splitter="true" region="leading">
Source Code Goes Here
</div>
<div class="targetPanel" dojoType="dijit.layout.ContentPane"
minSize="400" region="center">
Target Code Goes Here
</div>
</div>
When the page loads, defaults to syllabusManagement.xhtml, the splitter functions as needed, but when i switch the tab to employeeManagement.xhtml, the splitters goes for a toss, gives real unpredictable behaviour.
My observation is that the splitter is rendered well when the tab is loaded on transition.
How do one fix this splitter rendering issue ?
Thanks.
i suggest using dojox.layout.ContentPane and setting the href attribute instead of loading all tabs at first.
your layout is needs to be 100% 100% for the tabcontainer and bordercontainer to calculate sizing properly.
See what happens here, if a width/height is not set here